/* =====================================================================
   Super Carnes — identidad de carnicería boutique
   Materiales: carbón, madera noble, piedra, latón y marfil.
   El bordó es ACENTO (carne, ofertas, acciones), nunca el fondo dominante.
   Los nombres antiguos (--ink, --white, --red-*) se conservan porque el
   panel de administración y las páginas legales dependen de ellos.
   ===================================================================== */
:root {
  /* --- Negros cálidos y piedra --- */
  --noir: #0A0807;        /* fondo base */
  --char: #100D0B;        /* carbón */
  --stone: #171310;       /* piedra oscura (muro de la escena) */
  --panel: #1C1714;       /* superficie elevada */
  --panel-hi: #251E19;    /* superficie elevada iluminada */

  /* --- Madera noble --- */
  --wood-deep: #2A1C12;
  --wood: #5E3A1F;
  --wood-hi: #8C5C32;

  /* Veta y tonos de los listones (tienda y panel). */
  --wood-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='120'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .32' numOctaves='4' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .09 0 0 0 0 .04 0 0 0 1.9 -.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
  --wood-base:linear-gradient(180deg,#7A4E2B 0%,#633E22 45%,#4B2D18 100%);
  /* nogal oscuro: la madera de los divisores no debe competir con la carne */
  --wood-dark:linear-gradient(180deg,#45291A 0%,#33200F 48%,#1F1309 100%);

  /* --- Aluminio cepillado: el canto de las mesadas y los rieles de una carnicería --- */
  --alu: repeating-linear-gradient(180deg, rgb(255 255 255 / .16) 0 1px, transparent 1px 3px),
         linear-gradient(180deg, #E6E9EC, #C3C8CD 46%, #A9B0B6 54%, #D3D7DB);
  --alu-edge: linear-gradient(90deg, #8E959B, #E3E6E9 30%, #A9B0B6 55%, #EEF0F2 78%, #969DA3);

  /* --- Marfil / crema --- */
  --cream: #F5EFE4;       /* texto principal */
  --cream-dim: #CFC2AE;   /* texto secundario */
  --cream-mute: #A3927E;  /* texto terciario */

  /* --- Latón: el hilo premium que recorre toda la página --- */
  --brass: #C9A063;
  --brass-hi: #E9CF9B;
  --brass-deep: #7E5E2E;
  --brass-soft: rgb(201 160 99 / .34);
  --brass-line: rgb(201 160 99 / .20);

  /* --- Bordó: carne, ofertas, acciones --- */
  --bordo: #8C1522;
  --bordo-hi: #A81D2C;
  --bordo-lit: #C2293A;
  --bordo-deep: #3F070E;

  /* --- Compatibilidad con el panel y las páginas legales --- */
  --red-900: #3F070E;
  --red-700: #8C1522;
  --red-600: #A81D2C;
  --ink: #1C1714;
  --ink-deep: #100D0B;
  --white: #F5EFE4;
  --white-soft: #CFC2AE;

  /* --- Tipografía --- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;

  /* --- Radios: más cerrados adentro, más suaves afuera --- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  --radius: 14px;

  /* --- Profundidad: sombras tintadas en cálido, una sola fuente de luz (arriba) --- */
  --elev-1: 0 1px 0 rgb(255 238 214 / .05) inset,
            0 1px 2px rgb(8 5 3 / .55),
            0 10px 20px -10px rgb(8 5 3 / .7);
  --elev-2: 0 1px 0 rgb(255 238 214 / .08) inset,
            0 2px 5px rgb(8 5 3 / .5),
            0 22px 40px -18px rgb(8 5 3 / .85),
            0 44px 70px -40px rgb(8 5 3 / .7);
  --elev-3: 0 1px 0 rgb(255 238 214 / .10) inset,
            0 3px 8px rgb(8 5 3 / .5),
            0 34px 60px -22px rgb(8 5 3 / .9),
            0 70px 110px -60px rgb(0 0 0 / .8);
  --glow-bordo: 0 14px 30px -14px rgb(var(--bordo-rgb) / .7);

  /* --- Un solo lenguaje de luz para toda la tienda ---
     Los mismos ingredientes en cada pieza, para que ninguna sección parezca hecha aparte:
     · la luz baja de arriba: un filo de brillo cálido arriba (--sheen) y la sombra abajo;
     · toda sombra y todo velo es carbón cálido (--shade, --scrim), nunca negro puro;
     · el bordó, el latón y el marfil son siempre los mismos, también con transparencia.
     Los *-rgb existen para escribir transparencias: rgb(var(--brass-rgb) / .14). */
  --cream-rgb: 245 239 228;
  --brass-rgb: 201 160 99;
  --brass-hi-rgb: 233 207 155;
  --bordo-rgb: 168 29 44;
  --sheen: 255 232 205;        /* el filo de luz en el borde de arriba */
  --shade: 8 5 3;              /* sombras */
  --scrim: 10 8 7;             /* velos sobre fotos y fondos (= --noir) */
  --glow-warm: 226 162 88;     /* la luz cálida que cae sobre las fotos */

  --bordo-low: #75101C;
  --grad-bordo: linear-gradient(180deg, var(--bordo-hi), var(--bordo-low));        /* botones y placas bordó */
  --grad-bordo-hi: linear-gradient(180deg, var(--bordo-lit), var(--bordo));         /* su hover */
  --grad-surface: linear-gradient(180deg, var(--panel-hi), var(--panel) 52%, var(--stone)); /* tarjetas y diálogos */
  --grad-well: linear-gradient(170deg, #2E241C, #1D1612 58%, #140F0C);              /* hueco de una foto */
  --grad-night: linear-gradient(180deg, #17120F, var(--char) 50%, var(--noir));     /* fondo de la portada */
  --brass-ring: conic-gradient(from 212deg, #6E5128, #E3C692 24%, #7E5E2E 50%, #E9CF9B 74%, #6E5128); /* aro de los sellos */

  --line: rgb(var(--cream-rgb) / .08);         /* filetes y bordes de superficie */
  --line-field: rgb(var(--cream-rgb) / .2);    /* bordes de campos, chips y botones de vidrio */
  --line-hover: rgb(var(--cream-rgb) / .32);
  --ring: 0 0 0 4px rgb(var(--brass-rgb) / .14); /* halo de foco */

  /* Las cuatro familias de pieza. Cada familia se ilumina igual en toda la página. */
  --edge-bordo: rgb(var(--brass-hi-rgb) / .3);           /* bordó: botones, chip activo, cantidad, placas */
  --lift-bordo: inset 0 1px 0 rgb(var(--sheen) / .22), inset 0 -1px 0 rgb(var(--shade) / .3), var(--glow-bordo);
  --lift-bordo-hi: inset 0 1px 0 rgb(var(--sheen) / .3), inset 0 -1px 0 rgb(var(--shade) / .3), 0 20px 38px -16px rgb(var(--bordo-rgb) / .8);
  --glass: rgb(var(--cream-rgb) / .035);                 /* vidrio: fantasma, buscador, chips, carrito */
  --glass-hover: rgb(var(--brass-rgb) / .12);
  --glass-lip: inset 0 1px 0 rgb(var(--sheen) / .06);
  --lift-cream: inset 0 1px 0 #fff, 0 18px 34px -14px rgb(var(--shade) / .85); /* marfil: sobre piedra o carbón */
  --seal-edge: 0 0 0 1px rgb(var(--shade) / .65);       /* sellos de latón: el canto del aro */
  --err: #F0A3A3;
  --scrollbar: #3B3029;
  --stone-base: #171617;       /* color medio de assets/piedra.jpg: se ve mientras carga la textura */

  /* --- Curvas y tiempos: caros y deliberados, nunca rebotones --- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --t-fast: .18s;
  --t-base: .34s;
  --t-slow: .72s;

  /* --- Medidas de la interfaz --- */
  --header-h: 72px;
  --page: 1240px;
  --gutter: clamp(16px, 4vw, 56px);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0s; --t-base: 0s; --t-slow: 0s; }
}

/* =====================================================================
   PANEL · superficies que cambian con el tema (claro / oscuro / auto)
   ---------------------------------------------------------------------
   La TIENDA no usa ninguno de estos nombres: es oscura siempre, y sigue
   con los materiales de arriba. Acá vive solo lo que el panel necesita
   poder dar vuelta.

   El valor de :root es el CLARO, que es exactamente como se veía el panel
   hasta ahora. Si el JS no corre —o alguien lo bloquea— el panel queda
   igual que siempre en vez de quedar a medio pintar.

   `frontend/src/tema.js` escribe data-theme en el <html> antes de que se
   pinte nada; por eso se carga bloqueante en el <head> y no como módulo.

   Los colores oscuros salen de la misma familia que la tienda (negros
   cálidos, nunca grises) para que panel y tienda se sientan una sola cosa.
   ===================================================================== */
:root,
:root[data-theme="claro"] {
  --ui-bg: #F5EFE4;            /* fondo de la página */
  --ui-surface: #FFFFFF;       /* tarjetas, tablas, campos, diálogos */
  --ui-surface-2: #FAFAF9;     /* encabezado de tabla */
  --ui-surface-3: #FAF5F5;     /* fila con el puntero encima */
  --ui-sunken: #FAF8F8;        /* huecos: la vista previa de la foto */
  --ui-toast: #1C1714;         /* avisos flotantes y el salto al contenido */

  --ui-border: #E2E2E0;
  --ui-border-soft: #EEEEEE;
  --ui-border-field: #767676;  /* campos y botones: contraste mínimo 3:1 */

  --ui-text: #1C1714;
  --ui-text-dim: #555555;
  --ui-text-mute: #666666;

  --ui-chip: #EEEEEE;          /* etiqueta neutra */
  --ui-warn-bg: #FFF0C2;       /* pendiente, stock bajo */
  --ui-ok-bg: #D8F0DC;         /* entregado */
  --ui-bad-bg: #F6D4D4;        /* cancelado, sin stock */

  --ui-err: #B00020;
  --ui-up: #1F7A3F;            /* subió respecto del período anterior */
  --ui-down: #A32020;
  --ui-link: #7A0808;
  --ui-link-hi: #4A0505;

  --ui-wa-bg: #F4F8F4;         /* bloque del aviso por WhatsApp */
  --ui-wa-border: #CFD8CF;
  --ui-wa-text: #4A5A4A;

  --ui-note-bg: #FDF6EE;       /* avisos al margen: seña, WhatsApp apagado */
  --ui-note-border: #E3C9A8;
  --ui-warn-border: #D9B38C;

  --ui-seg-border: #D6D6D2;    /* control de períodos del Resumen */
  --ui-seg-divider: #E6E6E2;
  --ui-seg-hover: #F3F1EC;

  /* Gráficos del Resumen. c1 y c2 pasan el validador de paleta (separación para
     daltonismo, contraste 3:1 contra la tarjeta); c0 es el gris del período anterior,
     que es contexto y queda atrás a propósito. */
  --ui-c1: #A81D2C;            /* bordó: este período, envío */
  --ui-c2: #B5832A;            /* latón: retiro, el primer puesto */
  --ui-c0: #ABA195;            /* período anterior */
  --ui-grid: #ECE7DF;          /* líneas de guía, un paso fuera de la tarjeta */
  --ui-warn-fill: #B7791F;     /* medidor de stock bajo */
  --ui-bad-fill: #B42318;      /* medidor sin stock */
  --ui-hilite: #FBEBD0;        /* fila recién cambiada */
  --ui-shadow-1: 0 1px 2px rgb(60 38 20 / .06), 0 8px 18px -12px rgb(60 38 20 / .22);
  --ui-shadow-2: 0 2px 6px rgb(60 38 20 / .08), 0 20px 36px -18px rgb(60 38 20 / .34);
}

:root[data-theme="oscuro"] {
  /* Un punto más claro que la barra lateral (--ink-deep), si no el panel y
     el menú quedan del mismo color y no se distingue dónde termina uno. */
  --ui-bg: #15110F;
  --ui-surface: #1C1714;
  --ui-surface-2: #251E19;
  --ui-surface-3: #2E2621;
  --ui-sunken: #0A0807;
  --ui-toast: #3A302A;         /* más claro que el fondo: si no, no se ve */

  --ui-border: #332B25;
  --ui-border-soft: #271F1A;
  --ui-border-field: #7A6E64;  /* 3,6:1 contra la superficie */

  --ui-text: #F5EFE4;
  --ui-text-dim: #CFC2AE;
  --ui-text-mute: #A3927E;

  --ui-chip: #2E2724;
  --ui-warn-bg: #473714;
  --ui-ok-bg: #1C3A25;
  --ui-bad-bg: #4A2222;

  /* En oscuro los rojos y verdes fuertes no se leen: van aclarados. */
  --ui-err: #FF9B9B;
  --ui-up: #5CC77E;
  --ui-down: #F08A8A;
  --ui-link: #E79AA2;
  --ui-link-hi: #F3C0C5;

  --ui-wa-bg: #17211A;
  --ui-wa-border: #2C3B30;
  --ui-wa-text: #9FB5A5;

  --ui-note-bg: #241B13;
  --ui-note-border: #4A3826;
  --ui-warn-border: #5A4530;

  --ui-seg-border: #3A312B;
  --ui-seg-divider: #2F2823;
  --ui-seg-hover: #2A231F;

  /* Pasos propios del oscuro, validados contra --ui-surface (no el claro dado vuelta). */
  --ui-c1: #C0313F;
  --ui-c2: #BB8A2B;
  --ui-c0: #6E625A;
  --ui-grid: #2A231E;
  --ui-warn-fill: #D49A3A;
  --ui-bad-fill: #E0606A;
  --ui-hilite: #3A2C17;
  --ui-shadow-1: 0 1px 2px rgb(0 0 0 / .35), 0 10px 22px -12px rgb(0 0 0 / .6);
  --ui-shadow-2: 0 2px 6px rgb(0 0 0 / .4), 0 24px 44px -18px rgb(0 0 0 / .75);
}