/* ======================================================
   ÍNDICE DE ESTILOS (ECO-LAB STEM)
   ------------------------------------------------------
   1. VARIABLES & RESET (Colores y Fuentes)
   2. ESTILOS GENERALES (Botones, Inputs)
   3. PANTALLA DE CARGA (Loader Cristal)
   4. LOGIN (Animaciones y Tarjeta)
   5. ESTRUCTURA DASHBOARD (Sidebar y Main)
   6. TARJETAS DEL MENÚ (Grilla 3x3)
   7. RÚBRICA DE EVALUACIÓN (Círculos)
   8. RESPONSIVE (Móvil y Tablet)
   9. PARCHES (Correcciones de Navegador)

   11. SECCIÓN: MI PROYECTO (DASHBOARD)
   12. EDICIÓN DE FOTO DE PERFIL (NUEVO)
   13. SECCIÓN: MI PROYECTO (ACORDEÓN + AVATARES REALES)
   ====================================================== */

/* ======================================================
   1. VARIABLES & RESET
   ====================================================== */
:root {
    --primary: #2E7D32;       /* Verde Bosque */
    --primary-dark: #1B5E20;  /* Verde Oscuro */
    --primary-light: #E8F5E9; /* Fondo Verde Claro */
    --accent: #FFC107;        /* Amarillo */
    --bg-color: #F4F6F8;      /* Gris Muy Suave */
    --text-main: #333333;
    --text-light: #666666;
    --white: #FFFFFF;
    --danger: #D32F2F;
    --radius: 16px;           /* Curva de las esquinas */
    --shadow: 0 10px 30px rgba(0,0,0,0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Roboto, Helvetica, sans-serif; }
body { background-color: var(--bg-color); color: var(--text-main); min-height: 100vh; font-size: 16px; }
a { text-decoration: none; color: inherit; transition: all 0.3s; }
ul { list-style: none; }

/* ======================================================
   2. ESTILOS GENERALES
   ====================================================== */
/* Botón Verde Principal */
.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white; border: none; width: 100%; padding: 15px;
    font-size: 1rem; font-weight: bold; border-radius: 12px;
    cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 15px rgba(46, 125, 50, 0.3);
    display: flex; justify-content: center; align-items: center; gap: 10px;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(46, 125, 50, 0.5); }
.btn-primary:disabled { background: #ccc; box-shadow: none; cursor: wait; transform: none; }

/* Inputs de Texto */
.form-group { margin-bottom: 20px; text-align: left; }
.form-group label {
    display: block; margin-bottom: 8px; color: #555; font-weight: 700; 
    font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; text-align: center;
}
.input-login, .input-field {
    width: 100%; padding: 14px; border: 2px solid #e0e0e0; border-radius: 12px;
    font-size: 1rem; background: #fafafa; transition: all 0.3s;
}
.input-login:focus, .input-field:focus {
    border-color: var(--primary); background: #fff; outline: none;
    box-shadow: 0 4px 15px rgba(46, 125, 50, 0.1);
}

/* ======================================================
   3. PANTALLA DE CARGA (LOADER CRISTAL)
   ====================================================== */
#page-loader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    /* Fondo Blanco con Transparencia (Efecto Cristal) */
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px); /* Desenfoca lo de atrás */
    z-index: 9999;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
}

/* Contenedor relativo para centrar el anillo y el logo */
.loader-container { position: relative; width: 120px; height: 120px; display: flex; justify-content: center; align-items: center; }

/* El Anillo que gira alrededor */
.loader-ring {
    position: absolute; width: 100%; height: 100%;
    border: 4px solid rgba(46, 125, 50, 0.1); /* Verde muy suave */
    border-top: 4px solid var(--primary);     /* Verde fuerte (el que gira) */
    border-radius: 50%;
    animation: spin-ring 1s linear infinite;
}

/* El Logo estático en el centro (solo palpita) */
.loader-logo-center {
    width: 80px; height: 80px; border-radius: 50%; object-fit: cover;
    animation: logo-heartbeat 2s infinite ease-in-out;
}

@keyframes spin-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ======================================================
   4. LOGIN (ANIMACIONES Y TARJETA)
   ====================================================== */
.login-container {
    min-height: 100vh; display: flex; justify-content: center; align-items: center;
    background: radial-gradient(circle at center, #43A047 0%, #1B5E20 100%);
    padding: 20px;
}

.login-card {
    background: var(--white); width: 100%; max-width: 420px; padding: 45px 35px;
    border-radius: 24px; text-align: center;
    /* Animación "Respiro" de la tarjeta */
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    animation: card-breathe 4s infinite ease-in-out;
}

@keyframes card-breathe {
    0%, 100% { transform: scale(1); box-shadow: 0 20px 50px rgba(0,0,0,0.2); }
    50% { transform: scale(1.01); box-shadow: 0 25px 60px rgba(0,0,0,0.3); }
}

/* Logo del Login */
.login-logo {
    width: 110px; height: 110px; object-fit: cover; border-radius: 50%;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(46, 125, 50, 0.4); /* Resplandor Verde */
    animation: logo-heartbeat 3s infinite ease-in-out;
    transition: all 0.3s;
}
.login-logo:hover { animation-play-state: paused; transform: scale(1.1) rotate(5deg); }

@keyframes logo-heartbeat {
    0%, 100% { transform: scale(1); box-shadow: 0 10px 30px rgba(46, 125, 50, 0.4); }
    50% { transform: scale(1.05); box-shadow: 0 15px 50px rgba(46, 125, 50, 0.7); }
}

/* Inputs Login Específicos */
.input-login { text-align: center; padding-left: 45px; font-weight: 600; color: #333; }
.input-wrapper { position: relative; }
.input-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #bbb; font-size: 1.3rem; }
.input-login:focus + .input-icon { color: var(--primary); }

.toggle-password { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #bbb; }
.forgot-link { display: inline-block; margin-top: 25px; color: #888; font-size: 0.9rem; }
.forgot-link:hover { color: var(--primary); text-decoration: underline; }

/* ======================================================
   5. ESTRUCTURA DASHBOARD (SIDEBAR Y MAIN)
   ====================================================== */
.app-layout { display: flex; min-height: 100vh; position: relative; }

/* Menú Lateral (Sidebar) */
.sidebar {
    width: 260px; background: var(--white); height: 100vh; position: fixed;
    left: 0; top: 0; z-index: 1000; display: flex; flex-direction: column;
    box-shadow: 2px 0 15px rgba(0,0,0,0.05); transition: transform 0.3s ease;
}

.sidebar-header { padding: 30px 20px; text-align: center; border-bottom: 1px solid #f0f0f0; }
.sidebar-header h3 { margin-top: 15px; color: var(--primary); font-weight: 800; font-size: 1.2rem; }

/* Logo del Sidebar */
.sidebar-logo {
    width: 90px; height: 90px; object-fit: cover; border-radius: 50%;
    margin: 0 auto; display: block; cursor: pointer;
    box-shadow: 0 5px 20px rgba(46, 125, 50, 0.2);
    animation: logo-heartbeat 3s infinite ease-in-out; /* Misma animación del login */
}

/* Enlaces del Menú */
.sidebar nav { flex: 1; padding: 20px 0; overflow-y: auto; }
.sidebar li a {
    display: flex; align-items: center; gap: 12px; padding: 15px 25px;
    color: var(--text-light); font-weight: 600; border-left: 4px solid transparent;
    transition: all 0.2s;
}
.sidebar li a:hover, .sidebar li a.active {
    background: var(--primary-light); color: var(--primary); border-left-color: var(--primary);
}

/* Contenido Principal */
.content {
    margin-left: 260px; /* Deja espacio al sidebar en PC */
    padding: 30px; width: 100%; transition: margin-left 0.3s ease;
}
.header-mobile { display: none; /* Oculto en PC */ align-items: center; justify-content: space-between; margin-bottom: 20px; }
.menu-toggle { font-size: 2rem; color: var(--primary); cursor: pointer; }

/* ======================================================
   6. TARJETAS DEL MENÚ (COMPACTAS + ÍCONOS GRANDES)
   ====================================================== */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; /* Un poco menos de espacio entre tarjetas */
    margin-top: 25px;
}

/* ANIMACIÓN DE LATIDO */
@keyframes icon-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.nav-card {
    background: white; 
    /* Reducimos el padding vertical para que sea compacta */
    padding: 20px 15px; 
    border-radius: 20px;
    text-align: center; box-shadow: var(--shadow); 
    border: 2px solid transparent;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    
    /* VOLVEMOS A UNA ALTURA COMPACTA */
    min-height: 190px; height: 100%;
    
    position: relative; overflow: hidden; z-index: 1;
}

.nav-card:hover { transform: translateY(-5px); }

/* TEXTOS */
.nav-card h3 { 
    font-size: 1.15rem; 
    margin: 5px 0 2px 0; /* Margen muy reducido para pegar al ícono */
    color: #333; font-weight: 800; z-index: 2; 
    letter-spacing: -0.5px;
}
.nav-card p { 
    font-size: 0.9rem; color: #666; margin: 0; z-index: 2; font-weight: 500;
}

/* --- ICONOS GRANDES Y PROTAGONISTAS --- */
.card-icon { 
    /* TAMAÑO IDEAL (El doble del original, sin romper la caja) */
    font-size: 6.5rem; 
    line-height: 1; /* Evita que el ícono empuje mucho hacia arriba/abajo */
    margin-bottom: 0px; /* Sin margen inferior, pegado al título */
    z-index: 2; 
    transition: all 0.3s ease;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
    
    /* Animación continua */
    animation: icon-pulse 3s infinite ease-in-out;
}

/* Al pasar el mouse: Pausa y destaca */
.nav-card:hover .card-icon { 
    animation-play-state: paused; 
    transform: scale(1.15) rotate(-5deg); 
}


/* --- RESPLANDOR DE FONDO --- */
.nav-card::after {
    content: ''; position: absolute;
    bottom: -40px; right: -40px; /* Ajustado para caja pequeña */
    width: 140px; height: 140px;
    border-radius: 50%; filter: blur(60px);
    opacity: 0.25; z-index: 0; pointer-events: none; transition: opacity 0.3s;
}
.nav-card:hover::after { opacity: 0.5; }


/* --- COLORES INDIVIDUALES --- */
/* 1. Diagnóstico -> ROJO ANARANJADO */
.nav-card:nth-child(1) .card-icon { color: #FF5722; }
.nav-card:nth-child(1)::after { background: #FF5722; }
.nav-card:nth-child(1):hover { border-color: #FF5722; box-shadow: 0 10px 25px rgba(255, 87, 34, 0.2); }

/* 2. Propuesta -> AMARILLO DORADO */
.nav-card:nth-child(2) .card-icon { color: #FFC107; }
.nav-card:nth-child(2)::after { background: #FFC107; }
.nav-card:nth-child(2):hover { border-color: #FFC107; box-shadow: 0 10px 25px rgba(255, 193, 7, 0.25); }

/* 3. Evidencias -> VERDE ESMERALDA */
.nav-card:nth-child(3) .card-icon { color: #00C853; }
.nav-card:nth-child(3)::after { background: #00C853; }
.nav-card:nth-child(3):hover { border-color: #00C853; box-shadow: 0 10px 25px rgba(0, 200, 83, 0.2); }

/* 4. Reflexión -> MORADO VIBRANTE */
.nav-card:nth-child(4) .card-icon { color: #6200EA; }
.nav-card:nth-child(4)::after { background: #6200EA; }
.nav-card:nth-child(4):hover { border-color: #6200EA; box-shadow: 0 10px 25px rgba(98, 0, 234, 0.2); }

/* 5. Cierre -> AZUL CIELO */
.nav-card:nth-child(5) .card-icon { color: #00B0FF; }
.nav-card:nth-child(5)::after { background: #00B0FF; }
.nav-card:nth-child(5):hover { border-color: #00B0FF; box-shadow: 0 10px 25px rgba(0, 176, 255, 0.2); }

/* 6. Certificado -> GRIS METÁLICO */
.nav-card:nth-child(6) .card-icon { color: #607D8B; }
.nav-card:nth-child(6)::after { background: #607D8B; }
.nav-card:nth-child(6):hover { border-color: #607D8B; box-shadow: 0 10px 25px rgba(96, 125, 139, 0.2); }

/* ESTILOS EXTRA */
.card-locked { opacity: 0.6; cursor: not-allowed; background: #fafafa; filter: grayscale(100%); }
.card-locked:hover .card-icon { animation: none; transform: none; box-shadow:none; }

.card-content { background: var(--white); padding: 35px; border-radius: 16px; box-shadow: var(--shadow); max-width: 900px; margin: 0 auto; }
.progress-container { background: white; padding: 25px; border-radius: 16px; margin-bottom: 30px; box-shadow: var(--shadow); }
.progress-bar-bg { background: #f0f0f0; height: 14px; border-radius: 10px; overflow: hidden; margin-top: 10px; }
.progress-bar-fill { height: 100%; background: linear-gradient(90deg, #2E7D32 0%, #AEEA00 100%); width: 0%; transition: width 1s ease-in-out; border-radius: 10px; box-shadow: 0 2px 10px rgba(174, 234, 0, 0.3); }

/* ======================================================
   7. RÚBRICA DE EVALUACIÓN (PREMIUM & QUIETA)
   ====================================================== */
.rubric-container { display: grid; gap: 20px; }

.rubric-row {
    background: white; padding: 20px; border-radius: 12px;
    border: 1px solid #eee; display: flex; flex-direction: column; align-items: center;
    /* Ya no se mueve la fila completa, más sobrio */
}

.rubric-title { font-weight: 700; color: #444; margin-bottom: 15px; font-size: 1rem; }
.rubric-scores { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }

/* CÍRCULOS BASE */
.score-circle {
    width: 55px; height: 55px; border-radius: 50%;
    background: #f9f9f9; color: #aaa; border: 2px solid #e0e0e0;
    display: flex; justify-content: center; align-items: center;
    font-weight: 800; font-size: 1rem; 
    cursor: pointer; position: relative; transition: all 0.2s;
}

/* COMPORTAMIENTO NORMAL (Cuando NO hay nota aún) */
.score-circle:hover { 
    transform: scale(1.15); background: #E8F5E9; 
    color: var(--primary); border-color: var(--primary); 
}

/* CÍRCULO ACTIVO (La nota que sacó) */
.score-circle.active { 
    background: var(--primary); color: white; border-color: var(--primary); 
    transform: scale(1.2); box-shadow: 0 5px 15px rgba(46, 125, 50, 0.4); 
    z-index: 2; /* Encima de los demás */
}
.score-circle.active:hover { transform: scale(1.25); }

/* CÍRCULOS "APAGADOS" (Los que no sacó, cuando ya hay nota) */
.score-circle.muted {
    opacity: 0.5; /* Se ven más claritos */
    filter: grayscale(100%);
}
.score-circle.muted:hover {
    transform: none; /* NO crecen */
    background: #f9f9f9; /* NO cambian de color */
    color: #aaa;
    border-color: #e0e0e0;
    cursor: help; /* Cursor de ayuda para indicar que se puede leer */
}

/* --- TARJETA DE NOTA (PREMIUM 5.0) --- */
.grade-card {
    background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%); /* Verde Intenso */
    padding: 35px; border-radius: 20px; text-align: center;
    color: white; margin-bottom: 30px;
    box-shadow: 0 15px 40px rgba(46, 125, 50, 0.3);
    position: relative; overflow: hidden;
}

/* Brillo animado */
.grade-card::after {
    content: ""; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: shine 4s infinite;
}

/* Trofeo */
.trophy-icon { 
    font-size: 4rem; color: #FFD700; display: block; margin: 0 auto 5px; 
    text-shadow: 0 4px 10px rgba(0,0,0,0.3);
    animation: trophy-float 3s infinite ease-in-out;
}
@keyframes trophy-float { 
    0%, 100% { transform: translateY(0); } 
    50% { transform: translateY(-10px); } 
}

/* Caja de Comentario */
.comment-box {
    background: #E3F2FD; padding: 25px; border-left: 6px solid #1976D2;
    border-radius: 12px; margin-bottom: 30px; text-align: left;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* ======================================================
   8. RESPONSIVE (MÓVIL Y TABLET) - REFORZADO
   ====================================================== */
@media (max-width: 992px) {
    /* Tablet: 2 Columnas */
    .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    /* MÓVIL: Ajustes */
    .login-card { padding: 40px 20px; margin: 15px; }
    
    /* Sidebar Oculto por defecto */
    .sidebar { 
        transform: translateX(-100%); 
        width: 280px; 
        transition: transform 0.3s ease-in-out;
        box-shadow: 5px 0 15px rgba(0,0,0,0.1); /* Sombra para resaltar */
    }
    
    /* CLASE ACTIVE: La que pone el JS para mostrarlo */
    .sidebar.active { transform: translateX(0); }
    
    /* Contenido Ancho Completo */
    .content { margin-left: 0; padding: 20px; }
    
    /* Botón Hamburguesa VISIBLE */
    .header-mobile { 
        display: flex; 
        position: sticky; top: 0; z-index: 900; /* Pegajoso arriba */
        background: var(--bg-color); padding-bottom: 10px;
    } 
    
    /* Tarjetas una debajo de otra */
    .dashboard-grid { grid-template-columns: 1fr; }
}

/* Fondo oscuro al abrir menú */
#overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6); z-index: 999; 
    display: none; /* JS lo activa */
    backdrop-filter: blur(3px);
}

/* ======================================================
   11. SECCIÓN: MI PROYECTO (DISEÑO PRO + FOTO FIX)
   ====================================================== */
.project-card-ux {
    background: white; border-radius: 16px; margin-bottom: 25px; 
    box-shadow: var(--shadow); border-left: 6px solid var(--primary);
    overflow: hidden; transition: all 0.3s ease;
}

/* CABECERA */
.project-header-ux {
    padding: 15px 20px; display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; background: white; transition: background 0.2s;
}
.project-header-ux:hover { background: #f9f9f9; }

.project-label { font-size: 0.8rem; text-transform: uppercase; color: #555; font-weight: 800; letter-spacing: 0.5px; }
.toggle-icon { color: #999; transition: transform 0.3s ease; }
.project-card-ux.active .toggle-icon { transform: rotate(180deg); }

/* CUERPO */
.project-body-ux {
    max-height: 0; overflow: hidden; padding: 0 20px; opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.project-card-ux.active .project-body-ux {
    max-height: 800px; padding-bottom: 20px; opacity: 1; border-top: 1px solid #f0f0f0;
}

.project-title-main { font-size: 1.2rem; color: #2E7D32; margin: 15px 0 10px 0; font-weight: 800; }
.badge-estado { background: #E3F2FD; color: #1565C0; padding: 4px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 700; }

/* LISTA DE INTEGRANTES - DISEÑO UNIFORME */
.members-list-vertical {
    display: flex; flex-direction: column; gap: 12px; margin-top: 15px;
}

.member-item {
    display: flex; align-items: center; gap: 15px;
    padding: 10px; 
    border-radius: 12px; 
    background: #fff; 
    border: 1px solid #eee; /* Borde sutil para todos */
    transition: transform 0.2s, box-shadow 0.2s;
}

.member-item:hover {
    transform: translateX(5px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border-color: #ddd;
}

/* NOMBRE Y ROL */
.member-info { display: flex; flex-direction: column; }
.member-name { font-weight: 600; color: #333; font-size: 0.95rem; }
.member-role { font-size: 0.75rem; color: #888; }

/* AVATARES */
.avatar-wrapper {
    position: relative; width: 42px; height: 42px;
}

.avatar-small {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover; /* CLAVE: La foto se adapta sin estirarse */
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; font-weight: bold; color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* ÍCONO DE CÁMARA (Solo para ti) */
.avatar-badge-edit {
    position: absolute; bottom: -2px; right: -2px;
    background: var(--primary); color: white;
    width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid white;
    font-size: 10px; pointer-events: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* CURSOR PARA TU FOTO */
.my-avatar { cursor: pointer; transition: filter 0.2s; }
.my-avatar:hover { filter: brightness(0.9); }

/* BOTÓN ACCIÓN */
.btn-view-project {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin-top: 20px;
    background: var(--primary); color: white; padding: 12px; border-radius: 10px;
    text-decoration: none; font-weight: 700; transition: all 0.2s;
}
.btn-view-project:hover { background: var(--primary-dark); transform: translateY(-2px); }

/* ======================================================
   12. EDICIÓN DE FOTO DE PERFIL (NUEVO)
   ====================================================== */
/* Solo aplica al avatar del usuario actual */
.avatar-editable {
    cursor: pointer;
    border: 2px solid var(--primary); /* Borde verde para indicar que es tuyo */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.avatar-editable:hover {
    transform: scale(1.1); /* Crece un poco */
    box-shadow: 0 4px 8px rgba(46, 125, 50, 0.3);
}

/* Icono de camarita pequeño superpuesto (Opcional, detalle fino) */
.member-item.is-me::after {
    content: 'edit';
    font-family: 'Material Icons';
    font-size: 10px;
    position: absolute;
    left: 35px; /* Ajustado a la posición del avatar */
    bottom: 0;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    padding: 2px;
    pointer-events: none;
}

/* ======================================================
   12. SECCIÓN: MI PROYECTO (ACORDEÓN + AVATARES REALES)
   ====================================================== */
.project-card-ux {
    background: white; border-radius: 16px; margin-bottom: 25px; 
    box-shadow: var(--shadow); border-left: 6px solid var(--primary);
    overflow: hidden; transition: all 0.3s ease;
}

/* CABECERA (Siempre visible) */
.project-header-ux {
    padding: 15px 20px; display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; background: white; transition: background 0.2s;
}
.project-header-ux:hover { background: #f9f9f9; }

.project-label { font-size: 0.8rem; text-transform: uppercase; color: #555; font-weight: 800; letter-spacing: 0.5px; }
.toggle-icon { color: #999; transition: transform 0.3s ease; }
.project-card-ux.active .toggle-icon { transform: rotate(180deg); }

/* CUERPO (Se despliega) */
.project-body-ux {
    max-height: 0; overflow: hidden; padding: 0 20px; opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.project-card-ux.active .project-body-ux {
    max-height: 800px; /* Suficiente para listas largas */
    padding-bottom: 20px; opacity: 1; border-top: 1px solid #f0f0f0;
}

/* DETALLES */
.project-title-main { font-size: 1.2rem; color: #2E7D32; margin: 15px 0 10px 0; font-weight: 800; }
.badge-estado { background: #E3F2FD; color: #1565C0; padding: 4px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 700; }

/* LISTA DE INTEGRANTES */
.members-list-vertical {
    display: flex; flex-direction: column; gap: 10px; margin-top: 10px;
    background: #f5f5f5; padding: 15px; border-radius: 12px;
}
.member-item {
    display: flex; align-items: center; gap: 12px;
    font-size: 0.95rem; color: #444; font-weight: 500;
    padding: 5px; border-radius: 8px; transition: background 0.2s;
}
.member-item.is-me { background: white; border: 1px solid #e0e0e0; font-weight: 700; color: var(--primary); }

/* --- AVATARES (AQUÍ ESTÁ LA MAGIA) --- */
/* --- AVATARES (CORRECCIÓN: REDONDOS Y SIN LÁPIZ) --- */
.avatar-wrapper {
    position: relative;
    width: 40px; height: 40px;
    border-radius: 50%; /* CLAVE: Fuerza al contenedor a ser redondo */
    flex-shrink: 0;
}

.avatar-small {
    width: 100%; height: 100%;
    border-radius: 50%; /* Imagen redonda */
    object-fit: cover; 
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; font-weight: bold; color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* ESTILO PARA TU FOTO (Solo resalte suave) */
.avatar-editable {
    cursor: pointer;
    border-radius: 50%; /* Asegura que el borde de selección sea redondo */
    border: 2px solid transparent; /* Invisible por defecto */
    transition: all 0.2s ease;
}

.avatar-editable:hover {
    transform: scale(1.1); /* Crece un poquito */
    border-color: var(--primary); /* Se pinta el borde verde redondo */
    box-shadow: 0 0 10px rgba(46, 125, 50, 0.2); /* Resplandor suave */
}

/* 🔥 ESTO OCULTA EL LÁPIZ O CÁMARA QUE NO TE GUSTA 🔥 */
.avatar-badge-edit {
    display: none !important;
}

/* ESTILOS PARA TU FOTO EDITABLE */
.avatar-editable {
    cursor: pointer;
    border: 2px solid var(--primary); /* Borde verde para indicar que es tuyo */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.avatar-editable:hover {
    transform: scale(1.15); /* Crece al pasar el mouse */
    box-shadow: 0 4px 10px rgba(46, 125, 50, 0.4);
}

/* BOTÓN DE ACCIÓN */
.btn-view-project {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin-top: 15px;
    background: var(--primary); color: white; padding: 12px; border-radius: 10px;
    text-decoration: none; font-weight: 700; transition: all 0.2s;
    box-shadow: 0 4px 10px rgba(46, 125, 50, 0.2);
}
.btn-view-project:hover { 
    background: var(--primary-dark); 
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(46, 125, 50, 0.3);
}

/* ======================================================
   ESTILOS ESPECÍFICOS DEL MODAL DE PASSWORD (RECUPERADO)
   ====================================================== */
/* Contenedor principal del modal */
.swal-premium-popup {
    border-radius: 20px !important;
    padding: 25px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3) !important;
    background: #fff !important;
}

/* Título con pulsación verde */
.swal-title-pulse {
    font-weight: 800;
    color: #2E7D32; /* Verde EcoLab */
    font-size: 1.6rem;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin-bottom: 5px;
}

/* Contenedor de instrucciones */
.swal-ux-container {
    text-align: center;
    margin-top: 10px;
}

.swal-instruction-text {
    color: #555;
    font-size: 0.95rem;
    margin-bottom: 25px;
    line-height: 1.5;
}

/* Grupos de input para posicionar el ojo */
.swal-input-group {
    position: relative;
    margin-bottom: 15px;
}

/* El input bonito, grande y redondeado */
.custom-password-field {
    width: 100% !important;
    padding: 15px 45px 15px 20px !important; /* Espacio extra a la derecha para el ojito */
    border-radius: 12px !important;
    border: 2px solid #eee !important;
    background: #fafafa !important;
    font-size: 1rem !important;
    color: #333 !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}

.custom-password-field:focus {
    border-color: #2E7D32 !important; /* Borde verde al escribir */
    background: #fff !important;
    box-shadow: 0 4px 10px rgba(46,125,50,0.1) !important;
    outline: none !important;
}

/* El Ojito dentro del input (Posición exacta) */
.swal-eye-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #bbb;
    font-size: 1.3rem;
    z-index: 10;
    transition: color 0.3s;
}

.swal-eye-icon:hover {
    color: #2E7D32; /* Se pone verde al pasar el mouse */
}

/* Botón Guardar animado y verde */
.btn-glow-animate {
    background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%) !important;
    box-shadow: 0 4px 15px rgba(46, 125, 50, 0.4) !important;
    padding: 12px 35px !important;
    font-size: 1rem !important;
    border-radius: 12px !important;
    color: white !important;
    border: none !important;
    font-weight: 700 !important;
}

/* AJUSTE PARA MÓVIL (MODAL PASSWORD) */
@media (max-width: 400px) {
    .custom-password-field {
        font-size: 0.9rem !important; /* Letra un poquito más pequeña */
        padding-right: 40px !important; /* Ajustar padding del ojo */
    }
    .swal-premium-popup {
        padding: 15px !important; /* Menos margen en celular */
    }
}

/* ======================================================
   AJUSTES FINALES PARA MÓVIL (MODAL PASSWORD)
   ====================================================== */
@media (max-width: 400px) {
    /* Ajuste para que el texto del input no choque con el ojo */
    .custom-password-field {
        font-size: 0.9rem !important;
        padding: 12px 40px 12px 15px !important; 
    }
    
    /* Ajuste de márgenes del modal en pantallas estrechas */
    .swal-premium-popup {
        padding: 15px !important;
        width: 90% !important;
    }
}

/* ======================================================
   NUEVO: ESTILOS DE DESEMPEÑO (NIVEL 1 Y 2)
   ====================================================== */

/* Nivel 1: Tarjeta Resumen en Dashboard */
.progress-summary-card {
    background: white;
    padding: 20px;
    border-radius: 16px;
    box-shadow: var(--shadow);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border-left: 5px solid var(--accent); /* Amarillo motivador */
}

.btn-view-details {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    transition: all 0.2s;
}
.btn-view-details:hover {
    background: var(--primary-light);
}

/* Nivel 2: Página de Desempeño */
.btn-back-circle {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid #ddd; background: white;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--primary);
}

.status-card-pedagogical {
    background: white; border-radius: 20px;
    padding: 25px; box-shadow: var(--shadow);
}

.status-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px; padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.points-badge {
    background: #E8F5E9; color: var(--primary);
    padding: 5px 15px; border-radius: 20px;
    font-weight: 800; font-size: 0.9rem;
}

.checklist-item {
    display: flex; align-items: center; gap: 15px;
    padding: 12px; margin-bottom: 8px;
    border-radius: 10px; transition: background 0.2s;
}
.checklist-item.phase-done { background: #F1F8E9; }
.checklist-item.phase-pending { background: #fafafa; color: #888; }

.next-step-box {
    margin-top: 25px;
    background: #FFF8E1; /* Fondo amarillo suave */
    border: 1px solid #FFE0B2;
    padding: 15px; border-radius: 12px;
    display: flex; gap: 15px; align-items: center;
}

/* ======================================================
   7. RÚBRICA DE EVALUACIÓN (MEJORA UX)
   ====================================================== */
/* ... (estilos anteriores de rubric-row, etc.) ... */

/* Círculos de nota */
.score-circle {
    width: 55px; height: 55px; border-radius: 50%;
    background: #f9f9f9; color: #aaa; border: 2px solid #e0e0e0;
    display: flex; justify-content: center; align-items: center;
    font-weight: 800; font-size: 1rem; 
    cursor: pointer; /* SIEMPRE sale manito */
    transition: all 0.2s;
    position: relative;
}

/* INTERACCIÓN EN CÍRCULOS GRISES (Muted) */
.score-circle.muted {
    opacity: 0.6; 
    filter: grayscale(100%);
}

/* Al pasar el mouse por un gris, avisa que se puede tocar */
.score-circle.muted:hover {
    opacity: 1; /* Se ilumina un poco */
    transform: scale(1.1); /* Crece un poquito */
    border-color: #bbb; /* El borde se oscurece */
    background: #fff;
    cursor: pointer; /* Reafirmamos la manito */
}

/* CÍRCULO ACTIVO (Nota real) */
.score-circle.active { 
    background: var(--primary); color: white; border-color: var(--primary); 
    transform: scale(1.2); box-shadow: 0 5px 15px rgba(46, 125, 50, 0.4); 
    z-index: 2; opacity: 1; filter: none;
}

/* --- MEJORA: VISOR DE EVIDENCIAS (MODAL) --- */
.modal-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9); z-index: 10000; /* Fondo más oscuro */
    backdrop-filter: blur(5px);
    justify-content: center; align-items: center;
}

.modal-content {
    position: relative; width: 95%; max-width: 1000px; height: 90vh; /* Ocupa 90% de la altura */
    background: transparent; /* Fondo transparente para resaltar contenido */
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.modal-body-container {
    width: 100%; height: 100%; 
    display: flex; align-items: center; justify-content: center;
    background: white; border-radius: 8px; overflow: hidden; position: relative;
}

.modal-img { width: 100%; height: 100%; object-fit: contain; } /* Imagen se ajusta sin cortarse */
iframe.pdf-viewer { width: 100%; height: 100%; border: none; }

/* Botón X de cerrar */
.modal-close-btn {
    position: absolute; top: -40px; right: 0; 
    color: white; font-size: 2rem; cursor: pointer; 
    background: rgba(255,255,255,0.1); border-radius: 50%;
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    transition: background 0.3s;
}
.modal-close-btn:hover { background: rgba(255,255,255,0.3); }

/* --- MEJORA: BOTONES EN MÓVIL --- */
@media (max-width: 600px) {
    /* Botones de acción (Subir, Finalizar) */
    .btn-mobile-full {
        width: 100% !important;
        justify-content: center !important;
        margin-top: 10px;
    }
    /* Centrar textos en móvil */
    .mobile-center-text { text-align: center !important; }
}

/* =========================================================
   OCULTAR EL BOTÓN NATIVO DE CONTRASEÑA DE LOS NAVEGADORES
   ========================================================= */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none !important;
}

input::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    display: none !important;
    pointer-events: none;
}

/* Color por defecto del ojito de Material Icons */
.toggle-password {
    color: #999;
    cursor: pointer;
    transition: color 0.3s ease;
}

/* Color verde activo cuando la contraseña es visible */
.toggle-password.activo {
    color: #1B5E20; /* Verde institucional */
}