/* ==========================================================================
   INGENIERÍA · el estilo común de las áreas                    (8-oct-2026)
   Gerardo: "que se vea más profesional, como un sistema de ingeniería, con
   los colores de /yo; que no parezca hecho con IA". Es la misma regla que la
   capa de tarimas.html y la de RH:
     - la paleta de /yo y RH: guinda y neutros cálidos, en oscuro y en claro
     - esquinas casi rectas, borde fino, sin sombras
     - el guinda para lo que se toca o lo seleccionado; verde, ámbar y rojo
       sólo para estados
     - las cifras en tinta, con números tabulares
   Se enlaza DESPUÉS del <style> de cada pantalla para ganarle a sus colores.
   Las mayúsculas espaciadas se quitaron en el <style> de cada pantalla; los
   papeles que se imprimen (etiquetas, hojas viajeras) no se tocaron.
   ========================================================================== */

/* ---- la paleta, tema oscuro (el de fábrica) ---- */
html:root:not([data-tema="claro"]){
  --accent:#e48aa6; --accent-ink:#1a0d12; --accent-soft:rgba(228,138,166,.13);
  --bad:#f58b84; --bad-soft:rgba(245,139,132,.15); --good:#6fd29f; --good-soft:rgba(111,210,159,.15);
  --warn:#f3a654; --warn-soft:rgba(243,166,84,.16); --info:#80b4ee; --info-soft:rgba(128,180,238,.15);
  --ground:#151113; --surface:#1f191c; --surface-2:#261f23; --ink:#f1e9ec; --ink-2:#c2b5bb; --ink-3:#968890;
  --line:#3a3035; --line-soft:#2d2529; --side:#1b1317; --side-2:#261f23; --side-ink:#d9c7cf; --side-line:#3a3035;
  --wine:#e48aa6; --wine-soft:rgba(228,138,166,.13);
}
/* ---- tema claro ---- */
html:root[data-tema="claro"]{
  --accent:#7a2340; --accent-ink:#ffffff; --accent-soft:rgba(122,35,64,.09);
  --bad:#c0352f; --bad-soft:rgba(192,53,47,.11); --good:#1f7a4d; --good-soft:rgba(31,122,77,.12);
  --warn:#a95608; --warn-soft:rgba(194,98,10,.13); --info:#2563a8; --info-soft:rgba(37,99,168,.11);
  --ground:#f3f0ee; --surface:#ffffff; --surface-2:#f8f5f3; --ink:#1f1a1c; --ink-2:#5c5156; --ink-3:#857a7f;
  --line:#e3dcd8; --line-soft:#efe9e6; --side:#5e1a31; --side-2:#6e2440; --side-ink:#f1dbe3; --side-line:rgba(255,255,255,.12);
  --wine:#7a2340; --wine-soft:rgba(122,35,64,.09);
}
/* ---- los nombres propios de cada pantalla, al canon (9-oct) ----
   Almacén, Producción, Calidad y Mi día traían su paleta azul con nombres
   propios (--tinta, --caja, --azul, --vivo...) y la de arriba no los tocaba:
   por eso salía tinta azul marino y botones azules junto al guinda. Aquí se
   amarran al canon, en los dos temas, con más peso que el :root de la página. */
html:root:not([data-tema="claro"]), html:root[data-tema="claro"]{
  --tinta:var(--ink); --tinta2:var(--ink-2); --tinta3:var(--ink-3); --tenue:var(--ink-3);
  --fondo:var(--ground); --caja:var(--surface); --caja2:var(--surface-2);
  --borde:var(--line); --borde2:var(--line-soft); --linea:var(--line);
  --vivo:var(--accent); --sobre:var(--accent-ink); --azul:var(--accent); --azul-t:var(--accent-soft);
  --ok:var(--good); --ok-t:var(--good-soft); --bien:var(--good);
  --mal:var(--bad); --mal-t:var(--bad-soft); --malo:var(--bad);
  --av:var(--warn); --av-t:var(--warn-soft); --alerta:var(--warn); --alerta-t:var(--warn-soft);
}
/* ---- forma ---- */
html:root{ --radius:6px; --r:6px; --rcard:6px; --radius2:4px; --r2:4px }
.panel, .card, .tile, .kpi, .caja{box-shadow:none !important}
/* las cifras: en tinta y alineadas */
.num, .mono, .tile .v, td.n, .n{font-variant-numeric:tabular-nums}
.tile .v.acc{color:var(--ink)}
/* chips: texto de apoyo, no etiquetas de código */
.chip{font-family:"Barlow",system-ui,sans-serif !important;font-size:12.5px;font-weight:500;border-radius:4px;background:transparent;border:1px solid var(--line-soft);color:var(--ink-3)}
/* encabezados de tabla: el único lugar con versalitas, chicas */
thead th{text-transform:uppercase;letter-spacing:.04em;font-size:11.5px}
/* pestañas internas (inventario de cajas y parecidas): una línea con subrayado, no bloques */
.cj-tabs{gap:0 !important;border-bottom:1px solid var(--line);flex-wrap:nowrap !important;overflow-x:auto;scrollbar-width:none}
.cj-tabs::-webkit-scrollbar{display:none}
.cj-tabs .btn{flex:0 0 auto;background:transparent !important;border:none !important;border-radius:0 !important;color:var(--ink-2) !important;font-weight:500;min-height:44px;padding:0 16px;box-shadow:inset 0 -2px 0 transparent}
.cj-tabs .btn.acc{color:var(--accent) !important;font-weight:600;box-shadow:inset 0 -2px 0 var(--accent)}

/* ---- la barra lateral: sus grises venían escritos en azul (#b7cade, #5f7794...) ---- */
.side .head small{color:var(--side-ink) !important;opacity:.72}
.side .grupo{color:var(--side-ink) !important;opacity:.6}
.side .item:not(.on){color:var(--side-ink) !important}
.side > div[style*="7c95b2"]{color:var(--side-ink) !important;opacity:.6}
.side .sec{color:var(--side-ink) !important;opacity:.6}
html:root:not([data-tema="claro"]), html:root[data-tema="claro"]{--side-ink-2:color-mix(in srgb, var(--side-ink) 65%, transparent)}