/* TCellApp — Design Tokens
   Versión 2.0 — Design System v2
   Reemplaza por completo a la v1.0 (violeta #7c5bf8 / Inter).
   Identidad: Primary #88AED2 · Plus Jakarta Sans · neutros templados.
   Regla de oro: 500 = gráficos, barras y puntos (nunca texto ni iconos encima)
                 700 = acción, links, sello de marca y texto azul (AA) · 800 = hover. */

:root {
  color-scheme: light;

  /* ─── Primary ─── */
  --tc-primary-50: #f4f8fc;
  --tc-primary-100: #e7f0f8;
  --tc-primary-200: #cfe0ee;
  --tc-primary-300: #b4cee3;
  --tc-primary-400: #9ebeda;
  --tc-primary-500: #88aed2;
  --tc-primary-600: #6b93ba;
  --tc-primary-700: #4f7599;
  --tc-primary-800: #3a5875;
  --tc-primary-900: #2a3f55;

  /* Alias de acción (usar estos en componentes) */
  --tc-primary: var(--tc-primary-700);
  --tc-primary-hover: var(--tc-primary-800);
  --tc-primary-active: var(--tc-primary-900);
  --tc-primary-soft: var(--tc-primary-50);
  --tc-primary-brand: var(--tc-primary-700);  /* sello de marca: icono claro necesita 700 (4,8:1) */
  --tc-on-primary: var(--tc-neutral-0);       /* texto/icono SOBRE el color de acción */
  --tc-primary-text: var(--tc-primary-800);   /* texto azul sobre superficie o tinte suave */

  /* ─── Neutros templados (sin negro ni blanco puro) ─── */
  --tc-neutral-0: #fcfcfd;
  --tc-neutral-25: #f8f9fb;
  --tc-neutral-50: #f2f4f7;
  --tc-neutral-100: #e9ebef;
  --tc-neutral-200: #e6e8ec;
  --tc-neutral-300: #d3d7de;
  --tc-neutral-400: #8f98a3;
  --tc-neutral-500: #5a6472;
  --tc-neutral-700: #3a424d;
  --tc-neutral-900: #1c222a;

  --tc-surface: var(--tc-neutral-0);
  --tc-surface-soft: var(--tc-neutral-25);
  --tc-surface-sunken: var(--tc-neutral-50);
  --tc-bg: #f1f3f6;

  --tc-text: var(--tc-neutral-900);
  --tc-text-strong: var(--tc-neutral-700);
  --tc-text-muted: var(--tc-neutral-500);   /* 4,6:1 sobre surface y sobre bg */
  --tc-text-decor: var(--tc-neutral-400);   /* SOLO decoración, nunca texto */
  --tc-text-inverse: var(--tc-neutral-0);

  --tc-border: var(--tc-neutral-200);
  --tc-border-strong: var(--tc-neutral-300);
  --tc-border-light: var(--tc-neutral-100);

  --tc-focus-ring: var(--tc-primary-200);
  --tc-focus-width: 3px;
  /* Anillo de foco listo para usar. Se escribía var(--tc-ring) en 22 lugares
     (shell, POS, formularios) pero el token sólo existía en styles.css, que la
     app no carga: el foco de teclado no se pintaba en ninguno de ellos. */
  --tc-ring: 0 0 0 var(--tc-focus-width) var(--tc-focus-ring);
  /* Radio de tarjeta: alias del radio de superficie. Misma historia — vivía en
     styles.css y en la app resolvía a 0, así que el catálogo del POS y varias
     tarjetas salían con esquinas rectas. */
  --tc-card-radius: var(--tc-radius-surface);

  /* ─── Semánticos ─── */
  --tc-success: #3e7d63;
  --tc-success-strong: #336752;
  --tc-success-soft: #edf4f0;
  --tc-success-border: #d3e5db;

  --tc-warning: #c89a4a;
  --tc-warning-strong: #8a6520;
  --tc-warning-soft: #faf4e9;
  --tc-warning-border: #efe0c4;

  --tc-danger: #a8433c;
  --tc-danger-strong: #8c352f;
  --tc-danger-soft: #f7edec;
  --tc-danger-border: #f0d8d6;

  --tc-info: var(--tc-primary-700);
  --tc-info-soft: var(--tc-primary-50);
  --tc-info-border: var(--tc-primary-200);

  /* Tinta de estado sobre su superficie suave. Alias del peldaño -strong: los
     módulos ya escribían var(--tc-*-text) en 84 lugares (badges de estado,
     saldos, avisos) y al no existir el color caía en el texto heredado, así que
     los estados se veían todos grises. Como alias, siguen al tema oscuro. */
  --tc-success-text: var(--tc-success-strong);
  --tc-warning-text: var(--tc-warning-strong);
  --tc-danger-text: var(--tc-danger-strong);
  --tc-info-text: var(--tc-primary-text);

  /* Estados de reparación (board de repairs) */
  --tc-state-review: var(--tc-warning);          /* Equipos en revisión */
  --tc-state-progress: var(--tc-primary-500);    /* En reparación */
  --tc-state-completed: var(--tc-success);       /* Reparado */
  --tc-state-pickedup: var(--tc-neutral-300);    /* Retirado */
  --tc-state-warehouse: var(--tc-neutral-400);   /* Almacén */
  --tc-state-unsolved: var(--tc-danger);         /* Sin solución */

  /* Disabled */
  --tc-disabled-bg: var(--tc-neutral-50);
  --tc-disabled-border: var(--tc-neutral-100);
  --tc-disabled-text: var(--tc-neutral-400);

  /* ─── Espaciado (escala de 4/8, sin valores intermedios) ─── */
  --tc-space-4: 4px;
  --tc-space-8: 8px;
  --tc-space-12: 12px;
  --tc-space-16: 16px;
  --tc-space-20: 20px;   /* padding interno de card */
  --tc-space-24: 24px;
  --tc-space-32: 32px;   /* padding de página */
  --tc-space-48: 48px;
  --tc-space-64: 64px;
  --tc-space-80: 80px;

  /* ─── Radios (uno por clase de elemento) ─── */
  --tc-radius-dot: 2px;
  --tc-radius-badge: 6px;
  --tc-radius-control: 8px;   /* botones, inputs, selects, tabs */
  --tc-radius-surface: 12px;  /* cards, modales, drawers, paneles */
  --tc-radius-full: 9999px;   /* avatares, contadores, barras */

  /* ─── Sombras (solo dos) ─── */
  --tc-shadow-none: none;
  --tc-shadow-card: 0 1px 2px rgba(28, 34, 42, 0.04);
  --tc-shadow-overlay: 0 12px 32px rgba(28, 34, 42, 0.10);
  --tc-overlay-scrim: rgba(28, 34, 42, 0.40);

  /* ─── Tipografía ─── */
  --tc-font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Una sola tipografia en toda la app. El token "mono" se conserva porque lo
     usan cien reglas para importes, codigos y fechas, pero apunta a la misma
     familia: la alineacion de las columnas de numeros la da el
     font-variant-numeric: tabular-nums que ya acompana a cada uso. */
  --tc-font-mono: var(--tc-font-family);

  --tc-fs-display: 32px;   /* login, portadas */
  --tc-fs-h1: 24px;        /* título de página */
  --tc-fs-h2: 18px;        /* sección */
  --tc-fs-h3: 15px;        /* título de card */
  --tc-fs-body: 14px;      /* cuerpo, celdas, labels */
  --tc-fs-sm: 13px;        /* secundario, ayudas */
  --tc-fs-overline: 12px;  /* badges, headers de tabla, grupos de sidebar */

  --tc-fs-numeric: 14px;   /* mono tabular */
  --tc-fs-kpi: 28px;
  --tc-fs-total: 32px;

  --tc-lh-tight: 1.2;
  --tc-lh-body: 1.6;
  --tc-tracking-title: -0.02em;
  --tc-tracking-overline: 0.1em;

  --tc-weight-400: 400;   /* cuerpo, celdas */
  --tc-weight-500: 500;   /* labels, botones, datos */
  --tc-weight-600: 600;   /* títulos */

  /* ─── Tamaños de shell y controles ─── */
  --tc-control-sm: 32px;
  --tc-control-md: 40px;
  --tc-control-lg: 48px;
  --tc-nav-item: 36px;
  --tc-row: 48px;            /* fila de tabla */
  --tc-table-head: 40px;
  --tc-table-toolbar: 56px;
  --tc-topbar: 64px;
  --tc-sidebar: 248px;
  --tc-sidebar-collapsed: 64px;
  --tc-drawer: 480px;
  --tc-modal-sm: 480px;
  --tc-modal-md: 560px;
  --tc-icon-sm: 16px;
  --tc-icon-md: 18px;
  --tc-icon-lg: 20px;
  --tc-icon-xl: 24px;
  --tc-icon-stroke: 1.5;
  --tc-touch-min: 44px;
  --tc-content-max: 1440px;

  /* ─── Z-index ─── */
  --tc-z-base: 0;
  --tc-z-sticky: 100;
  --tc-z-sidebar: 200;
  --tc-z-topbar: 300;
  --tc-z-dropdown: 400;
  --tc-z-overlay: 500;
  --tc-z-drawer: 600;
  --tc-z-modal: 700;
  /* Los modales de los módulos están fijados en 2000/2001 desde antes del DS.
     Lo que flota SOBRE un modal (desplegables, calendario, menús de fila, avisos)
     tiene que ir por encima de ese número o se abre detrás y no se ve. */
  --tc-z-popover: 3000;
  --tc-z-toast: 3100;
  --tc-z-tooltip: 3200;

  /* ─── Motion ─── */
  --tc-duration-fast: 140ms;   /* hover, focus, tabs */
  --tc-duration-base: 200ms;   /* modal, toast */
  --tc-duration-slow: 280ms;   /* drawer, sidebar */
  --tc-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --tc-ease-out: cubic-bezier(0, 0, 0.2, 1);
}

/* ─── Compatibilidad con la v1.0 ───
   Los módulos existentes siguen usando estos nombres; quedan mapeados
   al sistema nuevo para que la migración sea progresiva.
   Al refactorizar un módulo, reemplazar por los tokens de arriba. */
:root {
  --tc-radius-8: var(--tc-radius-control);
  --tc-radius-12: var(--tc-radius-surface);
  --tc-radius-16: var(--tc-radius-surface);
  --tc-radius-20: var(--tc-radius-surface);
  --tc-radius-24: var(--tc-radius-surface);

  --tc-shadow-soft: var(--tc-shadow-card);
  --tc-shadow-medium: var(--tc-shadow-overlay);

  --tc-text-soft: var(--tc-text-muted);

  --tc-title-xl: var(--tc-fs-display);
  --tc-title-lg: var(--tc-fs-h1);
  --tc-title-md: var(--tc-fs-h2);
  --tc-body: var(--tc-fs-body);
  --tc-small: var(--tc-fs-sm);
  --tc-caption: var(--tc-fs-overline);

  --tc-weight-700: var(--tc-weight-600);
  --tc-weight-800: var(--tc-weight-600);
}

/* ══════════════════════════════════════════════════════════════
   TEMA OSCURO
   Sólo se redefinen tokens SEMÁNTICOS: las escalas Primary y Neutral
   siguen siendo las mismas. Si un componente usa --tc-surface y
   --tc-text en vez de un hex, ya funciona en los dos temas.

   Activación:
     <html data-theme="dark">        forzado por el usuario
     <html data-theme="light">       forzado por el usuario
     sin atributo                    sigue al sistema operativo

   Regla de oro invertida: en oscuro el color de acción es CLARO y el
   texto encima es OSCURO. Blanco sobre Primary 600 no llega a 4,5:1,
   por eso el botón primario usa Primary 300 con tinta oscura (11:1).
   ══════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }

/* Los valores viven en un solo lugar y se aplican desde los dos selectores */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Acción — clara sobre fondo oscuro, con tinta oscura encima */
    --tc-primary: var(--tc-primary-300);
    --tc-primary-hover: var(--tc-primary-200);
    --tc-primary-active: var(--tc-primary-100);
    --tc-primary-soft: #23303c;
    --tc-primary-brand: var(--tc-primary-600);
    --tc-on-primary: #14181d;
  --tc-primary-text: var(--tc-primary-200);

    /* Superficies — cuatro niveles, del fondo a lo más elevado */
    --tc-bg: #14181d;
    --tc-surface: #1b2027;
    --tc-surface-soft: #21272f;
    --tc-surface-sunken: #262d36;

    /* Texto */
    --tc-text: #e8ebef;
    --tc-text-strong: #cfd5dd;
    --tc-text-muted: #a0aab6;        /* 7,1:1 sobre surface */
    --tc-text-decor: #6e7885;        /* SOLO decoración, nunca texto */
    --tc-text-inverse: #14181d;

    /* Bordes — en oscuro separan por luminancia, no por sombra */
    --tc-border: #2e3641;
    --tc-border-strong: #3c4652;
    --tc-border-light: #262d36;

    --tc-focus-ring: rgba(136, 174, 210, 0.45);

    /* Semánticos — versiones desaturadas para no vibrar sobre oscuro */
    --tc-success: #6fb894;
    --tc-success-strong: #8fcdad;
    --tc-success-soft: #1a2a24;
    --tc-success-border: #2c463a;

    --tc-warning: #e0b968;
    --tc-warning-strong: #eccf90;
    --tc-warning-soft: #2a2419;
    --tc-warning-border: #453a25;

    --tc-danger: #d98a84;
    --tc-danger-strong: #e8a9a3;
    --tc-danger-soft: #2a1c1b;
    --tc-danger-border: #472e2c;

    --tc-info: var(--tc-primary-300);
    --tc-info-soft: #23303c;
    --tc-info-border: #33475a;

    /* Estados de reparación */
    --tc-state-review: var(--tc-warning);
    --tc-state-progress: var(--tc-primary-400);
    --tc-state-completed: var(--tc-success);
    --tc-state-pickedup: #4a5361;
    --tc-state-warehouse: #6e7885;
    --tc-state-unsolved: var(--tc-danger);

    /* Disabled */
    --tc-disabled-bg: #21272f;
    --tc-disabled-border: #2e3641;
    --tc-disabled-text: #6e7885;

    /* Sombras — en oscuro casi no se ven: la elevación la da la superficie.
       Se conservan para las capas flotantes sobre contenido. */
    --tc-shadow-card: none;
    --tc-shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.48);
    --tc-overlay-scrim: rgba(6, 9, 12, 0.64);
  }
}

:root[data-theme="dark"] {
  --tc-primary: var(--tc-primary-300);
  --tc-primary-hover: var(--tc-primary-200);
  --tc-primary-active: var(--tc-primary-100);
  --tc-primary-soft: #23303c;
  --tc-primary-brand: var(--tc-primary-600);
  --tc-on-primary: #14181d;
  --tc-primary-text: var(--tc-primary-200);

  --tc-bg: #14181d;
  --tc-surface: #1b2027;
  --tc-surface-soft: #21272f;
  --tc-surface-sunken: #262d36;

  --tc-text: #e8ebef;
  --tc-text-strong: #cfd5dd;
  --tc-text-muted: #a0aab6;
  --tc-text-decor: #6e7885;
  --tc-text-inverse: #14181d;

  --tc-border: #2e3641;
  --tc-border-strong: #3c4652;
  --tc-border-light: #262d36;

  --tc-focus-ring: rgba(136, 174, 210, 0.45);

  --tc-success: #6fb894;
  --tc-success-strong: #8fcdad;
  --tc-success-soft: #1a2a24;
  --tc-success-border: #2c463a;

  --tc-warning: #e0b968;
  --tc-warning-strong: #eccf90;
  --tc-warning-soft: #2a2419;
  --tc-warning-border: #453a25;

  --tc-danger: #d98a84;
  --tc-danger-strong: #e8a9a3;
  --tc-danger-soft: #2a1c1b;
  --tc-danger-border: #472e2c;

  --tc-info: var(--tc-primary-300);
  --tc-info-soft: #23303c;
  --tc-info-border: #33475a;

  --tc-state-review: var(--tc-warning);
  --tc-state-progress: var(--tc-primary-400);
  --tc-state-completed: var(--tc-success);
  --tc-state-pickedup: #4a5361;
  --tc-state-warehouse: #6e7885;
  --tc-state-unsolved: var(--tc-danger);

  --tc-disabled-bg: #21272f;
  --tc-disabled-border: #2e3641;
  --tc-disabled-text: #6e7885;

  --tc-shadow-card: none;
  --tc-shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.48);
  --tc-overlay-scrim: rgba(6, 9, 12, 0.64);
}

/* En oscuro las tarjetas se separan del fondo por superficie + borde,
   no por sombra. Sin esto, todo queda plano. */
:root[data-theme="dark"] :where(.tc-card, .tc-modal, .tc-dropdown, .tc-sheet) {
  border-color: var(--tc-border);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :where(.tc-card, .tc-modal, .tc-dropdown, .tc-sheet) {
    border-color: var(--tc-border);
  }
}

/* Imágenes y fotos de equipos: bajan un punto de brillo para no encandilar */
:root[data-theme="dark"] :where(img, .tc-thumb) { filter: brightness(0.92); }

/* Foco visible obligatorio en todo elemento interactivo */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--tc-focus-width) var(--tc-focus-ring);
  border-color: var(--tc-primary-500);
}

/* Cifras siempre tabulares */
:where(body) {
  font-family: var(--tc-font-family);
  color: var(--tc-text);
  background: var(--tc-bg);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}