/* ═══════════════════════════════════════════════════════════════
   PORTAL JVE · Tokens centralizados (V1 firmado 2026-04-19)
   Cambiar aquí afecta a todo el Portal rediseñado.
   Marca intocable: navy / gold / coral / bg + verde estado.
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* Colores marca — INTOCABLES */
  --jve-navy:   #0f172a;
  --jve-gold:   #c9a84c;
  --jve-coral:  #c4421a;
  --jve-bg:     #f9ede7;

  /* Estados */
  --jve-green:  #138a5f;
  --jve-red:    #b91c1c;  /* solo errores técnicos */

  /* Variaciones soft (fondos sutiles) */
  --gold-soft:  rgba(201,168,76,.12);
  --coral-soft: rgba(196,66,26,.10);
  --green-soft: rgba(19,138,95,.12);
  --navy-soft:  rgba(15,23,42,.04);

  /* Aliases cortos · permiten usar var(--coral) etc. en CUALQUIER
     ámbito (desktop topbar, popovers, modales globales…), no solo
     dentro de los componentes móviles `.m-*-v33` que los redeclaran.
     Mantén estos alias siempre apuntando al token marca oficial. */
  --coral:      var(--jve-coral);
  --gold:       var(--jve-gold);
  --green:      var(--jve-green);
  --red:        var(--jve-red);
  --slate:      #64748b;

  /* Neutros */
  --ink:        #0f172a;
  --slate-700:  #334155;
  --slate-600:  #475569;
  --slate-500:  #64748b;
  --slate-400:  #94a3b8;
  --slate-300:  #cbd5e1;
  --paper:      #ffffff;
  --paper-soft: #f8f7f4;
  --ash:        #edeae4;
  --line:       rgba(15,23,42,.08);
  --line-strong:rgba(15,23,42,.14);

  /* Sidebar oscura */
  --sb-bg:      #0f172a;
  --sb-fg:      #94a3b8;
  --sb-fg-hov:  #ffffff;
  --sb-fg-on:   #c9a84c;
  --sb-line:    rgba(255,255,255,.08);

  /* Tipografía */
  --font-sans:  'Outfit', system-ui, -apple-system, sans-serif;
  --font-serif: 'Fraunces', Georgia, serif;
  --font-mono:  ui-monospace, 'SF Mono', Menlo, monospace;

  /* Escala tipográfica */
  --fs-xs:  11px;
  --fs-sm:  12.5px;
  --fs-md:  14px;
  --fs-lg:  16px;
  --fs-xl:  20px;
  --fs-2xl: 26px;
  --fs-3xl: 34px;
  --fs-4xl: 44px;

  /* Espaciado (escala 4px) */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* Radios */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 14px;  --r-xl: 18px;  --r-pill: 999px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 4px 12px rgba(15,23,42,.06);
  --shadow-lg: 0 20px 40px rgba(15,23,42,.12);

  /* Layout */
  --sb-width:   240px;
  --stage-max:  1100px;
  --topbar-h:   60px;
  --bottom-h:   64px;
}