/* ==========================================================================
   DOMINO — SISTEMA DE GESTIÓN INTERNA DE PERSONAL
   Tokens de diseño — "Ficha sobre fieltro" (rediseño 2026-11-06)

   Concepto: una ficha de dominó de hueso sobre fieltro verde-negro, con
   herrajes de latón. Escena de uso: personal del local mirando su cuenta en el
   celular, de noche y con poca luz → tema oscuro, texto hueso, un solo acento
   (latón) y color semántico solo donde significa algo (verde ok, naranja aviso,
   rojo sanción).

   Tipografía: Archivo (display, eje de ancho: expandido para marca y montos) +
   Schibsted Grotesk (texto). Ambas con cifras tabulares (verificado).

   Los NOMBRES de variables se conservan del sistema anterior (las demás
   pantallas los usan); cambian los valores. Convención de los sufijos:
     --X-soft   = fondo tintado oscuro del color X
     --X-dark   = color de TEXTO/ícono del color X sobre fondo oscuro (claro)
     --X-border = borde tintado
   ========================================================================== */

:root,
.on-felt,
.bento-hero,
.clock {  /* .on-felt: isla oscura dentro del tema claro (reloj, ficha de saldo) */
  /* ------------------------------------------------------------------
     1. Fieltro: lienzo y superficies (verde-negro, ligeramente cálido)
     ------------------------------------------------------------------ */
  --color-bg: #0a1210;
  --color-bg-subtle: #111b18;
  --color-bg-canvas: #0a1210;
  --color-surface: #141f1b;
  --color-surface-hover: #1a2822;
  --color-surface-active: #0f1814;
  --color-surface-raised: #1b2a24;

  /* ------------------------------------------------------------------
     2. Bordes
     ------------------------------------------------------------------ */
  --color-border: #26362f;
  --color-border-subtle: #1b2823;
  --color-border-hover: #3b5148;
  --color-border-focus: #e6b04a;
  --border-hairline: 1px solid var(--color-border);

  /* ------------------------------------------------------------------
     3. Tipografía
     ------------------------------------------------------------------ */
  --font-display: 'Archivo', 'Arial Narrow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Nombre heredado: antes era la serif de montos. Ahora es la cara de cifras. */
  --font-mono: var(--font-num);

  --color-text: #f2ebdc;            /* hueso */
  --color-text-secondary: #cdd2c6;
  --color-text-muted: #95a39a;
  --color-text-inverse: #15201b;    /* tinta, para texto sobre hueso/latón */

  /* ------------------------------------------------------------------
     4. Hueso, tinta y latón (identidad)
     ------------------------------------------------------------------ */
  --bone: #efe6d1;
  --bone-hi: #f7f1e2;
  --bone-lo: #ddd2b8;
  --ink: #15201b;
  --ink-soft: #3a4a42;              /* texto secundario sobre hueso (AA) */
  --brass: #e6b04a;
  --brass-hi: #f3c566;
  --brass-lo: #b98a2c;
  --on-accent: #1a1405;             /* texto sobre latón */

  --accent-slate: #efe6d1;          /* hueso: estados activos "sólidos" */
  --accent-slate-light: #17231e;
  --accent-slate-deep: #070d0b;

  --accent-primary: #e6b04a;
  --accent-primary-hover: #f3c566;
  --accent-primary-soft: #2a2312;
  --accent-primary-border: #5e4b21;
  --accent-glow: rgba(230, 176, 74, 0.22);
  --brass-ink: #e6b04a;             /* latón para TEXTO/ícono (en claro se oscurece para AA) */

  /* ------------------------------------------------------------------
     5. Semántica operativa
     ------------------------------------------------------------------ */
  /* Verde — crédito disponible, puntual, ok */
  --emerald: #3fc796;
  --emerald-dark: #74e0b4;
  --emerald-soft: #12291f;
  --emerald-border: #235a45;
  --emerald-glow: rgba(63, 199, 150, 0.25);

  /* Naranja — adelantos, tardanza, avisos */
  --amber: #f29a4a;
  --amber-dark: #f7b272;
  --amber-soft: #2c1d10;
  --amber-border: #62401f;
  --amber-glow: rgba(242, 154, 74, 0.22);

  /* Rojo — sanciones, faltas, destructivo */
  --rose: #f06a7a;
  --rose-dark: #ff9aa6;
  --rose-soft: #2d1519;
  --rose-border: #64303a;
  --rose-glow: rgba(240, 106, 122, 0.22);

  /* Lavanda — consumos/roles admin/justificaciones */
  --indigo: #aeacff;
  --indigo-soft: #1c1b3a;
  --indigo-border: #3e3d7c;

  /* Categorías de catálogo POS */
  --cat-comida: #f7b272;
  --cat-comida-soft: #2c1d10;
  --cat-coctel: #c9a6ff;
  --cat-coctel-soft: #231a38;
  --cat-botella: #7fcdf0;
  --cat-botella-soft: #112733;

  /* Estados activos "sólidos" (chips/pestañas/día elegido): hueso sobre fieltro */
  --active-bg: #efe6d1;
  --active-fg: #15201b;
  --active-fg-soft: #3a4a42;
  --active-grad: linear-gradient(166deg, #f7f1e2, #efe6d1 55%, #ddd2b8);
  --active-border: #f7f1e2;
  --sel-c: #4a46c9; --sel-a: #8a6012; --sel-s: #b3263a;   /* puntos sobre el día elegido */

  /* Sombras, bordes de luz y velos: parametrizados por tema */
  --sh: 0 0 0;                       /* color de sombra (rgb) */
  --sh-k: 1;                         /* intensidad de sombra */
  --edge: 255 244 214;               /* filo de luz sobre fieltro (rgb) */
  --scrim: 3 8 6;
  --glow-a: rgba(230, 176, 74, 0.075);
  --glow-b: rgba(63, 199, 150, 0.055);
  --scroll-thumb: #2d423a;
  --scroll-thumb-hover: #3f5a4f;
  --lit: inset 0 1px 0 0 rgb(var(--edge) / 0.06);
  --placeholder: #7f8e86;
  --meta-bg: #0a1210;

  color-scheme: dark;
}

/* Tokens independientes del tema */
:root {
  /* ------------------------------------------------------------------
     6. Radios
     ------------------------------------------------------------------ */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-card: 16px;
  --radius-card-lg: 22px;
  --radius-pill: 9999px;

  /* Sombras: derivan de --sh/--sh-k (cambian por tema) + brillo superior de 1px */
  --shadow-xs: 0 1px 2px 0 rgb(var(--sh) / calc(0.35 * var(--sh-k)));
  --shadow-sm: 0 2px 6px -1px rgb(var(--sh) / calc(0.4 * var(--sh-k))), var(--lit);
  --shadow-card: 0 6px 16px -8px rgb(var(--sh) / calc(0.6 * var(--sh-k))), var(--lit);
  --shadow-card-hover: 0 14px 28px -10px rgb(var(--sh) / calc(0.7 * var(--sh-k))), var(--lit);
  --shadow-hero: 0 26px 40px -18px rgb(var(--sh) / calc(0.85 * var(--sh-k))), 0 4px 10px -2px rgb(var(--sh) / calc(0.5 * var(--sh-k)));
  --shadow-dock: 0 18px 34px -8px rgb(var(--sh) / calc(0.75 * var(--sh-k))), 0 0 0 1px rgb(var(--edge) / 0.07), var(--lit);
  --shadow-modal: 0 28px 48px -14px rgb(var(--sh) / calc(0.85 * var(--sh-k))), 0 0 0 1px rgb(var(--edge) / 0.07);

  /* ------------------------------------------------------------------
     7. Movimiento (curvas propias; solo transform/opacity se animan)
     ------------------------------------------------------------------ */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-settle: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-press: cubic-bezier(0.3, 0, 0, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --duration-instant: 110ms;
  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-slow: 400ms;

  --tap-min: 44px;

  --dock-height: 64px;
  --dock-offset: 14px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

}

/* ==========================================================================
   TEMA CLARO — "papel y tinta": papel cálido, superficies crema/blancas, tinta
   verde-negro y latón oscurecido para texto. Las fichas siguen siendo hueso
   (ahora marfil casi blanco) y se separan del papel con sombra cálida y filo.
   Se activa con <html data-theme="light"> (script del <head>, sin parpadeo).
   ========================================================================== */
:root[data-theme="light"] {
  --color-bg: #ece6d4;
  --color-bg-subtle: #e3dbc4;
  --color-bg-canvas: #ece6d4;
  --color-surface: #fcfaf3;
  --color-surface-hover: #f3eedd;
  --color-surface-active: #ede6d1;
  --color-surface-raised: #ffffff;

  --color-border: #d1c6a8;
  --color-border-subtle: #e2dac3;
  --color-border-hover: #a99b74;
  --color-border-focus: #8a5f06;

  --color-text: #15201b;
  --color-text-secondary: #34443c;
  --color-text-muted: #55645c;
  --color-text-inverse: #f4efe2;

  --bone: #fffdf5;
  --bone-hi: #ffffff;
  --bone-lo: #ebe2c8;
  --brass-lo: #a87a1c;
  --brass-ink: #7a5306;

  --accent-slate: #15201b;
  --accent-slate-light: #e9e2ce;
  --accent-slate-deep: #0a1210;

  --accent-primary: #9a6d0c;
  --accent-primary-hover: #7a5306;
  --accent-primary-soft: #f6e8c2;
  --accent-primary-border: #d6b868;
  --accent-glow: rgba(185, 138, 44, 0.22);

  --emerald: #0b7a54;
  --emerald-dark: #075a3d;
  --emerald-soft: #dcefe4;
  --emerald-border: #9ccdb5;
  --emerald-glow: rgba(11, 122, 84, 0.25);

  --amber: #ad520a;
  --amber-dark: #86400a;
  --amber-soft: #f9e5cd;
  --amber-border: #e2b78a;
  --amber-glow: rgba(184, 90, 12, 0.22);

  --rose: #be2f44;
  --rose-dark: #911f2f;
  --rose-soft: #fae0e3;
  --rose-border: #e2a2ab;
  --rose-glow: rgba(190, 47, 68, 0.22);

  --indigo: #4a46c2;
  --indigo-soft: #e7e6fa;
  --indigo-border: #b4b2ec;

  --cat-comida: #86400a;
  --cat-comida-soft: #f9e5cd;
  --cat-coctel: #6a3cc2;
  --cat-coctel-soft: #ece3fa;
  --cat-botella: #17658f;
  --cat-botella-soft: #dcedf6;

  --active-bg: #15201b;
  --active-fg: #f4efe2;
  --active-fg-soft: #c9d1c7;
  --active-grad: linear-gradient(166deg, #2f433a, #1b2b24 55%, #15201b);
  --active-border: #15201b;
  --sel-c: #aeacff; --sel-a: #f7b272; --sel-s: #ff9aa6;

  --sh: 62 46 12;
  --sh-k: 0.42;
  --edge: 21 32 27;
  --scrim: 20 28 24;
  --glow-a: rgba(230, 176, 74, 0.2);
  --glow-b: rgba(11, 122, 84, 0.07);
  --scroll-thumb: #c4b890;
  --scroll-thumb-hover: #a99b74;
  --lit: inset 0 1px 0 0 rgb(255 255 255 / 0.9);
  --placeholder: #58675e;
  --meta-bg: #ece6d4;

  color-scheme: light;
}

/* Cambio de tema: transición suave solo de color (se añade un instante desde JS) */
html.theme-fx, html.theme-fx *, html.theme-fx *::before, html.theme-fx *::after {
  transition: background-color 260ms ease, border-color 260ms ease, color 260ms ease, fill 260ms ease, stroke 260ms ease, box-shadow 260ms ease !important;
}

/* ------------------------------------------------------------------
   8. Superficies del navegador tematizadas
   ------------------------------------------------------------------ */
::selection {
  background: var(--brass);
  color: var(--on-accent);
}

:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

input,
select,
textarea {
  caret-color: var(--brass-ink);
  accent-color: var(--brass-ink);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 99px;
  border: 2px solid var(--color-bg);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
}

html {
  scrollbar-color: var(--scroll-thumb) transparent;
}