/* ═══════════════════════════════════════════════════════════════════════════════
   SISTEMA VISUAL · Torre de Control · Distribuidora JF
   ═══════════════════════════════════════════════════════════════════════════════

   Una sola capa de tokens para todos los módulos. Cada .html sigue teniendo sus
   propias variables (--fondo, --bg, --panel, --surface…, nombres que ya usan miles
   de reglas) — lo que cambia es A QUÉ APUNTAN: en el :root de cada módulo se
   remapean a estos --jf-*. Así la piel es una y el layout de cada pantalla no se
   toca. Este archivo se enlaza ANTES del <style> de cada módulo.

   Paleta oficial (Libro de Marca, pág. 9): navy #003153 · azul #1886BF ·
   turquesa #16A5B9 · negro #000000 · gris #B3B3B3 · blanco humo #F2F2F2.
   Los semánticos (verde/ámbar/rojo) no son de marca: se usan solo para estado.

   Reglas de esta capa:
   - Solo tokens y acabados genéricos (foco, scrollbar, selección). Nada que
     mueva un elemento ni cambie su comportamiento.
   - Un solo acento (turquesa). Glow controlado: únicamente en foco y activo.
   - Sin tipografía comercial: Visby es la de marca pero no está licenciada
     (ver CLAUDE.md). La pila la pide primero para que entre sola el día que
     se compre; Poppins es el respaldo geométrico oficial del login.
   ═══════════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Marca ─────────────────────────────────────────────────────────────── */
  --jf-navy:        #003153;
  --jf-blue-600:    #1886BF;
  --jf-blue-500:    #2E9BD6;
  --jf-cyan-500:    #16A5B9;
  --jf-cyan-400:    #3FC1D3;
  --jf-cyan-300:    #7FE6F2;
  --jf-smoke:       #F2F2F2;
  --jf-grey:        #B3B3B3;

  /* ── Profundidad (de más hondo a más cerca del ojo) ─────────────────────── */
  --jf-navy-950:    #04101E;   /* fondo de página                                 */
  --jf-navy-900:    #0A1D33;   /* superficie 1 · cards, paneles                    */
  --jf-navy-800:    #10284A;   /* superficie 2 · elementos levantados, inputs      */
  --jf-navy-700:    #173456;   /* superficie 3 · hover, seleccionado               */
  --jf-surface-1:   var(--jf-navy-900);
  --jf-surface-2:   var(--jf-navy-800);
  --jf-surface-3:   var(--jf-navy-700);
  --jf-surface-glass: rgba(10,29,51,.78);

  /* ── Líneas: hairlines con tinte azul, no gris ─────────────────────────── */
  --jf-border:        rgba(86,164,206,.16);
  --jf-border-strong: rgba(63,193,211,.38);
  --jf-border-subtle: rgba(86,164,206,.09);

  /* ── Texto: neutros con sesgo azul (elegidos, no heredados) ────────────── */
  --jf-text:          #EAF2F8;
  --jf-text-2:        #A9BFD0;
  --jf-text-muted:    #7590A6;
  --jf-text-title:    #DCE9F2;
  --jf-text-on-accent:#03151F;

  /* ── Semánticos (estado, nunca acento) ────────────────────────────────── */
  --jf-success:      #3FBF77;
  --jf-warning:      #E8B33D;
  --jf-danger:       #E4573D;
  --jf-info:         #2E9BD6;
  --jf-success-soft: rgba(63,191,119,.16);
  --jf-warning-soft: rgba(232,179,61,.16);
  --jf-danger-soft:  rgba(228,87,61,.16);
  --jf-info-soft:    rgba(46,155,214,.16);

  /* ── Acento aplicado ──────────────────────────────────────────────────── */
  --jf-accent:        var(--jf-cyan-500);
  --jf-accent-soft:   rgba(22,165,185,.12);
  --jf-accent-line:   rgba(22,165,185,.35);
  --jf-hover:         rgba(86,164,206,.07);

  /* ── Radios ───────────────────────────────────────────────────────────── */
  --jf-r-sm: 8px;
  --jf-r-md: 12px;
  --jf-r-lg: 16px;
  --jf-r-xl: 20px;
  --jf-r-pill: 999px;

  /* ── Sombras y brillo (el brillo es UNO, y solo para foco/activo) ─────── */
  --jf-shadow-sm:  0 2px 8px rgba(0,8,20,.28);
  --jf-shadow-md:  0 8px 24px rgba(0,8,20,.34);
  --jf-shadow-lg:  0 18px 48px rgba(0,8,20,.44);
  --jf-ring:       0 0 0 3px rgba(22,165,185,.22);
  --jf-glow:       0 0 18px rgba(22,165,185,.22);

  /* ── Tipografía ───────────────────────────────────────────────────────── */
  --jf-font-sans: 'Visby','Visby CF','Poppins',-apple-system,'Segoe UI',system-ui,sans-serif;
  --jf-font-mono: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --jf-text-xl:  28px;   /* heading-xl · título de pantalla                */
  --jf-text-lg:  22px;   /* heading-lg · título de sección                 */
  --jf-text-md:  17px;   /* heading-md · título de card                    */
  --jf-text-body:13.5px; /* body                                            */
  --jf-text-sm:  12px;   /* body-sm                                         */
  --jf-text-xs:  11px;   /* caption                                         */
  --jf-text-label:10.5px;/* label · mayúsculas + tracking .07em             */
  --jf-tracking-label: .07em;

  /* ── Movimiento: 150–250 ms, solo transform/opacity/color ─────────────── */
  --jf-dur-fast: 150ms;
  --jf-dur:      200ms;
  --jf-ease:     cubic-bezier(.2,.8,.2,1);
}

/* Modo claro: solo lo usa Ventas (Mario) con su propio interruptor. Se redefine
   la misma familia de tokens para que ese módulo siga resolviendo igual. */
:root[data-theme="light"]{
  --jf-navy-950:    #EEF3F6;
  --jf-navy-900:    #FFFFFF;
  --jf-navy-800:    #F4F7F9;
  --jf-navy-700:    #E6EDF2;
  --jf-surface-glass: rgba(255,255,255,.86);
  --jf-border:        rgba(0,49,83,.13);
  --jf-border-strong: rgba(0,49,83,.28);
  --jf-border-subtle: rgba(0,49,83,.07);
  --jf-text:          #0F2436;
  --jf-text-2:        #475966;
  --jf-text-muted:    #7C8994;
  --jf-text-title:    #003153;
  --jf-text-on-accent:#FFFFFF;
  --jf-hover:         rgba(0,49,83,.05);
  --jf-shadow-sm:  0 2px 8px rgba(0,49,83,.08);
  --jf-shadow-md:  0 8px 24px rgba(0,49,83,.10);
  --jf-shadow-lg:  0 18px 48px rgba(0,49,83,.14);
}

/* ═══ Acabados genéricos (no mueven nada) ═══════════════════════════════════ */

/* Iconos de línea: mismo trazo y proporción en todo el sistema. */
.jf-ico{display:inline-flex;align-items:center;justify-content:center;flex:none;line-height:0}
.jf-ico svg{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* Insignia circular para íconos (la firma visual de la referencia). */
.jf-ico-badge{display:inline-flex;align-items:center;justify-content:center;flex:none;
  border-radius:var(--jf-r-md);background:var(--jf-accent-soft);border:1px solid var(--jf-accent-line);color:var(--jf-cyan-400)}

/* Foco visible y coherente en todo control, sin cambiar su tamaño. */
:where(button,a,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--jf-cyan-400);outline-offset:2px;border-radius:var(--jf-r-sm)}

/* Selección de texto y barras de scroll en la paleta. */
::selection{background:rgba(22,165,185,.35);color:var(--jf-text)}
*{scrollbar-width:thin;scrollbar-color:rgba(86,164,206,.28) transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-thumb{background:rgba(86,164,206,.28);border-radius:999px}
*::-webkit-scrollbar-thumb:hover{background:rgba(86,164,206,.45)}
*::-webkit-scrollbar-track{background:transparent}

@media (prefers-reduced-motion:reduce){
  :root{--jf-dur-fast:1ms;--jf-dur:1ms}
}