/* Japifon Design System v1.1 — tokens
   Tema: <html data-theme="light|dark">. También funciona en un contenedor (data-theme en cualquier elemento). */

/* CAPA 1 — Primitivos. NUNCA se usan en componentes. */
:root {
  --p-navy-950: #00005C;  --p-navy-900: #00068F;  --p-navy-700: #3B3BB8;
  --p-navy-600: #6666CF;  --p-navy-500: #8585DC;  --p-navy-400: #8C8CDA;  --p-navy-300: #A0A0E8;
  --p-navy-250: #B2B2EC;
  --p-navy-200: #C4C4F2;
  --p-teal-800: #0B7275;  --p-teal-600: #1F9CA0;  --p-teal-500: #00BBAF;  --p-teal-400: #2CCABE;
  --p-magenta-700: #B81F74; --p-magenta-500: #FB0D80; --p-magenta-300: #F07CC0;
  --p-amber-900: #7A4A00; --p-amber-700: #C47E08; --p-amber-600: #B5843A;
  --p-amber-500: #F59E0B;
  --p-red-700: #C62828;   --p-red-400: #FF6B5E;
  --p-slate-600: #5B6B80; --p-slate-400: #94A3B8;
  --p-gray-0: #FFFFFF;  --p-gray-50: #FAFAFA;  --p-gray-100: #F5F5F5;
  --p-gray-200: #E5E5E5; --p-gray-300: #D4D4D4; --p-gray-400: #A3A3A3;
  --p-gray-450: #8A8A8A; --p-gray-500: #6F6F6F; --p-gray-600: #525252;
  --p-gray-700: #404040; --p-gray-800: #262626; --p-gray-900: #111111;
  /* Ink: neutros oscuros con tinte navy (tema Dark) */
  --p-ink-100: #F2F3F8; --p-ink-300: #CACDDD; --p-ink-350: #B4B7CB; --p-ink-400: #A3A7BF; --p-ink-500: #878CA8;
  --p-ink-600: #6C7090; --p-ink-700: #41455E; --p-ink-800: #2F3247; --p-ink-900: #252839; --p-ink-950: #1E2030; --p-ink-975: #0A0B12;
}

/* ESCALAS (no cambian por tema) — espaciado, radios, sombras, capas, movimiento, controles */
:root {
  --space-0: 0;      --space-1: .25rem; --space-2: .5rem;  --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem;   --space-7: 3rem;   --space-8: 4rem;
  --radius-sm: 4px;  --radius-md: 6px;  --radius-lg: 10px; --radius-pill: 999px;
  --control-h-sm: 2rem; --control-h-md: 2.5rem; --control-h-lg: 3rem;
  --z-dropdown: 1000; --z-sticky: 1020; --z-modal: 1050; --z-toast: 1080; --z-tooltip: 1090;
  --duration: .15s; --ease: cubic-bezier(.2, 0, 0, 1);
}
/* Sombras y velo: son lo único de este bloque que cambia por tema, y por eso
   llevan [data-theme="light"] además de :root. Declaradas solo en :root, un
   contenedor claro anidado dentro de uno oscuro heredaba las sombras oscuras
   —y el archivo promete tema por contenedor, no solo por documento. */
:root, [data-theme="light"] {
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--p-gray-900) 8%, transparent);
  --shadow-md: 0 4px 12px color-mix(in srgb, var(--p-gray-900) 12%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, var(--p-gray-900) 18%, transparent);
  --backdrop: color-mix(in srgb, var(--p-gray-900) 50%, transparent);
}
[data-theme="dark"] {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .40);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .50);
  --backdrop: color-mix(in srgb, var(--p-ink-975) 65%, transparent);
}

/* CAPA 2 — Roles semánticos. Light por defecto. */
:root, [data-theme="light"] {
  color-scheme: light;
  --color-primary: var(--p-navy-900);    --color-primary-fill: var(--p-navy-900);    --color-on-primary: var(--p-gray-0);
  --color-secondary: var(--p-teal-800);  --color-secondary-fill: var(--p-teal-800);  --color-on-secondary: var(--p-gray-0);
  --color-accent: var(--p-magenta-700);  --color-accent-fill: var(--p-magenta-700);  --color-on-accent: var(--p-gray-0);
  --color-success: var(--p-teal-800);    --color-success-fill: var(--p-teal-800);    --color-on-success: var(--p-gray-0);
  --color-warning: var(--p-amber-900);   --color-warning-fill: var(--p-amber-500);   --color-on-warning: var(--p-gray-900);
  --color-error: var(--p-red-700);       --color-error-fill: var(--p-red-700);       --color-on-error: var(--p-gray-0);
  --color-muted: var(--p-slate-600);

  --color-link-hover: var(--p-magenta-700);
  --color-control-checked: var(--p-navy-900); --color-on-control-checked: var(--p-gray-0);
  --focus-ring: var(--p-navy-900);

  --text-primary: var(--p-gray-900);   --text-secondary: var(--p-gray-600);
  --text-muted: var(--p-gray-500);     --text-disabled: var(--p-gray-400);

  --surface-base: var(--p-gray-0);     --surface-raised: var(--p-gray-0);
  --surface-sunken: var(--p-gray-50);  --surface-subtle: var(--p-gray-100);
  --surface-inverse: var(--p-gray-900); --surface-disabled: var(--p-gray-100);

  --border-divider: var(--p-gray-200); --border-component: var(--p-gray-450);
  --border-disabled: var(--p-gray-200);

  --primary-subtle: color-mix(in srgb, var(--p-navy-900) 8%, transparent);      --secondary-subtle: color-mix(in srgb, var(--p-teal-600) 10%, transparent);
  --accent-subtle: color-mix(in srgb, var(--p-magenta-500) 8%, transparent);
  --warning-subtle: color-mix(in srgb, var(--p-amber-500) 12%, transparent);   --error-subtle: color-mix(in srgb, var(--p-red-700) 8%, transparent);

  --state-darken-hover: rgba(0, 0, 0, .12);    --state-darken-pressed: rgba(0, 0, 0, .24);
  --state-lighten-hover: rgba(255, 255, 255, .12); --state-lighten-pressed: rgba(255, 255, 255, .24);
  --state-hover-surface: rgba(0, 0, 0, .04);
  --secondary-overlay-hover: var(--state-darken-hover); --secondary-overlay-pressed: var(--state-darken-pressed);

  --chart-data-1: var(--p-navy-700);    --chart-data-2: var(--p-teal-600);
  --chart-data-3: var(--p-magenta-700); --chart-data-4: var(--p-amber-700);
  --chart-data-5: var(--p-navy-950);    --chart-data-6: var(--p-amber-900);
  /* Relleno de una categoría SIN dato en una visualización —el país que ningún
     proveedor resuelve en el mapa de cobertura—. No es --color-muted: el book
     le da a ese token dos papeles, «sin dato» y serie «Otros», y en un mismo
     gráfico pueden coexistir. Se separa de la superficie que lo contiene lo
     justo para dar cuerpo a la forma, sin competir con los --chart-data-*. */
  --chart-empty: var(--p-gray-200);
  /* Franja del encabezado de tabla: un paso por debajo del contenedor elevado */
  --table-head-bg: var(--p-gray-100);

  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", Menlo, monospace;
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-primary: var(--p-navy-250);    --color-primary-fill: var(--p-navy-600);
  --color-secondary: var(--p-teal-400);  --color-secondary-fill: var(--p-teal-500);  --color-on-secondary: var(--p-gray-900);
  --color-accent: var(--p-magenta-300);  --color-accent-fill: var(--p-magenta-700);  --color-on-accent: var(--p-gray-0);
  --color-success: var(--p-teal-400);    --color-success-fill: var(--p-teal-800);
  --color-warning: var(--p-amber-500);   --color-warning-fill: var(--p-amber-500);
  --color-error: var(--p-red-400);       --color-error-fill: var(--p-red-700);
  --color-muted: var(--p-slate-400);

  --color-link-hover: var(--p-magenta-300);
  --color-control-checked: var(--p-navy-250); --color-on-control-checked: var(--p-ink-900);
  --focus-ring: var(--p-navy-250);

  --text-primary: var(--p-ink-100);    --text-secondary: var(--p-ink-300);
  --text-muted: var(--p-ink-350);      --text-disabled: var(--p-ink-600);

  --surface-base: var(--p-ink-900);    --surface-raised: var(--p-ink-800);
  --surface-sunken: var(--p-ink-950);  --surface-subtle: var(--p-ink-800);
  --surface-inverse: var(--p-ink-100); --surface-disabled: var(--p-ink-800);

  --border-divider: var(--p-ink-700);  --border-disabled: var(--p-ink-700);
  --border-component: var(--p-ink-500);

  --primary-subtle: color-mix(in srgb, var(--p-navy-300) 10%, transparent);  --secondary-subtle: color-mix(in srgb, var(--p-teal-500) 10%, transparent);
  --accent-subtle: color-mix(in srgb, var(--p-magenta-300) 10%, transparent);   --warning-subtle: color-mix(in srgb, var(--p-amber-500) 10%, transparent);
  --error-subtle: color-mix(in srgb, var(--p-red-400) 10%, transparent);
  --state-hover-surface: rgba(255, 255, 255, .06);
  --secondary-overlay-hover: var(--state-lighten-hover); --secondary-overlay-pressed: var(--state-lighten-pressed);

  --chart-data-1: var(--p-navy-500);    --chart-data-2: var(--p-teal-500);
  --chart-data-3: var(--p-magenta-500); --chart-data-4: var(--p-amber-500);
  --chart-data-5: var(--p-navy-200);    --chart-data-6: var(--p-amber-600);
  --chart-empty: var(--p-ink-950);
  --table-head-bg: var(--p-ink-900);
}

/* Tema del sistema. Sin este bloque, :root fija color-scheme: light de forma
   incondicional y un usuario con el sistema en oscuro veía el tema claro: el
   archivo solo cambia de tema cuando hay data-theme en el HTML, y el portal no
   lo emite cuando la preferencia es "sistema".
   :not([data-theme]) para que una elección explícita del usuario siga
   ganando sobre la del sistema operativo. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
  color-scheme: dark;
  --color-primary: var(--p-navy-250);    --color-primary-fill: var(--p-navy-600);
  --color-secondary: var(--p-teal-400);  --color-secondary-fill: var(--p-teal-500);  --color-on-secondary: var(--p-gray-900);
  --color-accent: var(--p-magenta-300);  --color-accent-fill: var(--p-magenta-700);  --color-on-accent: var(--p-gray-0);
  --color-success: var(--p-teal-400);    --color-success-fill: var(--p-teal-800);
  --color-warning: var(--p-amber-500);   --color-warning-fill: var(--p-amber-500);
  --color-error: var(--p-red-400);       --color-error-fill: var(--p-red-700);
  --color-muted: var(--p-slate-400);

  --color-link-hover: var(--p-magenta-300);
  --color-control-checked: var(--p-navy-250); --color-on-control-checked: var(--p-ink-900);
  --focus-ring: var(--p-navy-250);

  --text-primary: var(--p-ink-100);    --text-secondary: var(--p-ink-300);
  --text-muted: var(--p-ink-350);      --text-disabled: var(--p-ink-600);

  --surface-base: var(--p-ink-900);    --surface-raised: var(--p-ink-800);
  --surface-sunken: var(--p-ink-950);  --surface-subtle: var(--p-ink-800);
  --surface-inverse: var(--p-ink-100); --surface-disabled: var(--p-ink-800);

  --border-divider: var(--p-ink-700);  --border-disabled: var(--p-ink-700);
  --border-component: var(--p-ink-500);

  --primary-subtle: color-mix(in srgb, var(--p-navy-300) 10%, transparent);  --secondary-subtle: color-mix(in srgb, var(--p-teal-500) 10%, transparent);
  --accent-subtle: color-mix(in srgb, var(--p-magenta-300) 10%, transparent);   --warning-subtle: color-mix(in srgb, var(--p-amber-500) 10%, transparent);
  --error-subtle: color-mix(in srgb, var(--p-red-400) 10%, transparent);
  --state-hover-surface: rgba(255, 255, 255, .06);
  --secondary-overlay-hover: var(--state-lighten-hover); --secondary-overlay-pressed: var(--state-lighten-pressed);

  --chart-data-1: var(--p-navy-500);    --chart-data-2: var(--p-teal-500);
  --chart-data-3: var(--p-magenta-500); --chart-data-4: var(--p-amber-500);
  --chart-data-5: var(--p-navy-200);    --chart-data-6: var(--p-amber-600);
  --chart-empty: var(--p-ink-950);
  --table-head-bg: var(--p-ink-900);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .40);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .50);
  --backdrop: color-mix(in srgb, var(--p-ink-975) 65%, transparent);
}
}


/* Alias de capa 2. Se declaran en cada ámbito de tema para que se recalculen. */
:root, [data-theme] {
  --color-info: var(--color-primary);  --color-info-fill: var(--color-primary-fill);  --color-on-info: var(--color-on-primary);
  --color-link: var(--color-primary);
  --border-error: var(--color-error);
  --success-subtle: var(--secondary-subtle);
}

/* CAPA 3 — Componente. Solo referencia la capa 2. */
:root, [data-theme] {
  --btn-primary-bg: var(--color-primary-fill);     --btn-primary-fg: var(--color-on-primary);
  --btn-primary-overlay-hover: var(--state-darken-hover);
  --btn-secondary-bg: var(--color-secondary-fill); --btn-secondary-fg: var(--color-on-secondary);
  --btn-secondary-overlay-hover: var(--secondary-overlay-hover); --btn-secondary-overlay-pressed: var(--secondary-overlay-pressed);
  --btn-outline-border: var(--border-component);   --btn-outline-fg: var(--color-primary);
  --btn-disabled-bg: var(--surface-disabled);      --btn-disabled-fg: var(--text-disabled);

  --input-border: var(--border-component);  --input-border-error: var(--border-error);
  --input-placeholder: var(--text-muted);   --input-focus-ring: var(--focus-ring);

  --link: var(--color-link);  --link-hover: var(--color-link-hover);
  --link-decoration: underline;

  --card-bg: var(--surface-raised);  --card-border: var(--border-divider);
  /* Contenedores (tabla, panel, card, KPI, gráfica): siempre se separan del fondo de la página por superficie + borde + sombra */
  --container-bg: var(--surface-raised); --container-border: var(--border-divider); --container-shadow: var(--shadow-sm);
  --sidebar-active-bg: var(--primary-subtle); --sidebar-active-indicator: var(--color-primary);

  --badge-draft-bg: var(--surface-subtle);       --badge-draft-fg: var(--text-secondary);
  --badge-scheduled-bg: var(--color-info-fill);  --badge-scheduled-fg: var(--color-on-info);
  --badge-sent-bg: var(--color-success-fill);    --badge-sent-fg: var(--color-on-success);
  --badge-failed-bg: var(--color-error-fill);    --badge-failed-fg: var(--color-on-error);
  --badge-new-bg: var(--color-accent-fill);      --badge-new-fg: var(--color-on-accent);
}

/* Estilos base (body, foco) viven en japifon-components.css: este archivo solo define tokens. */