/* frontend/css/components.css (INICIO - PARTE 1/2) */

/* --- ESTILOS BASE COMPONENTES (Revisados) --- */

/* Inputs y Formularios (Ya definidos en style.css, aquí ajustes o específicos) */
.form-group { margin-bottom: var(--space-5); } /* Un poco más de espacio */


.password-group { position: relative; }
.toggle-password { position: absolute; right: 0; top: 0; background: none; border: none; padding: 0 var(--space-4); cursor: pointer; color: var(--color-text-tertiary); display: flex; align-items: center; }
.toggle-password:hover { color: var(--color-text-primary); }
/* Input Error Highlight */
.input-error { border-color: var(--color-error) !important; box-shadow: 0 0 0 1px var(--color-error) !important; }
.form-group .error-message { margin-top: var(--space-2); } /* Espacio para mensaje error bajo input */

/* Botones (Estilos base en style.css, aquí variaciones si es necesario) */

.btn-info { background-color: var(--color-info); color: var(--color-text-on-accent); } /* Azul info */
.btn-info:hover:not(:disabled) { filter: brightness(1.1); }

.btn-block { width: 100%; }
.btn-sm { padding: var(--space-2) var(--space-3); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.icon-btn { background: none; border: none; color: var(--color-text-primary); font-size: 1.3rem; cursor: pointer; padding: var(--space-2); border-radius: 50%; display: inline-flex; justify-content: center; align-items: center; width: 40px; height: 40px; line-height: 1; flex-shrink: 0; transition: background-color 0.2s ease; }
.icon-btn:hover:not(:disabled) { background-color: var(--color-bg-element); }
.icon-btn:disabled { color: var(--color-text-disabled); cursor: not-allowed; }

/* Modales (Estilos base ya en style.css) */


/* Listas Comunes */
.list-container ul { list-style: none; padding: 0; margin: 0; }
/* --- LÍNEA CORREGIDA --- */
.list-container li { border-bottom: var(--border-width) solid var(--color-border-divider); padding: 10px 15px; position: relative; background-color: transparent; transition: background-color var(--transition-duration-fast) ease-in-out; }
/* --- FIN LÍNEA CORREGIDA --- */
.list-container li:last-child { border-bottom: none; }
.list-container li:hover { background-color: var(--color-bg-surface-hover); }
.list-empty-message { padding: var(--space-8) var(--space-6); text-align: center; color: var(--color-text-secondary); font-style: italic; font-size: var(--font-size-base); }
.list-container .error-message { padding: var(--space-6); text-align: center; color: var(--color-error); }

/* Avatares */
.avatar-xs {
    width: 40px; /* Tamaño solicitado para el muro */
    height: 40px;
    border-radius: 50%;
    object-fit: cover; /* CRUCIAL: Evita que la imagen se estire */
    background-color: var(--color-bg-element);
    flex-shrink: 0;
}
.profile-avatar-img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: var(--space-4); border: 3px solid var(--color-border-subtle); background-color: var(--color-bg-element); }


/* --- ESTILOS ESPECÍFICOS DE COMPONENTES --- */

/* Modal Ver Postulantes */
.application-item { display: flex; flex-direction: column; gap: var(--space-2); }
.application-item-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.applicant-info { display: flex; align-items: center; gap: var(--space-2); flex-grow: 1; min-width: 0; }
.applicant-info h4 { margin: 0; font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-text-primary); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.applicant-rating { font-size: var(--font-size-xs); color: var(--color-text-secondary); white-space: nowrap; flex-shrink: 0; }
.applicant-rating i { color: var(--color-warning); font-size: 0.9em; }
.application-item p { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-snug); word-wrap: break-word; }
.application-item strong { color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
.application-item a { font-weight: normal; }
.app-item-message { background-color: var(--color-bg-element); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); margin-top: var(--space-2); font-style: italic; color: var(--color-text-tertiary); font-size: var(--font-size-sm); border-left: 3px solid var(--color-border-subtle); }
.application-actions { margin-top: var(--space-3); display: flex; gap: var(--space-2); flex-wrap: wrap; }
.application-actions .btn-sm { width: auto; flex-shrink: 0; }
.application-actions .btn-sm i { margin-right: var(--space-1); font-size: 0.9em; }
.view-picture-btn i { margin-right: var(--space-1); } /* Espacio icono ver foto */


/* Modal Mis Trabajos */
.my-job-item { display: flex; flex-direction: column; gap: var(--space-2); }
.my-job-item-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.my-job-item-header h4 { margin: 0; font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-text-primary); line-height: 1.2; flex-grow: 1; }
.my-job-item-header > span { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); flex-shrink: 0; }
.my-job-item p { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: var(--line-height-snug); }
.my-job-item strong { color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
.my-job-actions { margin-top: var(--space-3); display: flex; gap: var(--space-2); flex-wrap: wrap; }
.my-job-actions .btn-sm { width: auto; flex-shrink: 0; }
.my-job-actions .btn-sm i { margin-right: var(--space-1); font-size: 0.9em; }

/* Modal Perfil */
.profile-avatar-section { display: flex; flex-direction: column; align-items: center; margin-bottom: var(--space-6); padding-bottom: var(--space-6); border-bottom: var(--border-width) solid var(--color-border-divider); }
.change-avatar-btn { margin-top: var(--space-4); }
.profile-rating-summary { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-6); padding-bottom: var(--space-6); border-bottom: var(--border-width) solid var(--color-border-divider); font-size: var(--font-size-base); color: var(--color-text-secondary); }
.profile-rating-summary .rating-value { font-weight: var(--font-weight-semibold); color: var(--color-warning); display: inline-flex; align-items: center; gap: var(--space-1); }
.profile-rating-summary .rating-value i { font-size: 1.1em; }
.profile-rating-summary .rating-count { font-size: var(--font-size-sm); }
.role-specific-fields { display: none; flex-direction: column; gap: var(--space-5); margin-top: var(--space-5); padding-top: var(--space-5); border-top: var(--border-width) solid var(--color-border-divider); }
/* Subida Fotos Adicionales Perfil */
.profile-picture-upload { margin-top: var(--space-6); padding-top: var(--space-6); border-top: var(--border-width) solid var(--color-border-divider); }
.profile-picture-upload > label { display: block; font-weight: var(--font-weight-medium); color: var(--color-text-secondary); margin-bottom: var(--space-2); }
.picture-preview-container { display: flex; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-2); margin-bottom: var(--space-2); }
.picture-preview-img { display: block; border-radius: var(--radius-md); object-fit: cover; background-color: var(--color-bg-element); border: var(--border-width) solid var(--color-border-subtle); flex-shrink: 0; }
.picture-preview-img.dni-preview { width: 150px; height: 95px; }
.picture-preview-img.body-preview { width: 100px; height: 120px; }
.change-picture-btn { flex-shrink: 0; }
.profile-picture-upload .form-text { font-size: var(--font-size-xs); color: var(--color-text-tertiary); margin-top: var(--space-1); display: block; }
/* Checkbox */
.checkbox-group { display: flex; align-items: center; gap: var(--space-2); }
.checkbox-group input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; flex-shrink: 0; border: var(--border-width-focus) solid var(--color-border-interactive); border-radius: var(--radius-sm); position: relative; cursor: pointer; transition: background-color var(--transition-duration-fast), border-color var(--transition-duration-fast); }
.checkbox-group input[type="checkbox"]:checked { background-color: var(--color-accent-primary); border-color: var(--color-accent-primary); }
.checkbox-group input[type="checkbox"]::before { content: ''; display: block; width: 12px; height: 12px; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2010%22%20fill%3D%22%23ffffff%22%3E%3Cpath%20d%3D%22M4%2010L0%206l1.5-1.5L4%207l6.5-6.5L12%202z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: center center; background-size: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); transition: transform 0.1s ease-in-out; }
.checkbox-group input[type="checkbox"]:checked::before { transform: translate(-50%, -50%) scale(1); }
.checkbox-group label.checkbox-label { margin-bottom: 0; font-weight: normal; cursor: pointer; color: var(--color-text-secondary); font-size: var(--font-size-sm);}
.checkbox-group:has(input:checked) label.checkbox-label { color: var(--color-text-primary); }

/* Modal Perfil Público */
/* Reutiliza muchos estilos de Modal Perfil, pero sin form */
.public-profile-info-item { margin-bottom: var(--space-4); }
.public-profile-info-label { font-weight: var(--font-weight-regular); color: var(--color-text-secondary); display: block; margin-bottom: var(--space-1); font-size: var(--font-size-sm); }
.public-profile-info-value { color: var(--color-text-primary); font-size: var(--font-size-base); word-wrap: break-word; line-height: var(--line-height-snug); }
.public-profile-info-value.role-display { font-style: italic; color: var(--color-text-secondary); }
.public-profile-info-value a { text-decoration: none; }

/* Reseñas (Perfil Propio y Público) */
.profile-reviews-section { margin-top: var(--space-8); padding: 0 var(--space-6) var(--space-6); }
.profile-reviews-section h3 { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); margin-bottom: var(--space-4); text-align: left; border-top: 1px solid var(--color-border-divider); padding-top: var(--space-6); }
.review-item { border-bottom: 1px solid var(--color-border-divider); padding: var(--space-4) 0; display: flex; flex-direction: column; gap: var(--space-2); }
.review-item:last-child { border-bottom: none; }
.review-header { display: flex; justify-content: space-between; align-items: center; }
.rater-info { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.review-stars { font-size: 0.9rem; color: var(--color-warning); white-space: nowrap; }
.review-stars .fa-star.empty { color: var(--color-border-subtle); }
.review-comment { font-size: var(--font-size-sm); color: var(--color-text-secondary); font-style: italic; line-height: var(--line-height-snug); margin-left: calc(24px + var(--space-2)); } /* Indentar */
.review-comment:empty { display: none; }
.review-job-link { font-size: var(--font-size-xs); color: var(--color-text-tertiary); margin-left: calc(24px + var(--space-2)); }
.review-timestamp { font-size: var(--font-size-xs); color: var(--color-text-tertiary); opacity: 0.8; text-align: right; }


/* Modal Notificaciones */
#notifications-modal .modal-content.list-container { padding: 0; }
.notification-item { display: flex; align-items: center; gap: var(--space-3); }
.notification-item.unread { background-color: rgba(var(--color-accent-primary-rgb, 0, 119, 255), 0.1); }
.notification-item.unread .notification-text p { font-weight: var(--font-weight-medium); color: var(--color-text-primary); }
.notification-content { display: flex; align-items: center; gap: var(--space-3); flex-grow: 1; text-decoration: none; color: inherit; }
.notification-icon { flex-shrink: 0; font-size: 1.3rem; width: 30px; text-align: center; color: var(--color-text-secondary); }
.notification-item.unread .notification-icon { color: var(--color-accent-primary); }
.notification-text { flex-grow: 1; }
.notification-text p { margin: 0 0 var(--space-1) 0; font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-snug); }
.notification-text .sender-name { font-style: italic; opacity: 0.9; }
.notification-time { font-size: var(--font-size-xs); color: var(--color-text-tertiary); opacity: 0.8; }
.mark-read-btn {
    background: var(--color-accent-primary);
    border: none;
    color: #ffffff00;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    padding: 0;
    margin-left: var(--space-3);
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}
.mark-read-btn:hover { opacity: 0.8; }
.notification-item:not(.unread) .mark-read-btn { display: none; }
#mark-all-read-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Modal Calificar */
.rated-user-info { text-align: center; margin-bottom: var(--space-6); padding-bottom: var(--space-4); border-bottom: var(--border-width) solid var(--color-border-divider); }
.rated-user-info p { margin: 0 0 var(--space-1) 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.user-summary { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); margin-bottom: var(--space-2); }
.rated-user-info strong { color: var(--color-text-primary); font-weight: normal; }
.rating-stars-group { text-align: center; margin-bottom: var(--space-4); }
.rating-stars-group > label { display: block; font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); margin-bottom: var(--space-3); color: var(--color-text-secondary); }
.rating-stars { display: inline-flex; flex-direction: row-reverse; justify-content: center; }
.rating-stars input[type="radio"] { display: none; }
.rating-stars label { font-size: 2.2rem; color: var(--color-border-interactive); cursor: pointer; padding: 0 var(--space-2); transition: color 0.2s ease, transform 0.1s ease; }
.rating-stars label:hover { transform: scale(1.1); }
.rating-stars:not(:hover) input[type="radio"]:checked ~ label, .rating-stars:hover input[type="radio"]:hover ~ label { color: var(--color-warning); }
.rating-stars input[type="radio"]:hover ~ label { color: var(--color-warning); opacity: 0.7; }
#rating-score-error { margin-top: var(--space-2); text-align: center; display: none; }

/* --- FIN PARTE 1/2 --- */
/* frontend/css/components.css (CONTINUACIÓN - PARTE 2/2) */

/* ================================================ */
/* === ESTILOS PORTAFOLIO Y VISOR DETALLADO === */
/* ================================================ */

/* --- Sección Portafolio (Perfil Worker) --- */
.profile-portfolio-section { margin-top: var(--space-6); padding-top: var(--space-6); border-top: var(--border-width) solid var(--color-border-divider); }
.profile-portfolio-section > label { display: block; font-weight: var(--font-weight-medium); color: var(--color-text-secondary); margin-bottom: var(--space-2); }
.profile-portfolio-section .form-text { font-size: var(--font-size-xs); color: var(--color-text-tertiary); margin-bottom: var(--space-4); }

/* Galería en Perfil Propio y Público (Layout Bloques v3) */

.portfolio-gallery.skeleton-loading .portfolio-block { /* Estilo para skeleton */
     display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
}
.portfolio-gallery.skeleton-loading .portfolio-item.skeleton-loader {
    background-color: var(--color-bg-element);
    background-image: linear-gradient(90deg, var(--color-bg-element), var(--color-bg-element-hover), var(--color-bg-element));
    background-size: 300px 100%; background-repeat: no-repeat;
    animation: loading-skeleton-tempconnect 1.5s ease-in-out infinite;
    aspect-ratio: 1 / 1;
    margin-bottom: 0; border-radius: var(--radius-md);
}

.portfolio-block {
    padding: 1px 0px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(90px, auto);
    gap: 2px;
    width: 100%;
}

.portfolio-item, .public-portfolio-item { /* Estilo base para items en ambas galerías */
    position: relative;
    background-color: var(--color-bg-element);
    overflow: hidden;
    cursor: pointer;
    transition: filter 0.2s ease;
    grid-column: span 1; /* Default */
    grid-row: span 1;    /* Default */
    aspect-ratio: 1 / 1; /* Cuadrado por defecto */
    border-radius: var(--radius-md); /* Redondeado sutil */
}
.portfolio-item:hover, .public-portfolio-item:hover {
    filter: brightness(1.15); /* Aclarar un poco más al hover */
}
.portfolio-item img, .public-portfolio-item img {
    display: block; width: 100%; height: 100%; object-fit: cover;
}

/* Clases Layout (sin cambios) */
.portfolio-item--tall { grid-row: span 2; aspect-ratio: 1 / 2; }
.portfolio-block--layout-1 .portfolio-item:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 3; aspect-ratio: 1 / 2 !important; }
.portfolio-block--layout-1 .portfolio-item:nth-child(n+2):nth-child(-n+3) { grid-row: 1 / 2; aspect-ratio: 1 / 1 !important; }
.portfolio-block--layout-1 .portfolio-item:nth-child(n+4):nth-child(-n+5) { grid-row: 2 / 3; aspect-ratio: 1 / 1 !important; }
.portfolio-block--layout-1 .portfolio-item:nth-child(2), .portfolio-block--layout-1 .portfolio-item:nth-child(4) { grid-column: 2 / 3; }
.portfolio-block--layout-1 .portfolio-item:nth-child(3), .portfolio-block--layout-1 .portfolio-item:nth-child(5) { grid-column: 3 / 4; }
.portfolio-block--layout-2 .portfolio-item:nth-child(5) { grid-column: 3 / 4; grid-row: 1 / 3; aspect-ratio: 1 / 2 !important; }
.portfolio-block--layout-2 .portfolio-item:nth-child(n+1):nth-child(-n+2) { grid-row: 1 / 2; aspect-ratio: 1 / 1 !important; }
.portfolio-block--layout-2 .portfolio-item:nth-child(n+3):nth-child(-n+4) { grid-row: 2 / 3; aspect-ratio: 1 / 1 !important; }
.portfolio-block--layout-2 .portfolio-item:nth-child(1), .portfolio-block--layout-2 .portfolio-item:nth-child(3) { grid-column: 1 / 2; }
.portfolio-block--layout-2 .portfolio-item:nth-child(2), .portfolio-block--layout-2 .portfolio-item:nth-child(4) { grid-column: 2 / 3; }

/* Botón Eliminar (Solo perfil propio) */
.portfolio-delete-btn {
    position: absolute; top: var(--space-2); right: var(--space-2);
    background-color: rgba(0, 0, 0, 0.7); color: var(--color-text-on-accent);
    border: none; border-radius: 50%; width: 28px; height: 28px;
    font-size: 16px; line-height: 28px; text-align: center;
    cursor: pointer; opacity: 0; transition: opacity 0.2s ease; padding: 0; z-index: 2;
}
.portfolio-item:hover .portfolio-delete-btn { opacity: 1; }
.portfolio-delete-btn:hover { background-color: var(--color-error); }

/* Contenedor Like (Perfil propio y público) */
.portfolio-like-container {
    position: absolute; bottom: var(--space-2); left: var(--space-2);
    display: flex; align-items: center; gap: 4px;
    background-color: rgba(0, 0, 0, 0.7); padding: 4px 8px; /* Un poco más grande */
    border-radius: var(--radius-full); color: var(--color-text-on-accent);
    font-size: 12px; /* Tamaño texto */
    opacity: 0; transition: opacity 0.2s ease; pointer-events: none; z-index: 1;
}
/* Mostrar siempre en perfil público? O solo hover? Por ahora, hover */
.portfolio-item:hover .portfolio-like-container,
.public-portfolio-item:hover .portfolio-like-container {
    opacity: 1;
}
/* Botón Like */
.portfolio-like-btn {
    background: none; border: none; padding: 0; margin: 0; color: inherit;
    cursor: pointer; font-size: 14px; /* Tamaño corazón */
    line-height: 1; pointer-events: auto; transition: color 0.2s ease, transform 0.1s ease;
}
.portfolio-like-btn:hover:not(:disabled) { transform: scale(1.1); }
.portfolio-like-btn i.fas.fa-heart { color: var(--color-error); }
.portfolio-like-btn i.far.fa-heart { color: var(--color-text-on-accent); }
.portfolio-like-btn:hover:not(:disabled) i.far.fa-heart { color: rgba(239, 68, 68, 0.7); }
.portfolio-like-btn:disabled { cursor: not-allowed; opacity: 0.7; }
.portfolio-like-count { font-weight: var(--font-weight-semibold); min-width: 10px; text-align: left; }

/* Controles Añadir (Perfil propio) */
.portfolio-add-controls { display: flex; gap: var(--space-3); align-items: center; }

/* Modal Base (Asegurar flex y padding) */
.modal.portfolio-viewer {
    background-color: rgba(0, 0, 0, 0.9); /* Fondo oscuro semi-transparente */
    border-radius: 0;
    box-shadow: none;
    /* REMOVER padding: 0; */ /* Quitar padding del modal base */
    padding: var(--space-4); /* Añadir padding alrededor del wrapper */
    padding-top: calc(var(--space-1) + env(safe-area-inset-top)); /* Ajustar safe area */
    padding-bottom: calc(var(--space-1) + env(safe-area-inset-bottom));
    padding-left: calc(var(--space-0) + env(safe-area-inset-left));
    padding-right: calc(var(--space-0) + env(safe-area-inset-right));
    max-height: 100vh;
    height: 100%;
    width: 100%;
    top: 0;
    
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 110;
    /* display: flex; ya estaba */
    display: flex; /* Asegurar flex para centrar */
    align-items: center; /* Centrar verticalmente el wrapper */
    justify-content: center; /* Centrar horizontalmente el wrapper */
    overflow: hidden;
}
.modal.portfolio-viewer.active {
    opacity: 1;
}
/* Botón Cerrar */
.portfolio-viewer-close {
    /* position: fixed; <<< CAMBIAR A absolute */
    position: absolute;
    top: var(--space-6); /* Ajustar posición */
    right: var(--space-3); /* Ajustar posición */
    background-color: rgba(41, 41, 41, 0.7);
    color: var(--color-text-primary);
    border-radius: 50%;
    width: 36px; /* Tamaño ajustado */
    height: 36px;
    font-size: 1.4rem; /* Tamaño icono ajustado */
    z-index: 112; /* Encima del contenido del wrapper */
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}
.portfolio-viewer-close:hover {
    background-color: rgba(70, 70, 70, 0.8);
}
/* Wrapper Contenido */
.portfolio-viewer-content-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%; /* Ocupar ancho disponible HASTA max-width */
    height: 100%; /* Ocupar alto disponible HASTA max-height */
    max-width: 1100px; /* <<< NUEVO: Ancho máximo para desktop (ajustable) */
    max-height: 100vh; /* <<< NUEVO: Altura máxima (ajustable) */
    background-color: var(--color-bg-surface); /* Fondo oscuro para el contenedor */
    position: relative; /* <<< NUEVO: Para posicionar botón 'X' relativo a este wrapper */
   /* border-radius: var(--radius-lg);*/ /* <<< NUEVO: Redondear el wrapper */
    overflow: hidden; /* <<< NUEVO: Asegurar que contenido interno no desborde el radio */
    box-shadow: var(--shadow-xl); /* Sombra opcional */
}

/* Contenedor Imagen */
.portfolio-viewer-image-container {
    flex: 1; /* Ocupa espacio vertical disponible */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000 ;/* Fondo más oscuro para imagen */
    overflow: hidden;
    position: relative;
    width: 100%;
}
#portfolio-viewer-img {
    display: block; max-width: 100%; max-height: 100%;
    width: auto; height: auto; object-fit: contain;
    opacity: 0; transition: opacity 0.3s ease;
}
#portfolio-viewer-img[src]:not([src=""]) { opacity: 1; }

/* Panel Detalles */
.portfolio-viewer-details-panel {
    width: 100%;
    height: auto;
    max-height: 55%; /* Ajustar porcentaje si es necesario */
    flex-shrink: 0;
    background-color: var(--color-bg-surface);
    color: var(--color-text-primary);
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--color-border-divider);
    overflow: hidden; /* Panel general no scrollea */
}

/* Header Panel */
.panel-header {
    padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-divider); flex-shrink: 0;
}
.panel-header .owner-info { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; }
.panel-header .panel-owner-avatar { width: 32px; height: 32px; } /* Ajustar tamaño */
.panel-header .panel-owner-name { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); font-size: var(--font-size-base); }

/* Cuerpo Panel */
.panel-body {
    padding: var(--space-4); padding-bottom: var(--space-2); flex-shrink: 0;
    display: block; /* Siempre visible */
    border-bottom: 1px solid var(--color-border-divider); /* Separar de comentarios */
}
.panel-body .caption-text {
    margin-bottom: var(--space-3); font-size: var(--font-size-sm);
    line-height: var(--line-height-snug); white-space: pre-wrap; word-wrap: break-word;
    max-height: 4.5em; overflow-y: auto; color: var(--color-text-secondary);
}
.panel-body .photo-actions { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-2); }
.panel-body .photo-actions .icon-btn { padding: 0; width: auto; height: auto; font-size: 1.5rem; color: var(--color-text-secondary); }
.panel-body .photo-actions .icon-btn:hover:not(:disabled) { background: none; color: var(--color-text-primary); }
.panel-body .photo-actions .like-btn i.fas { color: var(--color-error); } /* Corazón lleno rojo */
.panel-body .likes-count { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.panel-body .photo-timestamp { font-size: var(--font-size-xs); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-top: var(--space-2); }

/* Sección Comentarios */
.panel-comments-section {
    flex-grow: 1; overflow-y: auto; padding: var(--space-4);
}
.panel-comments-section::-webkit-scrollbar { width: 6px; } .panel-comments-section::-webkit-scrollbar-track { background: transparent; } .panel-comments-section::-webkit-scrollbar-thumb { background-color: var(--color-border-subtle); border-radius: 3px; }
.comments-list { list-style: none; padding: 0; margin: 0; }
.comments-list .list-empty-message { padding: var(--space-4) 0; }

/* Item Comentario */
.comment-item { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); font-size: var(--font-size-sm); line-height: var(--line-height-snug); }
.comment-item .avatar-xs { flex-shrink: 0; width: 32px; height: 32px; }
.comment-content { flex-grow: 1; }
.comment-header { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-1); }
.comment-user { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); font-size: var(--font-size-sm);}
.comment-text { word-wrap: break-word; white-space: pre-wrap; color: var(--color-text-secondary);}
.comment-footer { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-2); }
.comment-time { color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
.comment-like-btn { background: none; border: none; padding: 0; margin: 0; font-size: 0.9rem; color: var(--color-text-secondary); cursor: pointer; display: flex; align-items: center; gap: 4px; }
.comment-like-btn:hover { color: var(--color-text-primary); }
.comment-like-btn i.fas { color: var(--color-error); }
.comment-like-count { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); }
.comment-delete-btn { background: none; border: none; padding: 0; margin: 0; font-size: 0.9rem; color: var(--color-text-tertiary); cursor: pointer; margin-left: auto; }
.comment-delete-btn:hover { color: var(--color-error); }

/* Footer Panel (Input Comentario) */
.panel-footer {
    border-top: 1px solid var(--color-border-divider); padding: var(--space-3) var(--space-4); flex-shrink: 0;
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
}
#add-comment-form { display: flex; align-items: flex-end; gap: var(--space-2); }
#add-comment-input {
    flex-grow: 1; border: none; outline: none; background-color: var(--color-bg-element);
    color: var(--color-text-primary); font-size: var(--font-size-sm);
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-full);
    resize: none; line-height: var(--line-height-tight); max-height: 80px; overflow-y: auto;
}
#add-comment-input::placeholder { color: var(--color-text-placeholder); }
#add-comment-input:focus { box-shadow: 0 0 0 1px var(--color-accent-primary); }
.btn-send-comment {
    background: none; border: none; color: var(--color-accent-primary); font-size: 1.4rem;
    cursor: pointer; padding: var(--space-2); flex-shrink: 0; width: 40px; height: 40px;
    border-radius: 50%; transition: background-color var(--transition-duration-fast);
}
.btn-send-comment:hover:not(:disabled) { background-color: var(--color-bg-element); }
.btn-send-comment:disabled { color: var(--color-text-disabled); cursor: not-allowed; }

/* Overlay Actions Imagen (Ocultar por defecto con nuevo layout) */
.portfolio-viewer-image-overlay-actions { display: none; }


/* --- FIN PARTE 2/2 --- */


/* ================================================================ */
/* === ESTILOS LOGIN MULTI-PASO (Añadir al final) === */
/* ================================================================ */

/* Contenedor del Formulario Login */
#login-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md); /* Espacio por defecto entre grupos */
}

/* Pasos del Login */
.login-step {
    display: none; /* Ocultos por defecto */
    flex-direction: column;
    gap: var(--space-md); /* Espacio entre elementos dentro del paso */
    width: 100%;
    /* Añadir animación si se desea */
    /* animation: fadeIn 0.3s ease-in-out; */
}
.login-step.active {
    display: flex; /* Mostrar paso activo */
}
/* Keyframes para animación (opcional) */
/* @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } */

/* Elementos específicos dentro de los pasos */

/* Paso 1: Ocultar alternativas si no es el paso 1 */
/* Usaremos JS para mostrar/ocultar, pero CSS puede ser un fallback */
#login-step-1-contact ~ #login-alternatives {
     display: flex; /* Mostrar por defecto */
     flex-direction: column;
     gap: var(--space-md);
     margin-top: var(--space-lg); /* Espacio después del botón Continuar */
}
#login-step-2-otp.active ~ #login-alternatives,
#login-step-3-password.active ~ #login-alternatives {
    display: none; /* Ocultar alternativas en pasos 2 y 3 */
}

/* Paso 2 y 3: Títulos y Subtítulos */
.login-step .step-subtitle {
    font-size: var(--font-size-base); /* Ajustar tamaño si es necesario */
    color: var(--text-secondary);
    /* Si fondo claro: color: var(--uber-medium-grey); */
    text-align: center;
    margin-bottom: var(--space-sm); /* Menos margen inferior */
    line-height: 1.4;
}
.login-step .step-subtitle strong {
    color: var(--text-primary); /* O negro si fondo claro */
    font-weight: var(--font-weight-medium);
}
/* Botón Editar/Volver (inline link) */
.login-step .btn-link {
    background: none; border: none; padding: 0;
    font-size: inherit; /* Usar tamaño del texto circundante */
    color: var(--text-primary); /* O azul: var(--accent-primary); */
    /* Si fondo claro: color: var(--uber-black); */
    text-decoration: underline; cursor: pointer;
    margin-left: var(--space-xs); vertical-align: baseline;
}


/* Paso 2: Inputs Código OTP */
/* Reutilizar estilos de registro si son idénticos */
#login-step-2-otp .code-input-container {
    display: flex; justify-content: center; gap: 0.41rem;
}

#login-step-2-otp .code-input::-webkit-outer-spin-button,
#login-step-2-otp .code-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#login-step-2-otp .code-input:focus { outline: none; border-color: var(--uber-black); box-shadow: 0 0 0 1px var(--uber-black); }
#login-step-2-otp .code-input.input-error { border-color: var(--accent-error) !important; }

/* Paso 2 y 3: Mensaje de error específico del paso */
#login-step-2-otp .step-error-message,
#login-step-3-password .step-error-message {
    color: var(--accent-error);
    font-size: var(--font-size-sm);
    text-align: center;
    margin-top: calc(-1 * var(--space-sm)); /* Margen negativo para acercar al input */
    margin-bottom: var(--space-sm); /* Espacio antes del botón */
    min-height: 1.2em; /* Evitar saltos de layout */
    display: none; /* Oculto por defecto */
}

/* Paso 2: Botón Reenviar OTP */
.login-resend-otp-btn {
    display: block; /* Ocupar línea */
    margin: var(--space-sm) auto 0 auto; /* Margen superior y centrado */
    font-size: var(--font-size-sm);
    /* Hereda otros estilos de .btn-link */
}

/* Paso 3: Input Contraseña */
/* Reutilizar estilos de registro si son idénticos */
#login-step-3-password .password-group { position: relative; }
#login-step-3-password .password-group input {
    background-color: var(--uber-very-light-grey); color: var(--uber-black);
    border: 1px solid var(--uber-very-light-grey); border-radius: var(--border-radius-md);
    padding: var(--space-md); padding-right: 50px; font-size: var(--font-size-base); width: 100%;
}
#login-step-3-password .password-group input:focus { outline: none; border-color: var(--uber-black); box-shadow: 0 0 0 1px var(--uber-black); }
#login-step-3-password .toggle-password { position: absolute; right: 20px; top: 0; bottom: 0; background: none; border: none; padding: 0 var(--space-md); cursor: pointer; color: var(--uber-medium-grey); display: flex; align-items: center; }
#login-step-3-password .toggle-password:hover { color: var(--uber-black); }
#login-step-3-password .password-group input.input-error { border-color: var(--accent-error) !important; }

/* Paso 3: Botón Volver */
.login-step-back-btn {
    display: block; /* Ocupar línea */
    margin: var(--space-sm) auto 0 auto; /* Margen superior y centrado */
     font-size: var(--font-size-sm);
     /* Hereda otros estilos de .btn-link */
}

/* Botones de navegación entre pasos de Login */
.login-step-btn {
    /* Reutilizar estilos .btn y .btn-primary */
    font-weight: var(--font-weight-medium);
    background-color: var(--uber-black); color: var(--uber-white);
    border-radius: var(--border-radius-pill); padding: var(--space-sm) var(--space-lg);
    font-size: var(--font-size-base); min-width: 120px;
}
.login-step-btn:hover:not(:disabled) { background-color: var(--uber-near-black); }
.login-step-btn:disabled { background-color: var(--uber-very-light-grey) !important; color: var(--uber-medium-grey) !important; }

/* Botón final de submit (puede usar el mismo estilo o uno diferente) */
#login-step-3-password button[type="submit"] {
    /* Mismos estilos que .login-step-btn por consistencia */
    font-weight: var(--font-weight-medium);
    background-color: var(--uber-black); color: var(--uber-white);
    border-radius: var(--border-radius-pill); padding: var(--space-sm) var(--space-lg);
    font-size: var(--font-size-base); min-width: 120px;
}
#login-step-3-password button[type="submit"]:hover:not(:disabled) { background-color: var(--uber-near-black); }
#login-step-3-password button[type="submit"]:disabled { background-color: var(--uber-very-light-grey) !important; color: var(--uber-medium-grey) !important; }




/* 1. Sobrescribir animación para el modal de perfil */
/* 1. MODAL PANTALLA COMPLETA REAL */
#profile-modal {
    height: 100% !important;        /* Ocupar todo el alto */
    max-height: 100% !important;    /* Sin límites */
    border-radius: 0 !important;    /* Sin bordes redondeados arriba (estilo app nativa) */
    top: 0 !important;              /* Pegado al techo */
    bottom: 0 !important;
}

#profile-modal.active {
    /* Estado activo: solo cambiar opacidad y visibilidad */
    opacity: 1;
    visibility: visible;
    transition-delay: 0s; /* Iniciar transición inmediatamente */
    /* El transform ya está en translateY(0%) */
}

/* 2. Forzar altura completa del layout interno */
#profile-modal .profile-layout {
    display: flex;
    flex-direction: column;
    height: 100%; /* Ocupar toda la altura del modal */
    width: 100%;
    overflow: hidden; /* Controlar scroll interno */
}

/* 3. Asegurar que el área de contenido crezca */


/* 4. Asegurar que el contenido de la pestaña activa pueda ocupar espacio */
/*    (Puede que no sea necesario si .profile-content-area ya tiene flex-grow) */
/*
#profile-modal .profile-tab-content.active {
    display: block;
    height: 100%; /* Intentar que ocupe altura del contenedor
    overflow-y: auto; /* Permitir scroll interno si su contenido es largo
}
*/

/* 5. Ajustar padding inferior del área de contenido para el BottomNav */
/*    (Esto ya debería estar en la regla de .screen, pero lo reforzamos aquí) */

/* 6. Ajuste opcional para el header fijo si se solapa con safe area */
/* #profile-modal .profile-header-fixed { */
    /* padding-top: calc(var(--space-3) + env(safe-area-inset-top)); */ /* Ajustado en HTML/CSS anterior */
/* } */

/* --- FIN FIX PERFIL --- */

/* ===================================================== */
/* === ESTILOS NUEVO PERFIL REFACTORIZADO (v10.3.3 - Header Scroll + Sticky Tabs) === */
/* ===================================================== */

/* Layout General del Modal */
#profile-modal .profile-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* <<< CAMBIO: El scroll AHORA es responsabilidad de ESTE contenedor >>> */
    overflow-y: auto !important; /* Forzar scroll aquí */
    overflow-x: hidden;
    /*background-color: var(--color-bg-base);*/
    background-color: #fff;
    position: relative; /* Necesario para algunos posicionamientos internos si se usan */
}

/* Header Fijo (Ahora NO es sticky, será parte del scroll) */
.profile-header-fixed {
    flex-shrink: 0; /* No encoger */
    background-color: var(--color-bg-surface);
    z-index: 5; /* Un z-index por si acaso, pero ya no es sticky */
    /* <<< CAMBIO: Quitar position: sticky y top: 0 >>> */
    /* position: sticky; */
    /* top: 0; */
    box-shadow: none; /* Quitar sombra si no es sticky */
}

/* Header Superior (Flecha, Título | Iconos, Opciones) */
.profile-header-top {
    display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-4); padding-top: calc(var(--space-2) + env(safe-area-inset-top)); min-height: 56px; gap: var(--space-3); position: relative;
}
.header-left-group { display: flex; align-items: center; gap: var(--space-3); flex-grow: 1; min-width: 0; }
.profile-header-top .profile-back-btn { flex-shrink: 0; background: none; border: none; color: var(--color-text-secondary); font-size: 1.5rem; cursor: pointer; padding: var(--space-2); width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: background-color var(--transition-duration-fast), color var(--transition-duration-fast); }
.profile-header-top .profile-back-btn:hover { background-color: var(--color-bg-element); color: var(--color-text-primary); }
.profile-header-top .profile-header-title {
    text-align: left;
    margin: 0;
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #282828;
    max-width: calc(100% - 40px);
}
.header-right-group { display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; }
.header-status-icons { display: flex; align-items: center; gap: var(--space-2); }
.header-status-icons .header-icon { background: none; border: none; color: var(--color-text-tertiary); font-size: 1.2rem; padding: var(--space-1); border-radius: 50%; cursor: default; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; transition: color 0.2s ease, background-color 0.2s ease; }
.header-status-icons .header-icon.active { color: var(--color-accent-primary); }
.header-status-icons .header-icon#profile-verify-identity-icon.clickable { cursor: pointer; }
.header-status-icons .header-icon#profile-verify-identity-icon.clickable:hover { background-color: var(--color-bg-element); color: var(--color-text-primary); }
.header-icon .alert-badge { position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; background-color: var(--color-error); color: white; border-radius: 50%; font-size: 8px; font-weight: bold; line-height: 12px; text-align: center; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-bg-surface); }
.profile-header-top .profile-options-trigger { flex-shrink: 0; background: none; border: none; color: var(--color-text-secondary); font-size: 1.3rem; cursor: pointer; padding: var(--space-2); width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: background-color var(--transition-duration-fast), color var(--transition-duration-fast); }
.profile-header-top .profile-options-trigger:hover { background-color: var(--color-bg-element); color: var(--color-text-primary); }
.profile-options-dropdown { position: absolute; top: calc(100% - var(--space-2)); right: var(--space-3); background-color: var(--color-bg-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); border: 1px solid var(--color-border-divider); z-index: 100; overflow: hidden; min-width: 200px; display: none; }
/* ... estilos botones menú ... */
.profile-options-dropdown button { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-3) var(--space-4); background: none; border: none; color: var(--color-text-primary); font-size: var(--font-size-sm); text-align: left; cursor: pointer; border-bottom: 1px solid var(--color-border-divider); }
.profile-options-dropdown button:last-child { border-bottom: none; }
.profile-options-dropdown button:hover { background-color: var(--color-bg-surface-hover); }
.profile-options-dropdown button i { color: var(--color-text-secondary); width: 1.2em; text-align: center; }
.profile-options-dropdown button[data-action="logout"], .profile-options-dropdown button[data-action="deactivate"] { color: var(--color-error); }
.profile-options-dropdown button[data-action="logout"] i, .profile-options-dropdown button[data-action="deactivate"] i { color: var(--color-error); }


/* Header Principal (Avatar | Rol+Rating / Stats) */
.profile-header-main {
    display: flex;
    align-items: normal;
    gap: 16px;
    padding: var(--space-3) var(--space-4);
    /*border-top: 1px solid var(--color-border-divider);*/
}
.profile-header-main .profile-avatar-section { flex-shrink: 0; position: relative; }
.profile-header-main .profile-avatar-img {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-border-subtle);
    background-color: var(--color-bg-element);
}
.profile-header-main .change-avatar-btn { 
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
    padding: 0;
    line-height: 1;
    background-color: #006eff;
    border: 2px solid #ffffff;
    color: #ffffff;
    border-radius: 50%;
    cursor: pointer;
	       }
.profile-main-info-stats {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* gap: var(--space-2); */
}
.profile-header-info {
    display: flex; align-items: baseline; gap: var(--space-2); padding-bottom: 0;
}
.profile-header-info .profile-role-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
    margin: 0;
}
.profile-header-info .profile-rating-line { margin: 0; padding: 0; border: none; display: inline-flex; align-items: baseline; gap: var(--space-1); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.profile-rating-line .fa-star { color: var(--color-warning); font-size: 0.9em; }
.profile-rating-line .rating-value-number { font-weight: var(--font-weight-medium); color: var(--color-text-primary); }
.profile-rating-line .rating-count-text { font-size: var(--font-size-xs); color: var(--color-text-tertiary); }
.profile-rating-line.no-rating .fa-star { color: var(--color-text-tertiary); }
.profile-header-stats {
    display: flex;
    justify-content: space-between;
    gap: 10%;
    width: 100%;
    /*padding-top: var(--space-2);*/
}




/* Barra de Tabs (AHORA es STICKY) */
.profile-tabs {
    display: flex;
    /* position: sticky; <<< ELIMINAR O COMENTAR ESTA LÍNEA */
    /* top: 0;         <<< ELIMINAR O COMENTAR ESTA LÍNEA */
    /* z-index: 5;     <<< ELIMINAR O COMENTAR SI NO ES NECESARIO */
    /* border-top: 1px solid var(--color-border-divider); */ /* Quizás quitar borde top */
   /* border-bottom: 1px solid var(--color-border-divider); *//* Mantener separador inferior */
    flex-shrink: 0;
    background-color: var(--color-bg-surface); /* Mantener fondo */
    margin-top: 0; /* Asegurar sin margen superior extra */
    /* Mantener estilos hijos .profile-tab-btn sin cambios */
}
/* ... estilos .profile-tab-btn sin cambios ... */
.profile-tab-btn { flex: 1 1 0px; padding: var(--space-3) 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-tertiary); background: none; border: none; border-bottom: 3px solid transparent; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.profile-tab-btn i { font-size: 1.2rem; margin-bottom: 2px; }
.profile-tab-btn:hover { color: var(--color-text-secondary); }
.profile-tab-btn.active { color: var(--color-text-primary); border-bottom-color: var(--color-accent-primary); }


/* --- ÁREA DE CONTENIDO PRINCIPAL (YA NO HACE SCROLL) --- */
.profile-content-area {
	padding-bottom: 3.8rem;
    flex-grow: 1; /* Ocupar espacio restante */
    /* <<< CAMBIO: Quitar overflow-y >>> */
    /* overflow-y: auto !important; */
    overflow: visible; /* Permitir que el contenido determine altura */
    /*background-color: var(--color-bg-base);*/
    min-height: auto; /* Resetear min-height */
    position: static; /* Resetear posición */
}

/* Contenido de cada Tab */
.profile-tab-content {
    display: none;
    /* <<< SIN overflow y altura auto >>> */
    height: auto;
}
.profile-tab-content.active {
    display: block;
    animation: profileFadeIn 0.3s ease forwards;
}
@keyframes profileFadeIn { from { opacity: 0; /* transform: translateY(5px); */ } to { opacity: 1; /* transform: translateY(0); */ } } /* Animación más simple */

/* Ajustes Contenido Tabs (SIN CAMBIOS IMPORTANTES) */
#profile-content-portfolio .profile-portfolio-section, #profile-content-photos .profile-photos-section { margin-top: 0; padding-top: 0; border-top: none; }
#profile-content-portfolio .portfolio-add-controls, #profile-content-photos .portfolio-add-controls { padding: var(--space-3) var(--space-4); /* border-bottom: 1px solid var(--color-border-divider);*/ }
#profile-content-portfolio .portfolio-gallery, #profile-content-photos .portfolio-gallery { margin-bottom: 0; min-height: 200px; /* <<< SIN height, max-height ni overflow >>> */ }
/* ... estilos galería/items portafolio ... */
.portfolio-block {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(90px, auto);
    /* gap: 1px 1px; */
    /* padding: 0.5px 0px; */
    width: 100%;
}
.portfolio-item { position: relative; background-color: var(--color-bg-element); overflow: hidden; cursor: pointer; transition: filter 0.2s ease; grid-column: span 1; grid-row: span 1; aspect-ratio: 1 / 1; border-radius: 0px;}
.portfolio-item:hover { filter: brightness(1.15); }
.portfolio-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* ... layout classes, botones delete/share/like ... */
.portfolio-item--tall { grid-row: span 2; aspect-ratio: 1 / 2; }
.portfolio-block--layout-1 .portfolio-item:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 3; aspect-ratio: 1 / 2.016 !important; }
.portfolio-block--layout-1 .portfolio-item:nth-child(n+2):nth-child(-n+3) { grid-row: 1 / 2; aspect-ratio: 1 / 1 !important; }
.portfolio-block--layout-1 .portfolio-item:nth-child(n+4):nth-child(-n+5) { grid-row: 2 / 3; aspect-ratio: 1 / 1 !important; }
.portfolio-block--layout-1 .portfolio-item:nth-child(2), .portfolio-block--layout-1 .portfolio-item:nth-child(4) { grid-column: 2 / 3; }
.portfolio-block--layout-1 .portfolio-item:nth-child(3), .portfolio-block--layout-1 .portfolio-item:nth-child(5) { grid-column: 3 / 4; }
.portfolio-block--layout-2 .portfolio-item:nth-child(5) { grid-column: 3 / 4; grid-row: 1 / 3; aspect-ratio: 1 / 2.016 !important; }
.portfolio-block--layout-2 .portfolio-item:nth-child(n+1):nth-child(-n+2) { grid-row: 1 / 2; aspect-ratio: 1 / 1 !important; }
.portfolio-block--layout-2 .portfolio-item:nth-child(n+3):nth-child(-n+4) { grid-row: 2 / 3; aspect-ratio: 1 / 1 !important; }
.portfolio-block--layout-2 .portfolio-item:nth-child(1), .portfolio-block--layout-2 .portfolio-item:nth-child(3) { grid-column: 1 / 2; }
.portfolio-block--layout-2 .portfolio-item:nth-child(2), .portfolio-block--layout-2 .portfolio-item:nth-child(4) { grid-column: 2 / 3; }
.portfolio-delete-btn { position: absolute; top: var(--space-2); right: var(--space-2); background-color: rgba(0, 0, 0, 0.7); color: var(--color-text-on-accent); border: none; border-radius: 50%; width: 28px; height: 28px; font-size: 16px; line-height: 28px; text-align: center; cursor: pointer; opacity: 0; transition: opacity 0.2s ease; padding: 0; z-index: 2; }
.portfolio-item:hover .portfolio-delete-btn { opacity: 1; }
.portfolio-delete-btn:hover { background-color: var(--color-error); }
.portfolio-share-btn { position: absolute; top: var(--space-2); right: calc(var(--space-2) + 28px + var(--space-2)); background-color: rgba(0, 0, 0, 0.7); color: var(--color-text-on-accent); border: none; border-radius: 50%; width: 28px; height: 28px; font-size: 14px; line-height: 28px; text-align: center; cursor: pointer; opacity: 0; transition: opacity 0.2s ease, background-color 0.2s, color 0.2s; padding: 0; z-index: 2; }
.portfolio-item:hover .portfolio-share-btn { opacity: 1; }
.portfolio-share-btn:hover { background-color: rgba(0, 119, 255, 0.8); }
.portfolio-share-btn.shared { background-color: var(--color-accent-primary); color: var(--color-text-on-accent); }
.portfolio-share-btn.shared i::before { content: "\f00c"; }
.portfolio-like-container { position: absolute; bottom: var(--space-2); left: var(--space-2); display: flex; align-items: center; gap: 4px; background-color: rgba(0, 0, 0, 0.7); padding: 4px 8px; border-radius: var(--radius-full); color: var(--color-text-on-accent); font-size: 12px; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; z-index: 1; }
.portfolio-item:hover .portfolio-like-container { opacity: 1; }
.portfolio-like-btn { background: none; border: none; padding: 0; margin: 0; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; pointer-events: auto; transition: color 0.2s ease, transform 0.1s ease; }
.portfolio-like-btn:hover:not(:disabled) { transform: scale(1.1); }
.portfolio-like-btn i.fas.fa-heart { color: var(--color-error); }
.portfolio-like-btn i.far.fa-heart { color: var(--color-text-on-accent); }
.portfolio-like-btn:hover:not(:disabled) i.far.fa-heart { color: rgba(239, 68, 68, 0.7); }
.portfolio-like-btn:disabled { cursor: not-allowed; opacity: 0.7; }
.portfolio-like-count { font-weight: var(--font-weight-semibold); min-width: 10px; text-align: left; }


#profile-content-reviews .profile-reviews-section { margin-top: 0; padding: var(--space-4) var(--space-4) var(--space-6); }
#profile-content-reviews .list-container { padding: 0; }
/* ... estilos .review-item ... */
.review-item { border-bottom: 1px solid var(--color-border-divider); padding: var(--space-4) 0; display: flex; flex-direction: column; gap: var(--space-2); }
.review-item:last-child { border-bottom: none; }
.review-header { display: flex; justify-content: space-between; align-items: center; }
.rater-info { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; } /* Añadido cursor */
.rater-info img.avatar-xs { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background-color: var(--color-bg-element); margin-right: var(--space-2); vertical-align: middle; border: 1px solid var(--color-border-subtle); flex-shrink: 0; }
.review-stars { font-size: 0.9rem; color: var(--color-warning); white-space: nowrap; }
.review-stars .fa-star.empty { color: var(--color-border-subtle); }
.review-comment { font-size: var(--font-size-sm); color: var(--color-text-secondary); font-style: italic; line-height: var(--line-height-snug); margin-left: calc(24px + var(--space-2) + var(--space-2)); } /* Ajustar indentación */
.review-comment:empty { display: none; }
.review-job-link { font-size: var(--font-size-xs); color: var(--color-text-tertiary); margin-left: calc(24px + var(--space-2) + var(--space-2)); }
.review-job-link a { color: var(--color-accent-primary); text-decoration: none; }
.review-job-link a:hover { text-decoration: underline; }
.review-timestamp { font-size: var(--font-size-xs); color: var(--color-text-tertiary); opacity: 0.8; text-align: right; }


#profile-content-info { padding: var(--space-6); }
#profile-content-info .public-profile-info-item { margin-bottom: var(--space-4); }
#profile-content-info .public-profile-info-label { font-size: var(--font-size-xs); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-1); }
#profile-content-info .public-profile-info-value { font-size: var(--font-size-base); color: var(--color-text-primary); line-height: var(--line-height-snug); word-wrap: break-word; }
#profile-content-info .public-profile-info-value a { text-decoration: underline; color: var(--color-accent-primary); }

/* --- FIN ESTILOS NUEVO PERFIL (v10.3.2) --- */

/*   */
/* ================================================ */
/* === ESTILOS MODALES HISTORIAS DESTACADAS === */
/* ================================================ */

/* Modal Añadir a Destacada */
#add-to-highlight-modal .modal-content {
    padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom)); /* Padding inferior */
}

.new-highlight-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    gap: var(--space-1);
    width: 65px; /* Ancho fijo */
}

.highlight-add-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px dashed var(--color-border-interactive); /* Borde punteado */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    font-size: 1.5rem;
    transition: border-color 0.2s, color 0.2s;
}
.new-highlight-button:hover .highlight-add-icon {
    border-color: var(--color-accent-primary);
    color: var(--color-accent-primary);
}
.new-highlight-button span { /* Texto "Nueva" (opcional) */
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-top: var(--space-1);
}

/* Modal Crear Nueva Destacada */
.new-highlight-preview-container {
    width: 100px;
    height: 100px;
    margin: 0 auto var(--space-4) auto; /* Centrado */
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--color-border-subtle);
    background-color: var(--color-bg-element);
}
.new-highlight-preview-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
#new-highlight-name-input {
    text-align: center;
}
#new-highlight-name-error {
    text-align: center;
    margin-top: var(--space-1);
}
#new-highlight-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}


/* ================================================ */
/* === ESTILOS SECCIÓN DESTACADAS EN PERFIL === */
/* ================================================ */

/* Contenedor de Destacadas */
.highlights-container {
    display: flex; /* Esto las pone en fila */
    align-items: center; /* Alinea verticalmente los círculos */
    gap: 15px; /* Espacio entre ellas */
    overflow-x: auto; /* Scroll horizontal */
    padding: 5px 0 15px 0; /* Un poco de aire abajo */
    
    /* Ocultar barra de scroll fea */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE */
}
.highlights-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Items individuales (Botón Nueva + Historias) */
.profile-highlight-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex-shrink: 0; /* Importante: No dejar que se aplasten */
    width: 70px;
    cursor: pointer;
    text-decoration: none;
    border: none; /* Quitar borde de botón */
    background: none;
    padding: 0;
}

/* Círculo de la imagen */
.highlight-item-circle {
    width: 68px; /* Un pelín más grande */
    height: 68px;
    border-radius: 50%;
    border: 1px solid #dbdbdb; /* Gris suave */
    padding: 3px; /* Espacio blanco interno */
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Sombra muy sutil */
    transition: transform 0.2s;
}
.profile-highlight-item:hover .highlight-item-circle {
    transform: scale(1.05); /* Efecto pop al pasar mouse */
    border-color: #a0a0a0;
}

/* Imagen dentro del círculo */
.highlight-item-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1); /* Borde fino a la imagen */
}

/* Texto debajo */

/* ================================================ */
/* === ESTILOS MODAL EDITAR CAPTION HIGHLIGHT === */
/* ================================================ */

#edit-highlight-story-caption-modal .modal-header:has(.modal-back-btn) h2 {
    /* Ajustar título si hay botón atrás */
    padding-left: 50px;
}



#edit-highlight-story-caption-modal #edit-highlight-story-caption-input {
    /* Hereda estilos de textarea base */
    resize: none; /* Evitar resize manual */
    line-height: var(--line-height-snug);
}
#edit-highlight-story-caption-modal #edit-highlight-story-caption-input::placeholder {
    color: var(--color-text-placeholder);
}

#edit-highlight-story-caption-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
/* Estilos para contenedor de opciones en Modal "Añadir a..." */

/* Estilos para contenedor de opciones en Modal "Añadir a..." */
.highlight-options-container {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE/Edge */
}
.highlight-options-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}
/* Estilo para cada destacada existente en el modal */
.existing-highlight-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1); /* Menos gap que en perfil */
    flex-shrink: 0;
    width: 65px; /* Ancho similar a botón Nueva */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-align: center;
}

.existing-highlight-item .highlight-item-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid var(--color-border-interactive); /* Borde interactivo */
    background-color: var(--color-bg-element);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: border-color 0.2s ease;
}
.existing-highlight-item:hover .highlight-item-circle {
    border-color: var(--color-accent-primary);
}
.existing-highlight-item .highlight-item-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.existing-highlight-item .highlight-item-name {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary); /* Color más tenue por defecto */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    margin-top: var(--space-1);
    transition: color 0.2s ease;
}
.existing-highlight-item:hover .highlight-item-name {
    color: var(--color-text-primary); /* Resaltar nombre al hover */
}
.highlight-item-name {
    font-size: 12px;
    color: #262626;
    margin-top: 4px;
    letter-spacing: 0.2px;
}

.share-on-feed-group .switch-group {
    /* Quitar fondo y borde si se heredan de otros switches */
    background-color: transparent;
    border: none;
    padding: 0;
    margin-bottom: 0; /* Quitar margen inferior del switch en sí */
}
/* Estilo opcional para el textarea */
#blup-share-text {
    /* Hereda estilos de textarea, pero puedes ajustar */
     line-height: var(--line-height-snug);
}


/* ================================================ */
/* === ESTILOS BOTÓN SEGUIR/SIGUIENDO (Perfil) === */
/* ================================================ */


/* Estilo Base Botón (Reutiliza .btn y .btn-sm) */
#public-profile-follow-btn {
    padding: 0.2rem 2rem;
    border-radius: 25px;
    padding-top: 1ren;
    min-width: 100px;
    transition: background-color var(--transition-duration-fast) ease-in-out, color var(--transition-duration-fast) ease-in-out, border-color var(--transition-duration-fast) ease-in-out;
}

/* Estilo "Seguir" (Botón Primario) */
#public-profile-follow-btn[data-action="follow"] {
    background-color: #000000;
    color: var(--color-text-on-accent);
    border-color: #bcbcbc;
}
#public-profile-follow-btn[data-action="follow"]:hover:not(:disabled) {
    /* Hereda hover de .btn-primary */
     filter: brightness(1.1); 
}

/* Estilo "Siguiendo" (Botón Secundario/Gris) */
#public-profile-follow-btn[data-action="unfollow"] {
    /* Hereda .btn-secondary (fondo gris, texto primario, borde) */
    background-color: var(--color-bg-element);
    color: var(--color-text-secondary); /* Gris secundario */
    border: 1px solid var(--color-border-interactive);
}
#public-profile-follow-btn[data-action="unfollow"]:hover:not(:disabled) {
    background-color: var(--color-bg-element-hover);
    color: var(--color-text-primary); /* Texto más oscuro/visible al hover */
    border-color: var(--color-border-interactive);
}

/* Estilo Deshabilitado (Reutiliza :disabled de .btn) */




/* ================================================ */
/* === ESTILOS notifications (Perfil) === */
/* ================================================ */
/* Estilo Notificación Toast (Tipo App Móvil) */
#message-area {
    position: fixed; /* Fijo en la pantalla */
    top: calc(var(--space-3) + env(safe-area-inset-top)); /* Arriba, respetando safe area */
    left: 50%; /* Centrado horizontal inicial */
    transform: translate(-50%, -150%); /* Fuera de pantalla inicialmente */
    z-index: var(--z-toast, 115); /* Encima de casi todo */

    /* Apariencia */
    background-color: var(--color-bg-surface); /* Fondo superficie (oscuro o claro) */
    color: var(--color-text-primary); /* Color texto principal */
    border-radius: var(--radius-lg); /* Bordes redondeados */
    padding: var(--space-3) var(--space-4); /* Padding interno */
    box-shadow: var(--shadow-lg); /* Sombra pronunciada */
    border: 1px solid var(--color-border-subtle); /* Borde muy sutil */
    max-width: calc(100% - var(--space-6)); /* Ancho máximo con márgenes */
    width: auto; /* Ancho ajustado al contenido */
    min-width: 250px; /* Ancho mínimo */
    text-align: left; /* Alinear texto a la izquierda */
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    display: flex; /* Usar flex para icono y texto */
    align-items: center;
    gap: var(--space-3); /* Espacio icono-texto */

    /* Transición */
    transition: transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1), opacity 0.4s ease-out;
    opacity: 0;
    pointer-events: none; /* No interferir con clics debajo */
}
#message-area.show {
    opacity: 1;
    transform: translate(-50%, 0); /* Baja a su posición */
    pointer-events: auto; /* Permitir interaccion si es necesario */
}

/* Estilos específicos por tipo (para iconos y colores) */
#message-area::before { /* Pseudo-elemento para el icono */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.1em;
    width: 1.2em; /* Ancho fijo para alinear */
    text-align: center;
    flex-shrink: 0; /* No encoger icono */
}

#message-area.info::before {
    content: "\f05a"; /* fas fa-info-circle */
    color: var(--color-info);
}
#message-area.success::before {
    content: "\f058"; /* fas fa-check-circle */
    color: var(--color-success);
}
#message-area.warning::before {
    content: "\f071"; /* fas fa-exclamation-triangle */
    color: var(--color-warning);
}
#message-area.error::before {
    content: "\f071"; /* fas fa-exclamation-triangle (o fa-times-circle) */
    color: var(--color-error);
}
/* Estilo notificación nueva (campana) */
#message-area.notification::before { /* Añadir una clase 'notification' si se quiere icono campana */
     content: "\f0f3"; /* fas fa-bell */
     color: var(--color-accent-primary);
}
/* Estilo para menciones que aún no son enlaces reales */
.post-item-content .mention-placeholder {
    color: var(--color-accent-primary); /* Mismo color que hashtags */
    font-weight: var(--font-weight-medium);
    /* Sin text-decoration ni cursor pointer por ahora */
}
/* Botón de Audio en lista de postulantes */
.btn-audio-play {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--color-border-interactive);
    background-color: var(--color-bg-surface);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-audio-play:hover {
    background-color: var(--color-accent-primary);
    color: white;
    border-color: var(--color-accent-primary);
}

.btn-audio-play.disabled {
    opacity: 0.3;
    cursor: default;
    background-color: var(--color-bg-element);
    border-color: transparent;
}
.btn-audio-play.disabled:hover {
    background-color: var(--color-bg-element); /* Sin efecto hover */
    color: var(--color-text-primary);
}

/* Ajuste para que la lista de actividad no quede tapada por el Bottom Nav */
#activity-list-container {
    /* Altura nav (60px) + Espacio extra (20px) + Safe Area móvil */
    padding-bottom: calc(var(--bottom-nav-height) + 20px + env(safe-area-inset-bottom)) !important;
}

/* ========================================================= */
/* === REDISEÑO PANEL DETALLES (Sinergia y Modernidad) === */
/* ========================================================= */

/* 1. EL CONTENEDOR PRINCIPAL */
.portfolio-viewer-details-panel {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    /* Sombra sutil hacia arriba para separarlo del video si es necesario */
    box-shadow: 0 -5px 20px rgba(0,0,0,0.05);
    border-top-left-radius: 20px; /* Redondear esquinas superiores */
    border-top-right-radius: 20px;
    overflow: hidden;
}

/* 2. HEADER DEL PANEL (Usuario) */
.panel-header {
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0; /* Línea muy sutil */
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    z-index: 10;
}

.panel-header .owner-info {
    gap: 12px;
}

.panel-header .panel-owner-avatar {
    width: 38px; /* Un poco más grande */
    height: 38px;
    border: 1px solid #eee;
    padding: 2px; /* Efecto de borde interno */
}

.panel-header .panel-owner-name {
    font-size: 0.95rem;
    color: #262626; /* Negro suave (Instagram black) */
    font-weight: 700;
}

/* 3. CUERPO (Caption y Acciones principales) */
.panel-body {
    padding: 16px 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

/* Iconos de acción (Corazón/Comentario grandes) */
.panel-body .photo-actions {
    margin-bottom: 10px;
    gap: 16px;
}

.panel-body .photo-actions .icon-btn {
    font-size: 1.6rem;
    color: #262626;
    transition: transform 0.1s ease, color 0.2s;
}

.panel-body .photo-actions .icon-btn:active {
    transform: scale(0.9); /* Efecto de pulsación */
}

/* Contador de Likes */
.panel-body .likes-count {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: #262626;
    margin-bottom: 6px;
}

/* El texto del caption */
.panel-body .caption-text {
    font-size: 0.9rem;
    color: #444;
    line-height: 1.5;
    margin-bottom: 8px;
}

/* Fecha */
.panel-body .photo-timestamp {
    font-size: 0.7rem;
    color: #8e8e8e; /* Gris clásico de timestamp */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* 4. LISTA DE COMENTARIOS (El área scrollable) */
.panel-comments-section {
    padding: 10px 20px;
    background-color: #fff; /* Fondo blanco puro */
}

/* Item Individual de Comentario */
.comment-item {
    align-items: flex-start; /* Alinear avatar arriba */
    margin-bottom: 16px; /* Más espacio entre comentarios */
    gap: 12px;
}

/* ========================================================= */
/* === CORRECCIÓN FOOTER COMENTARIOS (Alineación Perfecta) === */
/* ========================================================= */

/* 1. El contenedor de la fila de acciones */
.comment-footer {
    display: flex;
    align-items: center; /* Alineación vertical central exacta */
    gap: 16px; /* Espacio uniforme entre cada elemento (Tiempo - Like - Responder - Basura) */
    margin-top: 4px; /* Separación sutil del texto del comentario */
    padding-bottom: 2px; /* Espacio para descenders de letras */
}

/* 2. Estilo base para TODOS los elementos del footer (Tiempo y Botones) */
.comment-time,
.comment-action-btn {
    font-size: 12px !important; /* Texto pequeño y elegante (0.75rem) */
    color: #8e8e8e !important; /* Gris suave (estilo Instagram) */
    font-weight: 600; /* Un poco de peso para legibilidad */
    line-height: 1; /* Evitar alturas de línea extrañas */
    text-decoration: none;
}

/* 3. Resetear estilos de botones para que parezcan texto/iconos limpios */
.comment-action-btn {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease;
}

/* Hover general */
.comment-action-btn:hover {
    color: #404040 !important; /* Oscurecer al pasar el mouse */
}

/* 4. Ajustes Específicos por Botón */

/* Botón Like (Corazón) */
.comment-like-btn {
    gap: 4px; /* Espacio entre el corazón y el número (si hay) */
}
.comment-like-btn i {
    font-size: 13px; /* Icono ligeramente más grande que el texto */
    vertical-align: middle;
}
/* Estado Likeado (Rojo) */
.comment-like-btn[aria-pressed="true"] i {
    color: #ed4956 !important; /* Rojo Instagram */
}

/* Botón Responder */
.comment-reply-trigger-btn {
    /* No requiere ajustes extra, hereda lo general */
}

/* Botón Eliminar (Basura) */
.comment-delete-btn {
    margin-left: auto; /* (OPCIONAL) Esto empujaría la basura a la derecha del todo. Si no lo quieres, bórralo. */
    opacity: 0.5; /* Más discreto por defecto */
}
.comment-delete-btn:hover {
    opacity: 1;
    color: #dc3545 !important; /* Rojo error al pasar el mouse */
}

/* 5. Ajuste para la línea de "Ver respuestas" */
.comment-replies-summary {
    font-size: 12px;
    font-weight: 600;
    color: #8e8e8e;
    margin-top: 10px;
    margin-bottom: 5px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.comment-replies-summary::before {
    content: '';
    display: inline-block;
    width: 24px; /* Largo de la línea decorativa */
    height: 1px;
    background-color: #dbdbdb;
    margin-right: 12px;
    vertical-align: middle;
}
/* 5. FOOTER (Input de escribir) */
.panel-footer {
    padding: 12px 16px;
    border-top: 1px solid #f0f0f0;
    background-color: #fff;
    /* Sombra invertida para separarlo visualmente del scroll */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.02); 
}

#add-comment-form {
    background-color: #f0f2f5; /* Gris burbuja */
    border-radius: 25px; /* Forma de píldora */
    padding: 4px 8px 4px 16px; /* Padding asimétrico */
    align-items: center;
    border: 1px solid transparent;
    transition: border-color 0.2s, background-color 0.2s;
}

#add-comment-form:focus-within {
    background-color: #fff;
    border-color: #dbdbdb;
}

#add-comment-input {
    background: transparent;
    padding: 8px 0;
    font-size: 0.95rem;
    max-height: 80px;
    color: #000;
}

#add-comment-input::placeholder {
    color: #8e8e8e;
}

/* Botón de Enviar (Avión) */
.btn-send-comment {
    color: var(--color-accent-primary); /* Azul de tu app */
    font-size: 1.1rem;
    padding: 8px;
    border-radius: 50%;
    transition: transform 0.2s;
    background: transparent !important; /* Quitar fondo hover gris */
}

.btn-send-comment:hover:not(:disabled) {
    transform: scale(1.1);
    color: var(--color-accent-primary-hover);
}

.btn-send-comment:disabled {
    color: #c7dafc; /* Azul muy clarito */
    cursor: default;
}

/* ================================================================ */
/* === REDISEÑO TOTAL COMENTARIOS (Fusión Apple/IG/Uber) vFinal === */
/* ================================================================ */

/* 1. CONTENEDOR DE LA LISTA (Limpieza) */
.panel-comments-section {
    padding: 0 !important; /* Quitar padding lateral para que los items toquen bordes si quieren */
    background: #fff !important;
}

.comments-list {
    padding: 10px 16px !important; /* Padding interno real */
}

/* 2. ITEM DE COMENTARIO (Espaciado y Layout) */
.comment-item {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 20px !important; /* Más aire entre comentarios */
    gap: 12px !important;
    border: none !important; /* Asegurar sin bordes */
    padding: 0 !important;
}

/* 3. AVATAR (Redondo y Perfecto) */
.comment-item .avatar-xs {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 1px solid rgba(0,0,0,0.05) !important; /* Borde sutilísimo */
    margin-top: 2px !important;
}

/* 4. CONTENIDO (Nombre + Texto en bloque unificado) */
.comment-content {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

/* El bloque de texto principal */
.comment-header {
    display: block !important; /* Romper flex previo para que el texto fluya natural */
    margin-bottom: 4px !important;
    line-height: 1.4 !important;
}

/* Nombre de Usuario (Estilo IG: Negrita, Negro) */
.comment-user {
    font-size: 14px !important; /* Tamaño legible */
    font-weight: 600 !important; /* Semibold Apple */
    color: #262626 !important; /* Negro Instagram */
    margin-right: 6px !important;
    text-decoration: none !important;
    float: left; /* Truco para que el texto fluya al lado */
}

/* Texto del Comentario (Estilo IG: Normal, Negro) */
.comment-text {
    font-size: 14px !important;
    color: #262626 !important;
    font-weight: 400 !important;
    display: inline !important; /* Seguir en la misma línea */
    word-break: break-word !important;
}

/* 5. FOOTER DE ACCIONES (El problema de la sinergia) */
.comment-footer {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important; /* Espacio uniforme IG style */
    margin-top: 4px !important;
}

/* Estilo Base para TODO en el footer (Tiempo y Botones) */
.comment-time,
.comment-action-btn {
    font-size: 12px !important; /* Texto pequeño */
    color: #8e8e8e !important; /* Gris IG */
    font-weight: 500 !important; /* Peso medio */
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Hover sutil */
.comment-action-btn:hover {
    color: #555 !important;
}

/* BOTÓN LIKE (Corazón) */
.comment-like-btn {
    gap: 4px !important; /* Espacio número */
}
/* El icono del corazón */
.comment-like-btn i {
    font-size: 12px !important; /* Tamaño igual al texto */
}
/* Estado Likeado (Rojo IG) */
.comment-like-btn[aria-pressed="true"] i {
    color: #ed4956 !important;
    font-weight: 900 !important; /* Relleno */
}
/* Número de likes */
.comment-like-count {
    font-weight: 600 !important;
}

/* BOTÓN ELIMINAR (Basura) */
.comment-delete-btn {
    opacity: 0.6 !important;
    transition: opacity 0.2s !important;
}
.comment-delete-btn:hover {
    opacity: 1 !important;
    color: #dc3545 !important; /* Rojo error */
}

/* 6. VER RESPUESTAS (La línea elegante) */
.comment-replies-summary {
    display: flex !important;
    align-items: center !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #8e8e8e !important;
    margin-top: 12px !important;
    margin-left: 0 !important; /* Resetear */
    cursor: pointer !important;
    padding: 0 !important;
}

/* La línea horizontal antes del texto */
.comment-replies-summary::before {
    content: '' !important;
    display: block !important;
    width: 20px !important; /* Línea larga */
    height: 1px !important;
    background-color: #c7c7c7 !important; /* Gris línea */
    margin-right: 5px !important;
}

/* Ocultar cualquier icono viejo en "Ver respuestas" */
.comment-replies-summary i {
    display: none !important;
}

/* 7. INPUT DE RESPUESTA (Si se abre) */
.reply-input-container {
    margin-top: 10px !important;
    padding-left: 0 !important; /* Resetear */
}
.reply-input-container textarea.reply-input {
    background: #f0f2f5 !important; /* Gris input Facebook */
    border-radius: 18px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
}

/* 8. EL INPUT PRINCIPAL (Footer fijo) */
.panel-footer {
    padding: 12px 16px !important;
    border-top: 1px solid rgba(0,0,0,0.05) !important;
}

#add-comment-form {
    background: #f0f2f5 !important; /* Gris Facebook */
    border-radius: 24px !important; /* Píldora total */
    padding: 4px 8px 4px 16px !important;
    border: 1px solid transparent !important;
}

#add-comment-form:focus-within {
    background: #fff !important;
    border-color: #dbdbdb !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
}

#add-comment-input {
    font-size: 14px !important;
}

.btn-send-comment {
    color: #0095f6 !important; /* Azul Instagram */
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 8px 12px !important;
}
.btn-send-comment:disabled {
    color: #b3dbff !important; /* Azul deshabilitado */
}
.btn-send-comment i {
    /* Si usas icono, o cámbialo a texto "Publicar" en el HTML si prefieres estilo IG puro */
    font-size: 18px !important;
}
/* ================================================= */
/* === FIX ESCALERA INFINITA (Reset Nuclear) === */
/* ================================================= */

/* 1. Eliminar el padding automático de las listas anidadas */
ul.nested-replies-list {
    padding-left: 0 !important; /* CRUCIAL: Esto mata la escalera infinita */
    margin-left: 0 !important;
    list-style: none !important;
}

/* 2. Ajuste fino para la alineación del tope */
/* Cuando llegamos al tope (nivel 3+), aseguramos que no haya borde extra */
.comment-item[style*="margin-left: 0px"] {
    border-left: none !important; 
    padding-left: 0 !important;
}

/* Asegurar que la línea gris de "Ver respuestas" se vea bien */
.replies-trigger-container {
    margin-bottom: 8px !important;
}

/* FIX ESCALERA: Resetear estilos para las listas anidadas */
ul.nested-replies-list {
    margin: 0 !important;
    padding: 0 !important; /* CRUCIAL: Esto evita que se mueva a la derecha solo */
    list-style: none !important;
}

/* Ajuste del botón Ver Respuestas */
.comment-replies-summary {
    margin-left: 40px !important; /* Alinear con el texto del padre */
    padding-left: 10px !important;
    margin-bottom: 5px !important;
}

/* ================================================= */
/* === FIX TOPE ESCALERA (Nivel 3 Plano) === */
/* ================================================= */

/* 1. MATAR la indentación automática del navegador */
ul.nested-replies-list {
    padding-left: 0 !important;
    margin-left: 0 !important;
    list-style: none !important;
}

/* 2. Ajuste para que el botón "Ver respuestas" se alinee bien en profundidad */
.replies-trigger-container {
    margin-left: 40px !important; /* Alinear con el texto del padre */
}

/* Si estamos en el nivel 3 o más (tope), el botón no debe empujarse más */
.comment-item[style*="margin-left: 0px"] .replies-trigger-container {
    margin-left: 0px !important; /* Resetear margen del botón en el tope */
}

/* ================================================= */
/* === REDISEÑO INPUT RESPUESTA (Minimalista) === */
/* ================================================= */

/* Contenedor principal */
.reply-input-container {
    margin-top: 12px !important;
    padding-left: 0 !important; /* Alinear con el contenido */
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
}

/* Avatar del usuario actual (Pequeño y circular) */
.reply-input-container .avatar-xs {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 1px solid rgba(0,0,0,0.05) !important;
    flex-shrink: 0 !important;
}

/* Formulario (La burbuja de texto) */
.reply-input-container .reply-form {
    flex-grow: 1 !important;
    display: flex !important;
    align-items: center !important;
    background-color: transparent !important; /* Fondo transparente */
    border-bottom: 1px solid #e0e0e0 !important; /* Solo línea inferior */
    padding: 4px 0 !important; /* Padding vertical mínimo */
    border-radius: 0 !important; /* Sin bordes redondos */
    transition: border-color 0.2s ease !important;
}

/* Efecto al hacer foco (La línea se pone azul o negra) */
.reply-input-container .reply-form:focus-within {
    border-bottom-color: #8e8e8e !important;
}

/* El campo de texto */
.reply-input-container .reply-input-field {
    width: 100% !important;
    border: none !important;
    background: transparent !important;
    font-size: 13px !important;
    color: #262626 !important;
    outline: none !important;
    padding: 0 !important;
}

.reply-input-container .reply-input-field::placeholder {
    color: #8e8e8e !important;
}

/* Botón Publicar (Texto azul simple) */
.reply-input-container .btn-send-reply {
    color: #0095f6 !important; /* Azul IG */
    font-size: 13px !important;
    font-weight: 600 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin-left: 8px !important;
    cursor: pointer !important;
    opacity: 1 !important; /* Siempre visible si hay texto */
    transition: opacity 0.2s !important;
}

.reply-input-container .btn-send-reply:disabled {
    opacity: 0.5 !important; /* Desvanecido si está vacío */
    cursor: default !important;
}

.reply-input-container .btn-send-reply:hover:not(:disabled) {
    color: #00376b !important; /* Azul oscuro al hover */
}


/* ========================================================= */
/* === FIX ALINEACIÓN FOOTER (Columnas Fijas) === */
/* ========================================================= */

/* 1. Resetear el contenedor del footer */
.comment-footer {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important; /* Quitamos gap flexible, usaremos anchos fijos */
    margin-top: 4px !important;
    width: 100% !important; /* Asegurar que ocupe todo */
}

/* 2. COLUMNA 1: TIEMPO (Ancho fijo para que no empuje) */
.comment-time {
    display: inline-block !important;
    width: 65px !important; /* Espacio suficiente para "Hace 11m" */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* 3. COLUMNA 2: LIKE (Ancho fijo + centrado del icono) */
.comment-like-btn {
    display: flex !important;
    align-items: center !important;
    width: 45px !important; /* Espacio fijo para icono + número */
    padding-left: 5px !important;
}

/* El número de likes debe estar pegado al corazón pero dentro de su caja */
.comment-like-count {
    margin-left: 4px !important;
    min-width: 15px !important; /* Reservar espacio para 1 o 2 dígitos */
    display: inline-block !important;
    text-align: left !important;
}

/* 4. COLUMNA 3: RESPONDER (Ancho fijo) */
.comment-footer button[data-action="reply-comment"] {
    width: 80px !important; /* Espacio fijo para "Responder" */
    display: flex !important;
    align-items: center !important;
}

/* 5. COLUMNA 4: BASURA (Al final, flotando o fijo) */
/* Opción A: Fijo a la derecha de Responder */
.comment-delete-btn {
    width: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 10px !important; /* Un poco de aire extra */
}

/* ======================================================== */
/* === PERFIL FUSIÓN (FB + Twitter + Uber) === */
/* ======================================================== */

/* 1. Header Transparente que se vuelve sólido */
.profile-header-fixed {
    position: absolute; /* Empieza flotando sobre la portada */
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: transparent;
    border-bottom: none;
    transition: background-color 0.3s, border-bottom 0.3s;
}
.profile-header-fixed.scrolled {
    position: fixed; /* Se pega al scrollear */
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #eee;
}
/* Botones del header */
.profile-header-top .icon-btn {
    background-color: rgba(0,0,0,0.3); /* Círculo oscuro semitransparente */
    color: white;
    border: none;
}
.profile-header-fixed.scrolled .profile-header-top .icon-btn {
    background-color: transparent; /* Se vuelve normal al scrollear */
    color: #000;
}

/* 2. PORTADA (Cover) */
.profile-cover-container {
    height: 200px; /* Altura estilo Twitter/FB móvil */
    width: 100%;
    background-color: #cfd8dc; /* Color placeholder */
    position: relative;
    overflow: hidden;
}
#profile-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.edit-cover-btn {
    bottom: 60px !important; /* Subirlo un poco más */
    right: 20px !important;  /* Separarlo del borde derecho */
    width: 40px !important;  /* Un poco más grande para tocar fácil */
    height: 40px !important;
    background-color: rgba(0, 0, 0, 0.7) !important; /* Más oscuro para contraste */
    border: 1px solid rgba(255,255,255,0.5) !important;
}

#profile-header-icons {
    display: flex !important;
    gap: 12px !important; /* Separación entre iconos */
    align-items: center !important;
    margin-right: 0px !important;
}
#profile-header-icons .header-icon {
    font-size: 1.3rem !important; /* Tamaño visible */
    padding: 0 !important;
    border: none !important;
    background: none !important;
    cursor: help; /* Cursor de ayuda para saber qué son */
    display: flex !important;
    align-items: center;
    justify-content: center;
}
/* 3. INFO PRINCIPAL (Layout Fusión) */
.profile-main-info-container {
    padding: 0 16px;
    position: relative;
    background: #fff;
}

.profile-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Alinear abajo para que el botón coincida con el avatar */
    margin-top: -45px; /* AVATAR SUPERPUESTO (Sube sobre la portada) */
    margin-bottom: 10px;
}

/* Avatar con borde blanco */
.profile-avatar-wrapper {
    position: relative;
}
#profile-avatar-img {
    width: 90px; height: 90px;
    border-radius: 50%;
    border: 4px solid #fff; /* Borde blanco grueso estilo FB */
    background-color: #fff;
    object-fit: cover;
}
.edit-avatar-btn {
    position: absolute;
    bottom: 0; right: 0;
    width: 28px; height: 28px;
    background: #e4e6eb;
    color: #000;
    border-radius: 50%;
    border: 2px solid #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 12px;
}

/* Botones de Acción (Editar Perfil) */
.profile-actions-row {
    padding-bottom: 10px; /* Espacio para alinear con la base del avatar */
    display: flex;
    gap: 10px;
}
.rounded-pill {
    border-radius: 20px;
    font-weight: 600;
    padding: 6px 16px;
    font-size: 14px;
    border: 1px solid #cfd9de;
    background-color: #fff;
    color: #0f1419;
}

/* Textos */
#profile-display-name {
    font-size: 22px;
    font-weight: 800; /* Extra bold estilo Uber/X */
    color: #0f1419;
    margin: 0;
    line-height: 1.2;
}
.profile-meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #536471; /* Gris Twitter */
    margin-top: 2px;
}
.profile-bio {
    font-size: 15px;
    color: #0f1419;
    margin: 12px 0 16px 0; /* Más espacio arriba y abajo */
    line-height: 1.5; /* Mejor lectura */
}
.profile-details-row {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: #536471;
    margin-bottom: 12px;
}
.detail-badge i { margin-right: 4px; }


.stat-item {
    flex: 1; /* Cada uno ocupa el mismo espacio (33.3%) */
    display: flex;
    flex-direction: column; /* Apilar número y texto */
    align-items: center; /* Centrar horizontalmente */
    text-align: center;
    cursor: pointer; /* Indicar clic */
    position: relative;
}
/* Opcional: Separadores verticales sutiles */
.stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background-color: #e0e0e0;
}



/* 4. TABS STICKY (Estilo X/Twitter) */
.sticky-tabs {
    position: sticky;
    top: 56px; /* Altura del header cuando es sticky */
    background: #fff; /* Asegurar fondo para tapar contenido al scrollear */
    z-index: 90;
    border-bottom: 1px solid #eff3f4;
    display: flex;
}
.profile-tab-btn {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    font-weight: 600;
    color: #536471;
    font-size: 15px;
    position: relative;
    background: none; border: none;
    cursor: pointer;
}
.profile-tab-btn:hover { background-color: #f7f9f9; }
.profile-tab-btn.active {
    color: #0f1419;
}
/* Línea azul debajo del tab activo */
.profile-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%; transform: translateX(-50%);
    width: 50px; /* Ancho fijo de la línea */
    height: 4px;
    background-color: var(--color-accent-primary);
    border-radius: 2px;
}

/* Destacadas (Ajuste) */
.profile-highlights-section {
    padding: 10px 16px;
}
/* ========================================================= */
/* === FIXES DISEÑO PERFIL PÚBLICO (Alineación Perfecta) === */
/* ========================================================= */

/* 1. CONTENEDOR SUPERIOR (Avatar + Botón) */
.profile-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Alineación clave: Abajo */
    margin-top: -45px; /* Subir el avatar sobre la portada */
    margin-bottom: 15px; /* Espacio antes del nombre */
    padding-right: 10px; /* Margen derecho para el botón */
    position: relative; /* Para contexto */
    height: 50px; /* Altura fantasma para reservar espacio al botón sin empujar el avatar */
}

/* 2. AVATAR (Tamaño controlado) */
#public-profile-avatar-img,
#profile-avatar-img {
    width: 85px !important;  /* Un poco más pequeño que 90 */
    height: 85px !important;
    border: 4px solid #fff; /* Borde blanco grueso */
    border-radius: 50%;
    background-color: #fff;
    object-fit: cover;
    /* Sombra sutil para despegarlo del fondo */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
}

.profile-avatar-wrapper {
    /* No necesita posición absoluta, el margen negativo del padre lo sube */
    z-index: 2; /* Encima de la portada */
}

/* 3. BOTÓN SEGUIR (Alineado y Estilizado) */
.profile-actions-row {
    padding-bottom: 5px; /* Ajuste fino vertical */
    margin-bottom: 0; /* Reset */
    z-index: 1;
}

#public-profile-follow-btn {
    border-radius: 20px !important; /* Píldora perfecta */
    padding: 6px 20px !important; /* Más ancho */
    font-size: 14px !important;
    font-weight: 700 !important; /* Texto grueso */
    border: 1px solid #cfd9de; /* Borde gris sutil */
    background-color: #0f1419; /* Negro Twitter/X */
    color: #fff;
    transition: background-color 0.2s;
}

#public-profile-follow-btn:hover {
    background-color: #272c30; /* Negro más claro al hover */
}

/* Estilo para estado "Siguiendo" (Borde y texto, fondo blanco) */
#public-profile-follow-btn.btn-secondary {
    background-color: #fff;
    color: #0f1419;
    border-color: #cfd9de;
}

/* 4. NOMBRE Y TEXTOS (Espaciado) */
.profile-text-content {
    margin-top: 50px; 
    padding-bottom: 10px; /* Aire antes de los stats */
}

#public-profile-display-name,
#profile-display-name {
    font-size: 20px !important; /* Un pelín más pequeño para nombres largos */
    font-weight: 800;
    margin-bottom: 4px !important;
    line-height: 1.2;
    color: #0f1419;
}

.profile-meta-row {
    margin-bottom: 12px !important; /* Espacio antes de la Bio */
}

/* 5. ESTADÍSTICAS (Distribución) */
.profile-stats-row {
    display: flex;
    justify-content: space-between; /* Asegura distribución total */
    width: 100%; /* Ocupar todo el ancho */
    padding: 15px 0; /* Un poco más de aire vertical */
    border-bottom: 1px solid #eff3f4; /* Línea sutil abajo */
    margin-top: 10px;
}



.stat-value {
    font-size: 18px; /* Número más grande y legible */
    font-weight: 700;
    color: #0f1419;
    line-height: 1.2;
}

.stat-label {
    font-size: 13px;
    color: #536471;
    font-weight: 400;
    margin-top: 2px;
}

/* 6. ESTADO VACÍO (Centrado y bonito) */
.list-empty-message,
.portfolio-empty-message {
    text-align: center;
    padding: 40px 20px !important;
    color: #536471;
    font-size: 15px;
    background-color: #f7f9f9; /* Fondo gris muy suave */
    border-radius: 12px;
    margin: 20px; /* Margen alrededor */
}

/* Forzar altura máxima para el perfil rediseñado */
#public-profile-modal, 
#profile-modal {
    height: 95vh !important; /* Ocupa el 95% de la altura */
    max-height: 95vh !important;
    border-radius: 20px 20px 0 0; /* Bordes redondeados arriba */
    top: auto; /* Ignorar top */
    bottom: 0; /* Pegado abajo */
    /* El transform y transiciones ya los maneja la clase .modal */
}

/* En móviles, ocupar el 100% para inmersión total */
@media (max-width: 768px) {
    #public-profile-modal, 
    #profile-modal {
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0; /* Sin bordes redondeados en full screen */
    }
}
/* Botón Editar Portada (Visible y Bonito) */
.edit-cover-btn {
    position: absolute;
    bottom: 15px; /* Separado del borde */
    right: 15px;
    background-color: rgba(0, 0, 0, 0.6); /* Fondo oscuro semitransparente */
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    z-index: 10; /* Encima de la imagen */
    transition: background-color 0.2s;
}
.edit-cover-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}










/* Icono de Audio Activo (Morado Vibrante) */
.profile-trust-island-header .trust-item-wrapper.icon-audio.active { 
    color: #34d399 !important; /* Morado */
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.4); 
}

/* Modo Claro (Scroll) */
.profile-header-fixed.scrolled .profile-trust-island-header .trust-item-wrapper.icon-audio.active { 
    color: #34d399 !important; /* Morado más oscuro */
    text-shadow: none !important;
}




















/* ========================================================= */
/* === INSIGNIAS DE CONFIANZA (Trust Badges) === */
/* ========================================================= */



/* Estilo Base de la Insignia */
.trust-badge {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    cursor: help; /* Cursor de ayuda */
    position: relative;
}

.trust-badge:hover {
    transform: translateY(-2px); /* Efecto levitación */
    filter: brightness(0.95);
}

/* --- ESTADOS (COLORES) --- */

/* 1. GRIS (No verificado / Vacío) */
/* Se ve apagado, indica que falta completar */
.trust-badge.gray {
    background-color: #F0F2F5;
    color: #BCC0C4;
    border-color: #E4E6EB;
}

/* 2. AZUL (Identidad Verificada - DNI) */
/* Transmite seguridad oficial */
.trust-badge.blue {
    background-color: #E7F3FF; /* Azul muy suave */
    color: #1877F2; /* Azul Facebook */
    border-color: rgba(24, 119, 242, 0.15);
}

/* 3. VERDE (Email / Teléfono) */
/* Transmite contacto verificado */
.trust-badge.green {
    background-color: #E6F7EE; /* Verde muy suave */
    color: #28C76F; /* Verde Éxito */
    border-color: rgba(40, 199, 111, 0.15);
}

/* 4. DORADO (Top Rated / Medalla) */
/* Transmite calidad premium */
.trust-badge.gold {
    background-color: #FFF9C4; /* Amarillo suave */
    color: #FF9F43; /* Naranja/Dorado */
    border-color: rgba(255, 159, 67, 0.2);
}

/* 5. NARANJA (Pendiente) */
/* Transmite espera */
.trust-badge.orange {
    background-color: #FFF1E3;
    color: #FF9F43;
    border-color: rgba(255, 159, 67, 0.2);
}

/* 6. ROJO (Rechazado) */
/* Transmite alerta */
.trust-badge.red {
    background-color: #FFECEC;
    color: #EA5455;
    border-color: rgba(234, 84, 85, 0.2);
}

/* Indicador de alerta (puntito rojo) */
.badge-alert-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    background-color: #EA5455;
    border: 2px solid #fff;
    border-radius: 50%;
}

/* ========================================================= */
/* === ISLA DINÁMICA DE CONFIANZA (Trust Island) === */
/* ========================================================= */

/* Contenedor principal (La Píldora) */
.profile-trust-island {
    background-color: #f0f2f500; /* Gris suave estilo Facebook/Apple */
    border-radius: 50px;       /* Forma de píldora */
    padding: 6px 16px;         /* Espacio interno */
    display: flex;
    align-items: center;
    gap: 18px;                 /* Espacio entre iconos */
    
    height: 40px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05); /* Borde sutil interno */
}

/* Wrapper para cada icono (para posicionar el badge) */
.trust-item-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #B0B3B8; /* Gris apagado por defecto */
    font-size: 1.2rem;
    transition: transform 0.2s ease, color 0.2s;
    cursor: help;
}

/* Estado Activo/Lleno */
.trust-item-wrapper.active {
    color: #1c1e21; /* Negro suave (o color específico abajo) */
}

.trust-item-wrapper:hover {
    transform: scale(1.1);
}

/* --- COLORES DE ICONOS --- */
.trust-item-wrapper.icon-id.active { color: #0077FF; }      /* DNI Azul */
.trust-item-wrapper.icon-medal.active { color: #FFD700; }   /* Medalla Dorada */
.trust-item-wrapper.icon-email.active { color: #10B981; }   /* Email Verde */

/* --- INDICADORES DE ESTADO (Mini Badges) --- */
.trust-status-dot {
    position: absolute;
    top: -4px;
    right: -6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #f0f2f5; /* Mismo color que el fondo de la isla */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 900;
    color: white;
    z-index: 2;
}

/* Tipos de Indicadores */
.trust-status-dot.check {
    background-color: #10B981; /* Verde Éxito */
    content: "\f00c"; /* FontAwesome Check via CSS content si se usa ::after, pero usaremos HTML */
}

.trust-status-dot.alert {
    background-color: #EF4444; /* Rojo Error */
}

.trust-status-dot.pending {
    background-color: #F59E0B; /* Naranja Espera */
}
/* ========================================================= */
/* === SISTEMA DE CONFIANZA: ISLA DINÁMICA (Trust Island) === */
/* ========================================================= */

/* 1. CONTENEDOR PRINCIPAL (La Píldora en el Header) */
.profile-trust-island-header {
    /* Estilo por defecto (Sobre la portada): Negro Translúcido */
    background-color: rgba(30, 30, 30, 0.85) !important; 
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px);
    
    /* Forma y Tamaño */
    border-radius: 100px !important;
    padding: 6px 20px !important;
    height: 44px !important;
    
    /* Layout Flex Perfecto */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    
    /* Detalles Visuales */
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    z-index: 20;
    
    transition: background-color 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
}

/* 2. ICONOS DENTRO DE LA ISLA */
.profile-trust-island-header .trust-item-wrapper {
    /* Estado Inactivo (Gris Transparente) */
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 1.2rem !important;
    
    /* Layout */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative; /* Para el puntito */
    
    /* Reset de botones */
    background: none !important;
    border: none !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    cursor: help;
    transition: color 0.2s ease, transform 0.2s ease;
}

.profile-trust-island-header .trust-item-wrapper:hover {
    transform: scale(1.1);
    color: rgba(255, 255, 255, 0.8) !important;
}

/* 3. ESTADOS ACTIVOS (Colores Neón sobre Negro) */
.profile-trust-island-header .trust-item-wrapper.icon-id.active { 
    color: #3b82f6 !important; /* Azul Brillante */
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.4); 
}
.profile-trust-island-header .trust-item-wrapper.icon-medal.active { 
    color: #fbbf24 !important; /* Dorado Brillante */
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.4); 
}
.profile-trust-island-header .trust-item-wrapper.icon-email.active { 
    color: #34d399 !important; /* Verde Brillante */
    text-shadow: 0 0 10px rgba(52, 211, 153, 0.4); 
}

/* 4. BADGES (Puntitos de Estado) */
.profile-trust-island-header .trust-status-dot {
    position: absolute;
    top: -5px !important;
    right: -6px !important;
    width: 14px !important;
    height: 14px !important;
    
    border-radius: 50%;
    border: 2px solid #2a2a2a !important; /* Borde oscuro para fundirse */
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-size: 9px !important;
    font-weight: 900;
    color: white;
    z-index: 2;
}

/* Colores de Badges */
.trust-status-dot.check { background-color: #10B981 !important; } /* Verde */
.trust-status-dot.alert { background-color: #EF4444 !important; } /* Rojo */
.trust-status-dot.pending { background-color: #F59E0B !important; } /* Naranja */


/* ========================================================= */
/* === MODO SCROLL (Cuando el header se pone blanco) === */
/* ========================================================= */

.profile-header-fixed.scrolled .profile-trust-island-header {
    background-color: #f0f2f5 !important; /* Gris claro sólido */
    box-shadow: none !important;
    border: 1px solid transparent !important;
}

/* Iconos inactivos se vuelven grises oscuros para verse sobre blanco */
.profile-header-fixed.scrolled .profile-trust-island-header .trust-item-wrapper {
    color: #B0B3B8 !important;
}

/* Iconos activos pierden el brillo neón (incompatible con fondo claro) pero mantienen color */
.profile-header-fixed.scrolled .profile-trust-island-header .trust-item-wrapper.active {
    text-shadow: none !important;
}
/* Reafirmar colores activos en modo claro */
.profile-header-fixed.scrolled .profile-trust-island-header .trust-item-wrapper.icon-id.active { color: #0077FF !important; }
.profile-header-fixed.scrolled .profile-trust-island-header .trust-item-wrapper.icon-medal.active { color: #FFD700 !important; }
.profile-header-fixed.scrolled .profile-trust-island-header .trust-item-wrapper.icon-email.active { color: #10B981 !important; }

/* El borde de los puntitos cambia a gris claro */
.profile-header-fixed.scrolled .profile-trust-island-header .trust-status-dot {
    border-color: #f0f2f5 !important;
}

/* ========================================================= */
/* === FIX PERFIL PÚBLICO (Altura Completa) === */
/* ========================================================= */

.modal.portfolio-viewer {
    /* ... otros estilos ... */
    opacity: 0;
    transition: opacity 0.25s cubic-bezier(0.4, 0.0, 0.2, 1); /* Transición suave */
    display: flex; /* Importante para centrar */
}

.modal.portfolio-viewer.active {
    opacity: 1;
}

#create-edit-post-modal {
    z-index: 2000 !important; /* Más alto que el perfil (que suele ser 100 o 1000) */
}

/* Overlay con Efecto Blur Premium */
.modal-overlay {
    position: fixed; 
    inset: 0; 
    background-color: rgba(0, 0, 0, 0.6); /* Oscuro semi-transparente */
    backdrop-filter: blur(5px);           /* <<< EL EFECTO BLUR MÁGICO */
    -webkit-backdrop-filter: blur(5px);   /* Para Safari */
    z-index: var(--z-modal-backdrop); 
    opacity: 0; 
    visibility: hidden; 
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}
body.modal-open .modal-overlay {
    z-index: 1500 !important; /* Encima del perfil (100), debajo del post (2000) */
}











/* ========================================================= */
/* === DISEÑO UBER-STYLE: SELECCIÓN DE CATEGORÍA === */
/* ========================================================= */

/* Contenedor de la lista */
.uber-category-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 20px;
}

/* La Tarjeta Base */
.uber-radio-card {
    display: flex;
    flex-direction: column; /* Para permitir expansión */
    background-color: #fff;
     /* Borde muy sutil por defecto */
    border-radius: 12px;
    padding: 0; /* Padding controlado por hijos */
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

/* Contenido Principal de la Tarjeta (Siempre visible) */
.uber-card-main {
    display: flex;
    align-items: center;
    padding: 16px;
    width: 100%;
}

/* Icono Cuadrado Gris (Tipo imagen 1) */
.uber-icon-box {
    width: 50px;
    height: 50px;
    background-color: #e2e8f0; /* Gris azulado suave */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: #475569;
    margin-right: 15px;
    flex-shrink: 0;
}
.uber-icon-box.black { background-color: #1a1a1a; color: #fff; } /* Para categoría Black */

/* Textos Centrales */
.uber-card-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.uber-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.uber-card-desc {
    font-size: 0.8rem;
    color: #666;
}
/* Etiqueta "Mas demanda" */
.uber-badge-demand {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: #e2e8f0;
    color: #0f172a;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    margin-top: 6px;
    width: fit-content;
}

/* Precio (Derecha) */
.uber-card-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: #000;
}

/* --- ESTADO SELECCIONADO (La clave del diseño) --- */
.uber-radio-card.selected {
    border: 2px solid #000; /* Borde negro grueso */
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Animación de la caja de prioridad */
.uber-priority-box {
    display: none; /* Oculto por defecto */
    align-items: center;
    justify-content: space-between;
    background-color: #f8fafc;
    margin: 0 16px 16px 16px;
    padding: 12px 16px;
    border-radius: 8px;
    
    /* PREPARACIÓN PARA ANIMACIÓN */
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0; /* Empieza colapsado */
    overflow: hidden; /* Esconde el contenido mientras crece */
    
    /* ANIMACIÓN SUAVE (0.6s) */
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes expandBox {
    0% {
        opacity: 0;
        transform: translateY(-15px);
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        max-height: 100px; /* Altura suficiente */
        padding-top: 12px;
        padding-bottom: 12px;
        margin-bottom: 16px;
    }
}
/* CLASE QUE ACTIVA LA ANIMACIÓN (La usaremos en JS si es necesario, o con el selector .selected) */
.uber-radio-card.selected .uber-priority-box {
    display: flex; /* Mostrar */
    /* Pequeño delay para que el navegador procese el display: flex antes de animar */
    animation: expandBox 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.priority-text strong { display: block; font-size: 0.9rem; color: #000; }
.priority-text span { font-size: 0.8rem; color: #666; }

/* Botón + circular */
.btn-add-priority {
    width: 28px; height: 28px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #cbd5e1;
    color: #0f172a;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-add-priority.active {
    background-color: #000;
    color: #fff;
    border-color: #000;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Footer del Modal (Botón negro ancho) */
.uber-footer-action {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
}
.btn-uber-black {
    width: 100%;
    background-color: #000;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 16px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: transform 0.1s;
}
.btn-uber-black:disabled {
    background-color: #ccc;
    cursor: default;
}
.btn-uber-black:active:not(:disabled) {
    transform: scale(0.98);
}













/* Animación de la caja de prioridad */
.uber-priority-box {
    display: none; /* Oculto por defecto */
    align-items: center;
    justify-content: space-between;
    background-color: #f8fafc;
    margin: 0 16px 16px 16px;
    padding: 12px 16px;
    border-radius: 8px;
    
    /* PREPARACIÓN PARA ANIMACIÓN */
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0; /* Empieza colapsado */
    overflow: hidden; /* Esconde el contenido mientras crece */
    
    /* ANIMACIÓN SUAVE (0.6s) */
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* CLASE QUE ACTIVA LA ANIMACIÓN (La usaremos en JS si es necesario, o con el selector .selected) */
.uber-radio-card.selected .uber-priority-box {
    display: flex; /* Mostrar */
    /* Pequeño delay para que el navegador procese el display: flex antes de animar */
    animation: expandBox 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes expandBox {
    0% {
        opacity: 0;
        transform: translateY(-15px);
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        max-height: 100px; /* Altura suficiente */
        padding-top: 12px;
        padding-bottom: 12px;
        margin-bottom: 16px;
    }
}