/* ============================================================
   1. FUENTES LOCALES (Soberanía Offline)
   ============================================================ */
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Regular.woff2') format('woff2'); font-weight: 400; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Bold.woff2') format('woff2'); font-weight: 700; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Black.woff2') format('woff2'); font-weight: 900; }

/* ============================================================
   2. VARIABLES Y RESET (Identidad UNLP)
   ============================================================ */
:root { 
    --primario: #6b46c1; 
    --fondo: #f8fafc; 
    --blanco: #ffffff; 
    --texto: #1a202c; 
    --danger: #e53e3e; 
    --success: #38a169; 
    --info: #3182ce;
    --borde: #edf2f7;
}

* { 
    box-sizing: border-box; 
    -webkit-tap-highlight-color: transparent; 
    font-family: 'Inter', -apple-system, sans-serif !important;
}

body { 
    margin: 0; 
    background: var(--fondo); 
    color: var(--texto); 
    padding-top: 100px !important; /* Espacio para que el banner no tape nada */
    padding-bottom: 120px; /* Espacio para el footer SOS */
    line-height: 1.6;
}

/* ============================================================
   3. BANNER MAESTRO (Blindaje 90px)
   ============================================================ */
.navbar-fija {
    position: fixed !important;
    top: 0 !important; left: 0 !important; width: 100% !important;
    height: 90px !important;
    background: var(--blanco) !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 20px !important;
    border-bottom: 2px solid var(--borde) !important;
    z-index: 9999 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
}

.logo-container {
    height: 60px !important; width: 60px !important;
    margin-right: 15px !important;
    background: #f1f5f9 !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
    flex-shrink: 0 !important;
}

.logo-app { width: 100% !important; height: 100% !important; object-fit: cover !important; }

.navbar-info h1 { 
    margin: 0 !important; font-size: 20px !important; font-weight: 900 !important; 
    color: var(--primario) !important; line-height: 1.1 !important; letter-spacing: -0.8px !important;
}

.navbar-info p { 
    margin: 3px 0 0 !important; font-size: 10px !important; color: #718096 !important; 
    font-weight: 800 !important; text-transform: uppercase !important; 
}

/* ============================================================
   4. GRILLAS Y BOTONES (Tu Contenido de Tesis)
   ============================================================ */
.contenedor { padding: 0 20px; }

.seccion-titulo { 
    font-size: 11px; font-weight: 900; text-transform: uppercase; 
    color: #a0aec0; letter-spacing: 1.5px; margin: 25px 0 12px 5px; display: block; 
}

/* Botones de Gestión (Triage, Agenda, etc) */
.grid-gestion { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }

.btn-gestion { 
    background: var(--blanco); padding: 20px 10px; border-radius: 24px; 
    text-decoration: none; text-align: center; border: 1px solid var(--borde); 
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.btn-gestion span { font-size: 28px; }
.btn-gestion b { font-size: 12px; color: var(--texto); }

/* Biblioteca de Nodos (Lista Vertical) */
.lista-nodos { display: flex; flex-direction: column; gap: 10px; }

.nodo-item { 
    background: var(--blanco); display: flex; align-items: center; 
    padding: 15px; border-radius: 20px; text-decoration: none; 
    border: 1px solid var(--borde); 
}

.nodo-icon { 
    font-size: 24px; width: 50px; height: 50px; background: #f7fafc; 
    display: flex; align-items: center; justify-content: center; 
    border-radius: 15px; margin-right: 15px; 
}

.nodo-info b { display: block; color: var(--texto); font-size: 16px; font-weight: 800; }
.nodo-info span { font-size: 12px; color: #718096; }

/* ============================================================
   5. FOOTER SOS (Acción en Crisis)
   ============================================================ */
.footer-fixed { 
    position: fixed; bottom: 0; left: 0; width: 100%; 
    background: var(--blanco); padding: 15px 20px 35px; 
    border-top: 2px solid var(--borde); z-index: 1000; 
}

.btn-sos { 
    flex: 1; text-align: center; padding: 15px; border-radius: 15px; 
    text-decoration: none; font-weight: 900; color: white; font-size: 13px; 
}

.btn-sos.red { background: var(--danger); }
.btn-sos.blue { background: var(--info); }

.btn-acerca { 
    display: block; text-align: center; margin-top: 15px; 
    color: #a0aec0; font-size: 11px; text-decoration: none; font-weight: 700; 
}