/* ============================================================
   public_base.css — Sistema base compartido (vistas públicas)
   Importar ANTES de los estilos específicos de cada vista.
   ------------------------------------------------------------
   MARCA: Manual de Marca Comfacor v1.0 (2026)
   COMBINACIÓN: "Institucional / formal" (cap. 02)
       · Azul corp. #0f8cea → BASE / dominante (60%): heros, encabezados,
         marca, franjas, enlaces, íconos, focus.
       · Crema      #fbf8f1 → FONDO de contenido (30%): bandas, secciones,
         paneles, fondos de apoyo.
       · Amarillo   #f7c90b → ACENTO (10%): CTA / llamados a la acción y
         destacados — SIEMPRE con texto negro (mayor contraste, manual).
       [+ neutros blanco / crema / tinta #1A1A1A]
   Regla de color 60-30-10. SIN DEGRADADOS (el manual no los usa).
   Tipografía: Poppins. Jerarquía de pesos:
       Bold 700      → titulares (impacto / principal)
       SemiBold 600  → titulares secundarios, botones/CTA
       Medium 500    → subtítulos, etiquetas, nombres de programa
       Regular 400   → cuerpo de texto
       Light 300     → texto de apoyo, notas, créditos
   Tamaños digitales (manual): titular ppal 36–48px · secundario 26–32px ·
       subtítulo/etiqueta 18–22px · cuerpo 14–16px · apoyo 11–13px.
   ----------------------------------------------------------------
   NOTA: los tokens --edu-* conservan sus nombres por compatibilidad con
   las hojas por vista, pero ahora portan la combinación Institucional:
       --edu-base*  = AZUL corporativo (dominante)
       --edu-fondo* = CREMA (fondo de contenido)
       --edu-acento*= AMARILLO (acento / CTA, texto negro) */

:root {
    /* ── Paleta principal Comfacor (cap. 02) ── */
    --azul:          #0f8cea;   /* azul corporativo / institucional */
    --azul-dark:     #0b6fbb;   /* azul accesible para texto/CTA sobre claro */
    --verde:         #6bbf6b;
    --amarillo:      #f7c90b;

    /* ── Combinación Institucional / formal ── */
    --edu-base:      #0f8cea;   /* AZUL corporativo — BASE / dominante (60%) */
    --edu-base-dark: #0b6fbb;   /* azul oscuro — texto/hover con contraste */
    --edu-base-soft: #e7f3fd;   /* azul muy claro — chips/fondos sutiles */
    --edu-fondo:     #f3eee2;   /* crema medio — bordes/chips */
    --edu-fondo-soft:#fbf8f1;   /* crema — fondo de contenido / bandas */
    --edu-acento:    #f7c90b;   /* AMARILLO — ACENTO / CTA (texto negro) */
    --edu-acento-dark:#d9af00;  /* amarillo oscuro — hover de CTA */

    /* ── Neutrales (manual: tinta #1A1A1A, gris #3D3D3A, crema/blanco) ── */
    --ink:          #1A1A1A;
    --gray:         #3D3D3A;
    --crema:        #fbf8f1;
    --white:        #ffffff;
    --gray-50:      #f7f8fb;
    --gray-100:     #eef1f6;
    --gray-200:     #e0e3ec;
    --gray-400:     #9aa1b2;
    --gray-500:     #5f6678;
    --gray-700:     #2c3242;

    --error:        #e23d3d;   /* rojo de marca — para bordes/anillos/íconos (no-texto, ≥3:1) */
    --error-text:   #b91c1c;   /* rojo accesible para TEXTO: ≥4.5:1 sobre blanco y sobre #fdecec (WCAG 1.4.3) */

    /* Borde de campos de formulario con contraste ≥ 3:1 sobre blanco/crema
       (WCAG 1.4.11 Contraste no textual). Reemplaza el gris claro --gray-200
       que solo alcanzaba ~1.2:1 en los límites de los controles. */
    --field-border: #767f91;

    /* ── Alias de compatibilidad (hojas por vista) ──
       Mapeados a la combinación Institucional/formal para que cualquier punto
       no editado siga renderizando en paleta. Para código nuevo/editado,
       preferir los tokens --edu-*. */
    --green:        var(--edu-base);        /* "positivo/verificado" = azul corp. */
    --green-dark:   var(--edu-base);        /* acento de marca dominante = azul */
    --green-light:  var(--edu-base-soft);   /* chip/fondo del acento = azul claro */
    --green-mid:    #9ccbf2;                /* borde hover azul suave */
    --gold:         var(--edu-acento);      /* amarillo (acento/CTA) */
    --gold-mid:     var(--edu-acento);
    --gold-light:   #fef7d6;
    --blue:         var(--azul);
    --blue-light:   var(--edu-fondo);
    --blue-dark:    var(--azul-dark);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── BODY ── */
body {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.6;
    background: var(--white);
    color: var(--ink);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ── TOP NAV ──
   Sección de marca: logosímbolo Comfacor con área de protección (clear space).
   Logosímbolo web ≥ 100px de ancho (Manual cap. 01). */
.topnav {
    background: var(--white);
    padding: 0 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 92px;
    min-height: 92px;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--gray-200);
    box-shadow: 0 1px 10px rgba(26,26,26,0.05);
}

.topnav-left {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    height: 100%;
}

/* Logosímbolo: 60px de alto ≈ 102px de ancho → supera el mínimo web (100px)
   y deja área de protección vertical dentro del nav de 92px. */
.topnav-logo-img {
    width: auto;
    height: 60px;
    object-fit: contain;
    object-position: left center;
    display: block;
    flex-shrink: 0;
}

.topnav-divider {
    width: 1px;
    height: 40px;
    background: var(--gray-200);
    flex-shrink: 0;
}

/* "comfacor | IFC" — nombre de programa en Poppins Medium (Manual cap. 10) */
.topnav-brand {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 1.0625rem;          /* ~17px — subtítulo/etiqueta */
    color: var(--edu-base-dark);
    letter-spacing: 0;
    line-height: 1.2;
}

.topnav-brand span {
    display: block;
    font-size: 0.6875rem;          /* ~11px — apoyo */
    font-weight: 400;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    margin-top: 2px;
}

/* Botón derecho del nav — uso genérico (link o back-link) */
.topnav-link,
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-500);
    text-decoration: none;
    padding: 0.5rem 1.05rem;
    border: 1.5px solid var(--gray-200);
    border-radius: 8px;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
    white-space: nowrap;
}

.topnav-link:hover,
.back-link:hover {
    border-color: var(--edu-base);
    color: var(--edu-base-dark);
    background: var(--edu-base-soft);
}

.topnav-link svg,
.back-link svg { width: 14px; height: 14px; }

/* ── BOTONES ── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9375rem;          /* ~15px */
    font-weight: 600;              /* SemiBold — CTA digital */
    padding: 0.7rem 1.5rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    border: none;
    text-decoration: none;
    line-height: 1.2;
}

.btn svg { width: 16px; height: 16px; }

.btn-secondary {
    background: var(--white);
    border: 1.5px solid var(--gray-200);
    color: var(--gray-700);
}

.btn-secondary:hover  { border-color: var(--gray-400); background: var(--gray-50); }
.btn-secondary:disabled { opacity: 0.4; cursor: not-allowed; }

/* CTA principal = AMARILLO acento (llamado a la acción) con texto negro
   → máxima legibilidad y contraste (manual cap. 02). */
.btn-primary {
    background: var(--edu-acento);
    color: var(--ink);
}

.btn-primary:hover {
    background: var(--edu-acento-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(247,201,11,0.4);
}

/* Acción secundaria = azul corporativo base */
.btn-success {
    background: var(--edu-base-dark);
    color: #fff;
}

.btn-success:hover {
    background: #084e87;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(15,140,234,0.28);
}

/* ── ANIMACIÓN GLOBAL ── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── FOOTER ── */
.page-footer {
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    padding: 1.5rem 2rem;
    text-align: center;
}

.footer-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-500);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-link:hover { color: var(--edu-base-dark); }
.footer-link svg { width: 14px; height: 14px; }

/* ── RESPONSIVE NAV ── */
@media (max-width: 640px) {
    .topnav          { padding: 0 1.25rem; height: 72px; min-height: 72px; }
    .topnav-brand    { display: none; }
    .topnav-divider  { display: none; }
    .topnav-logo-img { height: 48px; }     /* ~82px ancho — espacio reducido */
}

/* ============================================================
   ACCESIBILIDAD — Resolución MinTIC 1519/2020 (WCAG 2.1 AA · NTC 5854)
   ============================================================ */

/* Texto solo para lectores de pantalla (WCAG 1.1.1 / 1.3.1) */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Enlace "Saltar al contenido" — WCAG 2.4.1 Evitar bloques (A) */
.skip-link {
    position: absolute;
    left: 1rem;
    top: -100px;
    z-index: 2000;
    background: var(--edu-base-dark);
    color: #fff;
    padding: 0.7rem 1.25rem;
    border-radius: 0 0 10px 10px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 0;
    outline: 3px solid var(--edu-acento);
    outline-offset: 2px;
}

/* Foco visible global — WCAG 2.4.7 Foco visible (AA) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--edu-base-dark);
    outline-offset: 2px;
    border-radius: 4px;
}
/* Slim Select usa un div con tabindex; :focus-within asegura el indicador */
.ss-main:focus,
.ss-main:focus-visible,
.form-field:focus-within .ss-main {
    outline: 3px solid var(--edu-base-dark);
    outline-offset: 2px;
}
/* Respaldo para navegadores sin :focus-visible */
a:focus, button:focus { outline-offset: 2px; }

/* Asterisco de campo obligatorio (marca visual, oculto a lectores: se usa aria-required) */
.req-mark { color: var(--error-text); font-weight: 700; }

/* Borde accesible para los selects mejorados con Slim Select (WCAG 1.4.11).
   public_base.css se carga después del CSS del vendor, así que gana. */
.ss-main { border-color: var(--field-border) !important; }

/* Respeta la preferencia de menos movimiento — WCAG 2.3.3 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}