/*
 * Terrakusine: tokens de diseño (variables CSS).
 *
 * Dirección "mostrador ordenado", variante A "Carbón" (D-33, aprobada el 03/10/2026).
 * Referencia visual: .claude/bocetos/admin-bocetos.html. Guía de uso: .claude/docs/guia-de-diseno.md.
 *
 * Cómo se usa:
 *   <html lang="es" data-tema="auto" data-escala="1">
 *   - data-tema: "claro", "oscuro" o "auto" (sigue al sistema operativo). Preferencia del usuario.
 *   - data-escala: tamaño de letra elegido por el usuario (0.9, 1, 1.1, 1.2, 1.35 o 1.5), que fija
 *     --tk-escala. El 100 % equivale a la base compacta (× 0.9) aprobada en los bocetos.
 *     Es un atributo y no style="" porque la política de seguridad (CSP) no admite estilos en línea.
 *   Ambos valores salen de usuarios.preferencias y los escribe el layout en el <html>.
 *
 * Reglas:
 *   - Ningún componente usa colores literales: siempre estos tokens.
 *   - Los cuatro colores del logo son colores de estado; juntos sólo aparecen en el isotipo.
 *   - El amarillo nunca se usa como texto ni como fondo grande: para texto, --tk-alerta-texto.
 */

:root {
  color-scheme: light;

  /* ---------- marca (medida sobre terrakusine_logocolor.jpg y la bolsa) ---------- */
  --tk-marca-rojo: #ED1B24;
  --tk-marca-amarillo: #FFD401;
  --tk-marca-verde: #8CC63E;
  --tk-marca-azul: #0071BD;
  --tk-marca-carbon: #404042;
  --tk-marca-tinta: #231F20;

  /* ---------- superficies y texto ---------- */
  --tk-papel: #F4F4F2;            /* fondo del contenido; también la lengüeta de la página actual */
  --tk-superficie: #FFFFFF;       /* cabecera, tablas, paneles, campos */
  --tk-superficie-2: #F9F9F8;     /* encabezado de tabla, hover de fila, botones suaves */
  --tk-texto: #231F20;
  --tk-texto-2: #5F5B5D;          /* rótulos, datos secundarios */
  --tk-texto-3: #6E6A6C;          /* ayudas, placeholders, vacíos */
  --tk-linea: #E3E1DF;            /* separadores */
  --tk-linea-fuerte: #CFCCCA;     /* bordes de campos y botones */
  --tk-fila-apertura: #FCF9EF;    /* fila de apertura en el listado de cajas (tono cálido, apenas) */
  --tk-fila-cierre: #F5F7FA;      /* fila de cierre en el listado de cajas (tono frío, apenas) */

  /* ---------- barra lateral (estructura carbón) ---------- */
  --tk-lateral: #404042;
  --tk-lateral-hover: #4D4D50;
  --tk-lateral-flotante: #36363A; /* submenú flotante del riel */
  --tk-lateral-texto: #E6E4E3;
  --tk-lateral-suave: #B3B0B2;

  /* ---------- estados (mismos nombres que los badges del Listado) ---------- */
  /* -marca: relleno del cuadro de estado (fijo, color del logo). -texto: texto legible. -fondo: píldoras y avisos. */
  --tk-ok-marca: var(--tk-marca-verde);
  --tk-ok-texto: #3E7A12;
  --tk-ok-fondo: #EDF6E1;
  --tk-alerta-marca: var(--tk-marca-amarillo);
  --tk-alerta-texto: #7A5E00;
  --tk-alerta-fondo: #FFF6CC;
  --tk-peligro-marca: var(--tk-marca-rojo);
  --tk-peligro-texto: #C4121A;
  --tk-peligro-fondo: #FDE8E8;
  --tk-peligro-accion: #C4121A;   /* fondo del botón destructivo, igual en los dos temas (blanco encima: 5,6:1) */
  --tk-neutro-marca: var(--tk-linea-fuerte);
  --tk-neutro-texto: var(--tk-texto-2);
  --tk-neutro-fondo: var(--tk-superficie-2);

  /* ---------- acción (azul del logo): botón principal, links, foco, selección ---------- */
  --tk-accion: #0071BD;
  --tk-accion-texto: #0062A3;     /* links y texto azul sobre superficie */
  --tk-accion-fondo: #E5F0F9;     /* fila seleccionada, chips de filtro, sugerencia activa */
  --tk-sobre-accion: #FFFFFF;     /* texto sobre --tk-accion */
  --tk-foco: var(--tk-accion);

  /* ---------- capas ---------- */
  --tk-velo: rgba(20, 20, 22, .38);
  --tk-velo-dialogo: rgba(20, 20, 22, .5);
  --tk-sombra: 0 12px 40px rgba(35, 31, 32, .18);
  --tk-sombra-barra: 0 -6px 20px rgba(0, 0, 0, .08);

  /* ---------- mantel (cuadrillé de la bolsa: login, estados vacíos, comprobantes) ---------- */
  --tk-mantel-claro: #FFFFFF;
  --tk-mantel-rojo: rgba(237, 27, 36, .55);
  --tk-mantel-celda: 12px;

  /* ---------- tipografía ---------- */
  --tk-fuente: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --tk-fuente-etiqueta: Arial, Helvetica, sans-serif; /* vista previa de la etiqueta ZPL */
  --tk-peso-liviano: 300;   /* primera palabra de los títulos ("Listado de") */
  --tk-peso-normal: 400;
  --tk-peso-medio: 600;     /* rótulos, botones, nombres en tablas */
  --tk-peso-negrita: 700;
  --tk-peso-titulo: 800;    /* palabra fuerte de los títulos ("productos"), TOTAL */
  --tk-interlineado: 1.4;
  --tk-interlineado-titulo: 1.1;

  /* escala de letra: preferencia del usuario × base compacta */
  --tk-escala: 1;
  --tk-escala-base: .9;
  --tk-esc: calc(var(--tk-escala) * var(--tk-escala-base));
  --tk-esc-menu: min(var(--tk-esc), 1.1); /* el menú lateral escala con tope para no necesitar scroll */

  --tk-letra-xs: calc(11px * var(--tk-esc));    /* kbd, etiquetas "Etapa 2" */
  --tk-letra-s: calc(12px * var(--tk-esc));     /* rótulos de campo, ayudas, encabezados de tabla */
  --tk-letra-m: calc(13px * var(--tk-esc));     /* subtítulos, referencias, datos secundarios */
  --tk-letra-base: calc(14px * var(--tk-esc));  /* texto general, celdas, campos */
  --tk-letra-l: calc(16px * var(--tk-esc));     /* precio final en listados, títulos de opción */
  --tk-letra-xl: calc(18px * var(--tk-esc));    /* importes de la ficha */
  --tk-letra-2xl: calc(20px * var(--tk-esc));   /* título de ficha, stock por sucursal */
  --tk-letra-3xl: calc(26px * var(--tk-esc));   /* título de pantalla */
  --tk-letra-total: calc(44px * var(--tk-esc)); /* TOTAL del pedido */
  --tk-letra-menu: calc(14px * var(--tk-esc-menu));

  /* ---------- espaciado (múltiplos de 4) ---------- */
  --tk-esp-1: 4px;
  --tk-esp-2: 8px;
  --tk-esp-3: 12px;
  --tk-esp-4: 16px;
  --tk-esp-5: 20px;
  --tk-esp-6: 24px;
  --tk-esp-8: 32px;
  --tk-esp-10: 40px;

  /* ---------- formas ---------- */
  --tk-radio: 6px;          /* campos, botones, celdas */
  --tk-radio-g: 8px;        /* paneles, tablas, ítems del menú, diálogos */
  --tk-radio-xl: 10px;      /* submenú flotante */
  --tk-radio-cuadro: 3px;   /* cuadro de estado (el "cuadrado blando" del logo) */
  --tk-radio-pildora: 999px;
  --tk-cuadro: 10px;        /* lado del cuadro de estado */
  --tk-borde: 1px;
  --tk-borde-foco: 2px;
  --tk-borde-lector: 2px;   /* el campo del lector siempre tiene borde azul de 2 px */

  /* ---------- controles ---------- */
  --tk-control: calc(34px * var(--tk-esc));         /* alto de campos y botones */
  --tk-control-chico: calc(32px * var(--tk-esc));   /* descuento / recargo, paginado */
  --tk-control-grande: calc(52px * var(--tk-esc));  /* lector de código, botón Imprimir */
  --tk-tactil: 44px;                                 /* área táctil mínima en tablet y celular */
  --tk-icono: 20px;
  --tk-icono-menu: 19px;
  --tk-icono-riel: 22px;

  /* ---------- estructura ---------- */
  --tk-ancho-lateral: 248px;
  --tk-ancho-riel: 72px;
  --tk-ancho-flotante: 230px;  /* mínimo del submenú flotante */
  --tk-separacion-flotante: 8px;
  --tk-ancho-ficha: 600px;     /* panel lateral de la ficha */
  --tk-ancho-totales: 340px;   /* 320 en notebook, 380 en monitor */
  --tk-ancho-dialogo: 760px;
  --tk-ancho-formulario-login: 380px;
  --tk-gutter: 20px;           /* 16 en celular, 32 en monitor */

  /* ---------- capas (z-index) ---------- */
  --tk-z-tabla-encabezado: 1;
  --tk-z-sugerencias: 5;
  --tk-z-barra-total: 6;
  --tk-z-cabecera: 12;
  --tk-z-velo: 20;
  --tk-z-ficha: 21;
  --tk-z-velo-lateral: 29;
  --tk-z-lateral: 30;
  --tk-z-flotante: 35;
  --tk-z-dialogo: 40;
  --tk-z-aviso: 60;

  /* ---------- movimiento ---------- */
  --tk-duracion: 220ms;        /* abrir/cerrar grupo, achicar el menú */
  --tk-duracion-corta: 140ms;  /* aparición de flotantes y popovers */
  --tk-duracion-resalte: 1.2s; /* línea nueva del pedido */
  --tk-duracion-zoom: 280ms;   /* el total de la venta se agranda al pasar el mouse */
  --tk-curva: ease;
  --tk-curva-zoom: cubic-bezier(.2, .8, .2, 1); /* arranca rápido y frena suave */
}

/* Tamaño de letra del usuario (data-escala en el <html>) */
:root[data-escala="0.9"] { --tk-escala: .9; }
:root[data-escala="1.1"] { --tk-escala: 1.1; }
:root[data-escala="1.2"] { --tk-escala: 1.2; }
:root[data-escala="1.35"] { --tk-escala: 1.35; }
:root[data-escala="1.5"] { --tk-escala: 1.5; }

/* Tablet, celular y pantallas táctiles: controles de 44 px (área táctil) */
@media (max-width: 1199px), (pointer: coarse) {
  :root {
    --tk-control: max(var(--tk-tactil), calc(44px * var(--tk-esc)));
  }
}

/* Celular y monitor: márgenes del contenido */
@media (max-width: 699px) {
  :root { --tk-gutter: 16px; }
}
@media (min-width: 1700px) {
  :root { --tk-gutter: 32px; --tk-ancho-totales: 380px; }
}

/* Movimiento reducido: sin transiciones ni animaciones */
@media (prefers-reduced-motion: reduce) {
  :root {
    --tk-duracion: 0ms;
    --tk-duracion-corta: 0ms;
    --tk-duracion-resalte: 0ms;
    --tk-duracion-zoom: 0ms;
  }
}

/* ---------- modo oscuro ----------
 * Mismo bloque dos veces: elegido por el usuario (data-tema="oscuro") o automático
 * cuando data-tema="auto" y el sistema operativo está en oscuro. Sólo se redefinen colores.
 */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --tk-papel: #1C1C1E;
  --tk-superficie: #262628;
  --tk-superficie-2: #2B2B2E;
  --tk-texto: #EDEBEA;
  --tk-texto-2: #B5B2B3;
  --tk-texto-3: #999698;
  --tk-linea: #37373A;
  --tk-linea-fuerte: #47474B;
  --tk-fila-apertura: #2C2B26;
  --tk-fila-cierre: #22252B;
  --tk-lateral: #121214;
  --tk-lateral-hover: #26262A;
  --tk-lateral-flotante: #19191C;
  --tk-lateral-texto: #E6E4E3;
  --tk-lateral-suave: #8F8C8E;
  --tk-ok-texto: #A6DA6A;
  --tk-ok-fondo: #22331A;
  --tk-alerta-texto: #FFD84D;
  --tk-alerta-fondo: #3A3214;
  --tk-peligro-texto: #FF7A7F;
  --tk-peligro-fondo: #43191B;
  --tk-accion: #2676BC;
  --tk-accion-texto: #6DB5F0;
  --tk-accion-fondo: #15304A;
  --tk-velo: rgba(0, 0, 0, .55);
  --tk-velo-dialogo: rgba(0, 0, 0, .6);
  --tk-sombra: 0 12px 40px rgba(0, 0, 0, .5);
  --tk-sombra-barra: 0 -6px 20px rgba(0, 0, 0, .35);
  --tk-mantel-claro: #E9E7E5;
  --tk-mantel-rojo: rgba(214, 24, 32, .6);
}
@media (prefers-color-scheme: dark) {
  :root[data-tema="auto"] {
    color-scheme: dark;
    --tk-papel: #1C1C1E;
    --tk-superficie: #262628;
    --tk-superficie-2: #2B2B2E;
    --tk-texto: #EDEBEA;
    --tk-texto-2: #B5B2B3;
    --tk-texto-3: #999698;
    --tk-linea: #37373A;
    --tk-linea-fuerte: #47474B;
    --tk-fila-apertura: #2C2B26;
    --tk-fila-cierre: #22252B;
    --tk-lateral: #121214;
    --tk-lateral-hover: #26262A;
    --tk-lateral-flotante: #19191C;
    --tk-lateral-texto: #E6E4E3;
    --tk-lateral-suave: #8F8C8E;
    --tk-ok-texto: #A6DA6A;
    --tk-ok-fondo: #22331A;
    --tk-alerta-texto: #FFD84D;
    --tk-alerta-fondo: #3A3214;
    --tk-peligro-texto: #FF7A7F;
    --tk-peligro-fondo: #43191B;
    --tk-accion: #2676BC;
    --tk-accion-texto: #6DB5F0;
    --tk-accion-fondo: #15304A;
    --tk-velo: rgba(0, 0, 0, .55);
    --tk-velo-dialogo: rgba(0, 0, 0, .6);
    --tk-sombra: 0 12px 40px rgba(0, 0, 0, .5);
    --tk-sombra-barra: 0 -6px 20px rgba(0, 0, 0, .35);
    --tk-mantel-claro: #E9E7E5;
    --tk-mantel-rojo: rgba(214, 24, 32, .6);
  }
}