/* ============================================================================
   Tema CELESTE — portal de superadministración de LOF.

   POR QUÉ EXISTE: el login de LOF y el de usuarios internos compartían
   `login_admin.css` (indigo/violeta) y quedaban idénticos, así que era fácil
   entrar al portal equivocado sin mirar. Este archivo desplaza la marca de LOF
   al azul celeste conservando la MISMA escala y vibración del degradado, y la
   extiende al encabezado y al menú lateral para que el portal se reconozca de
   un vistazo, entres por donde entres.

   ALCANCE: se carga SOLO en `templates/login.html` y `templates/dashboard.html`
   (portal de LOF). El resto de los portales conserva el indigo — esa diferencia
   ES la señal. No agregar este archivo a otros templates.

   Los tokens van en `:root` a propósito: `login_suscriptor.css` resuelve sus
   `--ls-*` ahí, y si se definieran en `body` heredarían el indigo ya resuelto.
   Las reglas de estructura sí van acotadas a `.lof-portal` por seguridad.

   Cargar DESPUÉS de style.css / login_admin.css. Sin estilos inline (CSP).

   Escala: sky de Tailwind, paso a paso equivalente al indigo que reemplaza
     indigo-500 #6366f1 → sky-500 #0ea5e9      indigo-600 #4f46e5 → sky-600 #0284c7
     indigo-900 #312e81 → sky-900 #0c4a6e      indigo-950 #1e1b4b → sky-950 #082f49
   ========================================================================== */

:root {
  /* ── Acento: foco, bordes, enlaces ──────────────────────────────────────────
     sky-600, no sky-500: el celeste puro (#0ea5e9) da 2.77:1 sobre blanco y no
     alcanza ni el 3:1 que exige WCAG para elementos no textuales (anillos de
     foco, bordes). sky-600 da 4.10:1 y mantiene la vibración. */
  --brand-color-primary:          #0284c7;   /* sky-600 */
  --brand-color-primary-hover:    #0369a1;   /* sky-700 — enlaces en hover: 5.93:1 */

  /* ── Lienzo del login ───────────────────────────────────────────────────── */
  --brand-body-bg:                #eaf4fd;

  /* ── Encabezado fijo ────────────────────────────────────────────────────── */
  --brand-nav-bg:                 #0c4a6e;   /* sky-900  */
  --brand-nav-text:               #ffffff;
  --brand-nav-border:             rgba(255,255,255,0.10);
  --brand-nav-hamburger-bg:       rgba(255,255,255,0.10);
  --brand-nav-hamburger-hover-bg: rgba(255,255,255,0.20);

  /* ── Menú lateral: un paso más profundo que el encabezado (jerarquía) ───── */
  --brand-sidebar-bg:             #082f49;   /* sky-950  */
  --brand-sidebar-text:           #cfe6f7;
  --brand-sidebar-border:         rgba(255,255,255,0.08);
  --brand-sidebar-hover-bg:       rgba(125,211,252,0.10);
  --brand-sidebar-active-bg:      #0369a1;   /* sky-700  */
  --brand-sidebar-active-text:    #ffffff;
  --brand-sidebar-accent:         #7dd3fc;   /* sky-300 — iconos y foco */
  --brand-sidebar-group-bg:       rgba(255,255,255,0.04);
  --brand-sidebar-group-hover-bg: rgba(125,211,252,0.12);
  --brand-sidebar-group-text:     #bae6fd;   /* sky-200 */

  /* ── Formularios del login ──────────────────────────────────────────────── */
  --brand-form-card-bg:           #ffffff;
  --brand-form-title:             #082f49;
  --brand-form-label:             #475569;   /* slate-600: neutro a propósito */
  --brand-form-border:            #dce9f4;
  --brand-form-input-bg:          #f5fafd;
  --brand-form-input-border:      #d8e7f3;
}

/* ── Hero del login: misma composición que el indigo (dos brillos radiales +
      degradado de 3 paradas), trasladada al celeste. El fucsia de contrapunto
      pasa a cian para no salirse de la familia. ──────────────────────────── */
.lof-portal .la-hero.ls-brand {
  background:
    radial-gradient(720px 480px at 86% 6%,  rgba(125,211,252,0.45), transparent 60%),
    radial-gradient(680px 520px at 6% 112%, rgba(34,211,238,0.30), transparent 58%),
    linear-gradient(145deg, #0ea5e9 0%, #0369a1 48%, #0c4a6e 100%);
}
.lof-portal .la-hero .ls-brand-glow {
  background: radial-gradient(closest-side, rgba(186,230,253,0.55), transparent);
}

/* Botón primario del login: el degradado por defecto arranca en el acento, y con
   texto blanco encima eso no llega a 4.5:1. Se baja un paso de la escala para
   cumplir WCAG AA (5.93:1 arriba, 7.56:1 abajo) sin salirse del celeste. */
.lof-portal .ls-btn-primary {
  background: linear-gradient(180deg, #0369a1, #075985);
  box-shadow: 0 8px 18px rgba(3,105,161,0.28);
}
.lof-portal .ls-btn-primary:hover {
  box-shadow: 0 10px 24px rgba(3,105,161,0.40);
}

/* ── Interior: el encabezado repite el degradado del hero en horizontal, para
      que el login y la consola se lean como la misma marca. ─────────────── */
.lof-portal .header {
  background-image: linear-gradient(100deg, #082f49 0%, #0c4a6e 45%, #0369a1 100%);
}

/* ── Marca en la cabecera: TEXTO, no imagen ──────────────────────────────────
   `logolof.jpg` es JPG y no admite canal alfa: arrastra su propio fondo sólido y
   corta el degradado celeste. Un wordmark en texto se funde con el fondo, escala
   nítido en cualquier pantalla y no descarga nada.

   Peso 400 a propósito: de `geologica` solo está cargado el regular (ver
   fonts.css). Pedir negrita haría que el navegador la sintetice (faux bold) y a
   este tamaño se ve sucia; la presencia se logra con tamaño y letter-spacing.
   Si se quiere más peso, agregar el .woff2 bold de Geologica y subir el weight. */
.lof-portal .lof-wordmark {
  font-family: 'geologica', 'Inter-tight', Calibri, Arial, sans-serif;
  /* 2rem = 32px contra los 24px del <h2>: la marca manda sobre el título. */
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1;
  color: #ffffff;
  flex-shrink: 0;
  user-select: none;
  /* El letter-spacing agrega aire tras la última letra: se compensa para que la
     marca quede ópticamente alineada con el borde izquierdo. */
  margin-right: -0.14em;
}

/* El título acompaña, no compite: sin negrita y con un peso por debajo de la
   marca. El <h2> trae `bold` del navegador y la media query de style.css se lo
   refuerza, así que se apunta al h2 directamente para ganarles a ambos. */
.lof-portal .header h2 {
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* En pantallas chicas la marca cede tamaño, pero nunca por debajo del título. */
@media (max-width: 480px) {
  .lof-portal .lof-wordmark { font-size: 1.6rem; }
}

/* El menú lateral cierra la escala hacia el tono más profundo. */
.lof-portal .sidebar {
  background-image: linear-gradient(200deg, #0c4a6e 0%, #082f49 55%);
}

/* Realce sutil del ítem activo, coherente con el acento celeste. */
.lof-portal .sidebar a.activo,
.lof-portal .sidebar .load-view.activo {
  box-shadow: inset 3px 0 0 0 var(--brand-sidebar-accent, #7dd3fc);
}