/*
 * ============================================================
 *  TOTESITO — Design Tokens v1.0
 *  Generado: Mayo 2026
 *  Uso: Importar en el proyecto como primer stylesheet.
 *       @import url('tokens.css');
 * ============================================================
 */

/* ─── MODO CLARO (por defecto) ─────────────────────────────── */
:root {

  /* --- COLORES PRIMARIOS --- */
  --color-brand-orange:       #FF6B1A;   /* Naranja Totesito — CTAs, botones primarios */
  --color-brand-orange-soft:  #FF9A5C;   /* Naranja Suave — hover, estados activos */
  --color-brand-blue:         #0055B3;   /* Azul Profundo — navbar, headers, estructura */
  --color-brand-blue-mid:     #3380D4;   /* Azul Juvenil — links, elementos secundarios */
  --color-brand-amber:        #FFB347;   /* Ámbar Solar — badges, highlights, notificaciones */

  /* --- SUPERFICIES Y FONDOS (modo claro) --- */
  --color-bg-page:            #F5F8FF;   /* Fondo principal de página */
  --color-bg-surface:         #FFFFFF;   /* Tarjetas, modales, paneles */
  --color-bg-warm:            #FFF3E5;   /* Tarjetas cálidas, secciones destacadas */
  --color-bg-cool:            #E8F0FB;   /* Secciones informativas, alternadas */
  --color-bg-navy:            #0D1B2E;   /* Header oscuro / hero oscuro en modo claro */

  /* --- TEXTO (modo claro) --- */
  --color-text-primary:       #1A2E4A;   /* Títulos y texto principal */
  --color-text-body:          #3D4A5C;   /* Párrafos y cuerpo */
  --color-text-muted:         #7A8A9A;   /* Metadatos, captions, placeholders */
  --color-text-inverse:       #FFFFFF;   /* Texto sobre fondos oscuros */
  --color-text-orange:        #CC4A08;   /* Texto naranja sobre fondo claro */
  --color-text-blue:          #003D85;   /* Texto azul sobre fondo claro */
  --color-text-amber:         #854F0B;   /* Texto ámbar sobre fondo claro */

  /* --- BORDES (modo claro) --- */
  --color-border-default:     #D0DCF0;   /* Bordes de tarjetas y contenedores */
  --color-border-strong:      #A8BEDC;   /* Bordes enfatizados, hover */
  --color-border-orange:      #FFD4B0;   /* Bordes de elementos naranja */

  /* --- COLORES FUNCIONALES (iguales en ambos modos) --- */
  --color-success:            #1ECC8B;   /* Éxito, completado, aprobado */
  --color-success-bg:         #E8FBF4;   /* Fondo de estado éxito */
  --color-success-text:       #0F6E56;   /* Texto en fondo éxito */
  --color-danger:             #F0453A;   /* Error, alerta, eliminación */
  --color-danger-bg:          #FDEEEE;   /* Fondo de estado error */
  --color-danger-text:        #8B1A1A;   /* Texto en fondo error */
  --color-warning:            #FFB347;   /* Advertencia, pendiente */
  --color-warning-bg:         #FFF3E5;   /* Fondo de estado advertencia */
  --color-warning-text:       #7A3D00;   /* Texto en fondo advertencia */
  --color-neutral:            #B4B2A9;   /* Deshabilitado, bordes sutiles */
  --color-neutral-text:       #5F5E5A;   /* Texto sobre neutral */

  /* --- TIPOGRAFÍA --- */
  --font-display:  'DM Serif Display', Georgia, serif;    /* Titulares hero, branding */
  --font-ui:       'Plus Jakarta Sans', system-ui, sans-serif; /* UI: botones, labels, KPIs */
  --font-body:     'DM Sans', system-ui, sans-serif;      /* Párrafos, descripciones */
  --font-mono:     'JetBrains Mono', 'Fira Code', monospace; /* Código, IDs, datos técnicos */

  /* --- ESCALA TIPOGRÁFICA --- */
  --text-hero:     2.25rem;   /* 36px — Titular hero (DM Serif Display) */
  --text-h1:       1.5rem;    /* 24px — Heading de sección (Plus Jakarta Sans 700) */
  --text-h2:       1.125rem;  /* 18px — Heading de componente (Plus Jakarta Sans 600) */
  --text-h3:       0.9375rem; /* 15px — Subtítulo de tarjeta (Plus Jakarta Sans 600) */
  --text-body:     0.875rem;  /* 14px — Cuerpo regular (DM Sans 400) */
  --text-small:    0.8125rem; /* 13px — Texto secundario (DM Sans 400) */
  --text-label:    0.6875rem; /* 11px — Labels, badges, uppercase (Plus Jakarta Sans 600) */
  --text-kpi:      1.75rem;   /* 28px — Métricas KPI (Plus Jakarta Sans 700) */
  --text-kpi-lg:   2.25rem;   /* 36px — KPI grande (Plus Jakarta Sans 700) */

  /* --- PESOS TIPOGRÁFICOS --- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* --- LINE HEIGHT --- */
  --leading-tight:   1.15;   /* Titulares grandes */
  --leading-snug:    1.4;    /* Subtítulos */
  --leading-normal:  1.6;    /* UI y componentes */
  --leading-relaxed: 1.7;    /* Cuerpo de texto largo */

  /* --- LETTER SPACING --- */
  --tracking-tight:  -0.02em;  /* Titulares hero */
  --tracking-normal:  0em;
  --tracking-wide:    0.06em;  /* Labels y badges */
  --tracking-wider:   0.09em;  /* UPPERCASE pequeños */

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

  /* --- BORDER RADIUS --- */
  --radius-sm:   6px;   /* Inputs, badges pequeños */
  --radius-md:   8px;   /* Botones, inputs */
  --radius-lg:  12px;   /* Tarjetas */
  --radius-xl:  16px;   /* Paneles, modales */
  --radius-pill: 9999px; /* Chips, tags, badges */

  /* --- SOMBRAS --- */
  --shadow-sm:  0 1px 3px rgba(0, 85, 179, 0.08);
  --shadow-md:  0 4px 12px rgba(0, 85, 179, 0.10);
  --shadow-lg:  0 8px 24px rgba(0, 85, 179, 0.12);

  /* --- TRANSICIONES --- */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* --- Z-INDEX --- */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
}

/* ─── MODO OSCURO ───────────────────────────────────────────── */
[data-theme="dark"],
@media (prefers-color-scheme: dark) {
  :root {

    /* --- SUPERFICIES Y FONDOS --- */
    --color-bg-page:       #0D1B2E;   /* Fondo principal */
    --color-bg-surface:    #162236;   /* Tarjetas, paneles */
    --color-bg-warm:       #1C2A1A;   /* Secciones cálidas en oscuro */
    --color-bg-cool:       #111D2E;   /* Secciones frías en oscuro */
    --color-bg-navy:       #050E1A;   /* Fondo más profundo */

    /* --- TEXTO --- */
    --color-text-primary:  #E8F0FB;   /* Texto principal claro */
    --color-text-body:     #A8C0DC;   /* Párrafos */
    --color-text-muted:    #5C7A9E;   /* Metadatos, placeholders */
    --color-text-inverse:  #0D1B2E;   /* Texto sobre fondos claros */
    --color-text-orange:   #FF9A5C;   /* Naranja visible en oscuro */
    --color-text-blue:     #5FA3E8;   /* Azul visible en oscuro */
    --color-text-amber:    #FFB347;   /* Ámbar sin cambio */

    /* --- BORDES --- */
    --color-border-default: #1E3A5C;
    --color-border-strong:  #2A5080;
    --color-border-orange:  #7A3A1A;

    /* --- COLORES FUNCIONALES (ajustados para oscuro) --- */
    --color-success-bg:    #0A2E20;
    --color-success-text:  #1ECC8B;
    --color-danger-bg:     #2E0A0A;
    --color-danger-text:   #F0453A;
    --color-warning-bg:    #2E1A00;
    --color-warning-text:  #FFB347;

    /* --- SOMBRAS --- */
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.30);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.40);
    --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.50);
  }
}

/* ─── CLASES DE UTILIDAD RÁPIDA ─────────────────────────────── */

/* Fuentes */
.font-display { font-family: var(--font-display); }
.font-ui      { font-family: var(--font-ui); }
.font-body    { font-family: var(--font-body); }

/* Texto de marca */
.text-orange { color: var(--color-brand-orange); }
.text-blue   { color: var(--color-brand-blue); }
.text-amber  { color: var(--color-brand-amber); }
.text-muted  { color: var(--color-text-muted); }

/* Badges */
.badge {
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  display: inline-block;
}
.badge-orange { background: rgba(255,107,26,.15); color: var(--color-text-orange); }
.badge-blue   { background: rgba(0,85,179,.12);   color: var(--color-text-blue); }
.badge-amber  { background: rgba(255,179,71,.18);  color: var(--color-text-amber); }
.badge-success { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-danger  { background: var(--color-danger-bg);  color: var(--color-danger-text); }

/* Botón primario */
.btn-primary {
  font-family: var(--font-ui);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  background: var(--color-brand-orange);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-5);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.btn-primary:hover { background: var(--color-brand-orange-soft); }

/* Botón secundario */
.btn-secondary {
  font-family: var(--font-ui);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  background: transparent;
  color: var(--color-brand-blue);
  border: 1px solid var(--color-brand-blue);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-5);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.btn-secondary:hover {
  background: var(--color-brand-blue);
  color: #ffffff;
}

/* Tarjeta base */
.card {
  background: var(--color-bg-surface);
  border: 0.5px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}

/* Tarjeta métrica KPI */
.kpi-card {
  background: var(--color-bg-surface);
  border: 0.5px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.kpi-label {
  font-family: var(--font-ui);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.kpi-value {
  font-family: var(--font-ui);
  font-size: var(--text-kpi);
  font-weight: var(--weight-bold);
  color: var(--color-brand-blue);
  line-height: var(--leading-tight);
  margin-top: var(--space-1);
}
.kpi-delta {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-success);
  margin-top: var(--space-1);
}