/* =========================================================================
   base.css — sistema de diseño del sitio público
   =========================================================================
   Única fuente de verdad para color, tipografía, espaciado y sombras.

   POR QUÉ EXISTE: 58 de ~75 archivos de vistas/ repetían su propio bloque
   <style> con la paleta y el navbar. Cambiar un color implicaba editar 58
   archivos y confiar en no olvidar ninguno.

   CÓMO USARLO: cárgalo ANTES del CSS propio de cada página, y usa las
   variables en vez de escribir colores a mano.

       <link rel="stylesheet" href="assets/css/base.css">
       <link rel="stylesheet" href="assets/css/inicio.css">

   MODO OSCURO: los colores están en dos capas. Los tokens de MARCA (--azul,
   --cian…) no cambian nunca — un logo no cambia de color al anochecer. Los
   tokens SEMÁNTICOS (--fondo, --texto, --superficie…) sí. Si escribes
   var(--fondo) en vez de #fff, el modo oscuro te sale gratis.
   ========================================================================= */

:root {
    /* ----- MARCA: constantes, iguales en claro y oscuro ----- */
    --azul:        #0056b3;   /* primario histórico del sitio */
    --azul-hondo:  #14203b;   /* azul noche de cabeceras */
    --cian:        #17a2b8;   /* secundario histórico */
    --cian-vivo:   #22d3ee;   /* trazo del monitor; más luminoso que --cian */
    --ambar:       #ffc107;   /* acento */
    --naranja:     #ff8c22;   /* resalte al pasar el cursor: complementario del
                                 cian, y con texto negro da 8.9:1 de contraste */
    --verde:       #34d399;   /* señal "en vivo", constantes normales */
    --rosa:        #f472b6;
    --rojo:        #ef4444;   /* solo para errores reales */

    /* ----- SEMÁNTICOS: tema claro (por defecto) ----- */
    --fondo:        #f0f4f8;
    --superficie:   #ffffff;
    --superficie-2: #e9eff6;
    --borde:        rgba(20, 32, 59, .12);
    --texto:        #1f2937;
    --texto-tenue:  #5b6b85;
    --titulo:        #14203b;
    --sombra-sm: 0 1px 3px rgba(0,0,0,.08);
    --sombra:    0 4px 15px rgba(0,0,0,.10);
    --sombra-lg: 0 10px 40px rgba(0,0,0,.12);

    /* ----- ESCALAS ----- */
    --r-sm: 8px;  --r: 12px;  --r-lg: 18px;  --r-full: 999px;
    --e-1: 4px; --e-2: 8px; --e-3: 16px; --e-4: 24px; --e-5: 40px; --e-6: 64px; --e-7: 96px;

    --fuente: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --transicion: .3s cubic-bezier(.4, 0, .2, 1);
    --ancho-max: 1200px;

    /* Le dice al navegador que esta página gestiona su propio tema.
       Sin esta línea, Chrome aplica su "modo oscuro automático" y repinta la
       página por su cuenta: el modo claro se veía oscuro y ni siquiera un
       background-color !important en línea lo evitaba. Además hace que
       formularios, scrollbars y menús nativos acompañen al tema. */
    color-scheme: light;
}

/* El atributo lo pone el conmutador; el media query cubre la primera visita
   de quien ya tiene el sistema en oscuro y aún no ha elegido nada. */
:root[data-tema="oscuro"] {
    --fondo:        #070d1a;
    --superficie:   #0e1626;
    --superficie-2: #141f33;
    --borde:        rgba(148, 180, 220, .16);
    --texto:        #e8eef7;
    --texto-tenue:  #92a5c0;
    --titulo:        #e8eef7;
    color-scheme: dark;
    --sombra-sm: 0 1px 3px rgba(0,0,0,.5);
    --sombra:    0 4px 18px rgba(0,0,0,.55);
    --sombra-lg: 0 14px 46px rgba(0,0,0,.6);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        --fondo:        #070d1a;
        --superficie:   #0e1626;
        --superficie-2: #141f33;
        --borde:        rgba(148, 180, 220, .16);
        --texto:        #e8eef7;
        --texto-tenue:  #92a5c0;
        --titulo:        #e8eef7;
        color-scheme: dark;
        --sombra-sm: 0 1px 3px rgba(0,0,0,.5);
        --sombra:    0 4px 18px rgba(0,0,0,.55);
        --sombra-lg: 0 14px 46px rgba(0,0,0,.6);
    }
}

/* ===== RESET ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--fuente);
    background: var(--fondo);
    color: var(--texto);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    transition: background var(--transicion), color var(--transicion);
}
a { color: inherit; text-decoration: none; }
img, picture, video, canvas { max-width: 100%; display: block; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* Foco visible SIEMPRE. Quitarlo deja el sitio inutilizable con teclado, que es
   justo como navega parte de la gente con discapacidad motora. */
:focus-visible { outline: 3px solid var(--cian-vivo); outline-offset: 2px; border-radius: 4px; }

/* ===== UTILIDADES ===== */
.dr-env { max-width: var(--ancho-max); margin: 0 auto; padding: 0 var(--e-4); }
.dr-centrado { text-align: center; }
.dr-seccion { padding: var(--e-7) 0; }
@media (max-width: 700px) { .dr-seccion { padding: var(--e-6) 0; } }

/* Visible solo para lectores de pantalla. */
.dr-solo-lectores {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Salto al contenido: primer tabulador de la página, oculto hasta enfocarse. */
.dr-saltar {
    position: absolute; left: -9999px; top: 0; z-index: 2000;
    background: var(--azul); color: #fff; padding: 12px 20px;
    border-radius: 0 0 var(--r-sm) 0; font-weight: 700;
}
.dr-saltar:focus { left: 0; }

/* ===== ANIMACIÓN DE ENTRADA ===== */
.dr-revelar { opacity: 0; transform: translateY(26px); transition: opacity .7s, transform .7s; }
.dr-revelar.visible { opacity: 1; transform: none; }

/* Respetar a quien pide menos movimiento no es un detalle: el movimiento
   dispara náuseas y migraña en personas con trastornos vestibulares. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .dr-revelar { opacity: 1; transform: none; }
}

/* =========================================================================
   NAVBAR PÚBLICO  (vistas/parciales/navbar_publico.php)
   Prefijo .dr-nav para no chocar con el .navbar propio de cada página
   mientras dure la migración.
   ========================================================================= */
.dr-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    display: flex; align-items: center; gap: var(--e-3);
    padding: 14px var(--e-5);
    transition: background var(--transicion), padding var(--transicion), box-shadow var(--transicion);
    background: transparent;
}
/* Sobre el hero (oscuro) el texto va en blanco; al bajar, la barra se vuelve
   sólida y adopta los colores del tema. */
.dr-nav a, .dr-nav .dr-nav-boton { color: rgba(255,255,255,.88); }
.dr-nav.solida {
    background: color-mix(in srgb, var(--fondo) 88%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--borde);
    padding: 9px var(--e-5);
    box-shadow: var(--sombra-sm);
}
.dr-nav.solida a, .dr-nav.solida .dr-nav-boton { color: var(--texto); }

.dr-nav-marca {
    display: flex; align-items: center; gap: 10px; margin-right: auto;
    font-size: 20px; font-weight: 800; letter-spacing: -.4px; white-space: nowrap;
}
.dr-nav-sig {
    width: 36px; height: 36px; border-radius: 10px; flex: none;
    display: grid; place-items: center; font-size: 19px; font-weight: 900;
    background: linear-gradient(135deg, var(--cian-vivo), var(--azul));
    color: #04121f;
}
.dr-nav-acciones { display: flex; align-items: center; gap: var(--e-2); order: 3; }
.dr-nav-boton {
    width: 42px; height: 42px; border-radius: var(--r-sm); flex: none;
    display: grid; place-items: center; font-size: 16px;
    background: rgba(255,255,255,.12); border: 1px solid transparent;
    transition: var(--transicion);
}
.dr-nav.solida .dr-nav-boton { background: var(--superficie-2); border-color: var(--borde); }
.dr-nav-boton:hover { border-color: var(--cian-vivo); transform: translateY(-2px); }

.dr-nav-menu { display: flex; align-items: center; gap: 2px; }
.dr-nav-menu a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 13px; border-radius: var(--r-sm);
    font-size: 14.5px; font-weight: 600; white-space: nowrap;
    transition: var(--transicion);
}
.dr-nav-menu a.activo { color: var(--cian-vivo); }
.dr-nav-menu a i { font-size: 13px; opacity: .8; }
.dr-nav-hamburguesa { display: none; }
.dr-nav-velo { display: none; }

/* El menú completo no cabe por debajo de ~1150px: pasa a panel lateral. */
@media (max-width: 1150px) {
    .dr-nav { padding: 12px var(--e-3); }
    .dr-nav.solida { padding: 9px var(--e-3); }
    .dr-nav-hamburguesa { display: grid; }
    .dr-nav-menu {
        position: fixed; inset: 0 0 0 auto; width: min(310px, 84vw);
        flex-direction: column; align-items: stretch; justify-content: flex-start;
        gap: var(--e-1); padding: 92px var(--e-3) var(--e-3);
        background: var(--superficie); border-left: 1px solid var(--borde);
        box-shadow: var(--sombra-lg);
        transform: translateX(100%); transition: transform var(--transicion);
        overflow-y: auto;
    }
    .dr-nav-menu.abierto { transform: none; }
    .dr-nav .dr-nav-menu a,
    .dr-nav.solida .dr-nav-menu a { color: var(--texto); padding: 14px 16px; font-size: 16px; }
    .dr-nav-menu a i { width: 22px; text-align: center; font-size: 15px; opacity: 1; color: var(--cian); }
    .dr-nav-velo {
        display: block; position: fixed; inset: 0; z-index: -1;
        background: rgba(4, 10, 20, .55); backdrop-filter: blur(2px);
    }
    .dr-nav-velo[hidden] { display: none; }
}

/* ----- Resalte del menú al pasar el cursor -----
   Va DESPUÉS del bloque móvil a propósito. Dentro de ese @media hay una regla
   `.dr-nav .dr-nav-menu a { color: … }` con más peso que un simple
   `.dr-nav-menu a:hover`; si el hover se declarara antes, el color del texto
   ganaría la partida en pantallas pequeñas y el naranja saldría con las letras
   claras encima. Aquí, a igual peso, manda el que va después.

   Se incluye :focus-visible para que quien navega con el teclado vea
   exactamente el mismo resalte que quien usa el ratón. */
.dr-nav .dr-nav-menu a:hover,
.dr-nav .dr-nav-menu a:focus-visible,
.dr-nav.solida .dr-nav-menu a:hover,
.dr-nav.solida .dr-nav-menu a:focus-visible {
    background: var(--naranja);
    color: #000;
}
/* El enlace de la página actual es cian; al pasarle por encima manda el naranja. */
.dr-nav .dr-nav-menu a.activo:hover,
.dr-nav .dr-nav-menu a.activo:focus-visible { color: #000; }

/* Los iconos van atenuados en reposo y en color propio dentro del panel móvil:
   sobre el naranja tienen que volverse negros como el texto. */
.dr-nav .dr-nav-menu a:hover i,
.dr-nav .dr-nav-menu a:focus-visible i { color: #000; opacity: 1; }

/* =========================================================================
   PIE PÚBLICO  (vistas/parciales/footer_publico.php)
   -------------------------------------------------------------------------
   Portado desde inicio.css, donde vivía como .footer. Prefijo .dr-pie a
   propósito: `.footer` ya está definida con reglas DISTINTAS en inicio.css, en
   el <style> de biblioteca_publica.php y en servicio*.php. Reutilizar ese
   nombre daría colisiones de especificidad según qué CSS cargue cada página.

   El pie es oscuro en ambos temas: es un cierre visual, no una superficie de
   lectura, y en claro hace de suelo. Por eso usa colores fijos y no --texto.
   ========================================================================= */
.dr-pie {
    background: linear-gradient(180deg, #0f1830 0%, var(--azul-hondo) 100%);
    color: #d6e0ee;
    padding: var(--e-6) 0 0;
    margin-top: auto;   /* pie pegajoso si el body es flex (biblioteca lo es) */
}
.dr-pie-rejilla {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
    gap: 36px;
}
.dr-pie-col h4 {
    color: #fff;
    font-size: 17px; font-weight: 700;
    margin-bottom: 18px; padding-bottom: 8px;
    border-bottom: 2px solid color-mix(in srgb, var(--ambar) 40%, transparent);
    display: inline-block;
}
.dr-pie-col p { font-size: 14px; line-height: 1.7; margin-bottom: 12px; color: #c8d3e4; }
.dr-pie-col a {
    color: #d3ddec; display: block; font-size: 14px; margin-bottom: 11px;
    transition: var(--transicion);
}
.dr-pie-col a:hover { color: var(--ambar); padding-left: 6px; }

.dr-pie-dato {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14px; color: #cfdaeb; margin-bottom: 12px; line-height: 1.5;
}
.dr-pie-dato i { color: var(--ambar); margin-top: 3px; width: 16px; flex-shrink: 0; text-align: center; }

.dr-pie-redes { display: flex; gap: 12px; margin-top: 16px; }
.dr-pie-redes a {
    width: 38px; height: 38px; border-radius: 50%; margin: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.08); color: #fff;
    transition: var(--transicion);
}
.dr-pie-redes a:hover { background: var(--ambar); color: var(--azul-hondo); transform: translateY(-3px); padding-left: 0; }

.dr-pie-abajo {
    border-top: 1px solid rgba(255,255,255,.1);
    margin-top: 44px; padding: 20px;
    text-align: center; font-size: 13px; color: #aeb9cc;
}
.dr-pie-visitas {
    display: inline-block; margin-top: 8px;
    background: rgba(255,255,255,.08);
    padding: 4px 14px; border-radius: var(--r-full); font-size: 12px;
}

@media (max-width: 992px) { .dr-pie-rejilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 576px) { .dr-pie-rejilla { grid-template-columns: 1fr; } }