/* =========================================================
   AXIOMA DESIGN TOKENS v9.0 — "Marinilla"
   Fuente unica de verdad visual.
   MudTheme (C#) es adaptacion tecnica — consume estos valores.
   v9.0: Re-tema hacia pruebalista.html (color de marca segun
   data-palette: indigo por defecto, variantes teal, electrico y
   cian; light con sidebar blanca + dark Marinilla; fuentes
   Dos voces: Sora (identidad) + Inter (interfaz) + IBM Plex Mono, dark mode dual).
   Solo cambian VALORES; los nombres de token se conservan.
   v9.1: Patrones OpenRouter (light-only): tripletes semanticos
   *-text/*-bg (bg = 8% alpha del color), neutros por alpha sobre
   la tinta (--ax-alpha-*), peso de cuerpo 450, line-height 1.35
   y inputs blancos con borde hairline.
     v9.5: Las paletas de marca (propuestas aprobadas, solo light):
     teal #0B9E8F→aqua · indigo #3B7DBD · electrico #5B5CE6→violeta · cian #0891B2.
    Nuevo token --ax-primary-lift (2.º paso del gradiente de marca en el CTA del
    AppBar). El dark conserva sus valores; los nombres de token no cambian.
   ========================================================= */

:root {
  /* ============================================
     TIPOGRAFÍA
     ============================================ */
  /* Dos voces: Inter = interfaz (cuerpo, formularios, tablas); Sora = identidad
     (marca, títulos, módulos y números del dashboard). Inter queda como fallback. */
  --ax-font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
  --ax-font-display: 'Sora', 'Inter', 'Segoe UI', sans-serif;
  --ax-font-mono: 'IBM Plex Mono', 'Fira Code', Consolas, monospace;

  /* Features tipográficas (Alternativa A · Inter calibrada).
     ui   = ligaduras contextuales (fix de Chrome para Inter).
     data = cifras tabulares + cero rayado + desambiguación I/l/1 y 0/O. */
  --ax-font-features-ui: 'liga' 1, 'calt' 1;
  --ax-font-features-data: 'tnum' 1, 'zero' 1, 'cv05' 1, 'cv08' 1;
  --ax-font-size-2xs: 0.625rem;   /* 10px — captions/eyebrow */
  --ax-font-size-xs: 0.6875rem;   /* 11px — helper text, badges */
  --ax-font-size-sm: 0.75rem;     /* 12px — tablas/celdas */
  --ax-font-size-md: 0.8125rem;   /* 13px — body/base (render real) */
  --ax-font-size-base: 0.8125rem; /* 13px — base reconciliado con el render */
  --ax-font-size-lg: 0.875rem;    /* 14px — subtítulos, appbar title */
  --ax-font-size-xl: 0.9375rem;   /* 15px */
  --ax-font-size-2xl: 1rem;       /* 16px */
  --ax-font-size-3xl: 1.125rem;   /* 18px */
  --ax-font-size-4xl: 1.25rem;    /* 20px — page-title */
  --ax-font-size-5xl: 1.5rem;     /* 24px — display */

  --ax-line-height-sm: 1.333;
  --ax-line-height-md: 1.4285;
  --ax-line-height-lg: 1.5;
  --ax-line-height-body: 1.35;     /* densidad del body (patron OpenRouter) */

  --ax-font-weight-body: 400;      /* peso de cuerpo: a 13px el 450 emborrona los trazos finos (Inter variable) */

  /* Letter-spacing: jerarquía visual (valores en em) */
  --ax-letter-spacing-tightest: -0.04em;  /* H1, display — máxima densidad */
  --ax-letter-spacing-tighter:  -0.02em;  /* H2 — ajustado para más aire */
  --ax-letter-spacing-tight:    -0.02em;  /* H3, page-title */
  --ax-letter-spacing-snug:     -0.01em;  /* H4, H5 */
  --ax-letter-spacing-normal:    0;       /* H6, botones, inputs */
  --ax-letter-spacing-relaxed:   0;       /* Body — tracking neutro (Alternativa A) */
  --ax-letter-spacing-wide:      0.02em;  /* Caption, mono, badges */
  --ax-letter-spacing-wider:     0.04em;  /* Chips, tags, estados */
  --ax-letter-spacing-widest:    0.06em;  /* Section titles, command palette */
  --ax-letter-spacing-ultra:     0.08em;  /* Overlines uppercase */

  /* ============================================
     COLORES DE GRID
     ============================================ */
  --ax-grid-text: var(--ax-text-secondary);
  --ax-grid-header-text: var(--ax-text-secondary);
  --ax-grid-header-weight: 600;
  --ax-grid-bg: var(--ax-surface);
  --ax-grid-header-bg: var(--ax-gray-100);
  --ax-grid-border: var(--ax-border);
  --ax-grid-row-hover: var(--ax-gray-50);
  --ax-grid-border-subtle: var(--ax-border);

  /* ============================================
     TRANSICIONES
     ============================================ */
  --ax-transition-fast: 150ms ease;
  --ax-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --ax-transition-slow: 300ms ease;

  /* ============================================
     OPACIDADES
     ============================================ */
  --ax-opacity-disabled: 0.38;
  --ax-opacity-hover: 0.04;

  /* ============================================
     PALETA AXIOMA — sincronizada con C#
     Primary: #3B7DBD (Azul Acero · tono atenuado)
     ============================================ */
  --ax-primary: #3b7dbd;
  --ax-primary-hover: #2f6aa3;
  --ax-primary-600: #2f6aa3;
  --ax-primary-700: #274f7a;
  --ax-primary-100: #dbe9f5;
  --ax-primary-50: #eff5fa;
  --ax-primary-lift: #5fa3d8;  /* 2.º paso del gradiente de marca (CTA) */

  --ax-accent: #3b7dbd;
  --ax-accent-hover: #2f6aa3;
  --ax-accent-600: #2f6aa3;
  --ax-accent-100: #dbe9f5;

  --ax-tertiary: #5fa3d8;

  /* Teal — escala de acento (entrega / operaciones) */
  --ax-teal-50: #f0fdfa;
  --ax-teal-100: #ccfbf1;
  --ax-teal-200: #99f6e4;
  --ax-teal-300: #5eead4;
  --ax-teal-400: #2dd4bf;
  --ax-teal-500: #14b8a6;
  --ax-teal-600: #0d9488;
  --ax-teal-700: #0f766e;

  /* Indigo — escala de acento principal */
  --ax-indigo-50: #eef2ff;
  --ax-indigo-100: #e0e7ff;
  --ax-indigo-200: #c7d2fe;
  --ax-indigo-300: #a5b4fc;
  --ax-indigo-400: #818cf8;
  --ax-indigo-500: #6366f1;
  --ax-indigo-600: #4f46e5;
  --ax-indigo-700: #4338ca;

  /* Amber — arcilla para paneles de cliente */
  --ax-amber-50: #fffbeb;
  --ax-amber-100: #fef3c7;
  --ax-amber-200: #fde68a;
  --ax-amber-300: #fcd34d;
  --ax-amber-400: #fbbf24;
  --ax-amber-500: #f59e0b;
  --ax-amber-600: #d97706;
  --ax-amber-700: #b45309;

  /* Coral — acentos de warning / servicios */
  --ax-coral-50: #fff1f2;
  --ax-coral-100: #ffe4e6;
  --ax-coral-200: #fecdd3;
  --ax-coral-300: #fda4af;
  --ax-coral-400: #fb7185;
  --ax-coral-500: #f43f5e;
  --ax-coral-600: #e11d48;
  --ax-coral-700: #be123c;

  /* Gold — historial / ciclo de vida */
  --ax-gold-50: #fff8e8;
  --ax-gold-100: #fff2d4;
  --ax-gold-200: #fbe3a8;
  --ax-gold-300: #f5cf6f;
  --ax-gold-400: #e5b04a;
  --ax-gold-500: #c48a25;
  --ax-gold-600: #a06f1c;
  --ax-gold-700: #7d5514;

   /* Éxito = esmeralda de negocio (distinto del azul de marca — ahora #3B7DBD).
     El índigo es la identidad; el verde de éxito es el estado semántico "ok". */
  --ax-success: #14845f;
  --ax-success-hover: #0f6b4d;
  --ax-success-600: #0f6b4d;
  --ax-success-100: #dcf6eb;

  --ax-warning: #c48a25;
  --ax-warning-hover: #a06f1c;
  --ax-warning-100: #fff2d4;

  --ax-error: #bd4d49;
  --ax-error-hover: #9e3f3c;
  --ax-error-100: #ffe6e3;

  --ax-info: #3b7dbd;
  --ax-info-hover: #2f6aa3;
  --ax-info-100: #dbe9f5;

  /* Contrast text para componentes MudBlazor */
  --ax-primary-contrast: #ffffff;
  --ax-secondary-contrast: #ffffff;
  --ax-success-contrast: #ffffff;
  --ax-warning-contrast: #ffffff;
  --ax-error-contrast: #ffffff;
  --ax-info-contrast: #ffffff;

  /* ============================================
     SISTEMA DE GRISES (tinte frío teal)
     ============================================ */
  --ax-gray-950: #020617;
  --ax-gray-900: #0f172a;
  --ax-gray-800: #1e293b;
  --ax-gray-700: #334155;
  --ax-gray-600: #475569;
  --ax-gray-500: #64748b;
  --ax-gray-400: #94a3b8;
  --ax-gray-300: #cbd5e1;
  --ax-gray-200: #e2e8f0;
  --ax-gray-100: #f1f5f9;
  --ax-gray-50: #f8fafc;

  /* ============================================
     CAPAS VISUALES
     ============================================ */
  --ax-bg: #f5f6f7;
  --ax-bg-app: #f5f6f7;
  --ax-bg-sidebar: #ffffff;
  --ax-bg-header: #ffffff;
  --ax-bg-card: #ffffff;
  --ax-surface: #ffffff;
  --ax-surface-2: #f1f5f9;
  --ax-bg-input: #ffffff;

  /* ============================================
     FONDO DE PÁGINA Y PANEL ELEVADO (v9.6)
     El área principal usa un fondo PLANO neutro (#F5F6F7, sin degradado: apariencia
     sobria y cercana a un ERP tradicional) y los paneles "flotan" sobre él: superficie semitransparente +
     blur, radio amplio y sombra en dos capas. Sombra/radio son la señal de
     jerarquía; el borde es un aro tinta derivado de la tinta del tema (se
     autorreajusta). --ax-page-bg-accent se re-declara en dark y en cada paleta.
     ============================================ */
  --ax-page-bg-accent: #f5f6f7;
  --ax-page-bg: var(--ax-bg);

  /* Superficie del panel elevado — receta base del sistema (v9.6).
     Vidrio blanco (--ax-surface) sobre el fondo de página + aro tinta; la banda
     de cabecera usa un gris neutro plano (--ax-gray-100). */
  --ax-panel-surface: var(--ax-surface);
  --ax-panel-band-top: var(--ax-gray-100);
  --ax-panel-band-bottom: var(--ax-gray-100);
  --ax-panel-bg: color-mix(in srgb, var(--ax-panel-surface) 92%, transparent);
  --ax-panel-rim: color-mix(in srgb, var(--ax-text-primary) 7%, transparent);
  --ax-panel-blur: 10px;

  /* Blanco acero: el menú lateral es una superficie blanca con tinta azul acero
     (derivada del color principal, Azul Acero) y un ítem activo con el relleno
     del primario. El chrome del menú (borde/ícono/sección) NO lo tocan las
     paletas: la tinta base es constante. */
  --sidebar-bg: #ffffff;
  --sidebar-hover: #eef4fa;
  --sidebar-active-bg: var(--ax-primary-50);
  --sidebar-active-border: var(--ax-primary);
  --sidebar-active-fill: var(--ax-primary-100);
  --sidebar-text-primary: #16324c;
  --sidebar-text-secondary: #274f7a;
  --sidebar-border: #e6edf4;
  --sidebar-icon: #6b8299;
  --sidebar-section: #6b8299;

  /* ============================================
     TEXTO
     ============================================ */
  --ax-text: #172033;
  --ax-text-primary: #172033;
  --ax-text-secondary: #45505e;
  --ax-text-muted: #556275;
  --ax-text-placeholder: #9aa4b5;

  /* ============================================
     BORDES
     ============================================ */
  --ax-border: #e7eaf0;
  --ax-border-light: #eef2f6;
  --ax-border-subtle: #e7eaf0;
  --ax-border-focus: var(--ax-primary);
  --ax-border-soft: #dfe8e5;

  /* ============================================
     ROLES SEMANTICOS (patron Geodesic)
     ============================================ */
  --ax-selected: var(--ax-primary-50);        /* fondo de item seleccionado */
  --ax-selected-hover: var(--ax-primary-100); /* hover sobre item seleccionado */
  --ax-selected-text: var(--ax-primary-700);  /* texto/icono del item seleccionado */

  --ax-wash: rgba(0, 0, 0, 0.04);             /* capa neutra de hover */
  --ax-wash-strong: rgba(0, 0, 0, 0.08);      /* capa neutra de hover intenso */

  --ax-error-muted: var(--ax-error-100);
  --ax-success-muted: var(--ax-success-100);
  --ax-warning-muted: var(--ax-warning-100);
  --ax-info-muted: var(--ax-info-100);

  /* ============================================
     TRIPLETES SEMANTICOS (patron OpenRouter)
     Cada estado define color / texto oscuro / bg al 8%.
     bg se deriva del color con color-mix: chips y strips
     nunca eligen hex a mano y siguen a la paleta y al dark.
     ============================================ */
  --ax-success-text: var(--ax-success-600);
  --ax-success-bg: color-mix(in srgb, var(--ax-success) 8%, transparent);
  --ax-warning-text: var(--ax-gold-700);
  --ax-warning-bg: color-mix(in srgb, var(--ax-warning) 8%, transparent);
  --ax-error-text: var(--ax-error-hover);
  --ax-error-bg: color-mix(in srgb, var(--ax-error) 8%, transparent);
  --ax-info-text: var(--ax-primary-700);
  --ax-info-bg: color-mix(in srgb, var(--ax-info) 8%, transparent);

  /* ============================================
     NEUTROS POR ALPHA SOBRE LA TINTA
     Bordes y washes derivados de --ax-text-primary:
     no se re-declaran en dark, se autorreajustan.
     ============================================ */
  --ax-alpha-line: color-mix(in srgb, var(--ax-text-primary) 9%, transparent);
  --ax-alpha-line-strong: color-mix(in srgb, var(--ax-text-primary) 15%, transparent);
  --ax-alpha-hover: color-mix(in srgb, var(--ax-text-primary) 2.5%, transparent);

  /* ============================================
     SOMBRAS
     ============================================ */
  --ax-shadow-xs: 0 1px 2px rgba(18, 33, 43, 0.03);
  --ax-shadow-sm: 0 1px 3px rgba(18, 33, 43, 0.04);
  --ax-shadow: 0 4px 6px -1px rgba(18, 33, 43, 0.05), 0 2px 4px -2px rgba(18, 33, 43, 0.05);
  --ax-shadow-soft: 0 4px 16px rgba(18, 33, 43, 0.05);
  --ax-shadow-medium: 0 8px 24px rgba(18, 33, 43, 0.08);
  --ax-shadow-md: 0 10px 15px -3px rgba(18, 33, 43, 0.05), 0 4px 6px -4px rgba(18, 33, 43, 0.05);
  --ax-shadow-lg: 0 20px 25px -5px rgba(18, 33, 43, 0.05), 0 8px 10px -6px rgba(18, 33, 43, 0.05);
  /* Panel elevado: sombra en dos capas (contacto + proyección) que despega el
     panel del degradado de página. En dark sube de opacidad (ver [data-theme="dark"]). */
  --ax-shadow-panel: 0 10px 14px -6px rgba(2, 6, 23, 0.055), 0 4px 6px -5px rgba(2, 6, 23, 0.04);
  /* Listados: sombra de tarjeta del patrón «list explorer» / «list panel»
     (base +10%, reforzada un 5% adicional para aumentar la sensación de profundidad). */
  --ax-shadow-panel-list: 0 11.55px 15.75px -7.35px rgba(2, 6, 23, 0.064), 0 4.2px 7.35px -6.3px rgba(2, 6, 23, 0.046);
  /* Derivadas del primario: se autorreajustan con data-theme y data-palette */
  --ax-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--ax-primary) 15%, transparent);
  --ax-shadow-primary: 0 4px 12px color-mix(in srgb, var(--ax-primary) 25%, transparent);
  --ax-shadow-primary-sm: 0 2px 6px color-mix(in srgb, var(--ax-primary) 25%, transparent);

  --ax-hover-table: rgba(18, 33, 43, 0.02);

  /* ============================================
     ELEVACION (patron Geodesic — doble sombra)
     ============================================ */
  --ax-elev-0: none;
  --ax-elev-1: 0 1px 3px rgba(18, 33, 43, 0.05), 0 1px 1px rgba(18, 33, 43, 0.04);
  --ax-elev-2: 0 2px 8px rgba(18, 33, 43, 0.08), 0 1px 1px rgba(18, 33, 43, 0.05);
  --ax-elev-3: 0 4px 16px rgba(18, 33, 43, 0.10), 0 2px 4px rgba(18, 33, 43, 0.06);
  --ax-elev-4: 0 8px 24px rgba(18, 33, 43, 0.12), 0 2px 2px rgba(18, 33, 43, 0.07);

  /* ============================================
     ESPACIADO
     ============================================ */
  --ax-space-1: 4px;
  --ax-space-1x5: 6px;
  --ax-space-2: 8px;
  --ax-space-2x5: 10px;
  --ax-space-3: 12px;
  --ax-space-4: 16px;
  --ax-space-5: 20px;
  --ax-space-6: 24px;

  /* Separacion label -> input cuando la etiqueta va arriba del campo
     (stacked, no modo fila): ligeramente menor al respiro entre campos. */
  --ax-form-gap-label-input: 1px;
  --ax-space-8: 32px;
  --ax-space-10: 40px;

  /* Alias semánticos */
  --ax-space-xs: var(--ax-space-1);
  --ax-space-sm: var(--ax-space-2);
  --ax-space-md: var(--ax-space-3);
  --ax-space-lg: var(--ax-space-5);
  --ax-space-xl: var(--ax-space-6);

  /* ============================================
     RADIOS
     ============================================ */
  --ax-radius-sm: 4px;
  --ax-radius: 6px;
  --ax-radius-md: 8px;
  --ax-radius-lg: 12px;
  --ax-radius-xl: 16px;
  --ax-radius-full: 9999px;

  /* ============================================
     LAYOUT
     ============================================ */
  --ax-drawer-width: 220px;
  --ax-drawer-mini-width: 72px;

  /* AppBar de 2 filas (fila 1 = hamburguesa + tabs; fila 2 = acciones) */
  --ax-appbar-top-row-height: 44px;  /* fila 1: hamburguesa + lengüetas + tray */
  --ax-appbar-tabs-height: 44px;   /* altura de las tabs dentro de la fila 1 */
  --ax-appbar-actions-height: 32px;  /* fila 2 (acciones): alto = padding-top + botón + padding-bottom */
  --ax-appbar-padding-y: 0px;
  --ax-appbar-top-padding: var(--ax-space-1);  /* respiro superior de la fila 1 */
  --ax-appbar-height: calc(var(--ax-appbar-top-row-height) + var(--ax-appbar-actions-height) + (var(--ax-appbar-padding-y) * 2) + var(--ax-appbar-top-padding));

  /* ============================================
     TABS (Workspace de Pestañas)
     ============================================ */
  --ax-tab-height: 32px;   /* alto de la píldora del tab (icono + título) */
  --ax-tab-font-size: 0.8125rem;
  --ax-tab-active-color: var(--ax-primary);
  --ax-tab-inactive-color: #4b5563;  /* gris de la lengüeta inactiva (alternativa A, tono reforzado) */
  --ax-tab-dirty-color: var(--ax-warning);

  /* ============================================
     ALIASES PROTOTIPO (pruebalista.html)
     Capa de compatibilidad: 100% derivados de los tokens
     AX-*, por lo que siguen automaticamente al tema,
     dark mode y variante de paleta sin duplicar hex.
     No anadir aqui valores literales.
     ============================================ */
  --ink: var(--ax-text-primary);
  --muted: var(--ax-text-muted);
  --paper: var(--ax-bg);
  --surface: var(--ax-surface);
  --line: var(--ax-border);
  --teal: var(--ax-primary);
  --teal-dark: var(--ax-primary-hover);
  --teal-soft: var(--ax-primary-50);
  --blue: var(--ax-info);
  --blue-soft: var(--ax-info-100);
  --gold: var(--ax-warning);
  --gold-soft: var(--ax-warning-100);
  --red: var(--ax-error);
  --red-soft: var(--ax-error-100);
  --green: var(--ax-success);
  --green-soft: var(--ax-success-100);
  --shadow: var(--ax-shadow-medium);

  /* ============================================
     SCROLL BEHAVIOR
     ============================================ */
  --ax-scroll-behavior: smooth;
}

/* =========================================================
   DARK MODE — re-declaracion de tokens (paleta Marinilla dark).
   Activacion: data-theme="dark" en el elemento raiz.
   ========================================================= */
[data-theme="dark"] {
  /* --- Escala de grises invertida (tinte teal oscuro) --- */
  --ax-gray-50: #101b1a;
  --ax-gray-100: #15211f;
  --ax-gray-200: #202e2b;
  --ax-gray-300: #2a3a37;
  --ax-gray-400: #354743;
  --ax-gray-500: #4c5e59;
  --ax-gray-600: #71857f;
  --ax-gray-700: #9bb0ad;
  --ax-gray-800: #c4d5d0;
  --ax-gray-900: #e6f0ec;
  --ax-gray-950: #ecf5f2;

  /* --- Capas visuales --- */
  --ax-bg: #15211f;
  --ax-bg-app: #15211f;
  --ax-bg-sidebar: #20302c;
  --ax-bg-header: #202e2b;
  --ax-bg-card: #202e2b;
  --ax-surface: #202e2b;
  --ax-surface-2: #2a3a37;
  --ax-bg-input: #2a3a37;

  /* --- Fondo de página y panel elevado (v9.6) --- */
  --ax-page-bg-accent: #0f1917;   /* 2.º stop: por debajo del fondo de página */
  /* Superficie del panel — receta base en dark: vidrio de --ax-surface y banda de
     cabecera un paso por encima (--ax-surface-2), autorreajustable por paleta. */
  --ax-panel-surface: var(--ax-surface);
  --ax-panel-band-top: var(--ax-surface-2);
  --ax-panel-band-bottom: var(--ax-surface-2);
  --ax-shadow-panel: 0 10px 14px -6px rgba(0, 0, 0, 0.30), 0 4px 6px -5px rgba(0, 0, 0, 0.22);
  --ax-shadow-panel-list: 0 11.55px 15.75px -7.35px rgba(0, 0, 0, 0.347), 0 4.2px 7.35px -6.3px rgba(0, 0, 0, 0.252);

  /* --- Texto --- */
  --ax-text: #ecf5f2;
  --ax-text-primary: #ecf5f2;
  --ax-text-secondary: #c4d5d0;
  --ax-text-muted: #c0d3ce;
  --ax-text-placeholder: #71857f;
  /* Lengüeta inactiva en dark: tinta tenue del tema. */
  --ax-tab-inactive-color: var(--ax-text-muted);
  /* --- Bordes --- */
  --ax-border: #354743;
  --ax-border-light: #354743;
  --ax-border-subtle: #354743;
  --ax-border-soft: #354743;
  --ax-border-focus: var(--ax-primary);

  /* --- Grid --- */
  --ax-grid-header-bg: #2a3a37;
  --ax-grid-row-hover: rgba(255, 255, 255, 0.05);

  /* --- Sidebar (salvia oscura, coherente con light) --- */
  --sidebar-bg: #20302c;
  --sidebar-hover: rgba(255, 255, 255, 0.06);
  --sidebar-active-bg: #2b4741;
  --sidebar-active-border: #56c9bc;
  --sidebar-text-primary: #dcebe6;
  --sidebar-text-secondary: #8fb0a9;
  /* Chrome del menú (blanco → salvia en dark): el relleno del ítem activo
     sigue el color de selección del tema/paleta. */
  --sidebar-active-fill: var(--sidebar-active-bg);
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-icon: #8fb0a9;
  --sidebar-section: #8fb0a9;

  --ax-hover-table: rgba(255, 255, 255, 0.04);

  /* --- Primario / acentos (aclarados para contraste) --- */
  --ax-primary: #56c9bc;
  --ax-primary-hover: #7ad8cd;
  --ax-primary-600: #36a99e;
  --ax-primary-700: #8fe3d8;
  --ax-primary-100: #173f3a;
  --ax-primary-50: #0f2c29;
  --ax-accent: #7ea2dc;
  --ax-accent-hover: #9db8e5;
  --ax-accent-600: #3568b8;
  --ax-accent-100: #1c2b47;
  --ax-tertiary: #56c9bc;

  /* --- Indigo --- */
  --ax-indigo-50: #0f2c29;
  --ax-indigo-100: #173f3a;
  --ax-indigo-200: #115e59;
  --ax-indigo-300: #0f766e;
  --ax-indigo-400: #14b8a6;
  --ax-indigo-500: #2dd4bf;
  --ax-indigo-600: #5eead4;
  --ax-indigo-700: #99f6e4;

  /* --- Amber --- */
  --ax-amber-50: #451a03;
  --ax-amber-100: #78350f;
  --ax-amber-200: #92400e;
  --ax-amber-300: #b45309;
  --ax-amber-400: #d97706;
  --ax-amber-500: #f59e0b;
  --ax-amber-600: #fbbf24;
  --ax-amber-700: #fcd34d;

  /* --- Coral --- */
  --ax-coral-50: #4c0519;
  --ax-coral-100: #881337;
  --ax-coral-200: #9f1239;
  --ax-coral-300: #be123c;
  --ax-coral-400: #e11d48;
  --ax-coral-500: #f43f5e;
  --ax-coral-600: #fda4af;
  --ax-coral-700: #fecdd3;

  /* --- Teal --- */
  --ax-teal-50: #042f2e;
  --ax-teal-100: #134e4a;
  --ax-teal-200: #115e59;
  --ax-teal-300: #0f766e;
  --ax-teal-400: #14b8a6;
  --ax-teal-500: #2dd4bf;
  --ax-teal-600: #5eead4;
  --ax-teal-700: #99f6e4;

  /* --- Gold --- */
  --ax-gold-50: #3a2a0e;
  --ax-gold-100: #4c3c1e;
  --ax-gold-200: #6b5224;
  --ax-gold-300: #8a6a2c;
  --ax-gold-400: #b98d33;
  --ax-gold-500: #e9b758;
  --ax-gold-600: #f2cc7d;
  --ax-gold-700: #f8dfa8;

  /* --- Semanticos (aclarados; -100 como fondos suaves oscuros) --- */
  --ax-success: #63d3a7;
  --ax-success-hover: #8ae0be;
  --ax-success-600: #3bbd8d;
  --ax-success-100: #173e31;
  --ax-warning: #e9b758;
  --ax-warning-hover: #f2cc7d;
  --ax-warning-100: #4c3c1e;
  --ax-error: #f08c85;
  --ax-error-hover: #f5aca7;
  --ax-error-100: #4c2928;
  --ax-info: #7ea2dc;
  --ax-info-hover: #9db8e5;
  --ax-info-100: #1c2b47;

  /* --- Contrast: texto sobre botones coloreados en dark ---
     Sincronizado con AdminDashboardTheme.cs (PaletteDark usa #12212b).
     Los primarios se aclaran en dark, así que el contraste pasa a tinta oscura. */
  --ax-primary-contrast: #12212b;
  --ax-secondary-contrast: #12212b;
  --ax-success-contrast: #12212b;
  --ax-warning-contrast: #12212b;
  --ax-error-contrast: #12212b;
  --ax-info-contrast: #12212b;

  /* --- Elevacion / sombras (mayor alpha sobre oscuro) --- */
  --ax-elev-1: 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 1px rgba(0, 0, 0, 0.35);
  --ax-elev-2: 0 2px 8px rgba(0, 0, 0, 0.45), 0 1px 1px rgba(0, 0, 0, 0.40);
  --ax-elev-3: 0 4px 16px rgba(0, 0, 0, 0.50), 0 2px 4px rgba(0, 0, 0, 0.45);
  --ax-elev-4: 0 8px 24px rgba(0, 0, 0, 0.55), 0 2px 2px rgba(0, 0, 0, 0.50);
  --ax-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --ax-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40);
  --ax-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.40);
  --ax-shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.40);
  --ax-shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.45);
  --ax-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.45), 0 4px 6px -4px rgba(0, 0, 0, 0.40);
  --ax-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.50), 0 8px 10px -6px rgba(0, 0, 0, 0.45);
  /* Acentos de sombra: derivados del primario con mayor alfa sobre fondo oscuro */
  --ax-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--ax-primary) 25%, transparent);
  --ax-shadow-primary: 0 4px 12px color-mix(in srgb, var(--ax-primary) 30%, transparent);
  --ax-shadow-primary-sm: 0 2px 6px color-mix(in srgb, var(--ax-primary) 30%, transparent);

  /* --- Roles semanticos (dark) --- */
  --ax-selected: var(--ax-primary-50);
  --ax-selected-hover: var(--ax-primary-100);
  --ax-selected-text: var(--ax-primary-700);
  --ax-wash: rgba(255, 255, 255, 0.05);
  --ax-wash-strong: rgba(255, 255, 255, 0.09);
  --ax-error-muted: var(--ax-error-100);
  --ax-success-muted: var(--ax-success-100);
  --ax-warning-muted: var(--ax-warning-100);
  --ax-info-muted: var(--ax-info-100);

  /* --- Aliases prototipo: no se re-declaran aqui ---
     Se derivan de los tokens --ax-* en :root y se re-resuelven
     automaticamente en dark (y por paleta) al ser variables. */
}

/* Variantes de marca: el layout y el menú consumen estos tokens sin duplicar componentes.
   REGLA: no re-declarar aqui aliases (--teal*, --ink, etc.) ni --ax-shadow-primary;
   todo se deriva de --ax-primary automaticamente. */
:root {
  --ax-palette-teal: #0b9e8f;
  --ax-palette-indigo: #3b7dbd;
  --ax-palette-electrico: #5b5ce6;
  --ax-palette-cian: #0891b2;
}

[data-palette="teal"] {
  /* Teal Vital — primario más luminoso con derive aqua (v9.5) */
  --ax-primary: #0b9e8f;
  --ax-primary-hover: #0a8377;
  --ax-primary-600: #0a8377;
  --ax-primary-700: #075e55;
  --ax-primary-100: #cdf2eb;
  --ax-primary-50: #ebfaf7;
  --ax-primary-lift: #2cd4c0;
  --ax-accent: #0b9e8f;
  --ax-accent-hover: #0a8377;
  --ax-accent-600: #0a8377;
  --ax-accent-100: #cdf2eb;
  --ax-border-focus: var(--ax-primary);
  --ax-selected: var(--ax-primary-50);
  --ax-selected-hover: var(--ax-primary-100);
  --ax-selected-text: var(--ax-primary-600);
  --sidebar-hover: color-mix(in srgb, var(--ax-primary) 6%, transparent);
  --sidebar-active-bg: var(--ax-primary-50);
  --sidebar-active-border: var(--ax-primary);
}

[data-palette="indigo"] {
  /* Azul Acero — tono atenuado (default) */
  --ax-primary: #3b7dbd;
  --ax-primary-hover: #2f6aa3;
  --ax-primary-600: #2f6aa3;
  --ax-primary-700: #274f7a;
  --ax-primary-100: #dbe9f5;
  --ax-primary-50: #eff5fa;
  --ax-primary-lift: #5fa3d8;
  --ax-accent: #3b7dbd;
  --ax-accent-hover: #2f6aa3;
  --ax-accent-600: #2f6aa3;
  --ax-accent-100: #dbe9f5;
  --ax-border-focus: var(--ax-primary);
  --ax-selected: var(--ax-primary-50);
  --ax-selected-hover: var(--ax-primary-100);
  --ax-selected-text: var(--ax-primary-700);
  --sidebar-active-bg: var(--ax-primary-50);
  --sidebar-active-border: var(--ax-primary);
}

[data-palette="electrico"] {
  /* Índigo Eléctrico — violeta vivo que deriva a lavanda (v11) */
  --ax-primary: #5b5ce6;
  --ax-primary-hover: #4a4bd1;
  --ax-primary-600: #4a4bd1;
  --ax-primary-700: #37309f;
  --ax-primary-100: #e1e1fc;
  --ax-primary-50: #f0f0ff;
  --ax-primary-lift: #8a6ef5;
  --ax-accent: #5b5ce6;
  --ax-accent-hover: #4a4bd1;
  --ax-accent-600: #4a4bd1;
  --ax-accent-100: #e1e1fc;
  --ax-border-focus: var(--ax-primary);
  --ax-selected: var(--ax-primary-50);
  --ax-selected-hover: var(--ax-primary-100);
  --ax-selected-text: var(--ax-primary-600);
  --sidebar-hover: color-mix(in srgb, var(--ax-primary) 6%, transparent);
  --sidebar-active-bg: var(--ax-primary-50);
  --sidebar-active-border: var(--ax-primary);
}

[data-palette="cian"] {
  /* Cian Petróleo — cian profundo que cae a azul petróleo (v11) */
  --ax-primary: #0891b2;
  --ax-primary-hover: #0e7490;
  --ax-primary-600: #0e7490;
  --ax-primary-700: #155e75;
  --ax-primary-100: #cffafe;
  --ax-primary-50: #ecfeff;
  --ax-primary-lift: #22d3ee;
  --ax-accent: #0891b2;
  --ax-accent-hover: #0e7490;
  --ax-accent-600: #0e7490;
  --ax-accent-100: #cffafe;
  --ax-border-focus: var(--ax-primary);
  --ax-selected: var(--ax-primary-50);
  --ax-selected-hover: var(--ax-primary-100);
  --ax-selected-text: var(--ax-primary-600);
  --sidebar-hover: color-mix(in srgb, var(--ax-primary) 6%, transparent);
  --sidebar-active-bg: var(--ax-primary-50);
  --sidebar-active-border: var(--ax-primary);
}

[data-theme="dark"][data-palette="teal"] {
  --ax-bg: #15211f;
  --ax-bg-app: #15211f;
  --ax-bg-sidebar: #20302c;
  --ax-bg-header: #202e2b;
  --ax-bg-card: #202e2b;
  --ax-surface: #202e2b;
  --ax-surface-2: #2a3a37;
  --ax-bg-input: #2a3a37;
  --ax-page-bg-accent: #0f1917;
  --ax-text-primary: #ecf5f2;
  --ax-text-secondary: #c4d5d0;
  --ax-text-muted: #c0d3ce;
  --ax-border: #354743;
  --ax-border-focus: var(--ax-primary);
  --ax-primary: #56c9bc;
  --ax-primary-hover: #7ad8cd;
  --ax-primary-600: #36a99e;
  --ax-primary-700: #8fe3d8;
  --ax-primary-100: #173f3a;
  --ax-primary-50: #0f2c29;
  --ax-accent: #56c9bc;
  --ax-accent-hover: #7ad8cd;
  --ax-selected: #0f2c29;
  --ax-selected-hover: #173f3a;
  --ax-selected-text: #8fe3d8;
  --sidebar-bg: #20302c;
  --sidebar-hover: rgba(255, 255, 255, 0.06);
  --sidebar-active-bg: #2b4741;
  --sidebar-active-border: #56c9bc;
  --sidebar-text-primary: #dcebe6;
  --sidebar-text-secondary: #8fb0a9;
}

[data-theme="dark"][data-palette="indigo"] {
  --ax-bg: #151822;
  --ax-bg-app: #151822;
  --ax-bg-sidebar: #1a1f2a;
  --ax-bg-header: #202531;
  --ax-bg-card: #202531;
  --ax-surface: #202531;
  --ax-surface-2: #2a3140;
  --ax-bg-input: #2a3140;
  --ax-page-bg-accent: #101320;
  --ax-text-primary: #f5f7fb;
  --ax-text-secondary: #aab3c5;
  --ax-text-muted: #9aa4b6;
  --ax-border: #313949;
  --ax-border-focus: var(--ax-primary);
  --ax-primary: #6fa9d9;
  --ax-primary-hover: #93c2e7;
  --ax-primary-600: #4f8ec4;
  --ax-primary-700: #bcd7ee;
  --ax-primary-100: #21384c;
  --ax-primary-50: #182a3a;
  --ax-primary-lift: #8dc0ea;
  --ax-accent: #6fa9d9;
  --ax-accent-hover: #93c2e7;
  --ax-selected: #21384c;
  --ax-selected-hover: #2b4a63;
  --ax-selected-text: #bcd7ee;
  --sidebar-bg: #1a1f2a;
  --sidebar-hover: rgba(255, 255, 255, 0.06);
  --sidebar-active-bg: #21384c;
  --sidebar-active-border: #6fa9d9;
  --sidebar-text-primary: #f5f7fb;
  --sidebar-text-secondary: #aab3c5;
}

[data-theme="dark"][data-palette="electrico"] {
  --ax-bg: #151523;
  --ax-bg-app: #151523;
  --ax-bg-sidebar: #1a1a2c;
  --ax-bg-header: #1f1f30;
  --ax-bg-card: #1f1f30;
  --ax-surface: #1f1f30;
  --ax-surface-2: #2a2a44;
  --ax-bg-input: #2a2a44;
  --ax-page-bg-accent: #101020;
  --ax-text-primary: #f5f6fb;
  --ax-text-secondary: #b0b2cd;
  --ax-text-muted: #a3a5c0;
  --ax-border: #33334f;
  --ax-border-focus: var(--ax-primary);
  --ax-primary: #8b8df0;
  --ax-primary-hover: #a7a9f6;
  --ax-primary-600: #6f70e0;
  --ax-primary-700: #c9caff;
  --ax-primary-100: #26264a;
  --ax-primary-50: #1b1b38;
  --ax-primary-lift: #a99bf6;
  --ax-accent: #8b8df0;
  --ax-accent-hover: #a7a9f6;
  --ax-selected: #1b1b38;
  --ax-selected-hover: #26264a;
  --ax-selected-text: #c9caff;
  --sidebar-bg: #1a1a2c;
  --sidebar-hover: rgba(255, 255, 255, 0.06);
  --sidebar-active-bg: #26264a;
  --sidebar-active-border: #8b8df0;
  --sidebar-text-primary: #f5f6fb;
  --sidebar-text-secondary: #b0b2cd;
}

[data-theme="dark"][data-palette="cian"] {
  --ax-bg: #0b1c24;
  --ax-bg-app: #0b1c24;
  --ax-bg-sidebar: #0f2733;
  --ax-bg-header: #102530;
  --ax-bg-card: #102530;
  --ax-surface: #102530;
  --ax-surface-2: #163542;
  --ax-bg-input: #163542;
  --ax-page-bg-accent: #071419;
  --ax-text-primary: #ecfeff;
  --ax-text-secondary: #a5cfd9;
  --ax-text-muted: #9cc6d1;
  --ax-border: #1d4553;
  --ax-border-focus: var(--ax-primary);
  --ax-primary: #22d3ee;
  --ax-primary-hover: #67e8f9;
  --ax-primary-600: #0891b2;
  --ax-primary-700: #a5f3fc;
  --ax-primary-100: #155e75;
  --ax-primary-50: #083344;
  --ax-primary-lift: #67e8f9;
  --ax-accent: #22d3ee;
  --ax-accent-hover: #67e8f9;
  --ax-selected: #083344;
  --ax-selected-hover: #155e75;
  --ax-selected-text: #a5f3fc;
  --sidebar-bg: #0f2733;
  --sidebar-hover: rgba(255, 255, 255, 0.06);
  --sidebar-active-bg: #083344;
  --sidebar-active-border: #22d3ee;
  --sidebar-text-primary: #ecfeff;
  --sidebar-text-secondary: #a5cfd9;
}

/* =========================================================
   ESCALA DE TIPOGRAFÍA — 3 niveles seleccionables por el usuario.
   Mecanismo: se ajusta el font-size de la raíz (<html>) para que
   TODOS los tamaños en `rem` (tokens y literales) escalen de forma
   proporcional. El nivel intermedio (md) es el tamaño actual (16px).
   El padding/alturas en px NO escalan, preservando la densidad.
   Atributo aplicado en <html> vía JS (window.axiomaSetFontScale).
   ========================================================= */
:root[data-font-scale="sm"] { font-size: 14px; } /* Compacto  */
:root[data-font-scale="md"] { font-size: 16px; } /* Normal    */
:root[data-font-scale="lg"] { font-size: 18px; } /* Amplio    */