/* =========================================================
   Facturel — Sistema de diseño · tokens compartidos (v3 · CELESTE)
   Única fuente de verdad de marca. Importar en TODA superficie
   (landing, portal, admin, cert). No redefinir :root inline.

   Rebranding 2026: de verde esmeralda → CELESTE + AZUL, acento naranja.
   Paleta y valores tomados del Manual de Marca (Marca/). No usar verde
   salvo el token semántico --color-success (estado, nunca marca).
   ========================================================= */

/* ---------------------------------------------------------
   TIPOGRAFÍA AUTOHOSPEDADA — Plus Jakarta Sans (variable 400-800).
   (17/08/2026) Antes vivía en fonts.css como stylesheet aparte: era
   un request bloqueante más en la cola HTTP/1.1 del hosting (6
   conexiones y ya éramos 8 recursos). Vive acá porque la fuente ES
   marca y tokens.css ya está en el <head> de todas las páginas.
   Ojo: el url() es relativo a ESTE archivo (assets/), no a la página.
   Sólo subconjuntos latinos; font-display: swap = nunca texto invisible.
   Ver el porqué de no usar Google Fonts en la historia de fonts.css.
   --------------------------------------------------------- */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- Marca · CELESTE (primario) ---- */
  --color-primary:        #16A3E0;   /* Celeste — color de marca */
  --color-primary-bright: #3DB8EE;   /* Celeste 400 — hover/CTA */
  --color-primary-dark:   #0A6B9E;   /* Celeste 700 */
  --color-primary-deep:   #0E5A82;   /* Celeste 800 — paneles oscuros */
  --color-primary-soft:   #D6F0FC;   /* Celeste 100 — chips/fondos */
  --color-primary-tint:   #EFF9FE;   /* Celeste 50 — wash */
  --color-primary-light:  #7CD0F5;   /* Celeste 300 — bordes/acentos */

  /* ---- Marca · AZUL (secundario) ---- */
  --color-secondary:      #17357E;   /* Azul marca — wordmark, títulos */
  --color-secondary-dark: #102A5C;   /* Azul 800 */
  --color-secondary-soft: #E2E9F1;   /* Azul 50 */
  --color-accent-blue:    #17357E;   /* alias explícito */

  /* ---- Acento · NARANJA (destacados, warning cálido, Feli) ---- */
  --color-accent:         #FF8A3D;   /* Naranja acento */
  --color-accent-dark:    #E06A17;   /* Naranja hover */
  --color-accent-soft:    #FFE7D2;   /* Naranja 100 */
  --color-accent-tint:    #FFF4EA;   /* Naranja 50 */

  /* ---- Tinta azulada (texto) ---- */
  --color-ink:        #0F1E3D;   /* títulos */
  --color-ink-soft:   #33405E;   /* cuerpo */
  --color-ink-mid:    #5B6780;   /* secundario */
  /* (22/08/2026) Era #9AA6BC: 2,45:1 sobre blanco y 2,30:1 sobre --color-bg-alt,
     la mitad del 4,5:1 que pide WCAG AA para texto normal. Se usa como color de
     TEXTO en decenas de lugares (letra chica, "por mes", subtítulos de KPI,
     placeholders), no sólo como gris decorativo. #646F8B es la misma familia
     azulada y da 5,01:1 sobre #ffffff y 4,71:1 sobre #F5F8FC. */
  --color-muted:      #646F8B;   /* terciario/placeholder */

  /* ---- Superficies (frías) ---- */
  --color-bg:         #ffffff;
  --color-bg-alt:     #F5F8FC;   /* wash celeste muy claro */
  --color-bg-surface: #EEF3F8;
  --color-border:     #E2E9F1;
  --color-border-2:   #CAD6E5;

  /* ---- Estados ---- */
  --color-success:      #12B76A;   /* verde SOLO semántico (nunca marca) */
  --color-success-soft: #D1FADF;
  --color-error:        #DC2626;
  --color-error-dark:   #B42318;
  --color-error-soft:   #FEECEB;
  --color-warning:      #F59E0B;
  --color-warning-soft: #FEF0C7;
  /* (22/08/2026) Versión TEXTO de los estados. --color-warning y --color-success
     están pensados como relleno de pastilla: como color de letra dan 2,15:1 y
     2,62:1 sobre blanco (AA pide 4,5:1). Usar estos dos cuando el estado se
     escribe en vez de pintarse. */
  /* OJO con la superficie: sobre la pastilla --color-warning-soft #FEF0C7 el
     ámbar da 4,42:1 y NO llega a AA. Si el estado se escribe encima de su
     propia pastilla, va --color-ink-soft (o se oscurece este token). */
  --color-warning-text: #B45309;   /* 5,02:1 sobre #fff · 4,42:1 sobre #FEF0C7 */
  --color-success-text: #0E7A4C;   /* 5,38:1 sobre #fff · 4,72:1 sobre #D1FADF */
  --color-info:         #16A3E0;   /* celeste = info (alineado a marca) */
  --color-info-soft:    #D6F0FC;

  /* ---- WhatsApp (mockups) ---- */
  --wa-bubble-out: #dcf8c6;
  --wa-bubble-in:  #ffffff;
  --wa-bg:         #ece5dd;

  /* ---- Radios ---- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ---- Sombras (acabado premium, tinta azulada) ---- */
  --shadow-xs: 0 1px 2px rgba(15, 30, 61, .05);
  --shadow-sm: 0 2px 8px rgba(15, 30, 61, .06);
  --shadow-md: 0 10px 30px rgba(15, 30, 61, .08);
  --shadow-lg: 0 30px 70px rgba(15, 30, 61, .14);
  --shadow-primary: 0 8px 20px rgba(22, 163, 224, .28);   /* glow celeste */
  --shadow-accent:  0 8px 20px rgba(255, 138, 61, .28);   /* glow naranja */

  /* ---- Tipografía ---- */
  --font-sans: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Poppins", "Plus Jakarta Sans", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, monospace;

  /* ---- Escala tipográfica (7 pasos) ----
     (22/08/2026) No existía: entre las tres superficies conviven ~150 tamaños
     distintos escritos a mano (24 valores sólo entre .6rem y .9rem en app.html),
     así que dos etiquetas de la misma jerarquía miden distinto según la tarjeta.
     Todo font-size nuevo sale de acá; la migración de los tamaños existentes va
     por tandas (app.html → admin.html → landing.css). */
  --text-2xs:  .72rem;
  --text-xs:   .78rem;
  --text-sm:   .86rem;
  --text-base: .95rem;
  --text-lg:   1.1rem;
  --text-xl:   1.3rem;
  --text-2xl:  1.6rem;

  /* ---- Escala de espaciado (base 4) ---- */
  --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; --space-20: 80px;

  --max-width: 1140px;

  /* ---- Gradientes de marca ---- */
  --grad-brand:  linear-gradient(135deg, #16A3E0 0%, #17357E 100%);
  --grad-sky:    linear-gradient(135deg, #3DB8EE 0%, #16A3E0 100%);
  --grad-accent: linear-gradient(135deg, #FF8A3D 0%, #E06A17 100%);

  /* ---- Aliases cortos (compat con superficies existentes) ---- */
  --primary: var(--color-primary);
  --primary-bright: var(--color-primary-bright);
  --primary-dark: var(--color-primary-dark);
  --primary-deep: var(--color-primary-deep);
  --primary-soft: var(--color-primary-soft);
  --primary-tint: var(--color-primary-tint);
  --secondary: var(--color-secondary);
  --accent: var(--color-accent);
  --ink: var(--color-ink);
  --ink-soft: var(--color-ink-soft);
  --ink-mid: var(--color-ink-mid);
  --muted: var(--color-muted);
  --bg: var(--color-bg);
  --bg-alt: var(--color-bg-alt);
  --surface: var(--color-bg);
  --border: var(--color-border);
  --success: var(--color-success);
  --success-text: var(--color-success-text);
  --error: var(--color-error);
  --warning: var(--color-warning);
  --warning-text: var(--color-warning-text);
  --info: var(--color-info);
  --font: var(--font-sans);
}