/* ── Sistema Menogranos ──────────────────────────────────────────────
   Identidad: verde y azul.
     verde = la marca y las acciones de "adelante" (iniciar, terminar, descargar)
     azul  = lo informativo, los enlaces y los datos de las gráficas
   Las gráficas se quedan en azul secuencial (una sola serie, sin leyenda) y
   los estados siguen usando la paleta de status, siempre con icono y texto:
   el color nunca carga el significado solo.
   ------------------------------------------------------------------ */

:root,
:root[data-tema="claro"] {
  --plano:        #e6ecf0;
  --superficie:   #ffffff;
  --superficie-2: #eaf1ee;
  --ink:          #0b1a15;
  --ink-2:        #4a5a54;
  --ink-mudo:     #7d8d87;
  --linea:        #dce7e2;
  --eje:          #b9c8c2;
  --borde:        rgba(11, 26, 21, .10);

  /* Marca */
  --verde:        #0a7a55;
  --verde-2:      #0d9268;
  --verde-suave:  #d7f0e5;
  --azul:         #2a78d6;
  --azul-2:       #1c5cab;
  --azul-suave:   #dbe9fa;

  /* Datos: azul secuencial (paleta validada) */
  --serie:        #2a78d6;
  --serie-suave:  #cde2fb;
  --seq-1:        #86b6ef;
  --seq-2:        #5598e7;
  --seq-3:        #3987e5;
  --seq-4:        #2a78d6;
  --seq-5:        #256abf;
  --seq-6:        #184f95;

  --bien:         #0ca30c;
  --alerta:       #fab219;
  --grave:        #ec835a;
  --critico:      #d03b3b;
  --bien-texto:   #056a45;

  --sombra: 0 1px 2px rgba(11,26,21,.05), 0 8px 24px rgba(11,26,21,.07);
}

:root[data-tema="oscuro"] {
  --plano:        #08110e;
  --superficie:   #101c18;
  --superficie-2: #172721;
  --ink:          #f2f7f5;
  --ink-2:        #b3c4bd;
  --ink-mudo:     #7d8d87;
  --linea:        #22332c;
  --eje:          #2f453c;
  --borde:        rgba(242, 247, 245, .10);

  --verde:        #0d8a60;
  --verde-2:      #16a878;
  --verde-suave:  #10402f;
  --azul:         #3987e5;
  --azul-2:       #5598e7;
  --azul-suave:   #14304f;

  --serie:        #3987e5;
  --serie-suave:  #184f95;
  --seq-1:        #184f95;
  --seq-2:        #256abf;
  --seq-3:        #2a78d6;
  --seq-4:        #3987e5;
  --seq-5:        #5598e7;
  --seq-6:        #86b6ef;

  --bien:         #0ca30c;
  --alerta:       #fab219;
  --grave:        #ec835a;
  --critico:      #d03b3b;
  --bien-texto:   #2bc98d;

  --sombra: 0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) {
    --plano: #08110e; --superficie: #101c18; --superficie-2: #172721;
    --ink: #f2f7f5; --ink-2: #b3c4bd; --linea: #22332c; --eje: #2f453c;
    --borde: rgba(242,247,245,.10);
    --verde: #0d8a60; --verde-2: #16a878; --verde-suave: #10402f;
    --azul: #3987e5; --azul-2: #5598e7; --azul-suave: #14304f;
    --serie: #3987e5; --serie-suave: #184f95;
    --seq-1:#184f95; --seq-2:#256abf; --seq-3:#2a78d6;
    --seq-4:#3987e5; --seq-5:#5598e7; --seq-6:#86b6ef;
    --bien-texto: #2bc98d;
    --sombra: 0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.4);
  }
}

* { box-sizing: border-box; }

/* El atributo hidden debe ganarle a cualquier display de clase
   (.modal es display:grid y #barra es display:flex). */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}
/* Canvas elegante: el plano lleva un tinte muy sutil de la marca en las
   esquinas, para que no se vea un blanco plano. Fijo, no se mueve al hacer
   scroll. Las tarjetas blancas resaltan encima. */
body {
  min-height: 100vh;
  background:
    radial-gradient(1200px 640px at 100% -12%,
      color-mix(in srgb, var(--azul) 9%, transparent), transparent 62%),
    radial-gradient(1050px 560px at -8% 112%,
      color-mix(in srgb, var(--verde) 9%, transparent), transparent 60%),
    var(--plano);
  background-attachment: fixed;
}

h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.2; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
p  { margin: 0 0 .75rem; color: var(--ink-2); }

/* ── Barra superior ─────────────────────────────────────────── */
/* La barra lleva la marca: degradado de verde a azul. */
#barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .9rem;
  background: linear-gradient(100deg, var(--verde) 0%, var(--verde-2) 38%, var(--azul) 100%);
  color: #fff;
  box-shadow: 0 1px 0 var(--borde), 0 2px 12px rgba(0, 0, 0, .12);
}
.marca { display: flex; align-items: center; gap: .5rem; }
/* Logo MENOPRO: va sobre un recuadro blanco para leerse bien sobre la barra
   de color (verde→azul), en tema claro y oscuro. */
.marca-img {
  height: 30px; width: auto; display: block;
  background: #fff; padding: 3px 8px; border-radius: 9px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.marca-logo {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 9px; font-size: 1.05rem;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .34);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
.marca-txt {
  font-weight: 800; font-size: 1.06rem; letter-spacing: .03em;
  color: rgba(255, 255, 255, .74); line-height: 1;
}
.marca-txt b { color: #fff; font-weight: 800; }
.spacer { flex: 1; }
.reloj-barra {
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .85); font-size: .9rem;
}
#barra .chip {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
}
.chip {
  background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: 999px; padding: .2rem .65rem;
  font-size: .8rem; color: var(--ink-2); white-space: nowrap;
}
.icono {
  background: none; border: 1px solid transparent; color: var(--ink-2);
  font-size: 1.15rem; line-height: 1; cursor: pointer;
  border-radius: 8px; padding: .35rem .5rem;
}
.icono:hover { background: var(--superficie-2); color: var(--ink); }
#barra .icono { color: rgba(255, 255, 255, .85); }
#barra .icono:hover { background: rgba(255, 255, 255, .18); color: #fff; }

/* Cuerpo: barra lateral fija a la izquierda + contenido a la derecha. */
#cuerpo { display: flex; align-items: flex-start; }
main#vista { flex: 1 1 auto; min-width: 0; padding: 1.25rem; max-width: 1180px; margin: 0 auto; }

/* ── Barra lateral ───────────────────────────────────────────── */
#lateral {
  flex: 0 0 236px; width: 236px; align-self: stretch;
  position: sticky; top: var(--barra-h, 56px);
  height: calc(100vh - var(--barra-h, 56px));
  overflow-y: auto;
  background: var(--superficie);
  border-right: 1px solid var(--borde);
  padding: 1rem .7rem 2rem;
}
.lat-marca {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .95rem; letter-spacing: .1em;
  color: var(--ink-2); padding: .3rem .6rem .9rem;
}
.lat-marca b { color: var(--ink); }
.lat-grupo { margin-bottom: .3rem; }
/* Cabecera de categoría (acordeón): solo esto se ve cuando está cerrado. */
.lat-cat-btn {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left; font: inherit;
  padding: .55rem .6rem; border-radius: 9px;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 800; color: var(--ink-mudo);
  transition: background .1s ease, color .1s ease;
}
.lat-cat-btn:hover { background: var(--superficie-2); color: var(--ink); }
.lat-cat-btn.tiene-activa { color: var(--ink); }
.lat-chev { font-size: .7rem; display: inline-block; transition: transform .15s ease; }
.lat-grupo.abierto .lat-chev { transform: rotate(90deg); }
.lat-cat-txt { flex: 1; }
.lat-cat-n {
  font-weight: 700; color: var(--ink-mudo); background: var(--superficie-2);
  border-radius: 999px; padding: .05rem .45rem; font-size: .7rem;
}
/* Las secciones del grupo, ocultas hasta abrir la categoría. */
.lat-items { display: none; padding-left: .3rem; margin: .1rem 0 .35rem; }
.lat-grupo.abierto .lat-items { display: block; }
.lat-item {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  background: none; border: 1px solid transparent; border-radius: 9px;
  padding: .5rem .6rem; margin: .12rem 0; cursor: pointer; text-align: left;
  color: var(--ink-2); font: inherit; font-weight: 600; font-size: .9rem;
  transition: background .1s ease, color .1s ease, border-color .1s ease;
}
.lat-item:hover { background: var(--superficie-2); color: var(--ink); }
.lat-item.activo {
  background: var(--azul-suave); color: var(--azul-2);
  border-color: color-mix(in srgb, var(--azul) 30%, transparent); font-weight: 700;
}
/* Las secciones de planta se resaltan en verde cuando están activas. */
.lat-item.activo[data-ruta="tablero"], .lat-item.activo[data-ruta="grano"],
.lat-item.activo[data-ruta="mineral"], .lat-item.activo[data-ruta="melaza"],
.lat-item.activo[data-ruta="encostaladoras"] {
  background: var(--verde-suave); color: var(--bien-texto);
  border-color: color-mix(in srgb, var(--verde) 30%, transparent);
}
.lat-ico { font-size: 1.1rem; width: 1.5rem; text-align: center; flex: 0 0 auto; }
.lat-txt { flex: 1; }

/* Fondo oscuro tras el drawer en móvil. */
.lat-fondo { position: fixed; inset: 0; z-index: 39; background: rgba(0,0,0,.45); }
body:not(.nav-abierto) .lat-fondo { display: none; }

/* Roles de una sola hoja (o sin sesión): sin barra lateral ni fondo. */
body.solo-hoja #lateral, body.sin-sesion #lateral,
body.solo-hoja .lat-fondo, body.sin-sesion .lat-fondo { display: none; }

/* Escritorio: la lateral siempre visible, el botón ☰ no hace falta. */
@media (min-width: 900px) {
  #btnMenu { display: none; }
  .lat-fondo { display: none; }
}
/* Móvil: la lateral se vuelve cajón deslizable que abre el botón ☰. */
@media (max-width: 899px) {
  #lateral {
    position: fixed; left: 0; top: var(--barra-h, 56px); z-index: 40;
    width: 264px; flex-basis: 264px;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: var(--sombra-alta, 0 18px 40px rgba(0,0,0,.4));
  }
  body.nav-abierto #lateral { transform: none; }
}

/* ── Piezas base ─────────────────────────────────────────────── */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 1.1rem;
  box-shadow: var(--sombra);
}
.encabezado-vista {
  display: flex; align-items: center; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 1rem;
}
.encabezado-vista .spacer { flex: 1; }

button.btn {
  font: inherit; font-weight: 600;
  border-radius: 10px; padding: .6rem 1rem;
  border: 1px solid var(--borde);
  background: var(--superficie-2); color: var(--ink);
  cursor: pointer;
}
button.btn:hover { border-color: var(--eje); }

/* Azul = confirmar, guardar, seguir. */
button.btn.primario { background: var(--azul); border-color: var(--azul); color: #fff; }
button.btn.primario:hover { background: var(--azul-2); border-color: var(--azul-2); }

/* Verde = las acciones grandes de planta: arrancar, terminar, descargar, vaciar. */
button.btn.accion { background: var(--verde); border-color: var(--verde); color: #fff; }
button.btn.accion:hover { background: var(--verde-2); border-color: var(--verde-2); }

button.btn.peligro { color: var(--critico); }
button.btn:disabled { opacity: .45; cursor: not-allowed; }
button.btn:disabled:hover { background: var(--superficie-2); border-color: var(--borde); }

input, select {
  font: inherit;
  background: var(--superficie);
  color: var(--ink);
  border: 1px solid var(--eje);
  border-radius: 9px;
  padding: .55rem .7rem;
  width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--serie); outline-offset: 1px; }
label.campo { display: block; margin-bottom: .85rem; }
label.campo > span { display: block; font-size: .8rem; color: var(--ink-2); margin-bottom: .25rem; }

table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { padding: .5rem .6rem; text-align: left; border-bottom: 1px solid var(--linea); }
th { color: var(--ink-mudo); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--superficie-2); }
.tabla-scroll { overflow-x: auto; }

.estado { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; font-size: .85rem; }
.estado.bien    { color: var(--bien-texto); }
.estado.atrasado{ color: var(--critico); }
.estado.espera  { color: var(--ink-mudo); }

.vacio { color: var(--ink-mudo); text-align: center; padding: 2.5rem 1rem; }

/* ── Login ───────────────────────────────────────────────────── */
.login-envoltura {
  min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
  background:
    radial-gradient(1100px 500px at 12% -8%,
      color-mix(in srgb, var(--verde) 20%, transparent), transparent 65%),
    radial-gradient(900px 460px at 92% 108%,
      color-mix(in srgb, var(--azul) 20%, transparent), transparent 65%),
    var(--plano);
}
.login-caja { width: 100%; max-width: 380px; text-align: center; }
.login-caja .logo {
  display: grid; place-items: center;
  width: 68px; height: 68px; margin: 0 auto .7rem;
  border-radius: 20px; font-size: 2.1rem;
  background: linear-gradient(135deg, var(--verde), var(--azul));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--verde) 35%, transparent);
}
.login-caja h1 { letter-spacing: .04em; }
.login-caja .sub { color: var(--ink-mudo); font-size: .85rem; margin-bottom: 1.5rem; }
.login-caja form { text-align: left; }
.login-caja button { width: 100%; margin-top: .35rem; padding: .8rem; font-size: 1rem; }
.error {
  background: color-mix(in srgb, var(--critico) 12%, transparent);
  border: 1px solid var(--critico);
  color: var(--critico);
  border-radius: 9px; padding: .55rem .7rem; font-size: .85rem; margin-bottom: .85rem;
}

/* ── Menú ────────────────────────────────────────────────────── */
.rejilla-menu {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}
.mosaico {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: .3rem;
  text-align: left; cursor: pointer;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 14px; padding: 1.25rem;
  box-shadow: var(--sombra);
  transition: transform .12s ease, border-color .12s ease;
}
/* Franja de color arriba: las pantallas de planta en verde, las de oficina
   en azul. Nunca es el único indicador — el título dice de qué es. */
.mosaico::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--azul);
}
.mosaico[data-ruta="grano"]::before,
.mosaico[data-ruta="mineral"]::before,
.mosaico[data-ruta="melaza"]::before,
.mosaico[data-ruta="encostaladoras"]::before,
.mosaico[data-ruta="tablero"]::before { background: var(--verde); }

.mosaico:hover { transform: translateY(-2px); border-color: var(--azul); }
.mosaico[data-ruta="grano"]:hover,
.mosaico[data-ruta="mineral"]:hover,
.mosaico[data-ruta="melaza"]:hover,
.mosaico[data-ruta="encostaladoras"]:hover,
.mosaico[data-ruta="tablero"]:hover { border-color: var(--verde); }

.mosaico .ico { font-size: 1.8rem; }
.mosaico .titulo { font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.mosaico .desc { font-size: .82rem; color: var(--ink-mudo); }

/* ── Pantalla de operador (táctil) ───────────────────────────── */
.op-cabecera {
  display: grid; gap: 1rem;
  grid-template-columns: 1fr auto;
  align-items: center;
  margin-bottom: 1rem;
}
.op-orden { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; }
.op-num {
  font-size: 2.6rem; font-weight: 800; line-height: 1;
  color: var(--serie); font-variant-numeric: tabular-nums;
}
.op-producto { font-size: 1.55rem; font-weight: 700; }
.op-meta { color: var(--ink-mudo); font-size: .9rem; }
.op-crono {
  font-size: 2.9rem; font-weight: 700; font-variant-numeric: tabular-nums;
  line-height: 1; letter-spacing: .01em;
}
.op-crono.corriendo { color: var(--serie); }
.op-crono-caja { text-align: right; }

.op-toneladas {
  display: flex; align-items: center; gap: .6rem;
}
.op-toneladas input { width: 7rem; font-size: 1.15rem; font-weight: 700; text-align: right; }

.op-acciones { display: flex; gap: .8rem; margin-top: 1.1rem; flex-wrap: wrap; }
.op-acciones .btn { flex: 1; min-width: 170px; padding: 1.15rem 1rem; font-size: 1.05rem; }

.op-ingredientes th, .op-ingredientes td { padding: .7rem .7rem; font-size: 1.02rem; }
.op-ingredientes td.kilos { font-weight: 800; font-size: 1.25rem; }
.op-ingredientes tfoot td { border-top: 2px solid var(--eje); font-weight: 800; font-size: 1.1rem; border-bottom: none; }

/* El cargador frontal echa granos Y minerales, así que ve dos secciones. */
.seccion-ing { margin-top: 1.1rem; }
.seccion-ing:first-of-type { margin-top: .4rem; }
.seccion-titulo {
  display: flex; align-items: center; gap: .6rem;
  font-size: .78rem; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-mudo);
  padding-bottom: .35rem; border-bottom: 1px solid var(--linea);
  margin-bottom: .2rem;
}

.marca-ayuda {
  display: flex; align-items: center; gap: .5rem;
  font-size: .85rem; color: var(--ink-2);
  margin: .9rem 0 .2rem;
}
.marca-ayuda b { color: var(--ink); font-variant-numeric: tabular-nums; }
/* Antes de iniciar la orden no se puede palomear nada. */
.marca-ayuda.apagada { color: var(--ink-mudo); }

.op-ingredientes tr.bloqueada { opacity: .55; cursor: not-allowed; }
.op-ingredientes tr.bloqueada:hover { background: none; }

/* A qué hora hay que tenerlo listo. */
.hora-limite {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .7rem; padding: .4rem .8rem;
  border-radius: 999px; font-size: .95rem;
  background: var(--azul-suave); color: var(--azul-2);
  border: 1px solid var(--azul);
}
.hora-limite b { font-variant-numeric: tabular-nums; }
.hora-limite::before { content: "⏰"; }
.hora-limite.vencida {
  background: color-mix(in srgb, var(--critico) 12%, transparent);
  color: var(--critico); border-color: var(--critico);
}
.hora-limite.vencida::before { content: "⚠"; }

/* Palomear lo que ya se echó. Verde = hecho; el color nunca va solo, siempre
   lleva su palomita al lado. */
.op-ingredientes td.palomita {
  width: 2.2rem; text-align: center;
  font-weight: 800; color: var(--bien-texto); font-size: 1.15rem;
}
.op-ingredientes tr.tocable { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.op-ingredientes tr.tocable:hover { background: var(--superficie-2); }
.op-ingredientes tr.tocable:focus-visible { outline: 2px solid var(--serie); outline-offset: -2px; }

.op-ingredientes tr.echado td {
  background: color-mix(in srgb, var(--bien) 14%, transparent);
  color: var(--ink-mudo);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--bien) 60%, transparent);
}
.op-ingredientes tr.echado td.palomita,
.op-ingredientes tr.echado td.kilos { text-decoration: none; }
.op-ingredientes tr.echado td.kilos { color: var(--bien-texto); }
.op-ingredientes tr.echado:hover td {
  background: color-mix(in srgb, var(--bien) 20%, transparent);
}

.barra-progreso {
  height: 6px; border-radius: 999px; background: var(--superficie-2);
  overflow: hidden; margin: .5rem 0 1rem;
}
.barra-progreso > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--verde), var(--azul));
}

/* La fila resumida de minerales: es un bulto ya pesado, no un ingrediente. */
.op-ingredientes tr.fila-resumen td {
  background: color-mix(in srgb, var(--azul) 7%, transparent);
}
.op-ingredientes tr.fila-resumen.echado td {
  background: color-mix(in srgb, var(--bien) 14%, transparent);
}
.seccion-ing.resumida .seccion-titulo { border-bottom-color: var(--azul-suave); }

/* ── Tablero de mezcladoras ──────────────────────────────────── */
.tablero {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.tablero-carta {
  background: var(--superficie); border: 1px solid var(--borde);
  border-left: 6px solid var(--eje);
  border-radius: 14px; padding: 1.2rem;
  box-shadow: var(--sombra);
  display: flex; flex-direction: column; gap: .35rem; min-height: 190px;
}
.tablero-carta.proceso   { border-left-color: var(--alerta); }
.tablero-carta.mezclando { border-left-color: var(--grave); }
.tablero-carta.libre     { border-left-color: var(--bien); }
.tablero-carta.cargada   { border-left-color: var(--serie); }
.tablero-carta.terminado { border-left-color: var(--bien); }

.tablero-nombre {
  font-size: .78rem; letter-spacing: .08em; color: var(--ink-mudo);
  text-transform: uppercase; font-weight: 700;
}
.tablero-producto { font-size: 1.35rem; font-weight: 700; line-height: 1.2; flex: 1; }
.tablero-meta { font-size: .85rem; color: var(--ink-2); }
.tablero-estado {
  display: inline-flex; align-items: center; gap: .35rem;
  font-weight: 800; font-size: .95rem; letter-spacing: .03em;
}
/* El color nunca va solo: cada estado lleva su icono y su texto. */
.tablero-estado.proceso   { color: var(--alerta); }
.tablero-estado.mezclando { color: var(--grave); }
.tablero-estado.libre     { color: var(--bien-texto); }
.tablero-estado.cargada   { color: var(--serie); }
.tablero-estado.terminado { color: var(--bien-texto); }
.tablero-estado.vacio     { color: var(--ink-mudo); }
.tablero-estado.proceso::before   { content: "●"; }
.tablero-estado.mezclando::before { content: "⏳"; }
.tablero-estado.libre::before     { content: "✓"; }
.tablero-estado.cargada::before   { content: "▼"; }
.tablero-estado.terminado::before { content: "✓"; }
.tablero-estado.vacio::before     { content: "—"; }
.tablero-pie { font-size: .78rem; color: var(--ink-mudo); }

select.sel-chico { width: auto; padding: .25rem .4rem; font-size: .85rem; }

.tablero-siguiente {
  font-size: .8rem; color: var(--ink-mudo);
  border-top: 1px dashed var(--linea); padding-top: .35rem;
}

/* ── Encostaladoras ──────────────────────────────────────────── */
.enc-rejilla {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.enc-carta { display: flex; flex-direction: column; gap: .45rem; }
.enc-carta.activa { border-color: var(--alerta); }
.enc-titulo {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  font-size: .82rem; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-mudo);
}
.enc-etiqueta {
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-mudo); font-weight: 600;
}
.enc-producto { font-size: 1.3rem; font-weight: 700; line-height: 1.2; }
.enc-meta { font-size: .85rem; color: var(--ink-2); }
.enc-crono {
  font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--alerta); line-height: 1.1;
}
.enc-cola-lista { border-top: 1px solid var(--linea); padding-top: .6rem; margin-top: auto; }
.enc-cola-lista ol { margin: .3rem 0 0; padding-left: 1.2rem; font-size: .85rem; color: var(--ink-2); }
.enc-cola-lista li { margin-bottom: .15rem; }
.enc-carta .op-acciones { margin-top: .4rem; }
.enc-carta .op-acciones .btn { min-width: 0; padding: .85rem .8rem; font-size: .95rem; }

.enc-rejilla.dos { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); max-width: 900px; }
.titulo-seccion {
  font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-mudo); margin: 1.4rem 0 .7rem;
}
.titulo-seccion:first-of-type { margin-top: 0; }

/* Mezcladora que todavía no cumple los minutos de mezclado. */
.enc-carta.no-lista { border-left: 6px solid var(--alerta); }
.enc-carta.lista    { border-left: 6px solid var(--bien); }
.enc-carta.cargada  { border-left: 6px solid var(--serie); }
.enc-etiqueta.listo { color: var(--bien-texto); }

.cuenta-regresiva {
  font-size: 2.2rem; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--alerta); line-height: 1.1;
}
.aviso-chip {
  align-self: flex-start;
  border-color: var(--alerta); color: var(--alerta);
}
.destino-activo {
  font-size: 1.05rem; font-weight: 800; color: var(--serie);
  letter-spacing: .02em;
}

/* Elegir destino al cerrar */
.elige-enc { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: .8rem 0; }
.elige-enc.dos { grid-template-columns: repeat(2, 1fr); }
.elige-enc.tres { grid-template-columns: repeat(3, 1fr); }
.dest-nombre { font-size: 1rem; font-weight: 800; line-height: 1.1; }
.enc-op {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .8rem .3rem; cursor: pointer;
  background: var(--superficie-2); color: var(--ink);
  border: 2px solid var(--borde); border-radius: 10px; font: inherit;
}
.enc-op:hover:not([disabled]) { border-color: var(--serie); }
.enc-op.elegida { border-color: var(--serie); background: var(--serie); color: #fff; }
.enc-op.elegida .enc-cola { color: rgba(255, 255, 255, .85); }
.enc-num { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.enc-cola { font-size: .68rem; color: var(--ink-mudo); line-height: 1.25; }

/* Una encostaladora que todavía trae producto no puede recibir otra orden. */
.enc-op.libre { border-color: var(--bien); }
.enc-op.libre .enc-cola { color: var(--bien-texto); font-weight: 600; }
.enc-op.ocupada {
  cursor: not-allowed; opacity: .55;
  border-style: dashed; border-color: var(--eje);
  background: var(--superficie);
}
.enc-op.ocupada .enc-num { color: var(--ink-mudo); }

/* ── Piezas sueltas ──────────────────────────────────────────── */
.op-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }

/* Aviso del producto que sigue (Cargador Frontal, Minerales, Melazador). */
.op-sigue {
  margin-top: .7rem; padding: .5rem .8rem; border-radius: 10px;
  background: var(--azul-suave, color-mix(in srgb, var(--seq-6) 12%, transparent));
  color: var(--azul-2, var(--ink)); font-size: 1.02rem;
  border: 1px solid color-mix(in srgb, var(--seq-6) 30%, transparent);
}
.op-sigue.mudo {
  background: var(--superficie-2); color: var(--ink-mudo);
  border-color: var(--linea); font-style: italic;
}

.nota-permiso {
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--serie);
  border-radius: 9px; padding: .6rem .8rem;
  font-size: .85rem; color: var(--ink-2); margin-bottom: 1rem;
}

button.enlace {
  background: none; border: none; padding: 0; font: inherit;
  color: var(--serie); cursor: pointer; text-decoration: underline;
}

label.check {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .88rem; color: var(--ink-2); margin-bottom: .8rem; cursor: pointer;
}
label.check input { width: auto; }

.fila-controles { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }
.fila-controles .campo { flex: 1; min-width: 160px; }

/* Marcas de inicio y fin de jornada dentro del plan.
   Antes eran filas-producto ("EMPEZAMOS EL DÍA" / "TERMINASTE") y salían
   como órdenes rotas sin fórmula. Ahora son marcas, no órdenes. */
tr.marca-jornada td {
  background: var(--superficie-2);
  font-weight: 700; font-size: .8rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 1px solid var(--eje);
  padding: .55rem .6rem;
}
tr.marca-jornada:hover td { background: var(--superficie-2); }
tr.marca-jornada.fin td { border-top: 2px solid var(--eje); border-bottom: none; }
.marca-ico { color: var(--serie); margin-right: .35rem; }
tr.marca-jornada.fin .marca-ico { color: var(--bien-texto); }
tr.marca-jornada .mudo { text-transform: none; letter-spacing: 0; font-weight: 400; }

.cierre-dia { text-align: center; padding: 2.5rem 1.25rem; }
.cierre-dia .cierre-ico { font-size: 3rem; line-height: 1; margin-bottom: .5rem; }
.cierre-dia h2 { font-size: 1.6rem; letter-spacing: .06em; }
.cierre-dia .kpis { margin: 1.5rem 0 .5rem; text-align: left; }

input.falta { border-color: var(--critico); }
tr.fila-actual { background: var(--superficie-2); }

/* ── Pedidos ─────────────────────────────────────────────────── */
/* Celda que se palomea tocándola (tarimas y entregado). Verde = sí; el color
   nunca va solo, siempre lleva su “✓” al lado. */
.check-cel {
  text-align: center; white-space: nowrap; user-select: none;
  font-weight: 700; font-size: .9rem;
}
.check-cel[role="button"] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.check-cel[role="button"]:hover { background: var(--superficie-2); }
.check-cel[role="button"]:focus-visible { outline: 2px solid var(--serie); outline-offset: -2px; }
.check-cel.on {
  color: var(--bien-texto);
  background: color-mix(in srgb, var(--bien) 14%, transparent);
}

.acciones-cel { white-space: nowrap; text-align: right; }
.acciones-cel .btn.chico { margin-left: .25rem; }

.fecha-vencida { color: var(--critico); font-weight: 600; }
.fecha-hoy { font-weight: 600; }
.fecha-manana { font-weight: 600; }
.estado.proxima { color: var(--alerta); }

/* Pedidos para mañana: la fila entera se pinta para que salten a la vista. */
tr.pedido-manana td { background: color-mix(in srgb, var(--alerta) 15%, transparent); }
tr.pedido-manana:hover td { background: color-mix(in srgb, var(--alerta) 24%, transparent); }

/* Un pedido ya entregado se apaga y se va al fondo de la lista. */
tr.pedido-entregado td { opacity: .55; }
tr.pedido-entregado td.check-cel.on { opacity: 1; }

/* Varios productos por pedido, cada uno con su presentación y cantidad. */
.ped-item { padding: .12rem 0; }
.ped-item + .ped-item { border-top: 1px dashed var(--linea); }
.ped-cant { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.chip-pres {
  display: inline-block; font-size: .7rem; font-weight: 700;
  padding: .05rem .4rem; border-radius: 999px; letter-spacing: .02em;
  text-transform: uppercase; vertical-align: middle;
}
.chip-pres.gra { background: var(--azul-suave); color: var(--azul-2); }
.chip-pres.enc { background: color-mix(in srgb, var(--verde) 16%, transparent); color: var(--verde-2, var(--bien-texto)); }

.txt-vencido { color: var(--critico); }

/* Fuera de tolerancia: el tamaño de costal y el cancelar quedan bloqueados
   (atenuados) hasta que un encargado autorice con su contraseña. */
.enc-op.bloqueada { opacity: .45; cursor: not-allowed; }
.btn.bloqueada-cancel { opacity: .5; }

/* Marca de que un pedido ya se pasó al plan del día. */
.chip-enplan {
  display: inline-block; font-size: .68rem; font-weight: 700;
  padding: .05rem .4rem; border-radius: 999px; vertical-align: middle;
  text-transform: uppercase; letter-spacing: .02em;
  background: var(--superficie-2); color: var(--ink-mudo);
  border: 1px solid var(--linea);
}
.chip-caja {
  display: inline-block; font-size: .68rem; font-weight: 700;
  padding: .05rem .4rem; border-radius: 999px; vertical-align: middle;
  background: var(--azul-suave); color: var(--azul-2); border: 1px solid var(--azul);
}
.chip-caja.alt { background: var(--superficie-2); color: var(--ink-2); border-color: var(--linea); }

/* ── Caja del tráiler (acomodo de 18 áreas) ──────────────────── */
.caja-paleta { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0 .8rem; }
.caja-chip {
  font: inherit; font-size: .82rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .6rem; border-radius: 999px;
  background: var(--superficie); color: var(--ink);
  border: 1px solid var(--eje);
  max-width: 100%; overflow-wrap: anywhere; text-align: left;
}
.caja-chip::before {
  content: ""; width: .8rem; height: .8rem; border-radius: 3px;
  background: var(--c, transparent); border: 1px solid var(--linea);
}
.caja-chip.vaciar::before { background: repeating-linear-gradient(45deg, var(--linea) 0 2px, transparent 2px 4px); }
.caja-chip.sel { border-color: var(--serie); box-shadow: 0 0 0 2px var(--azul-suave); font-weight: 700; }

.caja-front, .caja-back {
  text-align: center; font-size: .72rem; letter-spacing: .06em;
  color: var(--ink-mudo); text-transform: uppercase; font-weight: 700;
  padding: .3rem 0;
}
/* La caja es larga y angosta: 2 áreas de ancho por 9 de fondo = 18. */
.caja-rejilla {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem;
  max-width: 380px; margin: 0 auto;
  padding: .5rem; border: 2px solid var(--eje); border-radius: 10px;
  background: var(--superficie-2);
}
.caja-celda {
  position: relative; min-height: 96px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .1rem; border-radius: 8px; padding: .9rem .25rem .3rem;
  background: var(--superficie); border: 1px dashed var(--eje); color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.caja-celda.llena {
  border-style: solid; border-color: var(--c);
  background: color-mix(in srgb, var(--c) 26%, transparent);
}
.caja-celda .caja-num {
  position: absolute; top: 3px; left: 5px; font-size: .62rem; color: var(--ink-mudo);
}
.caja-celda .caja-etq {
  font-size: .7rem; font-weight: 700; text-align: center; padding: 0 .15rem;
  overflow-wrap: anywhere; word-break: break-word; line-height: 1.15;
}
.caja-celda .caja-cli {
  font-size: .58rem; color: var(--ink-mudo); text-align: center;
  overflow-wrap: anywhere; word-break: break-word; line-height: 1.15;
}
.caja-celda .caja-cost { font-size: .56rem; color: var(--ink-2); }
/* Tarima ya cargada: se pinta de VERDE para que salte a la vista, con palomita. */
.caja-celda.cargada {
  background: color-mix(in srgb, var(--bien) 55%, var(--superficie)) !important;
  border-color: var(--bien) !important; border-style: solid !important;
  box-shadow: inset 0 0 0 2px var(--bien);
}
.caja-celda.cargada .caja-etq,
.caja-celda.cargada .caja-num,
.caja-celda.cargada .caja-cost { color: #05330f; }
.caja-celda .caja-ok {
  position: absolute; top: 2px; right: 4px; font-size: .85rem;
  font-weight: 800; color: #05330f;
}

/* Insignia de caja lista y contadores de la paleta / resumen. */
.chip.lista { background: var(--bien); color: #05330f; border-color: var(--bien); font-weight: 800; }
.chip-cnt {
  background: var(--superficie); color: var(--ink); border-radius: 999px;
  padding: 0 .35rem; font-size: .72rem; border: 1px solid var(--linea);
}
.caja-resumen { margin: .3rem 0 .5rem; }
.caja-res { font-size: .82rem; padding: .1rem 0; }
.caja-res.ok { color: var(--bien-texto); }
.caja-res .txt-vencido { font-weight: 700; }

/* Bloque de autorización dentro de un modal (más de 50 costales por cuadro). */
.auth-inline {
  margin: .3rem 0 .6rem; padding: .6rem .7rem;
  border: 1px solid var(--linea); border-radius: 10px; background: var(--superficie-2);
}
.auth-inline .error { margin-bottom: .5rem; }
/* Área ocupada por OTRO pedido en la misma caja: se ve, pero no se puede pisar. */
.caja-celda.ajena {
  cursor: not-allowed; border-style: solid;
  background-image: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--ink-mudo) 18%, transparent) 0 4px, transparent 4px 8px);
}

/* Vista de todas las cajas (solo lectura). */
.cajas-lista {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  align-items: start;
}
.caja-tarjeta-cab {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem;
}
.caja-tarjeta-cab h2 { margin: 0; font-size: 1.15rem; }
.caja-rejilla.ro .caja-celda { cursor: default; }
.caja-chip.solo-ver { cursor: default; }

/* Avisos de pedidos (menú y hoja): vencidos en rojo, los de hoy en azul. */
.banner-vencidos, .banner-hoy {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  width: 100%; text-align: left; font: inherit;
  margin: 0 0 1rem; padding: .75rem 1rem;
  border-radius: 12px; border: 1px solid;
}
.banner-vencidos {
  background: color-mix(in srgb, var(--critico) 12%, transparent);
  border-color: var(--critico); color: var(--critico);
}
.banner-hoy {
  background: var(--azul-suave); border-color: var(--azul); color: var(--azul-2);
}
.banner-vencidos.clic, .banner-hoy.clic { cursor: pointer; }
.banner-ir { margin-left: auto; font-size: .85rem; font-weight: 700; opacity: .85; }

/* Título de un bloque de campos que no es un <label> (varios productos). */
.campo-titulo { display: block; font-size: .8rem; color: var(--ink-2); margin-bottom: .25rem; }

/* Renglón de producto dentro del formulario del pedido. */
.p-linea { display: flex; gap: .4rem; margin-bottom: .45rem; align-items: center; flex-wrap: wrap; }
.p-linea .p-prod { flex: 1 1 100%; }
.p-linea .p-pres { flex: 1 1 auto; width: auto; }
.p-linea .p-ton, .p-linea .p-cost { flex: 0 0 6.5rem; width: 6.5rem; }
.p-linea .p-tipo { flex: 0 0 auto; width: auto; }
.p-linea .p-quitar { flex: 0 0 auto; }
#pAgregarLinea { margin-top: .2rem; }

.lista-simple { margin: .3rem 0 .6rem 1.1rem; }
.lista-simple li { margin: .15rem 0; }
tfoot td { border-top: 2px solid var(--eje); font-weight: 700; border-bottom: none; }

/* ── Encostaladora: escoger línea y apuntar cuadrilla ────────── */
.elige-linea {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.linea-op {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  padding: 1.3rem .8rem; cursor: pointer; font: inherit; text-align: center;
  background: var(--superficie-2); color: var(--ink);
  border: 2px solid var(--borde); border-radius: 14px;
}
.linea-op:hover { border-color: var(--verde); transform: translateY(-2px); }
.linea-num {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  font-size: 1.6rem; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--verde), var(--azul));
}
.linea-info { font-size: .8rem; color: var(--ink-2); line-height: 1.35; }
.linea-cola { font-size: .72rem; color: var(--ink-mudo); }

.cuadrilla {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  background: var(--superficie); border: 1px solid var(--borde);
  border-left: 4px solid var(--verde);
  border-radius: 10px; padding: .7rem 1rem; margin-bottom: 1.1rem;
}
.cuadrilla-etiqueta {
  font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-mudo); margin-right: .2rem;
}
.persona {
  background: var(--verde-suave); color: var(--bien-texto);
  border-radius: 999px; padding: .22rem .7rem;
  font-size: .85rem; font-weight: 600;
}
/* El líder de la cuadrilla se distingue. */
.persona.lider { background: var(--azul-suave); color: var(--azul-2); }

.fila-persona { display: flex; gap: .5rem; margin-bottom: .5rem; }
.fila-persona input { flex: 1; }
.lider-fijo {
  flex: 1; padding: .55rem .7rem; border-radius: 9px;
  background: var(--azul-suave); color: var(--azul-2);
  border: 1px solid var(--azul); font-weight: 600;
}

/* Base de datos: mucha columna, letra compacta. */
.tabla-bd { font-size: .85rem; }
.tabla-bd th, .tabla-bd td { padding: .4rem .55rem; white-space: nowrap; }

tr.dia-vacio td { color: var(--ink-mudo); }

/* ── Dichos ──────────────────────────────────────────────────── */
.dicho {
  font-style: italic; color: var(--ink-2);
  font-size: .95rem; line-height: 1.5;
  margin: .8rem auto 1.1rem; max-width: 34ch;
}
.dicho.grande { font-size: 1.15rem; max-width: 40ch; color: var(--verde); font-style: italic; }

.dicho-barra {
  display: flex; align-items: center; gap: .6rem;
  font-style: italic; color: var(--ink-2); font-size: .95rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--verde);
  border-radius: 10px; padding: .7rem 1rem;
  margin-bottom: 1.25rem;
}

/* ── Dashboard: cómo va cada quien ───────────────────────────── */
.op-rejilla {
  display: grid; gap: 1rem; margin-bottom: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.op-carta {
  background: var(--superficie); border: 1px solid var(--borde);
  border-top: 4px solid var(--eje);
  border-radius: 14px; padding: 1.1rem;
  box-shadow: var(--sombra);
  display: flex; flex-direction: column; gap: .45rem;
}
.op-carta.proceso   { border-top-color: var(--alerta); }
.op-carta.libre     { border-top-color: var(--verde); }
.op-carta.mezclando { border-top-color: var(--grave); }
.op-carta.espera    { border-top-color: var(--azul); }
.op-carta.vacio     { border-top-color: var(--eje); }

.op-carta-cabeza { display: flex; align-items: flex-start; gap: .6rem; }
.op-carta-ico { font-size: 1.5rem; line-height: 1; }
.op-carta-titulo { font-weight: 700; font-size: 1rem; }
.op-carta-quien { font-size: .82rem; color: var(--ink-2); }

.op-carta-estado {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .06em;
  align-self: flex-start;
  border-radius: 999px; padding: .18rem .6rem;
  border: 1px solid currentColor;
}
.op-carta-estado.proceso   { color: var(--alerta); }
.op-carta-estado.libre     { color: var(--bien-texto); }
.op-carta-estado.mezclando { color: var(--grave); }
.op-carta-estado.espera    { color: var(--azul); }
.op-carta-estado.vacio     { color: var(--ink-mudo); }
.op-carta-estado.proceso::before   { content: "●"; }
.op-carta-estado.libre::before     { content: "✓"; }
.op-carta-estado.mezclando::before { content: "⏳"; }
.op-carta-estado.espera::before    { content: "▶"; }
.op-carta-estado.vacio::before     { content: "—"; }

.op-carta-orden { font-weight: 700; font-size: .95rem; line-height: 1.25; }
.op-carta-detalle { font-size: .82rem; color: var(--ink-mudo); }
.op-carta-crono {
  font-size: 1.8rem; font-weight: 800; font-variant-numeric: tabular-nums;
  line-height: 1.1; color: var(--alerta);
}
.op-carta-crono.espera { color: var(--grave); }
.op-carta-crono.mudo { color: var(--linea); }
.op-carta-cifras {
  display: flex; gap: .9rem; flex-wrap: wrap;
  border-top: 1px solid var(--linea); padding-top: .55rem; margin-top: auto;
  font-size: .78rem; color: var(--ink-mudo);
}
.op-carta-cifras b { color: var(--ink); font-variant-numeric: tabular-nums; }

.barra-progreso.grande { height: 10px; margin-bottom: 1.5rem; }

/* ── Reportes ────────────────────────────────────────────────── */
.kpis {
  display: grid; gap: 1rem; margin-bottom: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.kpi { background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; padding: 1rem 1.1rem; }
.kpi .etiqueta { font-size: .78rem; color: var(--ink-mudo); text-transform: uppercase; letter-spacing: .04em; }
.kpi .valor { font-size: 2.1rem; font-weight: 700; line-height: 1.15; margin-top: .2rem; }
.kpi .unidad { font-size: .9rem; color: var(--ink-mudo); font-weight: 400; }

.grafica-caja { margin-bottom: 1.25rem; }
.grafica-caja h2 { font-size: 1rem; }
.grafica-caja .nota { font-size: .8rem; color: var(--ink-mudo); margin-bottom: .8rem; }
svg.grafica { display: block; width: 100%; height: auto; overflow: visible; }
svg.grafica text { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.tick { fill: var(--ink-mudo); font-size: 11px; }
.rejilla { stroke: var(--linea); stroke-width: 1; }
.eje-linea { stroke: var(--eje); stroke-width: 1; }
.etiqueta-dato { fill: var(--ink-2); font-size: 11px; font-variant-numeric: tabular-nums; }
.marca-dato { transition: opacity .1s ease; }
.marca-dato:hover { opacity: .8; }

.tooltip {
  position: fixed; z-index: 60; pointer-events: none;
  background: var(--superficie); color: var(--ink);
  border: 1px solid var(--borde); border-radius: 9px;
  padding: .45rem .6rem; font-size: .82rem; box-shadow: var(--sombra);
  white-space: nowrap;
}
.tooltip b { font-variant-numeric: tabular-nums; }

.filtros { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.filtros button {
  font: inherit; font-size: .85rem; cursor: pointer;
  background: var(--superficie); color: var(--ink-2);
  border: 1px solid var(--borde); border-radius: 999px; padding: .35rem .8rem;
}
.filtros button[aria-pressed="true"] { background: var(--serie); border-color: var(--serie); color: #fff; }

/* ── Modal y avisos ──────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,.55);
  display: grid; place-items: center; padding: 1rem;
}
.modal-caja {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 14px; padding: 1.35rem;
  width: 100%; max-width: 460px; box-shadow: var(--sombra);
  max-height: 88vh; overflow-y: auto;
}
.modal-pie { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.1rem; }

.aviso {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  z-index: 70; background: var(--ink); color: var(--plano);
  padding: .7rem 1.1rem; border-radius: 10px; font-size: .9rem;
  box-shadow: var(--sombra);
}

/* ── Logística ───────────────────────────────────────────────── */
.chip.pendiente {
  background: color-mix(in srgb, var(--alerta) 20%, transparent);
  color: #7a4d00; border-color: var(--alerta); font-weight: 800;
}
:root[data-tema="oscuro"] .chip.pendiente { color: var(--alerta); }
.log-envio {
  display: grid; grid-template-columns: 1fr 1fr; gap: .75rem;
  margin: .5rem 0 .25rem;
}
.log-envio.fac { grid-template-columns: 2fr 1fr 1fr; }
.log-envio .campo { margin-bottom: 0; }
.fac-doc {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-top: .6rem; padding-top: .55rem; border-top: 1px dashed var(--linea);
}
.fac-doc label.btn { cursor: pointer; }

/* Regreso del chofer: factura firmada + forma de pago. */
.log-envio.fac.cobro {
  grid-template-columns: 1.6fr 1fr 1fr; align-items: end;
  margin-top: .6rem; padding-top: .55rem; border-top: 1px dashed var(--linea);
}
.check-firmada {
  display: flex; align-items: center; gap: .5rem; cursor: pointer;
  padding-bottom: .35rem; font-weight: 600;
}
.check-firmada input { width: auto; margin: 0; }
@media (max-width: 640px) { .log-envio.fac.cobro { grid-template-columns: 1fr; } }

/* Camiones / catálogos */
.mini-alerta { color: var(--alerta); font-weight: 800; cursor: help; }
.alerta-txt { color: #7a4d00; font-weight: 600; }
:root[data-tema="oscuro"] .alerta-txt { color: var(--alerta); }
.unidad-fila {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem 0; border-bottom: 1px solid var(--linea);
}
.unidad-fila:last-child { border-bottom: 0; }
.unidad-nombre { font-weight: 600; }
.moti {
  margin: 0 0 1rem; padding: .8rem 1.1rem; border-radius: 12px;
  font-size: 1.08rem; text-align: center; line-height: 1.4;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--bien) 18%, transparent),
    color-mix(in srgb, var(--alerta) 20%, transparent));
  border: 1px solid color-mix(in srgb, var(--bien) 35%, transparent);
  color: var(--ink);
}
.moti b { color: var(--bien-texto); }

.cat-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.cat-cols.tres { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 900px) { .cat-cols.tres { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .cat-cols { grid-template-columns: 1fr; } }
.fila-btns { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.chico.ok { color: var(--bien-texto); font-weight: 600; }
@media (max-width: 640px) { .log-envio { grid-template-columns: 1fr; } }

/* ── Chofer de patio ─────────────────────────────────────────── */
.patio-grid { margin: .4rem 0 .2rem; }
.patio-fila { display: grid; grid-template-columns: 1fr 5.5rem 5.5rem; gap: .5rem; align-items: center; margin-bottom: .45rem; }
.patio-fila .patio-etq { font-weight: 600; }
.patio-fila input { width: 100%; }
.patio-fila.patio-cab { margin-bottom: .3rem; }
.patio-fila.patio-cab span { font-size: .8rem; color: var(--ink-mudo); text-align: center; }
.patio-resumen .patio-tot { display: flex; justify-content: space-between; gap: 1rem;
  padding: .5rem 0; border-bottom: 1px solid var(--linea); }
.patio-resumen .patio-tot:last-child { border-bottom: 0; }
.patio-resumen .patio-tot > span:first-child { font-weight: 600; }
.patio-falta { color: var(--alerta); font-weight: 700; }
.patio-tabla td, .patio-tabla th { text-align: left; }

/* ── Presentación de logos (pantalla de menú) ────────────────── */
.logo-show {
  position: relative; width: 100%; max-width: none; margin: 1.5rem 0 1rem;
  aspect-ratio: 21 / 9;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 20px; box-shadow: var(--sombra); overflow: hidden;
}
.logo-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 1rem;
  opacity: 0; transition: opacity .8s ease;
}
.logo-img.activo { opacity: 1; }
.logo-img.roto { display: none; }
.logo-puntos {
  position: absolute; left: 0; right: 0; bottom: .85rem;
  display: flex; justify-content: center; gap: .4rem;
}
.logo-punto {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--eje); transition: background .3s ease;
}
.logo-punto.on { background: var(--azul); }

/* ── Inventario ──────────────────────────────────────────────── */
.inv-aviso {
  background: color-mix(in srgb, var(--azul) 10%, transparent);
  border: 1px solid var(--azul); color: var(--azul-2);
  border-radius: 10px; padding: .6rem .8rem; margin-bottom: .9rem; font-size: .9rem;
}
:root[data-tema="oscuro"] .inv-aviso { color: var(--azul-2); }
.inv-tabla td.num, .inv-tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
.inv-tabla tfoot td { border-top: 2px solid var(--eje); font-weight: 700; border-bottom: none; }
.inv-apartado { color: var(--alerta); font-weight: 700; }
.inv-neg { color: var(--critico); }
.inv-acc { display: flex; gap: .35rem; justify-content: flex-end; }

/* ── Utilidades ──────────────────────────────────────────────── */
.solo-admin { display: none; }
body[data-rol="admin"] .solo-admin { display: revert; }
.mudo { color: var(--ink-mudo); }
.chico { font-size: .82rem; }

@media (max-width: 640px) {
  main { padding: .9rem; }
  .op-cabecera { grid-template-columns: 1fr; }
  .op-crono-caja { text-align: left; }
  .op-num { font-size: 2.1rem; }
  .op-producto { font-size: 1.25rem; }
  .op-acciones .btn { min-width: 100%; }
  .marca { display: none; }
}

@media print {
  #barra, .op-acciones, .filtros { display: none; }
  body { background: #fff; }
}

/* ══ Capa de refinamiento (look más profesional) ══════════════════════
   Sólo pule lo ya existente: tipografía más nítida, sombras en capas,
   micro-interacciones y jerarquía. No cambia estructura ni colores. */

/* Tipografía más limpia y con mejor render. */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { text-rendering: optimizeLegibility; letter-spacing: .002em; }
h1 { letter-spacing: -.015em; font-weight: 800; }
h2 { letter-spacing: -.01em; font-weight: 700; }

/* Sombras en dos capas: más suaves de cerca, con más aire al elevar. */
:root, :root[data-tema="claro"] {
  --sombra: 0 1px 2px rgba(11,26,21,.04), 0 6px 16px rgba(11,26,21,.06);
  --sombra-alta: 0 2px 6px rgba(11,26,21,.06), 0 14px 34px rgba(11,26,21,.10);
}
:root[data-tema="oscuro"] {
  --sombra: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.34);
  --sombra-alta: 0 2px 8px rgba(0,0,0,.5), 0 18px 40px rgba(0,0,0,.48);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) {
    --sombra: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.34);
    --sombra-alta: 0 2px 8px rgba(0,0,0,.5), 0 18px 40px rgba(0,0,0,.48);
  }
}

.tarjeta { border-radius: 16px; }

/* Barra superior con un toque más sólido. */
#barra { padding-top: .7rem; padding-bottom: .7rem; backdrop-filter: saturate(1.1); }
.marca { letter-spacing: .12em; font-size: .9rem; }

/* Botones: transición, hundido al presionar y sombra de color en los llenos. */
button.btn {
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  box-shadow: 0 1px 1px rgba(11,26,21,.04);
}
button.btn:active { transform: translateY(1px); }
button.btn.primario { box-shadow: 0 2px 8px color-mix(in srgb, var(--azul) 30%, transparent); }
button.btn.primario:hover { box-shadow: 0 4px 14px color-mix(in srgb, var(--azul) 38%, transparent); }
button.btn.accion { box-shadow: 0 2px 8px color-mix(in srgb, var(--verde) 30%, transparent); }
button.btn.accion:hover { box-shadow: 0 4px 14px color-mix(in srgb, var(--verde) 38%, transparent); }
button.btn:disabled { box-shadow: none; }

/* Campos: transición y anillo de foco más fino. */
input, select { transition: border-color .12s ease, box-shadow .12s ease; }
input:focus, select:focus {
  outline: none; border-color: var(--serie);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--serie) 22%, transparent);
}

/* Menú: el icono va en una placa redondeada con tinte de marca; más jerarquía. */
.mosaico { padding: 1.15rem 1.2rem; gap: .45rem; }
.mosaico:hover { box-shadow: var(--sombra-alta); }
.mosaico .ico {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; border-radius: 13px; font-size: 1.55rem;
  background: var(--azul-suave); margin-bottom: .35rem;
}
.mosaico[data-ruta="grano"] .ico,
.mosaico[data-ruta="mineral"] .ico,
.mosaico[data-ruta="melaza"] .ico,
.mosaico[data-ruta="encostaladoras"] .ico,
.mosaico[data-ruta="tablero"] .ico { background: var(--verde-suave); }
.mosaico .titulo { font-size: 1.05rem; letter-spacing: -.01em; }

/* Encabezado de cada vista: título más presente, con línea de apoyo. */
.encabezado-vista h1 { margin-bottom: .1rem; }
.titulo-seccion { letter-spacing: .01em; }

/* Tablas: cabecera con fondo tenue y filas con transición suave. */
thead th { background: var(--superficie-2); }
thead th:first-child { border-top-left-radius: 10px; }
thead th:last-child { border-top-right-radius: 10px; }
tbody tr { transition: background .1s ease; }

/* Chips y modal, un pelo más finos. */
.chip { font-weight: 600; }
.modal-caja { border-radius: 16px; box-shadow: var(--sombra-alta); }
.modal { backdrop-filter: blur(2px); }

/* ══ Estilo Apple — limpio y simple (capa final) ══════════════════════
   Más aire, tipografía del sistema (SF en Mac, Segoe en Windows), esquinas
   suaves, sombras difusas, hairlines en vez de bordes duros y paneles
   translúcidos "frosted". Sólo pule superficies; no toca la estructura. */
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    system-ui, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}
h1 { font-weight: 700; letter-spacing: -.021em; }
h2 { font-weight: 700; letter-spacing: -.015em; }
h3 { letter-spacing: -.01em; }

/* Canvas gris Apple muy suave, hairlines finas y sombras difusas. */
:root, :root[data-tema="claro"] {
  --plano: #eaedf0;
  --superficie: #ffffff;
  --borde: rgba(0,0,0,.06);
  --linea: rgba(0,0,0,.07);
  --sombra: 0 1px 2px rgba(0,0,0,.04), 0 12px 30px rgba(0,0,0,.06);
  --sombra-alta: 0 2px 10px rgba(0,0,0,.07), 0 24px 50px rgba(0,0,0,.13);
}
:root[data-tema="oscuro"] {
  --superficie: #1b1d1f; --superficie-2: #26282b;
  --borde: rgba(255,255,255,.09); --linea: rgba(255,255,255,.09);
  --sombra: 0 1px 2px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.5);
  --sombra-alta: 0 2px 10px rgba(0,0,0,.6), 0 26px 54px rgba(0,0,0,.6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) {
    --superficie: #1b1d1f; --superficie-2: #26282b;
    --borde: rgba(255,255,255,.09); --linea: rgba(255,255,255,.09);
  }
}

main#vista { padding: 1.6rem 1.5rem; }

/* Tarjetas más redondeadas, con hairline apenas visible y sombra difusa. */
.tarjeta { border-radius: 20px; border-color: var(--borde); box-shadow: var(--sombra); }

/* Botones y campos: esquinas suaves, tipografía firme, nada estridente. */
button.btn { border-radius: 12px; padding: .62rem 1.15rem; font-weight: 600; letter-spacing: -.005em; }
input, select { border-radius: 12px; border-color: var(--borde); }

/* Paneles translúcidos "frosted" (barra lateral, modal, barra superior). */
#lateral {
  background: color-mix(in srgb, var(--superficie) 78%, transparent);
  -webkit-backdrop-filter: saturate(1.7) blur(20px);
  backdrop-filter: saturate(1.7) blur(20px);
  border-right: 1px solid var(--borde);
}
.modal { background: rgba(0,0,0,.32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal-caja {
  border-radius: 22px; border-color: var(--borde);
  background: color-mix(in srgb, var(--superficie) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(20px);
  backdrop-filter: saturate(1.5) blur(20px);
}
#barra {
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
  box-shadow: 0 1px 0 var(--borde);
}

/* Ítems de la lateral: resalte tipo Apple (relleno redondeado, sin borde). */
.lat-item, .lat-item.activo { border: 0; border-radius: 10px; }

/* Iconos en blanco y negro: se les quita el color a los emoji de navegación,
   estaciones y encabezados (quedan en escala de grises). */
.lat-ico, .op-carta-ico, .marca-ico, .menu-ico { filter: grayscale(1); }

/* Encostalado: líneas de tipo de costal (tamaño + cuántos) y el total. */
.costal-fila { display: flex; gap: .4rem; align-items: center; margin-bottom: .4rem; }
.costal-fila .cc-tipo { flex: 1; min-width: 8rem; }
.costal-fila .cc-cant { width: 6rem; }
.enc-costales-plan { font-size: .9rem; margin: .2rem 0 .45rem; color: var(--ink-2); }
.enc-costales-plan .enlace { margin-left: .3rem; }
.enc-total { margin: .7rem 0 .2rem; font-size: .95rem; }

/* Etiqueta de inventario disponible en el Plan del Día. */
.chip.inv-plan {
  background: var(--verde-suave); color: var(--verde);
  border-color: transparent; font-weight: 600;
}
:root[data-tema="oscuro"] .chip.inv-plan { color: var(--verde-2); }
.chip { border-color: var(--borde); }
.logo-show { border-radius: 24px; border-color: var(--borde); }

/* ── Etiquetas ───────────────────────────────────────────────────────
   La hoja de etiquetas vive escondida y solo aparece al imprimir. En papel
   se ocultan la barra, la lateral y la vista, y se muestran las tarjetas. */
.lote { font-weight: 700; letter-spacing: .5px; }

#hojaEtiquetas { display: none; }

.etq {
  border: 2px solid #000; border-radius: 6px; padding: 9mm 6mm;
  text-align: center; break-inside: avoid; page-break-inside: avoid; color: #000;
}
.etq-marca    { font-size: 10pt; letter-spacing: 2px; color: #333; }
.etq-prod     { font-size: 18pt; font-weight: 800; margin: 5mm 0 4mm; text-transform: uppercase; }
.etq-lote-rot { font-size: 8pt;  letter-spacing: 3px; color: #555; }
.etq-lote     { font-size: 22pt; font-weight: 800; letter-spacing: 1px; font-family: monospace; }

/* Opciones al pasar al plan: surtir de inventario vs producir. */
.op-surtir { display: grid; gap: .5rem; margin: .2rem 0 .8rem; }
.op-surtir label {
  display: flex; align-items: baseline; gap: .5rem; cursor: pointer;
  padding: .5rem .6rem; border: 1px solid var(--borde); border-radius: 9px;
  background: var(--superficie-2);
}
.op-surtir input { margin: 0; }

/* Montacargas: caja incompleta y el detalle de lo que falta acomodar. */
.caja-tarjeta.incompleta { border-left: 4px solid var(--alerta, #e03131); }
.caja-faltan {
  margin: .5rem 0 .2rem; padding: .5rem .7rem; border-radius: 8px;
  background: var(--superficie-2); border: 1px solid var(--borde);
  font-size: .88rem;
}
.caja-faltan ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.caja-faltan li { margin: .12rem 0; }
.btn.chico.bloqueada { opacity: .5; }

/* Conteo físico de inventario: lista de todos los productos con su cantidad. */
.inv-conteo {
  display: grid; gap: .3rem; margin-top: .6rem;
  max-height: 360px; overflow-y: auto;
}
.inv-conteo-fila {
  display: flex; align-items: center; gap: .6rem;
  padding: .2rem 0; border-bottom: 1px solid var(--linea);
}
.inv-conteo-nom { flex: 1; font-size: .9rem; }
.inv-conteo-inp { width: 6rem; }

/* Botón "a granel" en el destino del melazador. */
.enc-op.granel .enc-num { font-size: 1.4rem; }
.enc-op.granel.elegida, .enc-op.granel:hover { border-color: var(--verde); }

/* Estaciones (personas) en el resultado del descifrado de lote. */
.descifrar-estaciones {
  margin-top: .4rem; padding-top: .4rem; border-top: 1px dashed var(--linea);
  display: grid; gap: .15rem; font-size: .92rem;
}

@media print {
  body.imprimiendo-etiquetas > #barra,
  body.imprimiendo-etiquetas > #cuerpo,
  body.imprimiendo-etiquetas > #latFondo,
  body.imprimiendo-etiquetas > #modal,
  body.imprimiendo-etiquetas > #aviso { display: none !important; }

  body.imprimiendo-etiquetas > #hojaEtiquetas {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8mm; padding: 10mm;
  }
}

/* ══ Capa minimalista editorial (capa final) ═════════════════════════
   Look de marca "fancy": papel hueso, tinta casi negra, hairlines en vez
   de sombras, esquinas casi rectas y mucho aire. El color deja de decorar
   —fuera degradados y barras de colores— y se reserva para los estados
   (bien / alerta / grave / crítico), siempre acompañados de icono y texto.
   Sólo pinta superficies: no toca estructura ni lógica.                */

:root, :root[data-tema="claro"] {
  --plano:        #f4f3f0;   /* papel hueso */
  --superficie:   #ffffff;
  --superficie-2: #f0eeea;
  --ink:          #16171a;   /* tinta */
  --ink-2:        #55585c;
  --ink-mudo:     #8b8e92;
  --linea:        rgba(22,23,26,.09);
  --borde:        rgba(22,23,26,.10);
  --eje:          rgba(22,23,26,.20);

  /* La marca se vuelve tinta; el verde queda como salvia apagada. */
  --azul:         #16171a;
  --azul-2:       #000000;
  --azul-suave:   #eeece8;
  --verde:        #3f5c4c;
  --verde-2:      #4f7160;
  --verde-suave:  #e7ebe7;

  /* Gráficas: una sola rampa de grises cálidos, sin color. */
  --serie:        #2b2a28;
  --serie-suave:  #ddd9d2;
  --seq-1:        #d6d3cd;
  --seq-2:        #b6b2ab;
  --seq-3:        #918d86;
  --seq-4:        #6b6762;
  --seq-5:        #47443f;
  --seq-6:        #232120;

  /* Estados: los mismos significados, en tonos de tierra. */
  --bien:         #4a7c59;
  --alerta:       #a8823c;
  --grave:        #a86b45;
  --critico:      #9c4038;
  --bien-texto:   #3f6b52;

  --sombra: none;
  --sombra-alta: none;
  --r: 4px;                  /* radio único, casi recto */
}

:root[data-tema="oscuro"] {
  --plano:        #0d0d0e;
  --superficie:   #161617;
  --superficie-2: #1f1f21;
  --ink:          #f2f1ee;
  --ink-2:        #a8a6a2;
  --ink-mudo:     #7b7975;
  --linea:        rgba(255,255,255,.10);
  --borde:        rgba(255,255,255,.11);
  --eje:          rgba(255,255,255,.22);

  --azul:         #f2f1ee;
  --azul-2:       #ffffff;
  --azul-suave:   #222224;
  --verde:        #6f9a83;
  --verde-2:      #86ae98;
  --verde-suave:  #1e2a25;

  --serie:        #e7e5e1;
  --serie-suave:  #3a3835;
  --seq-1:        #3a3835;
  --seq-2:        #57544f;
  --seq-3:        #77736d;
  --seq-4:        #9b9791;
  --seq-5:        #c2beb7;
  --seq-6:        #e7e5e1;

  --bien:         #5f9a74;
  --alerta:       #c3a05c;
  --grave:        #c08760;
  --critico:      #c46a60;
  --bien-texto:   #86ae98;

  --sombra: none;
  --sombra-alta: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) {
    --plano: #0d0d0e; --superficie: #161617; --superficie-2: #1f1f21;
    --ink: #f2f1ee; --ink-2: #a8a6a2; --ink-mudo: #7b7975;
    --linea: rgba(255,255,255,.10); --borde: rgba(255,255,255,.11);
    --eje: rgba(255,255,255,.22);
    --azul: #f2f1ee; --azul-2: #ffffff; --azul-suave: #222224;
    --verde: #6f9a83; --verde-2: #86ae98; --verde-suave: #1e2a25;
    --serie: #e7e5e1; --serie-suave: #3a3835;
    --seq-1:#3a3835; --seq-2:#57544f; --seq-3:#77736d;
    --seq-4:#9b9791; --seq-5:#c2beb7; --seq-6:#e7e5e1;
    --bien: #5f9a74; --alerta: #c3a05c; --grave: #c08760; --critico: #c46a60;
    --bien-texto: #86ae98;
  }
}

/* Papel plano: fuera los halos de color de las esquinas. */
body { background: var(--plano); }

/* ── Tipografía: título en versalitas espaciadas, texto tranquilo ── */
h1 {
  font-size: 1.12rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em;
}
h2 { font-size: 1.02rem; font-weight: 600; letter-spacing: -.005em; }
h3 { font-size: .95rem; font-weight: 600; letter-spacing: 0; }

/* Rótulos pequeños: mayúsculas muy espaciadas, peso ligero. */
th, .titulo-seccion, .seccion-titulo, .tablero-nombre, .enc-titulo,
.enc-etiqueta, .cuadrilla-etiqueta, .caja-front, .caja-back,
.kpi .etiqueta, .lat-cat-btn, .op-carta-estado {
  letter-spacing: .14em; font-weight: 500;
}
th { color: var(--ink-mudo); font-size: .7rem; }

/* ── Aire ─────────────────────────────────────────────────────────── */
main#vista { padding: 2.2rem 2rem 3rem; }
.encabezado-vista {
  border-bottom: 1px solid var(--borde);
  padding-bottom: .9rem; margin-bottom: 1.5rem;
}
.tarjeta { padding: 1.4rem; }

/* ── Superficies: hairline, sin sombra, casi rectas ───────────────── */
.tarjeta, .kpi, .mosaico, .tablero-carta, .op-carta, .enc-carta,
.logo-show, .modal-caja, .caja-rejilla, .caja-faltan, .auth-inline,
.nota-permiso, .dicho-barra, .cuadrilla, .moti, .op-sigue, .inv-aviso,
.banner-vencidos, .banner-hoy, .tooltip, .aviso, .error, .linea-op {
  border-radius: var(--r); box-shadow: none;
}
.caja-rejilla { border-width: 1px; background: transparent; }
.caja-celda { border-radius: var(--r); }

/* ── Barra superior: papel, no degradado de marca ─────────────────── */
#barra {
  background: var(--superficie); color: var(--ink);
  border-bottom: 1px solid var(--borde);
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
#barra .icono { color: var(--ink-mudo); }
#barra .icono:hover { background: var(--superficie-2); color: var(--ink); }
#barra .chip { background: transparent; border-color: var(--borde); color: var(--ink-2); }
.reloj-barra { color: var(--ink-mudo); }
/* El logo va suelto sobre el papel; en oscuro conserva su placa clara. */
.marca-img { background: none; box-shadow: none; padding: 0; height: 26px; border-radius: 0; }
:root[data-tema="oscuro"] .marca-img { background: #fff; padding: 3px 8px; border-radius: var(--r); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) .marca-img { background: #fff; padding: 3px 8px; border-radius: var(--r); }
}

/* ── Lateral: papel, sin vidrio esmerilado; lo activo es una pleca ── */
#lateral {
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-right: 1px solid var(--borde); padding: 1.4rem .8rem 2rem;
}
.lat-item { border-radius: var(--r); font-weight: 500; }
.lat-item.activo,
.lat-item.activo[data-ruta="tablero"], .lat-item.activo[data-ruta="grano"],
.lat-item.activo[data-ruta="mineral"], .lat-item.activo[data-ruta="melaza"],
.lat-item.activo[data-ruta="encostaladoras"] {
  background: transparent; color: var(--ink); font-weight: 700;
  box-shadow: inset 2px 0 0 var(--ink); border-radius: 0;
}
.lat-cat-btn { border-radius: var(--r); font-weight: 600; }
.lat-cat-n { background: transparent; border: 1px solid var(--borde); border-radius: var(--r); }
@media (max-width: 899px) {
  #lateral { background: var(--plano); box-shadow: none; border-right: 1px solid var(--borde); }
}

/* ── Botones: planos, hairline, sin sombras de color ──────────────── */
button.btn {
  border-radius: var(--r); box-shadow: none;
  background: transparent; border-color: var(--eje);
  font-weight: 500; letter-spacing: .01em;
}
button.btn:hover { background: var(--superficie-2); border-color: var(--ink); }
button.btn.primario,
button.btn.primario:hover {
  background: var(--ink); border-color: var(--ink);
  color: var(--plano); box-shadow: none;
}
button.btn.primario:hover { background: color-mix(in srgb, var(--ink) 82%, var(--plano)); }
button.btn.accion,
button.btn.accion:hover {
  background: var(--verde); border-color: var(--verde);
  color: #fff; box-shadow: none;
}
button.btn.accion:hover { background: var(--verde-2); border-color: var(--verde-2); }
:root[data-tema="oscuro"] button.btn.accion { color: #0d0d0e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) button.btn.accion { color: #0d0d0e; }
}
button.btn.peligro { color: var(--critico); border-color: color-mix(in srgb, var(--critico) 45%, transparent); }
button.btn:disabled:hover { background: transparent; border-color: var(--eje); }
button.enlace { color: var(--ink); text-underline-offset: 3px; }

/* Campos: hairline y foco discreto en tinta. */
input, select, textarea { border-radius: var(--r); border-color: var(--eje); }
input:focus, select:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 12%, transparent);
}
label.campo > span, .campo-titulo { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mudo); }

/* ── Tablas: sólo reglas horizontales ─────────────────────────────── */
thead th { background: transparent; border-bottom: 1px solid var(--eje); }
thead th:first-child, thead th:last-child { border-radius: 0; }
tbody tr:hover { background: var(--superficie-2); }
tfoot td, .inv-tabla tfoot td, .op-ingredientes tfoot td { border-top: 1px solid var(--eje); }

/* ── Menú: mosaicos sin franja de color ni placa de icono ─────────── */
.mosaico::before { display: none; }
.mosaico { transition: border-color .12s ease; }
.mosaico:hover,
.mosaico[data-ruta="grano"]:hover, .mosaico[data-ruta="mineral"]:hover,
.mosaico[data-ruta="melaza"]:hover, .mosaico[data-ruta="encostaladoras"]:hover,
.mosaico[data-ruta="tablero"]:hover { transform: none; border-color: var(--ink); box-shadow: none; }
.mosaico .ico,
.mosaico[data-ruta="grano"] .ico, .mosaico[data-ruta="mineral"] .ico,
.mosaico[data-ruta="melaza"] .ico, .mosaico[data-ruta="encostaladoras"] .ico,
.mosaico[data-ruta="tablero"] .ico {
  background: none; width: auto; height: auto; font-size: 1.35rem;
  filter: grayscale(1); opacity: .7; margin-bottom: .5rem;
}
.mosaico .titulo { font-weight: 600; letter-spacing: 0; }

/* ── Login: papel plano, sin degradados ───────────────────────────── */
.login-envoltura { background: var(--plano); }
.login-caja .logo {
  background: none; box-shadow: none;
  border: 1px solid var(--eje); border-radius: var(--r);
  width: 60px; height: 60px; font-size: 1.7rem; filter: grayscale(1);
}
.login-caja h1 { letter-spacing: .18em; }

/* ── Estados y acentos: se apagan los rellenos, quedan plecas finas ─ */
.tablero-carta { border-left-width: 2px; }
.op-carta { border-top-width: 2px; }
.enc-carta.no-lista, .enc-carta.lista, .enc-carta.cargada { border-left-width: 2px; }
.nota-permiso, .dicho-barra, .cuadrilla { border-left-width: 2px; }
.caja-tarjeta.incompleta { border-left-width: 2px; }
.barra-progreso { background: var(--superficie-2); border-radius: 0; height: 3px; }
.barra-progreso > i { background: var(--ink); border-radius: 0; }
.barra-progreso.grande { height: 5px; }
.moti {
  background: var(--superficie-2); border: 1px solid var(--borde);
  color: var(--ink); font-size: 1rem;
}
.linea-num {
  background: none; color: var(--ink);
  border: 1px solid var(--eje); font-weight: 600; font-size: 1.35rem;
}
.linea-op:hover { transform: none; border-color: var(--ink); }
.persona, .persona.lider, .chip, .chip-pres, .chip-caja, .chip-enplan,
.chip-cnt, .caja-chip, .filtros button, .hora-limite, .op-carta-estado,
.aviso-chip, .lat-cat-n {
  border-radius: var(--r);
}
.filtros button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--plano); }
.enc-op { border-width: 1px; border-radius: var(--r); background: transparent; }
.enc-op.elegida { background: var(--ink); border-color: var(--ink); color: var(--plano); }
.enc-op.elegida .enc-cola { color: color-mix(in srgb, var(--plano) 75%, var(--ink)); }
.chip.lista { background: var(--bien); border-color: var(--bien); color: #fff; font-weight: 600; }
.caja-chip.sel { border-color: var(--ink); box-shadow: none; }
.logo-punto.on { background: var(--ink); }

/* Tarima cargada: sigue saltando a la vista, pero en salvia y con su ✓. */
.caja-celda.cargada {
  background: color-mix(in srgb, var(--bien) 20%, var(--superficie)) !important;
  border-color: var(--bien) !important; box-shadow: none !important;
}
.caja-celda.cargada .caja-etq,
.caja-celda.cargada .caja-num,
.caja-celda.cargada .caja-cost { color: var(--ink); }
.caja-celda .caja-ok { color: var(--bien-texto); }

/* ── Modal y avisos: sin vidrio ni sombras ────────────────────────── */
.modal { background: rgba(0,0,0,.28); backdrop-filter: none; -webkit-backdrop-filter: none; }
.modal-caja {
  background: var(--superficie); backdrop-filter: none; -webkit-backdrop-filter: none;
  border-color: var(--borde); padding: 1.5rem;
}
.aviso { background: var(--ink); color: var(--plano); border-radius: var(--r); }

/* ══ Iconos de trazo ═════════════════════════════════════════════════
   El set de js/iconos.js. Un solo grosor, un solo tamaño relativo y
   siempre `currentColor`: el icono es del mismo color que su texto, así
   que no hay que ajustarlo por tema ni por estado.                   */
.ico-svg {
  width: 1.15em; height: 1.15em; flex: 0 0 auto;
  /* inline-block para que dentro de un título o un párrafo se siente en
     la línea del texto, y no se vaya a un renglón aparte. */
  display: inline-block; vertical-align: -.18em;
  fill: none; stroke: currentColor;
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.ico-svg .lleno { fill: currentColor; stroke: none; }

/* Los iconos acompañan, no gritan: van más tenues que su texto y sólo
   se encienden del todo en la sección activa. */
.lat-ico {
  display: grid; place-items: center;
  width: 1.4rem; font-size: 1.02rem; opacity: .55; filter: none;
}
.lat-item.activo .lat-ico { opacity: 1; }
.op-carta-ico { display: grid; place-items: center; opacity: .55; filter: none; }
.op-carta-ico .ico-svg { width: 21px; height: 21px; }

/* La vaca de la marca, arriba de la barra lateral. */
.lat-marca {
  display: flex; align-items: center; gap: .6rem;
  padding: .1rem .4rem 1rem; margin-bottom: .5rem;
  border-bottom: 1px solid var(--borde);
  font-family: var(--display); letter-spacing: .18em; font-size: .8rem;
}
.lat-marca b { font-weight: 400; color: var(--ink); }

/* La vaca de MENOPRO, recortada del logo original (fondo transparente):
   la misma de la pestaña, aquí adentro. Es la única imagen a color de la
   interfaz, y por eso va sola, sin placa ni marco. */
.vaca-marca { display: block; width: auto; height: 30px; flex: 0 0 auto; }
.login-caja .logo {
  width: auto; height: auto; background: none; border: 0;
  filter: none; margin-bottom: 1rem;
}
.login-caja .logo .vaca-marca { height: 76px; margin: 0 auto; }

/* Botones con icono + texto: el icono va pegado a su palabra. */
button.btn, label.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
}
.acciones-cel .btn.chico { gap: 0; }
.acciones-cel .btn.chico .ico-svg { width: 1.05em; height: 1.05em; }

/* Piezas sueltas que llevan icono. */
.login-caja .logo .ico-svg { width: 32px; height: 32px; stroke-width: 1.3; }
.enc-num .ico-svg { width: 1.5rem; height: 1.5rem; margin: 0 auto; }
.cierre-ico { display: grid; place-items: center; }
.cierre-ico .ico-svg { width: 44px; height: 44px; stroke-width: 1; opacity: .7; }

/* Los pocos símbolos que quedan en el CSS, en versión monocroma: el
   selector \FE0E le pide al sistema el dibujo de texto, no el emoji. */
.hora-limite::before { content: "\25F7"; }
.hora-limite.vencida::before { content: "\26A0\FE0E"; }
.tablero-estado.mezclando::before,
.op-carta-estado.mezclando::before { content: "\25D0"; }
.op-carta-estado.espera::before { content: "\25B6\FE0E"; }

/* ══ Capa editorial ══════════════════════════════════════════════════
   Lo que hace que se sienta de marca y no de panel de control: una tipo
   con serifas para los títulos y los nombres de producto, contra la
   tipografía de sistema para los datos y los números.                */
:root { --display: Constantia, Georgia, "Iowan Old Style", "Times New Roman", serif; }

h1 {
  font-family: var(--display); font-weight: 400;
  font-size: 1.22rem; letter-spacing: .2em; text-transform: uppercase;
}
h2, h3 {
  font-family: var(--display); font-weight: 400;
  letter-spacing: .01em; text-transform: none;
}
h2 { font-size: 1.18rem; }
h3 { font-size: 1.02rem; }
.login-caja h1 { font-size: 1.05rem; letter-spacing: .24em; }

/* Los nombres de producto son el dato que más se lee de lejos: van en
   la serif, en grande y sin negrita. Los números NO: se quedan en la
   tipografía de sistema, con cifras de ancho fijo. */
.tablero-producto, .enc-producto, .op-producto, .dest-nombre {
  font-family: var(--display); font-weight: 400; letter-spacing: .005em;
}
.op-producto { font-size: 1.7rem; }
.tablero-producto { font-size: 1.45rem; }

/* Entradilla bajo el título de cada pantalla. */
.encabezado-vista p { font-size: .88rem; color: var(--ink-mudo); margin: .35rem 0 0; }
.encabezado-vista h1 { margin-bottom: 0; }

/* Título de sección con su regla al lado, como en una revista. */
.titulo-seccion, .caja-front, .caja-back {
  display: flex; align-items: center; gap: 1rem;
}
.titulo-seccion::after, .caja-front::after, .caja-back::after {
  content: ""; flex: 1; border-top: 1px solid var(--borde);
}
.caja-front, .caja-back { text-align: left; }

/* Categorías de la lateral: más chicas y más calladas. */
.lat-cat-btn { font-size: .66rem; letter-spacing: .18em; }
.lat-item { font-size: .88rem; letter-spacing: .01em; }

/* ══ Azul marino ═════════════════════════════════════════════════════
   Un solo acento de color sobre el gris, y con un trabajo claro: es el
   azul de confirmar y de lo informativo (guardar, la hora límite, el
   pedido de hoy, la caja asignada, el enlace, lo que está activo). Los
   estados siguen en sus tonos de tierra y las gráficas en gris: si el
   azul apareciera también ahí, dejaría de querer decir algo.        */
:root, :root[data-tema="claro"] {
  --azul:       #1e3155;
  --azul-2:     #16243f;
  --azul-suave: #e8ebf2;
}
:root[data-tema="oscuro"] {
  --azul:       #5077ac;
  --azul-2:     #9db4d8;
  --azul-suave: #1a2334;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) {
    --azul: #5077ac; --azul-2: #9db4d8; --azul-suave: #1a2334;
  }
}

/* Confirmar / guardar / seguir: el botón lleno se va a marino. Las
   acciones grandes de planta se quedan en verde, como siempre. */
button.btn.primario,
button.btn.primario:hover {
  background: var(--azul); border-color: var(--azul); color: #fff;
}
button.btn.primario:hover { background: var(--azul-2); border-color: var(--azul-2); }
:root[data-tema="oscuro"] button.btn.primario:hover { background: #628ac0; border-color: #628ac0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) button.btn.primario:hover { background: #628ac0; border-color: #628ac0; }
}

/* Lo activo y lo enlazado. */
.lat-item.activo,
.lat-item.activo[data-ruta="tablero"], .lat-item.activo[data-ruta="grano"],
.lat-item.activo[data-ruta="mineral"], .lat-item.activo[data-ruta="melaza"],
.lat-item.activo[data-ruta="encostaladoras"] {
  color: var(--azul-2); box-shadow: inset 2px 0 0 var(--azul);
}
:root[data-tema="oscuro"] .lat-item.activo { color: var(--azul-2); }
button.enlace { color: var(--azul-2); }
.filtros button[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }
.enc-op.elegida { background: var(--azul); border-color: var(--azul); color: #fff; }
.enc-op.elegida .enc-cola { color: rgba(255,255,255,.78); }
.caja-chip.sel { border-color: var(--azul); }
.logo-punto.on { background: var(--azul); }
input:focus, select:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul) 18%, transparent);
}

/* ══ La franja de la casa ════════════════════════════════════════════
   La barra de arriba —la que lleva el logo de MENOPRO— es la franja de
   verde olivo. Es lo único con color de fondo en toda la app: abajo del
   filo todo vuelve a ser papel y tinta. Como es marca y no dato, no
   compite con el azul marino ni con los colores de estado.

   El logo va sobre su placa blanca porque el original es índigo y verde:
   suelto sobre el olivo no se leería. En papel no se imprime.        */
:root, :root[data-tema="claro"] { --olivo: #63713f; }
:root[data-tema="oscuro"]       { --olivo: #55613a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) { --olivo: #55613a; }
}

#barra {
  background: var(--olivo); color: #fff;
  border-bottom: 0; box-shadow: none;
}
#barra .icono { color: rgba(255,255,255,.85); }
#barra .icono:hover { background: rgba(255,255,255,.18); color: #fff; }
#barra .chip {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.3); color: #fff;
}
#barra .reloj-barra { color: rgba(255,255,255,.8); }

.marca-img,
:root[data-tema="oscuro"] .marca-img {
  background: #fff; padding: 4px 9px; border-radius: 3px;
  box-shadow: none; height: 26px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) .marca-img { background: #fff; padding: 4px 9px; border-radius: 3px; }
}

/* El mismo olivo cruzando el borde de arriba: se funde con la barra
   cuando la hay, y en el login —que no la tiene— queda el filo solo. */
body::before {
  content: ""; position: fixed; inset: 0 0 auto 0;
  height: 3px; background: var(--olivo); z-index: 100;
  pointer-events: none;
}
@media print { body::before { display: none; } }