/*
 * _theme.css — Paleta canónica IntGuard
 *
 * Importar en cualquier página con:
 *   <link rel="stylesheet" href="/static/_theme.css">
 *
 * Mismas variables que el bloque :root duplicado en Landing.html.
 * Páginas que necesitan light-mode coherente deben:
 *   1. Cargar este archivo.
 *   2. Cargar /static/js/theme.js (toggle + persistencia).
 *   3. Usar var(--azul), var(--fondo)… en lugar de hex literales.
 *
 * Si una página redefine alguna variable en su propio :root, gana
 * (cascada CSS). Este archivo solo define el fallback canónico.
 */

:root {
    --azul:         #38bdf8;
    --azul2:        #7dd3fc;
    --verde:        #4ade80;
    --morado:       #a78bfa;
    --rojo:         #f87171;
    --amber:        #fbbf24;
    --fondo:        #0a0e1a;
    --fondo2:       #0f172a;
    --fondo3:       #1e293b;
    --borde:        #334155;
    --texto:        #e2e8f0;
    --apagado:      #94a3b8;
    --glass:        rgba(15, 23, 42, 0.6);
    --glass-border: rgba(56, 189, 248, 0.15);
}

/* Light mode: contraste WCAG AA. Colores más oscuros para legibilidad
   sobre fondo claro. Sin tocar las variables que se quedan iguales. */
html[data-theme="light"] {
    --azul:         #1e40af;
    --azul2:        #2563eb;
    --verde:        #15803d;
    --morado:       #7c3aed;
    --rojo:         #dc2626;
    --amber:        #b45309;
    --fondo:        #f8fafc;
    --fondo2:       #ffffff;
    --fondo3:       #f1f5f9;
    --borde:        rgba(15, 23, 42, 0.12);
    --texto:        #0f172a;
    --apagado:      #475569;
    --glass:        rgba(255, 255, 255, 0.85);
    --glass-border: rgba(15, 23, 42, 0.08);
}

/* ── Accesibilidad global ─────────────────────────────────────────
   .ah-skip-link — WCAG 2.4.1 "Bypass Blocks". Oculto fuera de
   viewport por defecto; al recibir foco (Tab) salta a la esquina
   superior izquierda y se hace visible. Vive en _theme.css (no en
   app-header.css) porque también lo usan páginas sin app-header
   (Landing, Login, Admin, Facturacion, etc.). */
.ah-skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--azul);
    color: var(--fondo);
    padding: 10px 18px;
    font: 600 14px/1 'Segoe UI', system-ui, sans-serif;
    text-decoration: none;
    z-index: 99999;
    transition: top .15s cubic-bezier(.2,.6,.2,1);
}
.ah-skip-link:focus {
    top: 0;
    outline: 3px solid var(--fondo);
    outline-offset: 0;
}
@media (prefers-reduced-motion: reduce) {
    .ah-skip-link { transition: none; }
}

/* .sr-only — contenido accesible para lectores de pantalla pero
   visualmente oculto (etiquetas implícitas, instrucciones, etc.). */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   ── .ig-logo — Logo IntGuard adaptativo al tema activo ──────
   ============================================================
   Mecanismo de tema (definido en /static/js/theme.js):
       - DEFAULT (sin atributo o data-theme="dark"): tema oscuro
       - html[data-theme="light"]:                   tema claro

   Por defecto se muestra la versión HOLOGRAMA azul (dark);
   cuando html lleva data-theme="light" se intercambia al
   monograma NAVY con bisel dorado (light).

   Uso típico:
       <a href="/" class="ig-logo" aria-label="IntGuard — Inicio">
           <img class="ig-logo-img ig-logo--light" src="/static/img/logo-intguard-light.png" alt="IntGuard">
           <img class="ig-logo-img ig-logo--dark"  src="/static/img/logo-intguard-dark.png"  alt="">
       </a>

   El alt vacío en la 2ª <img> evita doble lectura por lectores de
   pantalla (sólo una variante es visible a la vez).
   ============================================================ */

.ig-logo {
    display: inline-block;
    line-height: 0;
    text-decoration: none;
}

.ig-logo-img {
    height: 30px;            /* navbar default — override por contexto */
    width: auto;
    display: block;
    animation: ig-float 4s ease-in-out infinite;
    transition: filter .35s ease;
    will-change: transform;
}

/* ── Conmutación según tema ──────────────────────────────────── */
/* DEFAULT (= tema oscuro): muestra dark, oculta light. */
.ig-logo--light { display: none; }
.ig-logo--dark  { display: block; }

/* TEMA CLARO (html data-theme="light"): invierte. */
html[data-theme="light"] .ig-logo--light { display: block; }
html[data-theme="light"] .ig-logo--dark  { display: none; }

/* ── Brillo cyan al hover (válido para ambas variantes) ─────── */
.ig-logo-img:hover {
    filter: drop-shadow(0 0 16px rgba(34, 211, 238, 0.85));
}

/* ── Float suave: 8px arriba/abajo en bucle infinito ────────── */
@keyframes ig-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* ── A11y: respeta prefers-reduced-motion del usuario ───────── */
@media (prefers-reduced-motion: reduce) {
    .ig-logo-img {
        animation: none;
    }
    /* El hover sí se respeta (es transición instantánea, no animación
       en bucle): el feedback visual al pasar el ratón sigue funcionando. */
}