/* ============================================================================
 * axui-tokens.css — Re-skin de BASE del rediseño "clean" por TOKENS.
 * Axis está tokenizado (Tailwind + tokens HSL en :root, consumidos por todo el
 * layout vía hsl(var(--token))). Redefinir aquí los colores con la paleta MEDIDA
 * de la referencia reskinea el sidebar y TODA la app sin tocar HTML.
 * Se carga (inc/head_meta.php) SOLO cuando design_new, TRAS style.css → gana en
 * cascada. La tipografía ya coincide (Axis y la referencia usan DM Sans + Geist).
 * Valores: colores de axis-demo.tomesieira.chatgpt.site convertidos a HSL shadcn.
 * ==========================================================================*/

:root {
  /* Superficies: fondo BLANCO (la referencia es "sin cajas" sobre blanco) */
  --background: 0 0% 100%;
  --foreground: 146 10% 14%;              /* #202723 ink */
  --card: 0 0% 100%;
  --card-foreground: 146 10% 14%;
  --popover: 0 0% 100%;
  --popover-foreground: 146 10% 14%;

  /* Primario = oscuro casi-negro verdoso (botones sólidos de la referencia) */
  --primary: 146 10% 14%;                 /* #202723 */
  --primary-foreground: 0 0% 100%;
  --primary-hover: 146 10% 20%;

  /* Secundario / muted = superficies suaves verde-grisáceas */
  --secondary: 140 20% 97%;               /* #f6f9f7 */
  --secondary-foreground: 146 10% 14%;
  --muted: 140 16% 95%;                   /* #f0f4f1 */
  --muted-foreground: 143 9% 40%;         /* #647169, +legibilidad */

  /* Acento = mint suave + tinta verde (badges/chips "activo") */
  --accent: 140 38% 92%;                  /* #e4f3e9 */
  --accent-foreground: 147 30% 28%;       /* #315c44 */

  /* Verde vivo (En curso / éxito) */
  --success: 158 64% 52%;                 /* #34d399 */
  --success-foreground: 152 60% 12%;

  /* Bordes / inputs / foco */
  --border: 140 13% 91%;                  /* #e5ebe7 */
  --border-card: 140 13% 91%;
  --input: 140 13% 91%;
  --ring: 146 10% 14%;

  /* Sidebar: BLANCO (la referencia no tiene gris en el lateral) */
  --sidebar: 0 0% 100%;
  --sidebar-foreground: 146 10% 14%;

  --radius: 0.75rem;

  /* Escala tipográfica de la REFERENCIA (medida en pageId 42). El carril clean ya HEREDA DM Sans (html/body de
   * style.css) y Geist (var(--font-display), usado por .text-h* y .text-numeric); estos tokens fijan la ESCALA de la
   * maqueta (h1 40 · h2 24 · h3 20 · número 32 · cuerpo 16 · secundario 14) para reutilizarla en el rediseño. */
  --type-h1: 2.5rem;          /* 40px */
  --type-h2: 1.5rem;          /* 24px */
  --type-h3: 1.25rem;         /* 20px */
  --type-number: 2rem;        /* 32px — número grande de KPI/score */
  --type-body: 1rem;          /* 16px */
  --type-secondary: .875rem;  /* 14px */

  /* Variables NATIVAS de la referencia (--axis-*): permiten portar sus componentes
   * .axis-* 1:1 con los MISMOS valores medidos en axis-demo.tomesieira.chatgpt.site. */
  --axis-navy: #202723;
  --axis-ink: #202723;
  --axis-muted: #647169;
  --axis-line: #e5ebe7;
  --axis-border: #e5ebe7;
  --axis-soft: #f0f4f1;
  --axis-surface: #f6f9f7;
  --axis-mint: #e4f3e9;
  --axis-green-ink: #315c44;
  --axis-danger: #dc2626;                 /* rojo de alerta/urgencia de UI (badge, línea "ahora", plan urgente) */

  /* SÍNTESIS DS · RADIOS semánticos — UN radio por ROL (se consumen en axui.css; cambiar aquí propaga a todo).
   * Antes convivían ~12 valores sueltos (2/4.8/5/6/6.4/7.2/8/8.8/9/9.6/10/10.4px) para controles y 12/14/16/18
   * para cards. Ahora: control=8 · card=12 · card grande/modal=16 · pill=999 · círculo=50%. */
  --r-ctl: 8px;       /* botones, inputs, chips, checkboxes, filtros, items de menú, controles pequeños */
  --r-card: 12px;     /* cards de contenido, tiles, paneles medianos, card de sesión */
  --r-card-lg: 16px;  /* cards grandes, modales/sheets, hero */
  /* Escala de radios de Tailwind (rounded-*) para el clean: se COMPRIME el tramo grande (xl 20→16, 2xl 28→16)
   * para que TODA la app caiga en el set canónico control(8)/card(12)/card-lg(16). Los pequeños ya coinciden
   * (sm 8, md 12, lg 16). Propaga a cualquier `rounded-xl/2xl` de las plantillas sin tocarlas. */
  --radius-md: 12px; --radius-lg: 16px; --radius-xl: 16px; --radius-2xl: 16px;

  /* Logo wordmark del sidebar: SIEMPRE el logo de marca ORIGINAL (navy #273C6D + verde menta
   * #34D399), igual que el carril normal y la referencia. NO oscurecerlo ni apagar el verde:
   * hacerlo "verde-tinta" dejaba el logo casi negro y sin el acento de marca. */
  --logo-main: #273C6D;
  --logo-accent: #34D399;
}

/* ── MODO OSCURO del carril clean ──────────────────────────────────────────────────────────────────
 * El re-skin de arriba redefine los tokens en :root con la paleta CLARA de la referencia. Como este
 * archivo se carga DESPUÉS de style.css, ese :root PISABA el .dark de style.css y clavaba TODA la app en
 * claro (superficies blancas, texto oscuro sobre fondo oscuro) → el modo oscuro quedó roto en el rediseño.
 * Aquí se restaura: los MISMOS tokens que se pisan arriba, ahora en su variante OSCURA (paleta verde-
 * grisácea coherente con la identidad clean). Gana al :root de arriba (misma especificidad, viene después;
 * y .dark > :root). Solo afecta al carril clean (este archivo solo se carga con design_new). */
html.dark {
  /* Superficies: casi-negro verdoso, con escalón tonal card/popover sobre el fondo.
   * Selector html.dark (0,1,1) — gana al :root claro (0,1,0) SIN depender del orden de fuente. */
  --background: 150 6% 9%;
  --foreground: 150 8% 92%;
  --card: 150 6% 12%;
  --card-foreground: 150 8% 92%;
  --popover: 150 6% 13%;
  --popover-foreground: 150 8% 92%;

  /* Primario = CLARO en oscuro (botón claro con texto oscuro), como el resto del dark de Axis */
  --primary: 150 8% 90%;
  --primary-foreground: 150 12% 12%;
  --primary-hover: 150 8% 82%;

  --secondary: 150 5% 17%;
  --secondary-foreground: 150 8% 88%;
  --muted: 150 5% 16%;
  --muted-foreground: 150 6% 64%;

  /* Acento = verde oscuro translúcido con tinta verde clara (badges/chips "activo") */
  --accent: 150 22% 18%;
  --accent-foreground: 150 45% 72%;

  /* Verde vivo (En curso / éxito): se mantiene, luce bien sobre oscuro */
  --success: 158 60% 52%;
  --success-foreground: 152 60% 10%;

  --border: 150 5% 22%;
  --border-card: rgba(255, 255, 255, .12);
  --input: 150 6% 26%;
  --ring: 150 40% 55%;

  --sidebar: 150 6% 10%;
  --sidebar-foreground: 150 8% 90%;

  /* Variables nativas --axis-*: invierten la luminosidad manteniendo el tinte verde-grisáceo.
   * --axis-navy/-ink pasan a claro porque su uso MAYORITARIO es TEXTO; los pocos usos como FONDO de
   * botón/badge (background:var(--axis-navy)) se re-tintan el texto en axui.css (.dark) para no quedar
   * texto blanco sobre superficie clara. */
  --axis-navy: #e7ece9;
  --axis-ink: #e7ece9;
  --axis-muted: #97a29c;
  --axis-line: #2f3531;
  --axis-border: #363c38;
  --axis-soft: #242926;
  --axis-surface: #1b211d;
  --axis-mint: #24382c;
  --axis-green-ink: #8fdcac;
  --axis-danger: #f26d6d;

  /* Logo: en oscuro, verde de marca + blanco (el navy sobre negro no se ve), igual que el dark de Axis */
  --logo-main: #34D399;
  --logo-accent: #FFFFFF;
}

/* ── SIN SOMBRAS DE CAJA ──────────────────────────────────────────────────
 * El sistema "clean" NO proyecta sombras bajo las cards: la profundidad es TONAL
 * (escalón de superficie) y ESPACIAL (aire + líneas de 1px), nunca una sombra
 * elevada. Se anulan la sombra + el brillo interior + el hover-lift de TODAS las
 * cards del layout, en toda la app del carril clean. Los flotantes REALES
 * (modales, popovers, tooltips, menús, drawer) conservan su sombra: no se tocan
 * sus tokens (--shadow-md/lg) ni sus clases; solo se aplanan las cards de contenido. */
.card-unified, .card, .dashboard-card, .card-interactive, .empty-state, .hi-item,
.dash-w > .card-unified, .dash-w > .dashboard-card,
.dark .card-unified, .dark .card, .dark .dashboard-card,
.dark .dash-w > .card-unified, .dark .dash-w > .dashboard-card { box-shadow: none; }
.card-interactive:hover,
.dash-w > .card-unified:hover, .dash-w > .dashboard-card:hover { box-shadow: none; transform: none; }

/* Menú lateral BLANCO con SEPARADOR (como la referencia): fondo blanco + línea de 1px que lo separa del
 * contenido. El `.axn-side` interior es transparente (ver axui.css) para que se vea este blanco. */
.app-sidebar { background: hsl(var(--sidebar)); border-right: 1px solid hsl(var(--border)); width: 17rem; }
/* El contenido debe respetar el nuevo ancho del sidebar (17rem) — si no, se solapa.
 * El sidebar es position:fixed, así que el main compensa con padding-left. El colapsado
 * (.nav-collapsed) conserva 4rem por mayor especificidad, no se rompe. */
@media (min-width: 1024px) { .app-main { padding-left: 17rem; } }

/* ── TIPOGRAFÍA del carril clean (AFINADO a la referencia) ────────────────────────────────────────────
 * La BASE ya es correcta (DM Sans en html/body de style.css; Geist en var(--font-display) → .text-h* y .text-numeric),
 * así que aquí solo se clava el detalle de la maqueta. Este archivo se carga SOLO con design_new, por lo que estas
 * reglas NO afectan al carril normal. DM Sans explícito en el contenido (defensivo, por si algún reset lo pisara). */
.app-main { font-family: 'DM Sans', Inter, system-ui, -apple-system, sans-serif; }
/* Número del anillo KPI de la ficha (usa .text-3xl, que por defecto es DM Sans): la referencia pone los números
 * grandes en Geist. Se afina SOLO dentro de la tira de KPIs de la ficha (.axn-fkpis), no globalmente. */
.axn-fkpis .text-3xl { font-family: 'Geist', var(--font-display, system-ui), sans-serif; letter-spacing: -.02em; }
/* Título-cabecera de la ficha con el tracking EXACTO de la maqueta (-.035em ≡ -1.4px sobre 40px; antes -.02em). */
.axis-client-breadcrumb { letter-spacing: -.035em; }