/* ── 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; }

/* Selector de módulos (#inicio): sin barra lateral, a todo el ancho.
   Solo en esta pantalla; adentro de cada módulo la lateral se ve igual. */
body.en-selector #lateral, body.en-selector .lat-fondo { display: none; }
body.en-selector main#vista { max-width: 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); }
/* La caja con foto: la miniatura va dentro del chip y al tocarlo se abre
   grande. Se reconoce la unidad sin acordarse del número. */
.chip-caja.con-foto {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .05rem .4rem .05rem .12rem; cursor: zoom-in;
}
.chip-caja.con-foto img {
  width: 1.7rem; height: 1.2rem; object-fit: cover;
  border-radius: 4px; border: 1px solid var(--azul); display: block;
}

/* ── 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.mover::before { background: linear-gradient(135deg, var(--serie), color-mix(in srgb, var(--serie) 40%, white)); border-radius: 50%; }
.caja-chip.sel { border-color: var(--serie); box-shadow: 0 0 0 2px var(--azul-suave); font-weight: 700; }

/* ── 33o (20261105i) · Arrastrar / intercambiar tarimas en acomodo ─── */
.caja-celda.llena { touch-action: manipulation; }
.caja-celda.arrastrando { opacity: .35; }
.caja-celda.destino-ok {
  outline: 2px dashed var(--serie); outline-offset: 2px;
  background: color-mix(in srgb, var(--serie) 18%, var(--superficie)) !important;
}
.caja-celda.destino-swap {
  outline: 2px solid var(--aviso, #f59f00); outline-offset: 2px;
  background: color-mix(in srgb, #f59f00 22%, var(--superficie)) !important;
}
.caja-celda.mover-origen {
  box-shadow: 0 0 0 3px var(--serie);
  z-index: 1;
}
.caja-celda-ghost {
  border-radius: 8px !important;
  cursor: grabbing !important;
}
body.caja-arrastrando { cursor: grabbing; user-select: none; -webkit-user-select: none; }
body.caja-arrastrando .caja-rejilla { touch-action: none; }

.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; }
/* 20261022b: kardex y avisos de negativo del inventario */
.inv-mas { color: var(--verde, #1f7a3a); font-weight: 700; white-space: nowrap; }
.inv-menos { color: var(--critico); font-weight: 700; white-space: nowrap; }
.inv-k-fecha { white-space: nowrap; font-variant-numeric: tabular-nums; }
.inv-kardex td { font-size: .86rem; }
.inv-aviso-neg { color: var(--critico); border-color: var(--critico); background: color-mix(in srgb, var(--critico) 8%, transparent); margin-bottom: .8rem; }
:root[data-tema="oscuro"] .inv-aviso-neg { color: var(--critico); }

/* ── 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; }

/* Cuánto duró la orden, en el diálogo de terminar la encostaladora. Antes iba
   de pilón en el renglón del producto y se perdía. */
.enc-duro {
  margin: .1rem 0 .7rem;
  padding: .45rem .6rem;
  border: 1px solid var(--linea);
  border-radius: var(--r);
  background: var(--superficie-2);
  font-size: .95rem;
}
.enc-duro b { font-size: 1.05rem; }

/* 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);
}

/* ══ Tarima mezclada ═════════════════════════════════════════════════
   Una tarima puede llevar varios productos del mismo cliente. Cuando trae
   más de uno se listan sus renglones con los costales de cada quien, y el
   cuadro se marca con una esquina doblada para que se note de lejos que no
   es una tarima de un solo producto.                                   */
.caja-celda.mixta { justify-content: flex-start; padding-top: 1.05rem; gap: 0; }
.caja-celda.mixta::after {
  content: ""; position: absolute; top: 0; right: 0;
  border-width: 0 .55rem .55rem 0; border-style: solid;
  border-color: transparent var(--ink) transparent transparent; opacity: .5;
}
.caja-parte {
  display: block; width: 100%; text-align: center;
  font-size: .6rem; line-height: 1.2; padding: 0 .15rem;
  overflow-wrap: anywhere; word-break: break-word;
}
.caja-parte b { font-variant-numeric: tabular-nums; }
.caja-parte + .caja-parte { border-top: 1px dashed var(--linea); margin-top: .1rem; padding-top: .1rem; }
.caja-celda.mixta .caja-cost { margin-top: auto; font-weight: 700; }
.caja-celda.cargada .caja-parte { color: var(--ink); }

/* ══ 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; } }

/* Subir / bajar / quitar una orden del Plan del día. Los tres botones caben
   juntos en la última columna sin que la tabla crezca. */
.acciones-orden {
  white-space: nowrap;
}
.acciones-orden .btn.chico {
  padding: 2px 6px;
  min-width: 0;
  line-height: 1.1;
}
.acciones-orden .btn.chico + .btn.chico {
  margin-left: 3px;
}
.acciones-orden .btn.chico[disabled] {
  opacity: .3;
  cursor: default;
}

/* Precios en el formulario de pedido: el importe de cada renglón y el total.
   El renglón de producto es una rejilla; el importe va abajo, en toda la
   fila, para que quepa en pantalla de celular sin apretar los campos. */
.p-linea .p-importe {
  grid-column: 1 / -1;
  font-size: .82rem;
  text-align: right;
  padding-top: 2px;
  min-height: 1.1em;
}
.p-sinprecio {
  color: #c92a2a;
  font-weight: 600;
}
.p-total {
  margin-top: .75rem;
}
.p-total-linea {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-top: .6rem;
  border-top: 1px solid var(--linea, rgba(128,128,128,.3));
  font-size: 1.05rem;
}
.p-total-linea b {
  font-size: 1.2rem;
}

/* Tarima compartida entre clientes distintos: se marca con un borde punteado
   y cada renglón dice de quién es, para que no se entregue equivocada. */
.caja-celda.compartida {
  outline: 2px dashed var(--aviso, #e8a33d);
  outline-offset: -3px;
}
.caja-parte-cli {
  display: block;
  font-style: normal;
  font-size: .62rem;
  line-height: 1.1;
  color: var(--ink-2, #666);
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* Renglón de cobro dentro de un producto del pedido: el precio especial a la
   izquierda y el importe calculado a la derecha, en la misma línea. */
.p-linea .p-cobro {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding-top: 2px;
}
.p-linea .p-cobro .spacer { flex: 1; }
.p-linea .p-precio {
  width: 8.5rem;
  flex: 0 0 auto;
}
.p-precio-nota { white-space: nowrap; }

/* Precio propio del cliente (o el que quedó pactado en una cotización): manda
   sobre la lista, y por eso se marca — si no, se vería como si la lista
   estuviera mal. */
.chip-pactado {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: .05rem .4rem;
  border-radius: 999px;
  vertical-align: middle;
  background: var(--azul-suave, rgba(80,130,255,.15));
  color: var(--azul-2, #2b4fa8);
}

/* En qué acabó una cotización. */
.chip-estatus {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: .08rem .5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.chip-estatus.cot-abierta {
  background: var(--azul-suave, rgba(80,130,255,.15));
  color: var(--azul-2, #2b4fa8);
}
.chip-estatus.cot-aceptada {
  background: color-mix(in srgb, var(--verde, #2f9e44) 16%, transparent);
  color: var(--verde-2, #2b8a3e);
}
.chip-estatus.cot-perdida {
  background: rgba(160,160,160,.18);
  color: var(--ink-2, #666);
}

/* Fórmula que parte de otra: la base va como un bloque aparte, cerrado, y
   abajo solo se captura lo que se le agrega encima. */
.base-formula {
  border: 1px solid var(--linea, rgba(128,128,128,.3));
  border-radius: var(--r, 10px);
  padding: .6rem .75rem;
  margin-bottom: .75rem;
  background: color-mix(in srgb, var(--ink, #222) 4%, transparent);
}
.base-cab {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.base-ico {
  font-size: 1.15rem;
  line-height: 1;
}
.base-lista {
  margin-top: .55rem;
  padding-top: .55rem;
  border-top: 1px dashed var(--linea, rgba(128,128,128,.3));
  font-size: .85rem;
}
.base-lista div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .1rem 0;
}
/* Aviso de que la lista de precios viene de una hoja de Google (y por eso la
   matriz de abajo no se puede teclear). */
.banner-sheet {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  border: 1px solid var(--linea, rgba(128,128,128,.3));
  border-left: 4px solid var(--azul-2, #2b4fa8);
  border-radius: var(--r, 10px);
  padding: .7rem .85rem;
  margin: .3rem 0 .9rem;
  background: var(--azul-suave, rgba(80,130,255,.10));
  font-size: .9rem;
}
.banner-sheet .spacer { flex: 1; }

.chip-base {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: .05rem .4rem;
  border-radius: 999px;
  vertical-align: middle;
  background: rgba(160,160,160,.18);
  color: var(--ink-2, #666);
}


/* "Dónde va cada caja", en la hoja del chofer de patio. Él es quien las
   arrima, así que la zona tiene que saltarle a la vista. */
.acomodo-lista { display: flex; flex-direction: column; gap: .1rem; }

.acomodo-fila {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .5rem .1rem;
  border-bottom: 1px solid var(--linea);
}
.acomodo-fila:last-child { border-bottom: 0; }
.acomodo-fila.sin-zona { opacity: .6; }
/* Ya arrimada a su lugar: se apaga para que resalte lo que falta. */
.acomodo-fila.ya-acomodada { opacity: .5; }
.acomodo-fila.ya-acomodada .zona-tag { background: var(--ink-mudo); }

/* Dónde se carga, en la hoja del que sube el granel. */
.op-lugar { margin-top: .4rem; display: flex; gap: .35rem; flex-wrap: wrap; }
.tarjeta.op-activa { border-left: 4px solid var(--serie); }

.acomodo-caja { font-size: .95rem; }
.acomodo-zona { display: inline-flex; gap: .3rem; align-items: center; }
.acomodo-que { flex: 1 1 8rem; font-size: .82rem; text-align: right; }

/* Prender y apagar encostaladoras, en Configuración. */
.check-linea {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .7rem;
  border: 1px solid var(--borde);
  border-radius: 8px;
  cursor: pointer;
  font-size: .9rem;
}
.check-linea input { width: 1.05rem; height: 1.05rem; }

/* Folio y monto de la factura de una carga a granel. */
.fac-folio { flex: 0 0 7rem; }
.fac-monto { flex: 0 0 6.5rem; }
.fac-folio, .fac-monto { font-size: .85rem; padding: .25rem .45rem; }

.zona-tag {
  display: inline-block;
  min-width: 1.7rem;
  text-align: center;
  padding: .12rem .45rem;
  border-radius: 6px;
  background: var(--serie);
  color: #fff;
  font-size: .95rem;
  letter-spacing: .04em;
}
.zona-tag.puerta {
  background: var(--grave);
  min-width: 0;
  font-size: .8rem;
}

/* "Dónde está cada caja", en el Tablero. Va agrupado por LUGAR porque esta
   pantalla se lee de lejos: se quiere ver qué hay en la zona C de un golpe,
   no repasar caja por caja. */
.lugares-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .7rem;
}

.lugar-carta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 5px solid var(--serie);
  border-radius: 10px;
  padding: .6rem .7rem;
  box-shadow: var(--sombra);
}
.lugar-carta.puerta { border-left-color: var(--grave); }

.lugar-nombre {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .03em;
  margin-bottom: .4rem;
}

.lugar-cosa {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem 0;
  border-top: 1px solid var(--linea);
}
.lugar-cosa-txt { flex: 1 1 auto; min-width: 0; }

.estado-lugar {
  flex: 0 0 auto;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: .12rem .4rem;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
}
.estado-lugar.libre     { background: var(--bien); }
.estado-lugar.proceso   { background: var(--alerta); color: #3a2c00; }
.estado-lugar.cargada   { background: var(--serie); }
.estado-lugar.mezclando { background: var(--grave); }

.tarjeta.sin-lugar { margin-top: .7rem; border-left: 4px solid var(--grave); }

/* Escoger la caja o el camión VIÉNDOLOS. Un <select> no puede traer fotos
   adentro, así que al desplegable se le pega su miniatura y un botón que
   abre la galería. */
.caja-con-foto {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
.caja-con-foto .foto-mini { width: 2rem; height: 1.5rem; }
.caja-con-foto input { min-width: 0; }

/* La galería de cajas cuando NO se puede abrir otra ventana encima (dentro
   del acomodo del tráiler): se despliega en la misma hoja, debajo del campo. */
.galeria-inline {
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: .5rem .6rem;
  margin: .1rem 0 .6rem;
  background: var(--superficie-2);
}
.galeria-inline .caja-galeria { max-height: 32vh; }
.galeria-inline .foto-grande img { max-height: 40vh; cursor: zoom-out; }

.caja-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: .6rem;
  margin: .6rem 0;
  max-height: 55vh;
  overflow-y: auto;
}

.caja-carta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  padding: .5rem .35rem;
  border: 2px solid var(--borde);
  border-radius: 10px;
  background: var(--superficie);
  cursor: pointer;
  text-align: center;
  font: inherit;
  color: inherit;
}
.caja-carta:hover { border-color: var(--serie); }
.caja-carta.elegida { border-color: var(--serie); background: var(--serie-suave); }
.caja-carta.ocupada { opacity: .55; }

.caja-carta img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
}
.caja-carta-sinfoto {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--superficie-2);
  color: var(--ink-mudo);
}
.caja-carta-num { font-weight: 700; font-size: .95rem; }
.caja-carta-desc { font-size: .72rem; color: var(--ink-2); line-height: 1.2; }

/* Foto de la caja y del camión: para reconocer la unidad de un vistazo. La
   miniatura se ve chica en la lista y se abre grande al tocarla. */
.foto-celda {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  flex: 0 0 auto;
}

.foto-mini {
  width: 2.4rem;
  height: 1.8rem;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid var(--borde);
  cursor: zoom-in;
  display: block;
}

.foto-grande {
  display: flex;
  justify-content: center;
}
.foto-grande img {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 10px;
  object-fit: contain;
}

/* Las flechas de mover van en la PRIMERA columna: es lo que más se usa en el
   plan, y no tiene por qué estar del otro lado de la tabla. */
th.mover { width: 1%; }
td.acciones-orden.mover {
  white-space: nowrap;
  padding-right: .2rem;
}
td.acciones-orden.mover .btn { padding: .1rem .3rem; line-height: 1; }

/* Al pasar el pedido: qué renglones NO pasan por producción y se van
   derecho a su hoja (Forrajes o Graneles). */
.directo-elige {
  margin: .8rem 0;
  padding: .7rem .8rem;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--superficie-2);
}
.directo-elige > b { display: block; margin-bottom: .2rem; }

.directo-fila {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem 0;
  cursor: pointer;
  font-size: .9rem;
}
.directo-fila input { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; }

/* Ya cargado: se apaga para que resalte lo que todavía falta subir. */
tr.directa-hecha { opacity: .62; }

/* Una tolva junta VARIAS mezclas hasta llenarse, así que hay que enseñar
   cuánto trae, cuánto le cabe y cuál sale primero. */
.tolva-barra {
  height: 8px;
  border-radius: 99px;
  background: var(--superficie-2);
  overflow: hidden;
  margin: .45rem 0 .5rem;
}
.tolva-barra i {
  display: block;
  height: 100%;
  background: var(--serie);
  border-radius: 99px;
}

.tolva-lista { display: flex; flex-direction: column; gap: .15rem; }

.tolva-orden {
  font-size: .8rem;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: .3rem;
}
.tolva-orden.primera { color: var(--ink); font-weight: 600; }

.chip.mini {
  font-size: .58rem;
  padding: 0 .32rem;
  letter-spacing: .06em;
}

/* Descripción de cada caja: se corrige ahí mismo en la lista, sin tener que
   borrar la caja y darla de alta otra vez. */
.unidad-fila .caja-desc {
  flex: 1 1 10rem;
  min-width: 8rem;
  margin: 0 .5rem;
  font-size: .85rem;
  padding: .25rem .45rem;
}

.chip.caja-desc-chip {
  background: var(--superficie-2);
  color: var(--ink-2);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* ── "Estás trabajando solo" ──────────────────────────────────────────
   Quedarse sin nube no se veía por ningún lado: la pantalla seguía
   igualita. Una computadora podía pasarse el día entero desconectada,
   con todos creyendo que estaba al corriente. Por eso este aviso va
   ABAJO, fijo y de color: para que estorbe hasta que se resuelva. */
.aviso-nube {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  padding: .55rem .9rem;
  padding-bottom: calc(.55rem + env(safe-area-inset-bottom, 0px));
  font-size: .84rem;
  line-height: 1.35;
  color: #fff;
  box-shadow: 0 -2px 14px rgba(0,0,0,.28);
}

.aviso-nube .an-txt { flex: 1 1 16rem; }
.aviso-nube b { letter-spacing: .02em; }
.aviso-nube i { opacity: .82; font-style: normal; font-size: .78rem; }

.aviso-nube .btn {
  flex: 0 0 auto;
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.5);
  color: #fff;
}
.aviso-nube .btn:hover:not(:disabled) { background: rgba(255,255,255,.28); }
.aviso-nube .btn:disabled { opacity: .6; }

/* Sin conexión: rojo, y late despacio para que se note de lejos. */
.aviso-nube.no     { background: var(--critico); animation: nubeLate 2.4s ease-in-out infinite; }
/* Hay línea, pero la base rechaza lo que se le manda. Naranja para no
   confundirlo con estar sin internet: se arregla en otro lado. */
.aviso-nube.nosube { background: var(--grave); animation: nubeLate 2.4s ease-in-out infinite; }
/* Ya volvió: verde, y a esta ya no hay por qué hacerle ruido. */
.aviso-nube.volvio { background: var(--verde-2); }

@keyframes nubeLate {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  .aviso-nube.no,
  .aviso-nube.nosube { animation: none; }
}

/* Y el nombre de arriba también se marca, por si el aviso está tapado. */
#usuarioBarra.sin-nube {
  background: var(--critico);
  color: #fff;
}

/* ── Hasta dónde va un pedido ─────────────────────────────────────
   La etiqueta de la columna "Cómo va" dice en qué paso está y cuántos
   lleva; al tocarla se abre el camino completo. El color va de frío
   (todavía en la planta) a verde (ya salió, ya se entregó). */
.chip-etapa {
  font: inherit; font-size: .68rem; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .1rem .45rem; margin: 0 0 .25rem; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .02em;
  background: var(--superficie-2); color: var(--ink-2);
  border: 1px solid var(--linea);
}
.chip-etapa:hover { border-color: var(--eje); }
.chip-etapa-cuenta {
  font-weight: 600; opacity: .75; letter-spacing: 0; text-transform: none;
}
.chip-etapa.plan,
.chip-etapa.produccion { background: var(--azul-suave); color: var(--azul-2); border-color: var(--azul); }
.chip-etapa.acomodo,
.chip-etapa.logistica  { background: #fdf0d5; color: #8a6100; border-color: var(--alerta); }
.chip-etapa.factura,
.chip-etapa.carretera  { background: var(--verde-suave); color: var(--bien-texto); border-color: var(--verde); }
.chip-etapa.entregado  { background: var(--verde); color: #fff; border-color: var(--verde); }

.ruta-encab { margin-bottom: .6rem; }
.ruta-lista { list-style: none; margin: .2rem 0 .6rem; padding: 0; }
.ruta-paso {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .35rem 0; border-left: 2px solid var(--linea);
  margin-left: .55rem; padding-left: .7rem;
}
.ruta-paso:first-child { border-top-left-radius: 2px; }
.ruta-paso.hecho { border-left-color: var(--verde); }
.ruta-paso.ahora { border-left-color: var(--alerta); }
.ruta-marca {
  flex: 0 0 1.2rem; text-align: center; font-weight: 700;
  color: var(--ink-mudo); line-height: 1.3;
}
.ruta-paso.hecho .ruta-marca { color: var(--verde); }
.ruta-paso.ahora .ruta-marca { color: var(--alerta); }
.ruta-paso.falta .ruta-texto b { color: var(--ink-mudo); font-weight: 600; }
.ruta-texto { min-width: 0; }

/* ── Te llegó trabajo nuevo ───────────────────────────────────────
   El globo con cuántas cosas esperan en cada hoja, y el letrero que
   avisa cuando cae una nueva. El letrero NO se va solo: si se fuera,
   quien no estaba viendo la pantalla nunca se enteraría. */
.lat-globo {
  margin-left: auto; flex: 0 0 auto;
  min-width: 1.25rem; padding: 0 .35rem;
  font-size: .68rem; font-weight: 800; line-height: 1.3rem; text-align: center;
  border-radius: 999px; background: var(--alerta); color: #3a2a00;
}
.lat-item.activo .lat-globo { background: var(--superficie); color: var(--ink); }

.alerta-hoja {
  position: fixed; z-index: 60;
  left: 50%; transform: translateX(-50%);
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: min(30rem, calc(100vw - 1.6rem));
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .8rem; border-radius: 14px;
  background: var(--superficie); color: var(--ink);
  border: 2px solid var(--alerta);
  box-shadow: var(--sombra);
  animation: alertaEntra .22s ease-out;
}
.alerta-hoja[hidden] { display: none; }
.alerta-hoja-ico { flex: 0 0 auto; color: var(--alerta); display: flex; }
.alerta-hoja-ico .ico-svg { width: 1.7rem; height: 1.7rem; }
.alerta-hoja-txt { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.alerta-hoja-txt .chico { color: var(--ink-2); }
@keyframes alertaEntra {
  from { opacity: 0; transform: translateX(-50%) translateY(.6rem); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .alerta-hoja { animation: none; } }

/* La campana de la barra: prendida se ve en verde, para saber de un vistazo
   si ESTE aparato va a recibir los avisos o no. */
#btnAvisos.avisos-on { color: var(--verde-2); }
#btnAvisos.avisos-on .ico-svg { filter: none; }

/* ── Repartir una tarima entre varios productos ───────────────────
   El lápiz de cada cuadro abre esta caja: 20 costales de uno, 15 de
   otro, hasta las que quepan. Sirve para cualquier tarima, la de
   enfrente incluida — no hay que dejarlo para lo que sobre al final. */
.caja-editar {
  position: absolute; top: 2px; right: 2px; z-index: 2;
  width: 1.15rem; height: 1.15rem; line-height: 1.15rem; text-align: center;
  border-radius: 5px; font-size: .72rem; cursor: pointer;
  background: var(--superficie); color: var(--ink-2);
  border: 1px solid var(--linea); opacity: .55;
}
.caja-celda:hover .caja-editar,
.caja-editar:hover,
.caja-editar:focus-visible { opacity: 1; border-color: var(--eje); }

.tarima-editor {
  margin: .7rem 0 .2rem; padding: .7rem .8rem;
  border: 2px solid var(--azul); border-radius: 12px;
  background: var(--superficie-2);
}
.tarima-editor[hidden] { display: none; }
.tarima-cab { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.tarima-filas { display: grid; gap: .3rem; max-height: 34vh; overflow-y: auto; }
.tarima-fila {
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem .4rem; border-radius: 8px; background: var(--superficie);
  border: 1px solid var(--linea);
}
.tarima-chip {
  flex: 0 0 auto; width: .7rem; height: 1.4rem; border-radius: 3px;
  background: var(--c, var(--eje));
}
.tarima-nom { flex: 1 1 auto; min-width: 0; line-height: 1.2; }
.tarima-nom .chico { display: block; }
.tarima-fila input { flex: 0 0 5rem; text-align: right; }
.tarima-pie { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }

/* El total de la caja: cuántos costales van de los que se pidieron. Va
   arriba del desglose porque es lo primero que se pregunta el de
   montacargas — antes había que sumarlo de cabeza renglón por renglón. */
.resumen-total {
  padding: .5rem .65rem; margin-bottom: .5rem;
  border-radius: 10px; border: 1px solid var(--linea);
  background: var(--superficie);
}
.resumen-total.listo { border-color: var(--verde); }
.resumen-barra {
  margin-top: .4rem; height: 6px; border-radius: 999px;
  background: var(--superficie-2); overflow: hidden;
}
.resumen-barra span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--azul); transition: width .15s ease;
}
.resumen-total.listo .resumen-barra span { background: var(--verde); }

/* Cuadrar la fórmula en 1000 kg. Al meterle 20 kg de algo a una fórmula
   que ya sumaba 1000, hay que sacarlos de algún lado; esto pregunta de
   dónde en vez de dejarlo a la calculadora. */
.ajuste-1000 {
  margin: -.3rem 0 .7rem; padding: .6rem .7rem;
  border: 1px solid var(--azul); border-radius: 10px;
  background: var(--azul-suave); color: var(--ink);
}
.ajuste-1000[hidden] { display: none; }
.ajuste-op {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  margin-top: .45rem; font-size: .9rem; cursor: pointer;
}
.ajuste-op input[type="radio"] { flex: 0 0 auto; }
.ajuste-op select { flex: 1 1 10rem; min-width: 0; }
.ajuste-1000 .fila-btns { margin-top: .6rem; display: flex; gap: .5rem; }

/* ── iPHONE INSTALADO EN LA PANTALLA DE INICIO ────────────────────────
   Abierto desde el icono, iOS le da a la app TODA la pantalla, incluida
   la franja de arriba donde van la hora y la señal (y el notch). Sin esto
   la barra del sistema se mete debajo de esa franja y sus botones quedan
   donde el dedo no los alcanza — que es justo lo que se veía: "todo muy
   arriba". `env(safe-area-inset-*)` es lo que iOS informa de esa franja;
   en la computadora y en Android vale 0, así que no cambia nada de nada.
   Va hasta el final del archivo a propósito: hay otras reglas de #barra
   más arriba y esta tiene que ser la última palabra. */
#barra {
  padding-top:   calc(.7rem + env(safe-area-inset-top, 0px));
  padding-left:  calc(.9rem + env(safe-area-inset-left, 0px));
  padding-right: calc(.9rem + env(safe-area-inset-right, 0px));
}

/* En la pantalla de entrada la barra está escondida, así que el hueco de
   arriba se lo tiene que hacer el cuerpo o el login queda pegado al techo. */
body.sin-sesion #cuerpo { padding-top: env(safe-area-inset-top, 0px); }

/* A los lados por si lo giran (en horizontal el notch se come una orilla)
   y abajo por la rayita del gesto de inicio. */
#cuerpo {
  padding-left:   env(safe-area-inset-left, 0px);
  padding-right:  env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Fuerza de Ventas ────────────────────────────────────────────────
   Esa hoja trae adentro el Sistema de Ventas completo (`ventas.html`) en
   un marco. Se le quita a la vista el respiro y el ancho máximo para que
   el marco ocupe todo y se sienta una pantalla más del sistema, no una
   página metida a fuerzas.
   ------------------------------------------------------------------- */
body.hoja-fuerza main#vista { padding: 0; max-width: none; }
.marco-ventas {
  display: block; width: 100%; border: 0; background: #f8f6f1;
  height: calc(100vh - var(--barra-h, 56px));
}

/* ── Las dos pestañas de la barra: Menogranos y Ventas ───────────────
   Son dos sistemas distintos viviendo en la misma ventana. Se separan
   arriba de todo, antes que cualquier categoría, para que quede claro
   en cuál de los dos anda uno parado.
   ------------------------------------------------------------------- */
.lat-sistemas {
  display: flex; gap: .3rem; margin: .1rem 0 .55rem;
  background: var(--superficie-2); border-radius: 11px; padding: .22rem;
}
.lat-sis {
  flex: 1 1 0; min-width: 0; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .72rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-mudo);
  padding: .5rem .3rem; border-radius: 9px;
  transition: background .12s ease, color .12s ease;
}
.lat-sis:hover { color: var(--ink); }
.lat-sis.on { background: var(--superficie); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
/* Las hojas de Ventas cuelgan directo de su pestaña: no hay categorías
   que abrir, así que este bloque sí se ve siempre. */
.lat-items-ventas { display: block; padding-left: 0; }
.lat-esperando {
  padding: .6rem; font-size: .82rem; color: var(--ink-mudo); font-style: italic;
}

/* ── Ingredientes tapados hasta iniciar la orden ──────────────────────
   En el Cargador Frontal y en Minerales la lista no sale hasta que le
   dan a INICIAR ORDEN. Este es el hueco que queda mientras tanto: dice
   qué falta hacer y por qué está tapado, en vez de dejar un blanco que
   parezca que la hoja se descompuso.
   ------------------------------------------------------------------- */
.ing-tapados {
  border: 1px dashed var(--eje);
  border-radius: var(--r);
  padding: 2rem 1.2rem;
  margin-top: .8rem;
  text-align: center;
  color: var(--ink-2);
}
.ing-tapados h3 { margin: .7rem 0 .4rem; color: var(--ink); }
.ing-tapados p { margin: .3rem auto; max-width: 34rem; }
.ing-tapados-ico { display: grid; place-items: center; }
.ing-tapados-ico .ico-svg {
  width: 40px; height: 40px; stroke-width: 1; opacity: .45;
}

/* ── Hojas que ocupan la pantalla completa ─────────────────────────
   `main#vista` va topado a 1180px, que se lee bien en textos y tarjetas.
   Pero la tabla de Pedidos trae diez columnas y ahí ese tope estorba: la
   tabla queda apretada y hay que barrerla de lado para ver un renglón
   entero. Con esta clase (la pone `pintar()` según `HOJAS_ANCHAS`) esa
   hoja usa todo el ancho de la ventana. */
body.hoja-ancha main#vista { max-width: none; }

/* ── Cerrar el área ───────────────────────────────────────────────────
   El botón vive pegado abajo a la derecha, fuera de la vista, para que los
   repintados de cada hoja no se lo lleven. En el celular se estira de lado a
   lado: es lo último que se hace en el día y con guantes puestos.
   ------------------------------------------------------------------ */
.cerrar-area-flot {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.1rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--sombra);
}
.cerrar-area-flot:hover { background: var(--superficie-2); }
.cerrar-area-flot .ico-svg { flex: none; }

@media (max-width: 640px) {
  .cerrar-area-flot {
    left: 12px;
    right: 12px;
    justify-content: center;
  }
}

/* Las fotos que se van juntando en el modal del cierre. */
.cierre-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: .5rem;
  margin: .8rem 0 .4rem;
}
.cierre-foto {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--superficie-2);
}
.cierre-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cierre-quita {
  position: absolute;
  top: 4px; right: 4px;
  width: 26px; height: 26px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: .85rem;
  line-height: 1;
  cursor: pointer;
}
.cierre-agregar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  aspect-ratio: 1 / 1;
  border: 1px dashed var(--eje);
  border-radius: 10px;
  background: transparent;
  color: var(--ink-2);
  font-size: .78rem;
  text-align: center;
  cursor: pointer;
}
.cierre-agregar:hover { border-color: var(--verde); color: var(--verde); }
.cierre-cuenta { color: var(--ink-2); }
.cierre-cuenta.listo { color: var(--bien-texto); font-weight: 600; }

/* La pantalla que sustituye a la hoja mientras el área está cerrada. */
.cerrada-envoltura {
  display: flex;
  justify-content: center;
  padding: 2rem 0;
}
.cerrada-caja {
  max-width: 620px;
  width: 100%;
  text-align: center;
  padding: 2rem 1.4rem;
}
.cerrada-ico { color: var(--ink-mudo); }
.cerrada-ico .ico-svg { width: 44px; height: 44px; }
.cerrada-caja h1 { margin: .4rem 0 .6rem; }
.cerrada-sello { margin: 0 0 .8rem; color: var(--ink-2); }
.cerrada-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: .5rem;
  margin: 1.2rem 0 .6rem;
}
.cerrada-foto {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--superficie-2);
}
.cerrada-foto img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.cerrada-hueco {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  color: var(--ink-mudo);
  font-size: .72rem;
}
.aviso-pend { color: var(--grave); }
.cerrada-pie {
  display: flex;
  gap: .6rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.2rem;
}

/* ── Cierre del día: la revisión del encargado ─────────────────────── */
.globo {
  display: inline-block;
  min-width: 1.15rem; padding: 0 .3rem;
  margin-left: .25rem;
  font-size: .68rem; font-weight: 800; line-height: 1.2rem; text-align: center;
  border-radius: 999px; background: var(--alerta); color: #3a2a00;
}
.chip.bien { background: var(--verde-suave); color: var(--bien-texto); border-color: transparent; }
.chip.malo { background: color-mix(in srgb, var(--critico) 16%, transparent); color: var(--critico); border-color: transparent; }

.cd-area { margin-bottom: .8rem; }
.cd-area.sin-cerrar { opacity: .75; }
.cd-area.ya-aprobada  { border-left: 3px solid var(--bien); }
.cd-area.ya-rechazada { border-left: 3px solid var(--critico); }
.cd-cab {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-bottom: .5rem;
}
.cd-cab h2 { margin: 0; font-size: 1.05rem; }
.cd-nota {
  margin: 0 0 .6rem;
  padding: .5rem .7rem;
  border-left: 3px solid var(--critico);
  background: var(--superficie-2);
  font-size: .92rem;
}
.cd-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: .45rem;
  margin-bottom: .7rem;
}
.cd-foto {
  display: block; aspect-ratio: 1 / 1;
  border-radius: 8px; overflow: hidden;
  background: var(--superficie-2);
}
.cd-foto img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.cd-acciones { display: flex; gap: .5rem; flex-wrap: wrap; }
.cd-final { text-align: center; }
.btn.grande { padding: .8rem 1.4rem; font-size: 1.02rem; }
.cd-resumen { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .8rem; }
.cd-dias { display: flex; gap: .4rem; flex-wrap: wrap; }

/* El aviso rojo del cierre de las diez de la noche. */
.cierre-forzado {
  padding: .6rem .8rem;
  border-left: 3px solid var(--critico);
  background: color-mix(in srgb, var(--critico) 8%, transparent);
}

/* ── El reporte en papel ───────────────────────────────────────────── */
#hojaReporteDia { display: none; }

.rep-cab { text-align: center; margin-bottom: 8mm; }
.rep-empresa { font-size: 10pt; letter-spacing: .06em; }
.rep-cab h1 { margin: 2mm 0 1mm; font-size: 18pt; }
.rep-fecha { font-size: 11pt; }
.rep-quien { font-size: 10pt; margin-top: 1mm; }
.rep-tabla { width: 100%; border-collapse: collapse; font-size: 10pt; }
.rep-tabla th, .rep-tabla td {
  border: 1px solid #000;
  padding: 2mm 2.5mm;
  text-align: left;
  vertical-align: top;
}
.rep-tabla th { background: #eee; font-size: 9pt; letter-spacing: .04em; }
.rep-pie { margin-top: 6mm; font-size: 10pt; }
.rep-firma { margin-top: 12mm; }

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

  body.imprimiendo-reporte > #hojaReporteDia {
    display: block !important;
    padding: 12mm;
    color: #000;
    background: #fff;
  }
}

/* ── Bitácora de revisión de equipo ────────────────────────────────── */
.bit-norma { font-size: .84rem; color: var(--ink-2); margin: 0 0 .4rem; }
.bit-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .5rem;
  margin: .8rem 0;
}
.bit-puntos { margin: .6rem 0; }
.bit-fila {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .5rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--linea);
}
.bit-fila.marcada { opacity: 1; }
.bit-punto { font-size: .9rem; }
.bit-botones { display: flex; gap: .3rem; }
.bit-op {
  padding: .35rem .7rem;
  border: 1px solid var(--eje);
  border-radius: 8px;
  background: transparent;
  color: var(--ink-2);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
}
.bit-op.bueno.elegida {
  background: var(--verde-suave); color: var(--bien-texto);
  border-color: var(--bien); 
}
.bit-op.malo.elegida {
  background: color-mix(in srgb, var(--critico) 16%, transparent);
  color: var(--critico); border-color: var(--critico);
}
.bit-corr {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: .4rem;
  margin-top: .3rem;
}
.bit-corr input { font-size: .85rem; }
.bit-nota { margin-top: .6rem; }

@media (max-width: 560px) {
  .bit-fila { grid-template-columns: 1fr; }
  .bit-botones { justify-content: flex-start; }
  .bit-corr { grid-template-columns: 1fr; }
}

/* La bitácora en papel. */
#hojaBitacora { display: none; }
.bit-dir { font-size: 8.5pt; margin-top: 1mm; }
.bit-datos-imp {
  display: flex; flex-wrap: wrap; gap: 2mm 8mm;
  font-size: 10pt; margin-bottom: 5mm;
}
.rep-tabla th.bit-col, .rep-tabla td.bit-col {
  width: 16mm; text-align: center; font-weight: 700;
}
.bit-obs { font-size: 10pt; margin-top: 4mm; }
.bit-firmas { display: grid; gap: 10mm; margin-top: 10mm; font-size: 10pt; }

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

  body.imprimiendo-bitacora > #hojaBitacora {
    display: block !important;
    padding: 12mm;
    color: #000;
    background: #fff;
  }
}

/* El buscador de ingredientes, con su botón al lado: se pueden meter varios
   seguidos y el botón lo deja claro. */
.fila-buscaring { display: flex; gap: .4rem; align-items: stretch; }
.fila-buscaring input { flex: 1 1 auto; min-width: 0; }
.fila-buscaring .btn { flex: 0 0 auto; }

/* ── Dobles: dos cajas amarradas en un viaje ───────────────────────── */
.doble-caja { margin: .4rem 0 .6rem; }
.doble-puesto {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .5rem .7rem;
  border-left: 3px solid var(--azul);
  background: var(--superficie-2);
  border-radius: 8px;
  font-size: .9rem;
}
.doble-chip {
  background: var(--azul-suave);
  color: var(--azul-2);
  border-color: transparent;
  font-weight: 700;
  letter-spacing: .03em;
}
.doble-armar { margin: 0; }
.doble-factura { margin: .3rem 0 .5rem; }

/* El letrero de "¿te llevas la carga a la otra caja?" */
.auth-inline.mudanza {
  border-left: 3px solid var(--alerta);
  display: grid;
  gap: .5rem;
}

/* El botón que dice en qué caja va el pedido ("7", "7+12" o "+ caja"). */
.btn-cajasped {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 2.6rem;
}

/* Plan del Día: 15 columnas. Se aprieta un poco para que en una laptop
   (1366 px) se vea el renglón completo sin barrer de lado. */
table.tabla-plan { font-size: .86rem; }
table.tabla-plan th, table.tabla-plan td { padding: .4rem .3rem; }
table.tabla-plan select.sel-chico { padding: .2rem .25rem; font-size: .82rem; max-width: 9.5rem; }

/* ── Vale de tarimas (el papel que firma el cliente) ───────────────── */
/* Reusa el estilo del reporte del día (.rep-cab, .rep-tabla, .rep-pie). */
#hojaTarimas { display: none; }

.vale-datos { font-size: 11pt; line-height: 1.6; margin-bottom: 5mm; }
.vale-tabla { max-width: 120mm; }
.vale-tabla td { font-size: 11pt; }
.vale-tabla tr:last-child td { font-size: 13pt; background: #eee; }
.vale-nota { margin-top: 4mm; font-size: 10pt; }
/* La advertencia de que lo que no se devuelve se paga. Va en recuadro para
   que nadie pueda decir después que no la vio. */
.vale-aviso {
  margin-top: 6mm;
  border: 1.5pt solid #000;
  padding: 3mm 4mm;
  font-size: 10pt;
  line-height: 1.45;
}

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

  body.imprimiendo-tarimas > #hojaTarimas {
    display: block !important;
    padding: 12mm;
    color: #000;
    background: #fff;
  }
}

/* La raya para apuntar con pluma lo que el cliente devuelve, y el espacio
   donde firma. */
.vale-raya {
  display: inline-block;
  min-width: 28mm;
  border-bottom: 1pt solid #000;
}
.vale-firmas {
  display: flex;
  gap: 12mm;
  justify-content: space-between;
  margin-top: 16mm;
}
.vale-firma { flex: 1 1 0; text-align: center; }
.vale-linea { border-bottom: 1pt solid #000; height: 14mm; }
.vale-rotulo { font-size: 9pt; margin-top: 1.5mm; line-height: 1.35; }
.vale-fecha { font-size: 9pt; margin-top: 4mm; }

/* Fotos de costales: la misma tarjeta de la galería de cajas, pero con sus
   botones adentro (por eso es un <div> y no un <button>). */
.costal-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: .7rem;
  margin: .6rem 0;
}
.costal-carta { cursor: default; }
.costal-carta img { cursor: zoom-in; }
.costal-carta .caja-carta-num { font-size: .85rem; line-height: 1.2; }
.costal-botones { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: center; }

/* Costales del día: arriba las tarjetas grandes (foto + cuántos) para quien
   surte los costales; abajo la tabla orden por orden, como el Plan del Día. */
.cd-titulo { font-size: 1rem; margin: 0 0 .5rem; }
.cd-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .7rem;
  margin-bottom: 1rem;
}
.cd-carta {
  display: flex;
  gap: .7rem;
  align-items: center;
  padding: .6rem;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--superficie);
}
.cd-foto {
  flex: 0 0 6rem;
  width: 6rem;
  height: 6rem;
  object-fit: cover;
  border-radius: 8px;
  cursor: zoom-in;
}
.cd-sinfoto {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--superficie-2);
  color: var(--ink-mudo);
  cursor: default;
}
.cd-datos { min-width: 0; }
.cd-nombre { font-weight: 700; line-height: 1.2; }
.cd-costal { display: inline-flex; align-items: center; gap: .3rem; margin: .2rem 0; padding: .1rem .5rem; border-radius: 999px; background: var(--azul-suave); color: var(--ink); font-size: .95rem; }
.cd-costal svg { width: 1em; height: 1em; }
.cd-costal .btn.chico { padding: .05rem .45rem; font-size: .8rem; margin-left: .2rem; }
.cd-costal-falta { background: var(--superficie); border: 1px dashed var(--borde); color: var(--ink-2); }
.cd-opciones { display: grid; gap: .5rem; }
.cd-opciones label { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border: 1px solid var(--borde); border-radius: 10px; font-size: 1.15rem; cursor: pointer; }
.cd-opciones input { width: 1.3rem; height: 1.3rem; }
.cd-cuantos { font-size: 1.8rem; font-weight: 700; line-height: 1.1; margin: .15rem 0; }
.cd-cuantos small { font-size: .8rem; font-weight: 400; color: var(--ink-2); }
.cd-mini {
  width: 3rem;
  height: 3rem;
  object-fit: cover;
  border-radius: 6px;
  cursor: zoom-in;
  vertical-align: middle;
}
span.cd-mini { display: inline-flex; }
.cd-celda-foto { width: 3.4rem; }
tr.cd-hecha td { opacity: .55; }

/* Nada de lo que flota sobre la pantalla sale en el papel: el letrero de
   avisos de abajo, el mensajito de "Listo", ni el botón de cerrar el área. */
@media print {
  #alertaHoja, #aviso, #btnCerrarArea { display: none !important; }
}

/* Hoja membretada: botones del formulario y la hoja de prueba. */
.fila-botones { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .4rem; }
.prueba-papel {
  border: 1.5pt dashed #000;
  min-height: 150mm;
  padding: 6mm;
  font-size: 11pt;
  line-height: 1.6;
}

/* Costales del día: lo que ya se encostaló y falta contar. */
.cd-contar { border-left: 4px solid var(--alerta); margin-bottom: 1rem; }
.cd-contar h2 { margin-top: 0; }
.cd-contar-fila {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem 0;
  border-top: 1px solid var(--borde);
  flex-wrap: wrap;
}

/* Plan del Día: aviso de que hay órdenes esperando en el plan de mañana. */
.manana-aviso { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .8rem; }

/* ── Autocompletar (js/autocompletar.js): la lista al escribir un producto
      o un cliente. Va pegada al <body> con posición fija para que no la
      corte una ventana con scroll. ───────────────────────────────────── */
.ac-lista{position:fixed;z-index:10000;overflow:auto;background:var(--superficie,#fff);
  border:1px solid var(--borde,#ccc);border-radius:var(--r,4px);box-shadow:0 6px 18px rgba(0,0,0,.14);
  font-size:.95rem;-webkit-overflow-scrolling:touch}
.ac-lista[hidden]{display:none}
.ac-item{padding:.6rem .75rem;cursor:pointer;color:var(--ink,#16171a);border-bottom:1px solid var(--borde,#eee);line-height:1.3}
.ac-item:last-child{border-bottom:0}
.ac-item b{font-weight:700}
.ac-item:hover,.ac-item.on{background:var(--azul,#2a78d6);color:#fff}
.ac-alta:hover,.ac-alta.on{color:#fff}
.ac-item:hover b,.ac-item.on b{color:#fff}
.ac-alta{color:var(--azul,#1e3155);font-weight:600}
.ac-vacio{padding:.6rem .75rem;color:var(--ink-mudo,#777);font-size:.88rem}
.ac-aviso{position:fixed;z-index:10001;background:var(--critico,#9b2c2c);color:#fff;font-size:.82rem;
  padding:.45rem .65rem;border-radius:var(--r,4px);line-height:1.3}
input.ac-mal{border-color:var(--critico,#9b2c2c)!important;outline:1px solid var(--critico,#9b2c2c)}

/* Costales del día: los botones de tarima (+50 / +80) que van sumando. */
.cd-tarimas { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cd-tarimas-cuenta { min-width: 11rem; font-size: 1.05rem; }
.cd-tarimas .btn.accion { font-size: 1.05rem; padding: .7rem 1rem; }
.cd-ultimos { display: inline-flex; align-items: center; gap: .35rem; }
.cd-ultimos input { width: 6.5rem; font-size: 1.05rem; }
.fila-aprobada { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .4rem 0; border-bottom: 1px solid var(--linea); }
.fila-aprobada:last-child { border-bottom: 0; }

/* Facturación · lista de cajas ya facturadas: cabe sin recorrerla de lado
   (pedido del usuario, 2026-10-12). Los textos largos bajan de renglón y en
   pantalla angosta cada factura es una tarjetita. */
.tabla-fac { width: 100%; table-layout: auto; }
.tabla-fac th, .tabla-fac td { white-space: normal; vertical-align: top; overflow-wrap: anywhere; }
.tabla-fac td.fac-caja, .tabla-fac td.num { white-space: nowrap; }
.tabla-fac .check-firmada { display: flex; align-items: flex-start; gap: .4rem; }
@media (max-width: 760px) {
  .tabla-fac thead { display: none; }
  .tabla-fac, .tabla-fac tbody, .tabla-fac tr, .tabla-fac td { display: block; width: 100%; }
  .tabla-fac tr { border-bottom: 1px solid var(--linea); padding: .5rem 0; }
  .tabla-fac td { padding: .1rem 0; border: 0; text-align: left; }
  .tabla-fac td[data-et]::before { content: attr(data-et) ": "; color: var(--ink-mudo); font-size: .8rem; }
}

/* ── Facturación 20261014g: acomodo más claro (solo presentación) ───── */
.fac-pantalla { padding-bottom: 9rem; }           /* lo último nunca queda bajo los avisos */
.fac-resumen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: .7rem; margin: 0 0 1rem;
}
.fac-res {
  display: flex; flex-direction: column; gap: .15rem; text-decoration: none;
  padding: .8rem 1rem; border-radius: var(--r, 10px); border: 1px solid var(--borde);
  background: var(--superficie); color: var(--ink-mudo); box-shadow: var(--sombra);
}
.fac-res b { font-size: 1.9rem; line-height: 1; color: var(--ink-mudo); }
.fac-res span { font-size: .9rem; font-weight: 600; }
.fac-res.hay { color: var(--ink); border-color: var(--ink-2, var(--ink)); }
.fac-res.hay b { color: var(--ink); }
.fac-res.alerta { color: var(--critico, #b3261e); border: 2px solid var(--critico, #b3261e); }
.fac-res.alerta b { color: var(--critico, #b3261e); }
.fac-res:hover { background: var(--superficie-2); }
.fac-buscar { margin-bottom: 1rem; }
.fac-buscar #resultadosFacturadas:not(:empty) { margin-top: .8rem; }
.fac-pantalla .titulo-seccion {
  font-size: 1.2rem; letter-spacing: 0; text-transform: none; font-weight: 800;
  color: var(--ink); margin: 1.6rem 0 .6rem;
  display: flex; align-items: center; gap: .5rem;
}
.fac-pantalla .titulo-seccion::after { display: none; }
.fac-cuenta {
  font-size: .85rem; font-weight: 700; color: var(--ink-2, var(--ink));
  background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: 999px; padding: .1rem .6rem;
}
.fac-sub { font-size: 1rem; margin: .4rem 0 .5rem; color: var(--ink-2, var(--ink)); }
/* Sección vacía: una sola línea */
.fac-seccion.vacia {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem 1rem;
  padding: .55rem .9rem; margin: 1rem 0 .3rem;
  border: 1px dashed var(--borde); border-radius: var(--r, 10px);
}
.fac-seccion.vacia .titulo-seccion { margin: 0; font-size: 1.05rem; color: var(--ink-mudo); }
.fac-vacia { padding: .6rem .9rem; border: 1px dashed var(--borde); border-radius: var(--r, 10px); }
.fac-filtros { display: flex; gap: .4rem; flex-wrap: wrap; margin: .2rem 0 .6rem; }
/* Tablas: encabezados en una línea, dinero a la derecha */
.fac-pantalla .tabla-fac th, .fac-pantalla .tabla-tarimas th { white-space: nowrap; overflow-wrap: normal; }
.fac-pantalla td.num, .fac-pantalla th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fac-pantalla .fac-fecha { white-space: nowrap; font-variant-numeric: tabular-nums; }
.fac-pantalla tr.fac-falta td:first-child { box-shadow: inset 3px 0 0 var(--critico, #b3261e); }
/* Tarimas: plegable al final */
.fac-tarimas > summary { cursor: pointer; list-style: none; }
.fac-tarimas > summary::-webkit-details-marker { display: none; }
.fac-tarimas > summary::before { content: '▸'; font-size: 1rem; }
.fac-tarimas[open] > summary::before { content: '▾'; }
.tabla-tarimas td { vertical-align: middle; }
.tar-vales { display: flex; flex-direction: column; gap: .25rem; }
.tar-vale { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.tar-vale .btn, .tar-btns .btn { padding: .25rem .55rem; min-height: 0; }
.tar-btns { white-space: nowrap; text-align: right; }
/* Avisos: en esta pantalla se van a la esquina, chiquitos, y no tapan */
body:has(.fac-pantalla) .alerta-hoja {
  left: auto; right: 12px; transform: none; width: min(18rem, calc(100vw - 1.6rem));
  bottom: calc(4.2rem + env(safe-area-inset-bottom, 0px));
}
body:has(.fac-pantalla) .aviso { left: auto; right: 12px; transform: none; bottom: calc(4.2rem + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1200px) {
  .fac-pantalla { margin-right: 19rem; }   /* deja libre la esquina de los avisos */
  body:has(.fac-pantalla) .alerta-hoja, body:has(.fac-pantalla) .aviso { bottom: calc(4.2rem + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 640px) {
  .fac-pantalla { padding-bottom: 12rem; }
  body:has(.fac-pantalla) .alerta-hoja, body:has(.fac-pantalla) .aviso { right: 12px; left: 12px; width: auto; }
}

/* 20261014g: las tarjetas por facturar a lo ancho; tabla de tarimas compacta */
.fac-pantalla #facPor .cajas-lista { grid-template-columns: repeat(auto-fill, minmax(min(100%, 560px), 1fr)); }
.fac-pantalla .tabla-tarimas, .fac-pantalla .tabla-fac { width: 100%; }
.fac-pantalla .tabla-tarimas td:first-child { white-space: normal; min-width: 12rem; }
.tar-vale { flex-wrap: nowrap; white-space: nowrap; }
.fac-pantalla .tabla-fac td { overflow-wrap: normal; word-break: normal; }
.fac-pantalla .tabla-fac td[data-et="Cliente"] { min-width: 10rem; }
.fac-pantalla .tabla-fac td[data-et="Folio"] { white-space: nowrap; }

/* 20261016a: tres pestañas arriba (Producción · Ventas · Administración). */
.lat-sis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lat-sistemas:has(.lat-sis:nth-child(3)) { flex-direction: column; gap: .15rem; }
.lat-sistemas:has(.lat-sis:nth-child(3)) .lat-sis { flex: none; text-align: left; padding: .45rem .7rem; }

/* 20261016b: selector de módulos al entrar — presentación profesional.
   Sobrio y corporativo: papel/tinta de la casa, un acento apagado por
   módulo (nunca chillón), hairlines, sombra muy suave y mucho aire.
   Solo pinta el selector: no toca rutas, permisos ni el resto del sistema. */
.modulos-envoltura { max-width: 980px; margin: 0 auto; padding: .4rem 0 1rem; }
.modulos-cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 1.1rem; margin-bottom: 2rem;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(22,23,26,.04), 0 10px 30px rgba(22,23,26,.05);
}
.modulos-marca { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.modulos-marca-img { display: block; width: auto; height: 42px; flex: 0 0 auto; }
.modulos-marca-txt { display: flex; flex-direction: column; gap: .18rem; line-height: 1.15; }
.modulos-marca-txt strong {
  font-size: .82rem; font-weight: 800; letter-spacing: .18em; color: var(--ink); white-space: nowrap;
}
.modulos-marca-txt small { font-size: .78rem; color: var(--ink-mudo); letter-spacing: .02em; }
.modulos-usuario {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: .12rem;
  padding-left: 1rem; border-left: 1px solid var(--borde); line-height: 1.2;
}
.modulos-usuario span {
  font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mudo);
}
.modulos-usuario strong { font-size: .92rem; font-weight: 700; color: var(--ink); }
.modulos-intro { text-align: center; margin: 0 auto 1.7rem; max-width: 34rem; }
.modulos-intro h1 {
  font-size: 1.65rem; line-height: 1.15; letter-spacing: .01em; text-transform: none;
  margin: 0 0 .55rem; color: var(--ink);
}
.modulos-intro p { margin: 0; font-size: .98rem; line-height: 1.55; color: var(--ink-2); }
.modulos-rejilla {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 300px));
  justify-content: center; gap: 1.1rem;
}
.modulo-carta {
  --mod-acento: #4a5560;
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  gap: .55rem; min-height: 15.5rem; padding: 1.55rem 1.5rem 1.35rem;
  text-align: left; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 18px; color: var(--ink);
  cursor: pointer; font: inherit; overflow: hidden;
  box-shadow: 0 1px 2px rgba(22,23,26,.05), 0 10px 30px rgba(22,23,26,.06);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.modulo-carta::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--mod-acento); opacity: .85;
}
.modulo-carta[data-modulo="produccion"]     { --mod-acento: #35694e; }
.modulo-carta[data-modulo="ventas"]         { --mod-acento: #406a86; }
.modulo-carta[data-modulo="administracion"] { --mod-acento: #84643a; }
:root[data-tema="oscuro"] .modulo-carta[data-modulo="produccion"]     { --mod-acento: #9cc3ab; }
:root[data-tema="oscuro"] .modulo-carta[data-modulo="ventas"]         { --mod-acento: #a8c6da; }
:root[data-tema="oscuro"] .modulo-carta[data-modulo="administracion"] { --mod-acento: #d8ba85; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) .modulo-carta[data-modulo="produccion"]     { --mod-acento: #9cc3ab; }
  :root:not([data-tema]) .modulo-carta[data-modulo="ventas"]         { --mod-acento: #a8c6da; }
  :root:not([data-tema]) .modulo-carta[data-modulo="administracion"] { --mod-acento: #d8ba85; }
}
.modulo-carta:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--mod-acento) 45%, var(--borde));
  box-shadow: 0 2px 4px rgba(22,23,26,.06), 0 18px 40px rgba(22,23,26,.10);
}
.modulo-carta:active { transform: translateY(-1px); }
.modulo-carta:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--mod-acento) 55%, transparent);
  outline-offset: 3px;
}
.modulo-ico {
  display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: .45rem;
  border-radius: 15px; color: var(--mod-acento);
  background: color-mix(in srgb, var(--mod-acento) 11%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--mod-acento) 22%, transparent);
  transition: background .18s ease, color .18s ease;
}
.modulo-carta:hover .modulo-ico, .modulo-carta:focus-visible .modulo-ico {
  background: var(--mod-acento); color: var(--superficie);
}
.modulo-ico-svg, .modulo-flecha-svg {
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.modulo-ico-svg { width: 30px; height: 30px; }
.modulo-titulo {
  font-size: 1.06rem; font-weight: 750; letter-spacing: .07em; line-height: 1.25; color: var(--ink);
}
.modulo-desc { font-size: .93rem; color: var(--ink-2); line-height: 1.55; }
.modulo-entrar {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  width: 100%; margin-top: auto; padding-top: 1rem;
  border-top: 1px solid var(--borde);
  font-size: .9rem; font-weight: 700; color: var(--mod-acento);
}
.modulo-flecha {
  display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--mod-acento) 30%, transparent);
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.modulo-carta:hover .modulo-flecha, .modulo-carta:focus-visible .modulo-flecha {
  transform: translateX(2px); background: var(--mod-acento); color: var(--superficie);
}
.modulo-flecha-svg { width: 16px; height: 16px; }
.modulos-ayuda { margin-top: 1.4rem; text-align: center; font-size: .86rem; }
@media (max-width: 640px) {
  .modulos-envoltura { padding-top: 0; }
  .modulos-cabecera { padding: .8rem .9rem; margin-bottom: 1.5rem; border-radius: 14px; }
  .modulos-marca-img { height: 36px; }
  .modulos-marca-txt strong { font-size: .74rem; white-space: normal; }
  .modulos-usuario { padding-left: .8rem; }
  .modulos-intro { margin-bottom: 1.3rem; }
  .modulos-intro h1 { font-size: 1.45rem; }
  .modulo-carta { min-height: 0; padding: 1.3rem 1.25rem 1.15rem; border-radius: 16px; }
  .modulo-ico { width: 50px; height: 50px; border-radius: 13px; }
  .modulo-ico-svg { width: 27px; height: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  .modulo-carta, .modulo-ico, .modulo-flecha { transition: none; }
  .modulo-carta:hover, .modulo-carta:active { transform: none; }
}
.lat-cambiar-modulo { display: block; width: 100%; margin: .1rem 0 .55rem; padding: .55rem .7rem; text-align: left; background: none; border: 1px solid var(--borde); border-radius: 9px; color: var(--ink); cursor: pointer; font: inherit; font-size: .82rem; font-weight: 700; }
.lat-cambiar-modulo:hover { background: var(--superficie-2); }
.btn-modulos { background: none; border: 1px solid var(--borde); border-radius: 99px; color: var(--ink); cursor: pointer; font: inherit; font-size: .78rem; font-weight: 700; padding: .35rem .7rem; white-space: nowrap; }
.btn-modulos:hover { background: var(--superficie-2); }

/* 20261021b: ROLLOS (silo / full diet). Un rollo grande va SOBRE una tarima
   (uno por tarima): la tarima se ve normal, con un círculo de rollo y la
   etiqueta "rollo en tarima". */
.caja-celda.rollos { position: relative; }
.caja-celda.rollos .caja-etq::before {
  content: ''; display: inline-block; width: .8em; height: .8em; margin-right: .25em;
  vertical-align: -.1em; border-radius: 50%;
  border: 2px solid var(--c, #868e96);
  background: radial-gradient(circle, var(--c, #868e96) 0 22%, transparent 24%);
}
.caja-rollo-tag {
  display: block;
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-2, #666);
}
.caja-rollo-tag.viejo { color: var(--mal, #c92a2a); }
.chip-pres.rollo { background: color-mix(in srgb, #ae3ec9 16%, transparent); color: #862e9c; }
/* 20261030b: GALÓN (litros) */
.chip-pres.gal { background: color-mix(in srgb, #0c8599 16%, transparent); color: #0b7285; }
.ped-litros { color: #0b7285; font-weight: 600; white-space: nowrap; }
.p-gal-nota { display: block; font-size: .78rem; margin-top: .15rem; }
.chip-rollo { font-size: .62rem; opacity: .85; }
.chip.chip-rollos { background: color-mix(in srgb, #ae3ec9 14%, transparent); }

/* 20261021c: borrar varios pedidos */
.barra-sel { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; padding: .55rem .9rem; }
.barra-sel .sel-todos-lbl { display: flex; gap: .45rem; align-items: center; cursor: pointer; }
.barra-sel .sel-cuenta { font-weight: 600; }
.barra-sel #btnBorrarSel { margin-left: auto; }
.barra-sel #btnBorrarSel:disabled { opacity: .45; cursor: not-allowed; }
td.sel-cel, th.sel-cel { width: 2rem; text-align: center; }
td.sel-cel input, th.sel-cel input, .barra-sel input[type=checkbox] { width: 1.15rem; height: 1.15rem; cursor: pointer; }
tr.fila-sel > td { background: color-mix(in srgb, var(--critico, #c0392b) 9%, transparent); }
ul.lista-borrar { margin: .3rem 0 .4rem 1.1rem; padding: 0; }

/* 20261021d: Facturación — cajas cuyo camión ya regresó + buscador de regresados */
.caja-tarjeta.fac-viaje{border-left:4px solid var(--alerta,#b9770e)}
.chip.regreso-chip{background:color-mix(in srgb,var(--alerta,#b9770e) 14%,transparent);color:var(--texto,inherit);font-weight:700}
.aviso-viaje{margin:.2rem 0 .5rem;color:var(--alerta,#b9770e)}
.fac-buscar-regreso{margin-top:.6rem}
.tabla-regresados td{vertical-align:top}
.tabla-regresados .chip{margin:0 .2rem .2rem 0}
.tabla-regresados td[data-et="Factura"]{min-width:170px;white-space:normal}
.tabla-regresados td[data-et="Factura"] .chip{display:inline-block;white-space:nowrap}

/* 20261022b: franja de la hoja prestada de noche (cargador en Minerales/Melazador) */
.aviso-noche { border: 1px solid var(--borde, #ccc); border-left: 4px solid #4b5bd6; background: color-mix(in srgb, #4b5bd6 8%, transparent); border-radius: 8px; padding: .55rem .8rem; margin-bottom: .8rem; font-size: .92rem; }

/* 20261022b: Chofer de patio · bandas y matracas por caja */
.patio-equipo > summary { cursor: pointer; padding: .2rem 0; }
.patio-equipo[open] > summary { margin-bottom: .6rem; }
.eq-barra, .eq-nueva { align-items: center; gap: .5rem; flex-wrap: wrap; }
.eq-barra input, .eq-nueva input { max-width: 12rem; }
.eq-tabla input.eq-num, .eq-nueva input.eq-num { width: 6rem; }
.eq-tabla td { vertical-align: middle; }
.chip.eq-chip { background: color-mix(in srgb, #8a6d3b 12%, transparent); }

/* ═══ 20261023a: Inventario › Grano en bodega (calculadora) ═══════════ */
.cg-raiz { display: grid; gap: 1rem; }
.cg-raiz h3 { margin: 0 0 .5rem; font-size: 1.02rem; }
.cg-rejilla { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; }
.cg-fila { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin-bottom: .6rem; }
.cg-campo { flex: 1 1 120px; min-width: 110px; margin: 0; }
.cg-campo.cg-ancho { flex: 3 1 220px; }
.cg-campo input, .cg-campo select { min-height: 44px; font-size: 1rem; }
.cg-nota { flex: 2 1 200px; margin: 0; }
.cg-modos { margin: .3rem 0 .7rem; }
.cg-modos button, .cg-alturas .btn { min-height: 42px; }
.cg-plan, .cg-3d { width: 100%; margin: .6rem 0; }
.cg-plan canvas { display: block; width: 100%; touch-action: none; cursor: crosshair; border-radius: 10px; }
.cg-3d canvas { display: block; width: 100%; touch-action: none; cursor: grab; border-radius: 10px;
  background: radial-gradient(ellipse at 50% 30%, var(--superficie-2), var(--superficie)); }
.cg-3d canvas:active { cursor: grabbing; }
.cg-resultado { border-left: 5px solid #ce963a; }
.cg-kpis { margin: .4rem 0 .8rem; }
.cg-kpi-t .valor { color: #b07a1f; }
:root[data-tema="oscuro"] .cg-kpi-t .valor { color: #f0c66a; }
.cg-props { display: grid; gap: .4rem .9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.cg-props div { display: flex; justify-content: space-between; gap: .6rem; border-bottom: 1px dashed var(--linea); padding: .25rem 0; font-size: .9rem; }
.cg-props span { color: var(--ink-mudo); }
.cg-alerta { border-left-color: var(--critico); margin: .8rem 0 0; }
.cg-pto { display: grid; grid-template-columns: auto repeat(3, minmax(70px, 1fr)) auto auto; gap: .4rem; align-items: end;
  padding: .45rem 0; border-bottom: 1px solid var(--linea); font-size: .82rem; }
.cg-pto label { display: grid; gap: .15rem; color: var(--ink-mudo); }
.cg-pto input { min-height: 40px; width: 100%; }
.cg-pto-h { color: var(--ink-2); font-size: .8rem; }
@media (max-width: 560px) {
  .cg-pto { grid-template-columns: auto repeat(3, 1fr); }
  .cg-pto-h { grid-column: 2 / 4; }
}
.cg-lista { display: grid; gap: .45rem; margin: .4rem 0; }
.cg-guardada { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .55rem .7rem; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie-2); }
.cg-guardada.abierta { border-color: var(--serie); }
.cg-guardada .fila-btns { margin: 0; }
#cgRespaldo textarea { width: 100%; font-family: ui-monospace, monospace; font-size: .75rem; margin: .3rem 0; }
.cg-medir summary { cursor: pointer; font-size: 1rem; }
.cg-pasos { padding-left: 1.2rem; display: grid; gap: .5rem; margin: .7rem 0; }
.cg-pasos li { line-height: 1.4; }

/* ═══ 20261023a: Inventario › Resumen (tablero) ═══════════════════════ */
.it-raiz { display: grid; gap: 1rem; }
.it-raiz h3 { margin: 0 0 .6rem; font-size: 1.02rem; }
.it-raiz h3 small { font-weight: 400; font-size: .78rem; }
.it-rejilla { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }
.it-kpis { margin: 0; }
button.it-kpi { font: inherit; text-align: left; color: inherit; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
button.it-kpi:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.it-kpi.neg .valor { color: var(--critico); }
.it-alertas { display: grid; gap: .4rem; }
.it-alerta { font: inherit; text-align: left; cursor: pointer; padding: .6rem .8rem; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--critico) 40%, transparent); border-left: 5px solid var(--critico);
  background: color-mix(in srgb, var(--critico) 9%, var(--superficie)); color: var(--ink); animation: it-latido 2.4s ease-in-out 2; }
.it-alerta.poco { border-left-color: var(--alerta); border-color: color-mix(in srgb, var(--alerta) 40%, transparent);
  background: color-mix(in srgb, var(--alerta) 10%, var(--superficie)); }
@keyframes it-latido { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--critico) 18%, transparent); } }
.it-tit { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .3rem; }
.it-tit h3 { margin: 0; }
.it-tit .fila-btns { margin: 0; }
.it-3d { position: relative; width: 100%; }
.it-3d canvas { display: block; width: 100%; touch-action: none; cursor: grab; border-radius: 12px;
  background: radial-gradient(ellipse at 50% 25%, var(--superficie-2), var(--superficie)); }
.it-tip { position: absolute; pointer-events: none; background: var(--ink); color: var(--superficie); padding: .4rem .6rem;
  border-radius: 8px; font-size: .8rem; max-width: 180px; box-shadow: var(--sombra); z-index: 2; }
.it-barras, .it-dur { display: grid; gap: .45rem; }
.it-barra, .it-dur-f { display: grid; grid-template-columns: minmax(80px, 34%) 1fr auto; gap: .5rem; align-items: center; font-size: .85rem; }
.it-barra-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.it-barra-pista { height: 14px; border-radius: 7px; background: var(--superficie-2); overflow: hidden; }
.it-barra-llena { display: block; position: relative; height: 100%; width: var(--pct); border-radius: 7px;
  background: linear-gradient(90deg, #ce963a, #f0c66a); animation: it-crece .8s cubic-bezier(.2,.8,.2,1); }
.it-barra-ap { position: absolute; right: 0; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, rgba(0,0,0,.28) 0 3px, transparent 3px 6px); }
.it-ap-muestra { display: inline-block; width: 18px; height: 10px; border-radius: 3px; vertical-align: middle;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,.35) 0 3px, var(--serie) 3px 6px); }
@keyframes it-crece { from { width: 0; } }
.it-barra-val { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.it-barra-val small { font-weight: 400; color: var(--ink-mudo); }
.it-barra.neg .it-barra-llena { background: var(--critico); }
.it-barra.neg .it-barra-val { color: var(--critico); }
.it-dur-f.bien .it-barra-llena { background: var(--bien, #0ca30c); }
.it-dur-f.medio .it-barra-llena { background: var(--alerta, #e0a100); }
.it-dur-f.neg .it-barra-llena { background: var(--critico); }
.it-dur-f.neg .it-barra-val { color: var(--critico); }
.it-donas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.it-dona { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.it-dona svg { width: 130px; height: 130px; flex: none; }
.it-dona circle { transition: stroke-width .15s; }
.it-dona circle:hover { stroke-width: 22; }
.it-dona-n { font-size: 15px; font-weight: 700; fill: var(--ink); }
.it-dona-s { font-size: 9px; fill: var(--ink-mudo); }
.it-leyenda { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; font-size: .82rem; }
.it-leyenda i, .it-leyenda-l i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.it-leyenda small { color: var(--ink-mudo); }
.it-filtros { margin: 0; }
.it-filtros button.sin { opacity: .55; }
.it-linea { width: 100%; height: 220px; display: block; }
.it-rej { stroke: var(--linea); stroke-width: 1; }
.it-eje { font-size: 10px; fill: var(--ink-mudo); }
.it-l-ent, .it-l-sal { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 2000; animation: it-traza 1.2s ease-out; }
.it-l-ent { stroke: #1f9d55; } .it-l-sal { stroke: #d9534f; }
.it-p-ent { fill: #1f9d55; } .it-p-sal { fill: #d9534f; }
@keyframes it-traza { from { stroke-dashoffset: 2000; } to { stroke-dashoffset: 0; } }
.it-leyenda-l { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .8rem; margin-top: .3rem; }
.it-leyenda-l i.ent { background: #1f9d55; } .it-leyenda-l i.sal { background: #d9534f; }
.it-top { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.it-top li { display: flex; align-items: center; gap: .55rem; font-size: .9rem; padding: .35rem 0; border-bottom: 1px dashed var(--linea); }
.it-top-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .8rem;
  background: var(--superficie-2); color: var(--ink-2); flex: none; }
.it-top li:first-child .it-top-n { background: #f0c66a; color: #5a3e08; }
.it-top-p { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it-vacio p { color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) {
  .it-barra-llena, .it-l-ent, .it-l-sal, .it-alerta { animation: none; }
}
@media (max-width: 560px) {
  .it-barra, .it-dur-f { grid-template-columns: minmax(70px, 30%) 1fr; }
  .it-barra-val { grid-column: 1 / -1; justify-self: end; margin-top: -.3rem; }
}
@media (max-width: 560px) {
  .it-kpis, .cg-kpis { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .it-kpis .kpi, .cg-kpis .kpi { padding: .75rem .8rem; }
  .it-kpis .kpi .valor, .cg-kpis .kpi .valor { font-size: 1.55rem; }
}
/* 20261023a: Facturación · folio obligatorio */
input.falta-folio { border-color: var(--critico) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--critico) 22%, transparent); }

/* 20261023a: Chofer de patio · botones grandes arriba para ir a cada sección */
.patio-atajos { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .6rem; margin: .4rem 0 1.2rem; }
.patio-atajo { display: flex; align-items: center; gap: .6rem; min-height: 64px; padding: .7rem .8rem; text-align: left;
  background: var(--superficie); color: var(--ink); border: 1px solid var(--borde); border-radius: var(--r, 10px);
  box-shadow: var(--sombra); font: inherit; font-weight: 600; font-size: .98rem; cursor: pointer; touch-action: manipulation; }
.patio-atajo:hover { border-color: var(--azul); }
.patio-atajo:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.patio-atajo:active { transform: translateY(1px); }
.patio-atajo.urge { border-color: var(--alerta); background: color-mix(in srgb, var(--alerta) 9%, var(--superficie)); }
.patio-atajo .pa-ico { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--azul-suave); color: var(--azul-2); }
.patio-atajo .pa-ico .ico-svg { width: 22px; height: 22px; }
.patio-atajo .pa-txt { flex: 1; min-width: 0; line-height: 1.2; }
.patio-atajo .pa-txt small { display: block; font-weight: 400; font-size: .78rem; color: var(--ink-mudo); margin-top: .1rem; }
.patio-atajo .pa-n { flex: none; min-width: 2rem; padding: .15rem .5rem; border-radius: 999px; text-align: center;
  background: var(--superficie-2); color: var(--ink-2); font-weight: 700; font-size: .95rem; }
.patio-atajo .pa-n.urge { background: var(--alerta); color: #fff; }
main#vista h2.titulo-seccion[id^="patioSec"] { scroll-margin-top: calc(var(--barra-h, 56px) + 12px); }
.patio-brinco { animation: patioBrinco 1.2s ease-out; }
@keyframes patioBrinco { 0% { background: color-mix(in srgb, var(--alerta) 30%, transparent); } 100% { background: transparent; } }
.patio-arriba { position: fixed; right: 18px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 61; /* encima de «Cerrar turno» */ min-height: 48px; padding: .6rem 1rem;
  border-radius: 999px; border: 1px solid var(--borde); background: var(--azul); color: #fff; font: inherit; font-weight: 700;
  box-shadow: var(--sombra-alta, 0 4px 14px rgba(0,0,0,.25)); cursor: pointer; }
.patio-arriba[hidden] { display: none; }
@media (max-width: 560px) {
  .patio-atajos { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .patio-atajo { min-height: 72px; flex-wrap: wrap; align-content: center; padding: .6rem; font-size: .92rem; position: relative; }
  .patio-atajo .pa-ico { width: 32px; height: 32px; }
  .patio-atajo .pa-n { position: absolute; top: .4rem; right: .4rem; }
  .patio-atajo .pa-txt { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .patio-brinco { animation: none; } }
/* 20261023a: Chofer de patio · reporte «Cajas ya llevadas» (al fondo) */
.patio-llevadas > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; }
.llev-barra { align-items: center; flex-wrap: wrap; gap: .5rem; margin: .6rem 0; }
.llev-barra select, .llev-barra input { min-height: 44px; font-size: 1rem; }
.llev-barra select { width: auto; flex: 0 0 auto; }
.llev-barra input { width: auto; }
.llev-barra input { flex: 1 1 220px; min-width: 0; }
.llev-tabla td { vertical-align: top; }
@media (max-width: 560px) { .llev-barra select { flex: 1 1 100%; } }
@media (max-width: 560px) {
  /* reporte de cajas ya llevadas como tarjetitas en el celular (sin scroll de lado) */
  .llev-tabla, .llev-tabla tbody, .llev-tabla tr, .llev-tabla td { display: block; width: 100%; }
  .llev-tabla thead { display: none; }
  .llev-tabla tr { padding: .6rem 0; border-bottom: 1px solid var(--linea); }
  .llev-tabla td { border: 0 !important; padding: .1rem 0 !important; }
  .llev-tabla td:nth-child(4)::before { content: 'Lugar: '; color: var(--ink-mudo); }
  .llev-tabla td:nth-child(5)::before { content: 'Camión · chofer: '; color: var(--ink-mudo); }
  .llev-tabla td:nth-child(6)::before { content: 'Bandas · matracas: '; color: var(--ink-mudo); }
  .llev-tabla td:nth-child(8):empty { display: none; }
  .llev-tabla td:nth-child(8) .btn { margin-top: .3rem; min-height: 44px; }
}
/* 20261023a: «desde cuándo está ahí» cada caja (color por edad) */
.desde-linea { margin: .35rem 0; padding: .3rem .55rem; border-radius: 8px; font-size: .9rem; line-height: 1.35;
  border-left: 4px solid var(--linea); background: var(--superficie-2); color: var(--ink-2); }
.desde-linea b { color: var(--ink); }
.desde-linea.edad-ok { border-left-color: var(--bien); }
.desde-linea.edad-ambar { border-left-color: var(--alerta); background: color-mix(in srgb, var(--alerta) 12%, var(--superficie)); }
.desde-linea.edad-roja { border-left-color: var(--critico); background: color-mix(in srgb, var(--critico) 12%, var(--superficie)); }
.desde-linea.edad-roja .desde-dur { color: var(--critico); }
.desde-linea.edad-sin { border-left-style: dashed; }
.desde-linea.sin-chofer { font-size: .95rem; }
.desde-linea.sin-chofer b:first-child { color: var(--critico); letter-spacing: .02em; }
.acomodo-fila .desde-linea { flex-basis: 100%; margin: .2rem 0 0; }
.fila-aprobada + .desde-linea { margin-top: -.1rem; }
.orden-antiguas { margin: 0 0 .6rem; }

/* ══ 20261023b ═══════════════════════════════════════════════════════
   Sin barra lateral · menús de cada módulo con mosaicos grandes ·
   Chofer de patio con puros botones · visor del plano · usuarios ·
   tema de otoño (body.tema-otono; se quita borrando esa clase).
   ══════════════════════════════════════════════════════════════════ */
#lateral, .lat-fondo, #latFondo, #btnMenu { display: none !important; }
#cuerpo { display: block; }
main#vista { width: 100%; }
.btn-modulos { font-size: .9rem; padding: .5rem .95rem; min-height: 40px; border-color: color-mix(in srgb, var(--verde) 45%, var(--borde));
  color: var(--verde); background: color-mix(in srgb, var(--verde) 7%, transparent); }
.marco-ventas { height: calc(100vh - var(--barra-h, 56px) - var(--volver-h, 0px)); }
.marco-oculto { position: absolute; width: 1px; height: 1px; border: 0; opacity: 0; pointer-events: none; left: -9999px; }

/* «← Menú de X»: fuera de #vista, arriba del contenido */
.volver-menu { display: flex; align-items: center; gap: .7rem; padding: .45rem 1rem; background: var(--superficie);
  border-bottom: 1px solid var(--borde); position: sticky; top: var(--barra-h, 56px); z-index: 30; }
.volver-menu[hidden] { display: none; }
.volver-menu button { min-height: 42px; font: inherit; font-weight: 700; font-size: .95rem; border-radius: 999px; padding: .4rem 1rem;
  border: 1px solid var(--borde); background: var(--superficie-2); color: var(--ink); cursor: pointer; }
.volver-menu button:hover { border-color: var(--verde); }
.volver-menu .volver-donde { color: var(--ink-mudo); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Menú principal de cada módulo */
.mm-envoltura { max-width: 1100px; margin: 0 auto; }
.mm-cabeza { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; }
.mm-cabeza h1 { margin: 0; font-size: 1.6rem; }
.mm-cabeza p { margin: .15rem 0 0; color: var(--ink-mudo); }
.mm-cat { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mudo); margin: 1.1rem 0 .5rem; }
.mm-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }
.mm-tile { position: relative; display: flex; align-items: center; gap: .8rem; min-height: 92px; padding: 1rem; text-align: left;
  background: var(--superficie); color: var(--ink); border: 1px solid var(--borde); border-radius: 16px; box-shadow: var(--sombra);
  font: inherit; cursor: pointer; touch-action: manipulation; overflow: hidden; }
.mm-tile:hover { border-color: var(--verde); }
.mm-tile:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.mm-tile:active { transform: translateY(1px); }
.mm-tile.urge { border-color: var(--alerta); }
.mm-ico { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--verde-suave); color: var(--verde); }
.mm-ico .ico-svg, .mm-ico svg { width: 26px; height: 26px; }
.mm-txt { flex: 1; min-width: 0; line-height: 1.2; }
.mm-txt b { display: block; font-size: 1.05rem; }
.mm-txt small { display: block; color: var(--ink-mudo); font-size: .8rem; margin-top: .2rem; }
.mm-n { flex: none; min-width: 2.2rem; text-align: center; padding: .2rem .55rem; border-radius: 999px; background: var(--superficie-2); font-weight: 800; }
.mm-n.urge { background: var(--alerta); color: #1b1300; }
.mm-esperando { padding: 2rem; text-align: center; color: var(--ink-mudo); }
.mm-logos { margin-top: 1.6rem; }
@media (max-width: 560px) {
  .mm-rejilla { grid-template-columns: 1fr 1fr; gap: .55rem; }
  .mm-tile { flex-direction: column; align-items: flex-start; min-height: 118px; padding: .8rem; gap: .5rem; }
  .mm-n { position: absolute; top: .55rem; right: .55rem; }
  .mm-txt b { font-size: .98rem; }
  .btn-modulos { padding: .4rem .7rem; font-size: .82rem; }
  .volver-menu .volver-donde { display: none; }
}

/* Chofer de patio: puros botones, una sección por pantalla */
.patio-solo-botones { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .8rem; }
.patio-solo-botones .patio-atajo { min-height: 96px; font-size: 1.12rem; border-radius: 16px; }
.patio-solo-botones .pa-ico { width: 52px; height: 52px; }
.patio-solo-botones .pa-ico .ico-svg { width: 28px; height: 28px; }
@media (max-width: 560px) { .patio-solo-botones { grid-template-columns: 1fr; } .patio-solo-botones .patio-atajo { min-height: 84px; } }
.patio-regresar { min-height: 58px; width: 100%; font-size: 1.15rem !important; font-weight: 800 !important; justify-content: center;
  background: var(--verde) !important; color: #fff !important; border: 0 !important; border-radius: 14px !important; margin: 0 0 1rem; }
.patio-regresar-abajo { margin-top: 1.4rem; }
.patio-regresar-abajo .patio-regresar { margin: 0; }
.patio-sec-titulo { margin: .2rem 0 .8rem; }
.patio-plano-flot { position: fixed; right: 16px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); z-index: 61; min-height: 52px;
  border-radius: 999px !important; background: var(--azul) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.plano-mini { display: block; width: 100%; max-width: 760px; margin: .5rem auto; padding: 0; border: 1px solid var(--borde); border-radius: 14px;
  overflow: hidden; background: #fff; cursor: zoom-in; }
.plano-mini img { display: block; width: 100%; height: auto; }
.bascula-fila { flex-wrap: wrap; gap: .5rem; align-items: center; }
.btn-grande-bascula { min-height: 54px; font-size: 1.05rem !important; font-weight: 800 !important; }
.chip-bascula { white-space: nowrap; }

/* Botón «Ver plano» junto a los selectores de zona / puerta */
.btn-plano { display: inline-flex; align-items: center; gap: .25rem; vertical-align: middle; margin-left: .3rem; padding: .15rem .55rem;
  min-height: 30px; font: inherit; font-size: .78rem; font-weight: 700; border-radius: 999px; border: 1px solid var(--azul);
  background: var(--azul-suave); color: var(--azul-2); cursor: pointer; text-transform: none; letter-spacing: 0; }
.btn-plano .ico-svg { width: 15px; height: 15px; }
.campo-plano { align-self: end; }
.campo-plano .btn-plano { min-height: 44px; font-size: .9rem; margin: 0; }

/* Visor del plano (pantalla completa) */
.visor-plano { position: fixed; inset: 0; z-index: 3000; background: #0d1512; display: flex; flex-direction: column; color: #fff; }
.vp-barra { display: flex; align-items: center; gap: .45rem; padding: .55rem .7rem; padding-top: calc(.55rem + env(safe-area-inset-top, 0px)); background: #13201b; }
.vp-esp { flex: 1; }
.vp-btn { min-width: 46px; min-height: 46px; padding: 0 .8rem; border-radius: 12px; border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: 1.1rem; font-weight: 700; cursor: pointer; }
.vp-cerrar { background: #c1121f; border-color: #c1121f; }
.vp-lienzo { flex: 1; position: relative; overflow: hidden; touch-action: none; cursor: grab; background: #fff; }
.vp-img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; user-select: none; -webkit-user-drag: none; }
.vp-ayuda { padding: .35rem; text-align: center; font-size: .8rem; color: #c9d6d1; background: #13201b; padding-bottom: calc(.35rem + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 560px) { .vp-barra b { display: none; } }
body.con-visor { overflow: hidden; }

/* Usuarios únicos */
.chico-chip { font-size: .7rem; padding: .05rem .4rem; }
.tabla-permisos td { padding: .3rem .4rem; }
.tabla-permisos select { min-height: 40px; }
.permisos-compras { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .2rem .8rem; max-height: 280px; overflow: auto;
  border: 1px solid var(--borde); border-radius: 10px; padding: .5rem; }

/* ── Otoño (detalles discretos; NO Halloween). Hoja en SVG en línea. ── */
.otono-hoja { display: none; }
body.tema-otono { --otono-ambar: #c98a1b; --otono-oxido: #a4532a; --otono-olivo: #6f7a35; }
body.tema-otono .otono-hoja { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.12em; margin-left: .25em;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23b8662a' d='M12 2c-.5 2.3-2.1 3.3-4 3.4.8 1.4.6 2.6-.6 3.7-1.4-.6-2.6-.4-3.4.7 1.4.8 1.9 2 1.4 3.6 1.8-.4 3.1.2 3.8 1.8.7-1.2 1.6-1.6 2.8-1.4V21h2v-5.2c1.2-.2 2.1.2 2.8 1.4.7-1.6 2-2.2 3.8-1.8-.5-1.6 0-2.8 1.4-3.6-.8-1.1-2-1.3-3.4-.7-1.2-1.1-1.4-2.3-.6-3.7-1.9-.1-3.5-1.1-4-3.4z'/%3E%3C/svg%3E"); }
body.tema-otono #barra { box-shadow: inset 0 -3px 0 var(--otono-ambar); }
body.tema-otono #barra .marca::after { content: ''; display: inline-block; width: 18px; height: 18px; margin-left: .35rem; vertical-align: middle;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23b8662a' d='M12 2c-.5 2.3-2.1 3.3-4 3.4.8 1.4.6 2.6-.6 3.7-1.4-.6-2.6-.4-3.4.7 1.4.8 1.9 2 1.4 3.6 1.8-.4 3.1.2 3.8 1.8.7-1.2 1.6-1.6 2.8-1.4V21h2v-5.2c1.2-.2 2.1.2 2.8 1.4.7-1.6 2-2.2 3.8-1.8-.5-1.6 0-2.8 1.4-3.6-.8-1.1-2-1.3-3.4-.7-1.2-1.1-1.4-2.3-.6-3.7-1.9-.1-3.5-1.1-4-3.4z'/%3E%3C/svg%3E"); }
body.tema-otono #barra .marca { display: inline-flex; align-items: center; }
body.tema-otono .mm-tile { border-top: 3px solid var(--otono-ambar); }
body.tema-otono .mm-tile:nth-child(3n+2) { border-top-color: var(--otono-oxido); }
body.tema-otono .mm-tile:nth-child(3n) { border-top-color: var(--otono-olivo); }
body.tema-otono .patio-solo-botones .patio-atajo { border-left: 4px solid var(--otono-ambar); }
body.tema-otono .mm-cat { border-bottom: 1px solid color-mix(in srgb, var(--otono-ambar) 40%, transparent); padding-bottom: .25rem; }
body.tema-otono .encabezado-vista { border-bottom-color: color-mix(in srgb, var(--otono-ambar) 45%, var(--borde)); }
body.tema-otono .otono-hoja.mece { animation: otonoMece 5s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes otonoMece { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { body.tema-otono .otono-hoja.mece { animation: none; } }
@media print { body.tema-otono #barra .marca::after { display: none; } }
body.tema-otono .modulo-carta { border-bottom: 3px solid var(--otono-ambar); }
body.tema-otono .modulo-carta:nth-child(3n+2) { border-bottom-color: var(--otono-oxido); }
body.tema-otono .modulo-carta:nth-child(3n) { border-bottom-color: var(--otono-olivo); }
body.tema-otono .login-caja .tarjeta { border-top: 3px solid var(--otono-ambar); }
#barra .btn-modulos { color: inherit; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.45); }
#barra .btn-modulos:hover { background: rgba(255,255,255,.24); }
.patio-solo-botones .patio-atajo { flex-direction: row !important; align-items: center !important; }
.patio-solo-botones .patio-atajo .pa-n { position: static !important; }
main#vista h1.patio-sec-titulo { font-size: 1.55rem; text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 800; border: 0; margin: .3rem 0 .8rem; }
main#vista h1.patio-sec-titulo::after { display: none; }
.patio-plano-flot { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 560px) {
  .patio-solo-botones { grid-template-columns: 1fr 1fr !important; }
  .patio-solo-botones .patio-atajo { flex-wrap: nowrap !important; min-height: 80px; font-size: .95rem; padding: .6rem; gap: .45rem; }
  .patio-solo-botones .pa-ico { width: 38px; height: 38px; }
  .patio-solo-botones .pa-txt { flex-basis: auto !important; }
  .patio-solo-botones .pa-txt small { display: none; }
}
/* 20261023b: Calculadora · cuartos y productos */
.cg-sub { margin: 1rem 0 .4rem; font-size: .95rem; }
.cg-estimado { color: #8a5a00; background: #fff6e0; border-radius: 8px; padding: .35rem .6rem; display: inline-block; }
:root[data-tema="oscuro"] .cg-estimado { color: #ffd28a; background: #3a2d12; }
/* 20261023b: barra de arriba en celular: que quepa todo (Cambiar módulo, usuario, tema, salir) */
@media (max-width: 560px) {
  #barra { gap: .3rem; flex-wrap: nowrap; min-width: 0; }
  #barra .reloj-barra { display: none; }
  #barra #usuarioBarra { max-width: 96px; min-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; min-width: 0; }
  #barra .btn-modulos { padding: .35rem .6rem; font-size: .78rem; min-height: 36px; flex: none; }
  #barra .marca-img { max-height: 26px; width: auto; }
  body.tema-otono #barra .marca::after { display: none; }
  #barra .icono { flex: none; }
  .patio-solo-botones { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .patio-solo-botones .pa-txt { min-width: 0; overflow-wrap: anywhere; }
  .mm-cabeza h1 { font-size: 1.25rem; }
}
@media (max-width: 380px) { #barra #usuarioBarra { max-width: 64px; } }

/* ── 20261023c: inicio de módulo con LOGO arriba y pocos botones de grupo ── */
.mm-hero { text-align: center; margin: .4rem auto 1.2rem; }
.mm-hero-logo { display: block; margin: 0 auto .5rem; width: min(260px, 62vw); height: auto; }
.mm-hero-tit { margin: 0; font-size: 1.7rem; font-weight: 800; }
.mm-hero-sub { margin: .25rem 0 0; color: var(--ink-mudo); font-size: .92rem; }
.mm-grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: .9rem; max-width: 980px; margin: 0 auto; }
.mm-grupo { position: relative; display: flex; align-items: center; gap: 1rem; min-height: 96px; padding: 1rem 1.1rem; text-align: left;
  background: var(--superficie, #fff); border: 2px solid var(--borde, #d9dee3); border-radius: 18px; cursor: pointer; font: inherit; color: inherit;
  box-shadow: 0 2px 6px rgba(0,0,0,.05); }
.mm-grupo:hover { border-color: var(--verde); }
.mm-grupo:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.mm-grupo:active { transform: translateY(1px); }
.mm-grupo.urge { border-color: var(--alerta); }
.mm-grupo .mm-ico { width: 56px; height: 56px; }
.mm-grupo .mm-txt b { font-size: 1.2rem; }
.mm-grupo .mm-txt small { font-size: .85rem; }
.mm-flecha { flex: none; font-size: 2rem; line-height: 1; color: var(--ink-mudo); }
.mm-grupo-pant .mm-hero { margin-bottom: .6rem; }
.mm-grupo-pant .mm-hero-logo { width: min(170px, 44vw); }
.mm-grupo-tit { display: flex; align-items: center; justify-content: center; gap: .5rem; font-size: 1.3rem; margin: 0 0 1rem; }
.mm-ico.chico { width: 36px; height: 36px; border-radius: 10px; }
.mm-ico.chico svg, .mm-ico.chico .ico-svg { width: 20px; height: 20px; }
.mm-regresar { font-size: 1.15rem; font-weight: 800; padding: .8rem 1.3rem; min-height: 54px; border-radius: 14px; }
.mm-regresar-abajo { justify-content: center; margin-top: 1.2rem; }
.mm-envoltura ~ .mm-logos { display: none; }
body.tema-otono .mm-grupo { border-top: 4px solid #c9822b; }
body.tema-otono .mm-grupo:nth-child(3n+2) { border-top-color: #a4502a; }
body.tema-otono .mm-grupo:nth-child(3n) { border-top-color: #7d7f3a; }
@media (max-width: 560px) {
  .mm-grupos { grid-template-columns: 1fr; gap: .7rem; }
  .mm-grupo { min-height: 84px; padding: .85rem .9rem; }
  .mm-hero-tit { font-size: 1.45rem; }
  .mm-regresar { width: 100%; justify-content: center; }
}

/* 20261023c: PUERTA, ZONA y CAJA obligatorias AL CARGAR (Subir graneles/forrajes, Montacargas) */
.oblig { color: #c62828; }
.falta-msg { margin: 0 0 .8rem; padding: .7rem .9rem; border-radius: 10px; background: #fdecea; color: #b71c1c; border: 2px solid #e57373; font-size: 1rem; }
.campo-falta { border: 2px solid #d32f2f !important; background: #fff5f5 !important; box-shadow: 0 0 0 3px rgba(211,47,47,.18); }
.chip-falta { display: inline-block; margin-left: .35rem; padding: .1rem .5rem; border-radius: 999px; background: #fdecea; color: #b71c1c; border: 1px solid #e57373; font-size: .75rem; font-weight: 800; white-space: nowrap; }

/* 20261023c: lotes por producto (pedidos que lo forman y excedente para inventario) */
.lote-pedidos { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.lote-pedidos span { font-size: .72rem; padding: .05rem .45rem; border-radius: 999px; background: var(--superficie-2, #eef3f0); color: var(--ink-mudo, #555); white-space: nowrap; }
.lote-excedente { margin-top: .25rem; font-size: .75rem; padding: .15rem .5rem; border-radius: 8px; background: #fff4d6; color: #6b4a00; border: 1px solid #f0c75e; display: inline-block; }
.lote-granel { margin-top: .2rem; font-size: .72rem; color: var(--ink-mudo, #666); }

/* ═══ 20261023d ═══ */
.chip-estado{display:inline-block;padding:.12rem .55rem;border-radius:999px;font-size:.78rem;font-weight:700;border:1px solid transparent;white-space:nowrap}
.est-pend{background:#fff4e0;color:#8a4b00;border-color:#f0c98a}
.est-plan{background:#eef3ff;color:#2c4a8a;border-color:#c6d3f2}
.est-carga{background:#fff0e6;color:#9a3d0c;border-color:#efb48c}
.est-camino{background:#e9f6ee;color:#1f6b3a;border-color:#a9d9b9}
.est-ok{background:#eef0ee;color:#3d4a3f;border-color:#c9cfca}
/* Pedidos compactos */
tr.ped-compacto td{padding-top:.45rem;padding-bottom:.45rem;vertical-align:middle}
tr.ped-compacto .ped-cost{font-weight:700;white-space:nowrap}
.btn-verped{white-space:nowrap}
.btn-verped.abierto{background:#fbeee3;border-color:#d79a6a}
tr.ped-detalle>td{background:#fcf8f3;padding:.4rem .6rem .8rem}
.ped-det-tabla{font-size:.9rem;width:100%}
/* Mis pedidos en camino */
.mp-chips{display:flex;flex-wrap:wrap;gap:.35rem;align-items:flex-end}
.mp-lista{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.mp-ped{margin:0;padding:.75rem .9rem}
.mp-cab{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:.35rem}
.mp-cab .spacer{flex:1}
.mp-datos{display:flex;flex-wrap:wrap;gap:.25rem .9rem;font-size:.9rem}
@media (max-width:600px){.mp-lista{grid-template-columns:1fr}}
/* Reporte de logística */
.rep-log{background:#fff;border:1px solid #e3d7c8;border-radius:12px;padding:1rem 1.1rem;max-width:1100px;margin:0 auto;color:#1c1c1c}
.rl-cab{display:flex;align-items:center;gap:1rem;border-bottom:2px solid #b5652a;padding-bottom:.6rem;margin-bottom:.7rem}
.rl-cab img{height:58px;width:auto}
.rl-cab h1{margin:0;font-size:1.35rem}
.rl-cab p{margin:.15rem 0 0;color:#555}
.rl-hoja{font-size:1rem}
.rl-tabla{width:100%;border-collapse:collapse;font-size:.88rem}
.rl-tabla th,.rl-tabla td{border:1px solid #d9d0c5;padding:.3rem .4rem;vertical-align:top;text-align:left}
.rl-tabla thead th{background:#f6efe7}
.rl-ch th{background:#efe3d4;font-size:.95rem}
.rl-ch th span{font-weight:400;color:#555}
.rl-n{width:1.6rem;text-align:center}
.rl-num{text-align:right;white-space:nowrap}
.rl-mudo{color:#666;font-size:.8rem}
.rl-vacio{padding:1rem;text-align:center;color:#666}
.rl-pie{font-size:.75rem;color:#777;margin-top:.6rem}
@media (max-width:600px){.rl-tabla{font-size:.78rem}.rl-cab img{height:42px}}
@media print{
  body.imprimiendo-replog *{visibility:hidden}
  body.imprimiendo-replog #repLogHoja, body.imprimiendo-replog #repLogHoja *{visibility:visible}
  body.imprimiendo-replog #repLogHoja{position:absolute;left:0;top:0;width:100%;border:0;padding:0;max-width:none}
  body.imprimiendo-replog .rl-tabla thead th, body.imprimiendo-replog .rl-ch th{background:#eee!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.imprimiendo-replog .rl-chofer{break-inside:avoid}
  @page{size:letter landscape;margin:10mm}
}
/* Chofer */
.chofer-botones{max-width:560px;margin:0 auto}
.ch-viaje{display:grid;gap:.3rem}
/* Nómina dentro de Menogranos */
.nomina-barra{display:flex;align-items:center;gap:.8rem;padding:.4rem .6rem;background:#fbf6ef;border-bottom:1px solid #eadccb}
body.hoja-fuerza .marco-nomina{height:calc(100vh - 110px)}
.marco-oculto{position:absolute;width:1px;height:1px;left:-9999px;top:0;border:0;opacity:0;pointer-events:none}
/* Respaldo */
.resp-dos{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:800px){.resp-dos{grid-template-columns:1fr}}
.resp-caja h2{margin-top:0}
.btn-grande{font-size:1.05rem;padding:.7rem 1.2rem}
.resp-tabla{width:100%;font-size:.88rem;margin:.6rem 0}
.resp-notas{font-size:.85rem;color:#7a4a12;background:#fff7ea;border:1px solid #f0d7ad;border-radius:8px;padding:.5rem .5rem .5rem 1.6rem}
.resp-ok{background:#e9f6ee;border:1px solid #a9d9b9;color:#1f6b3a;border-radius:8px;padding:.5rem .7rem;margin:.6rem 0}
.resp-alerta{background:#fdecea;border:2px solid #d9534f;color:#8a1f1b;border-radius:10px;padding:.7rem .9rem;margin:.7rem 0;font-size:1rem}
.resp-prev .chk{display:block;margin:.3rem 0}
#rsAplicar{background:#c0392b;color:#fff;border-color:#a93226}
.modulos-respaldo{text-align:center;margin-top:.8rem}
.cc-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.25rem;margin:.5rem 0;max-height:240px;overflow:auto}
.rl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media print{.rl-scroll{overflow:visible}}
.ped-est-cel{display:none;margin-top:.25rem}
@media (max-width:600px){
  .ped-est-cel{display:block}
  .ped-est-col{display:none}
  tr.ped-compacto .acciones-cel{white-space:normal}
}
.resp-prev label.resp-chk{display:flex;align-items:center;gap:.5rem;margin:.35rem 0}
.resp-prev label.resp-chk input{width:auto;margin:0}
.cc-lista label.chk{display:flex;align-items:center;gap:.4rem}.cc-lista label.chk input{width:auto;margin:0}
.patio-atajos.chofer-botones{display:grid;grid-template-columns:1fr!important;gap:.7rem}
.patio-atajos.chofer-botones .patio-atajo{width:100%;min-height:76px}

/* ═══ 20261023e · MÁS VIDA, PERO ELEGANTE ═══════════════════════════════
   DANNY: «más creatividad… más imágenes 3D, que se vea más real… que la caja
   se vea más tipo 3D y menos desde arriba… interesante, pero elegante».
   Todo es adorno: no cambia datos ni botones. Dibujos en js/visual3d.js.
   Con «reducir movimiento» del aparato no se anima nada. */

/* ── 1) La caja del tráiler en 3/4 ─────────────────────────────────── */
.caja3d {
  --pared: 30px; --filas: 9; --fila: 120px; --k: .37;
  perspective: 1800px; perspective-origin: 50% 40%;
  padding: 5.2rem 0 3rem; margin: 0 auto; max-width: 380px;
}
/* cuántas filas trae la caja (14, 16, 18 o 20 tarimas) para quitar el hueco
   que deja la inclinación (lo de arriba se va «hacia atrás»). */
.caja3d:has(.caja-rejilla > :nth-child(17)) { --filas: 9; }
.caja3d:not(:has(.caja-rejilla > :nth-child(17))) { --filas: 8; }
.caja3d:not(:has(.caja-rejilla > :nth-child(15))) { --filas: 7; }
.caja3d:has(.caja-rejilla > :nth-child(19)) { --filas: 10; }
.caja3d:has(.caja-rejilla > :nth-child(21)) { --filas: 11; }
.caja3d:has(.caja-rejilla > :nth-child(23)) { --filas: 12; }
.caja3d:not(:has(.caja-rejilla > *)) { --filas: 0; }
.caja3d-cuerpo {
  position: relative; transform-style: preserve-3d;
  transform: rotateX(46deg); transform-origin: 50% 100%;
  margin-top: calc(var(--filas) * var(--fila) * var(--k) * -1);
}
.caja3d .caja-rejilla {
  position: relative; max-width: none;
  border: 0; border-radius: 4px; padding: .55rem;
  /* piso del tráiler: tablones de madera */
  background:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,0) 18%, rgba(0,0,0,0) 85%, rgba(0,0,0,.12)),
    repeating-linear-gradient(90deg, #c9a878 0 22px, #bf9d6c 22px 23px, #cfae80 23px 45px, #b9966a 45px 46px);
  /* marco de lámina alrededor del piso (con borde: una sombra de afuera
     aquí hace que Chrome deje de pintar el piso inclinado) */
  border: 4px solid #aeb7bc !important; box-shadow: inset 0 0 0 2px #8b6a43;
}
:root[data-tema="oscuro"] .caja3d .caja-rejilla { filter: none;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.05)), repeating-linear-gradient(90deg, #6d5838 0 22px, #5f4c30 22px 23px, #745e3c 23px 45px, #57452b 45px 46px); }
/* paredes de lámina: tiras de metal a los lados del piso (no se tocan) */
.caja3d-pared {
  position: absolute; top: -2px; bottom: -2px; width: 9px; pointer-events: none; border-radius: 2px;
  background: linear-gradient(90deg, #8d969c, #eef1f3 45%, #aab3b8);
}
.caja3d-pared.izq { left: -11px; }
.caja3d-pared.der { right: -11px; }
/* pared del frente (con el letrero) */
.caja3d .caja-front {
  position: absolute; left: 0; right: 0; bottom: 100%; height: var(--pared); margin: 0; padding: 0;
  transform-origin: 50% 100%; transform: rotateX(-90deg);
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  background: linear-gradient(180deg, #e9edef, #c9d0d4); border: 1px solid #a3adb3; border-radius: 3px 3px 0 0;
  color: #3b464d; font-size: .64rem; font-weight: 700; letter-spacing: .14em; pointer-events: none;
}
.caja3d .caja-front::after { display: none; }
/* cabina: se ve por detrás, asomándose sobre la pared del frente */
.caja3d-cabina {
  position: absolute; left: 14%; right: 14%; bottom: calc(100% + 16px); height: 64px; pointer-events: none;
  transform-origin: 50% 100%; transform: rotateX(-90deg);
  border-radius: 16px 16px 4px 4px;
  background: linear-gradient(180deg, #4f6b55 0%, #3c5543 55%, #2f4535 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.18), inset 0 -6px 10px rgba(0,0,0,.25);
}
.caja3d-cabina::before { /* ventana de atrás */
  content: ""; position: absolute; left: 24%; right: 24%; top: 12px; height: 18px; border-radius: 6px;
  background: linear-gradient(180deg, #a8c3cf, #6f8e9c); box-shadow: inset 0 0 0 2px rgba(0,0,0,.25);
}
.caja3d-cabina::after, .caja3d-cabina i { /* escapes */
  content: ""; position: absolute; top: -18px; width: 7px; height: 76px; border-radius: 4px;
  background: linear-gradient(90deg, #8d969c, #eef1f3 45%, #7a838a); left: -10px;
}
.caja3d-cabina i { left: auto; right: -10px; }
/* defensa de atrás con calaveras y llantas */
.caja3d .caja-back {
  position: absolute; left: -6px; right: -6px; top: 100%; height: 34px; margin: 0; padding: 0 .5rem;
  transform-origin: 50% 0; transform: rotateX(-90deg);
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: linear-gradient(180deg, #4a4f53, #2b2f32); border-radius: 0 0 6px 6px;
  color: #e9edef; font-size: .62rem; letter-spacing: .14em; pointer-events: none;
  box-shadow: 0 10px 0 -4px #1d2023, 0 22px 18px -8px rgba(0,0,0,.35);
}
.caja3d .caja-back::before, .caja3d .caja-back::after {
  content: ""; position: absolute; top: 8px; width: 14px; height: 9px; border-radius: 3px; border: 0; flex: none;
  background: radial-gradient(circle at 40% 40%, #ff8a7a, #c0392b 70%); box-shadow: 0 0 6px rgba(231,76,60,.55);
}
.caja3d .caja-back::before { left: 10px; }
.caja3d .caja-back::after { right: 10px; }
/* las tarimas: se levantan del piso, con sus costales y la tarima de madera */
.caja3d .caja-celda {
  border-radius: 5px; min-height: 112px;
  background: rgba(255,255,255,.28); border: 1.5px dashed rgba(70,50,25,.45); color: #3a2c19;
  transition: transform .18s ease, box-shadow .18s ease;
}
.caja3d .caja-celda.llena {
  transform: translateY(-5px); border: 1.5px solid color-mix(in srgb, var(--c) 70%, #000);
  background-color: color-mix(in srgb, var(--c) 18%, #fbf7ee);
  background-image:
    radial-gradient(ellipse 42% 30% at 25% 22%, rgba(255,255,255,.75), transparent 72%),
    radial-gradient(ellipse 42% 30% at 75% 22%, rgba(255,255,255,.75), transparent 72%),
    radial-gradient(ellipse 42% 30% at 25% 55%, rgba(255,255,255,.6), transparent 72%),
    radial-gradient(ellipse 42% 30% at 75% 55%, rgba(255,255,255,.6), transparent 72%),
    radial-gradient(ellipse 42% 30% at 25% 86%, rgba(255,255,255,.5), transparent 72%),
    radial-gradient(ellipse 42% 30% at 75% 86%, rgba(255,255,255,.5), transparent 72%),
    linear-gradient(90deg, transparent 49.3%, color-mix(in srgb, var(--c) 35%, transparent) 49.5% 50.5%, transparent 50.7%);
  box-shadow:
    0 6px 0 -1px color-mix(in srgb, var(--c) 45%, #4b3a22),   /* costado de los costales */
    0 10px 0 -2px #a57c4b,                                     /* tarima de madera */
    0 16px 14px -6px rgba(0,0,0,.38);                          /* sombra en el piso */
}
.caja3d .caja-celda.llena .caja-etq, .caja3d .caja-celda.llena .caja-cost, .caja3d .caja-celda.llena .caja-parte {
  text-shadow: 0 0 3px rgba(255,255,255,.95), 0 0 1px #fff;
}
.caja3d .caja-celda .caja-num { color: rgba(58,44,25,.75); font-weight: 700; }
.caja3d .caja-celda.cargada {
  transform: translateY(-5px);
  box-shadow: inset 0 0 0 2px var(--bien), 0 6px 0 -1px #2f6b39, 0 10px 0 -2px #a57c4b, 0 16px 14px -6px rgba(0,0,0,.38) !important;
}
.caja3d .caja-celda.ajena { background-color: rgba(120,120,120,.18); }
.caja3d button.caja-celda.llena:hover, .caja3d .caja-rejilla:not(.ro) .caja-celda.llena:hover { transform: translateY(-8px); }
.caja3d button.caja-celda:active { transform: translateY(-2px); }
.caja3d .caja-celda:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
@media (max-width: 560px) {
  /* en celular, menos inclinada para que se lean bien las letras */
  .caja3d { --pared: 24px; --k: .25; padding-top: 4.6rem; }
  .caja3d-cuerpo { transform: rotateX(38deg); }
}
@media print {
  .caja3d { perspective: none; padding: 0; }
  .caja3d-cuerpo { margin-top: 0 !important; }
  .caja3d .caja-celda { min-height: 96px; }
  .caja3d-cuerpo, .caja3d .caja-celda, .caja3d .caja-front, .caja3d .caja-back { transform: none !important; position: static; box-shadow: none !important; }
  .caja3d-cabina, .caja3d-pared { display: none; }
  .caja3d .caja-rejilla { background: none; box-shadow: none; border: 1px solid #999; }
}

/* ── 2) Bodega en 3D (Inventario) ──────────────────────────────────── */
.v3d { display: block; width: 100%; height: auto; overflow: visible; }
.v3d-bodega {
  position: relative; margin: 0 0 1rem; padding: 1rem 1.1rem .9rem; border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #f5f1e8 0%, #ece5d7 100%);
  border: 1px solid rgba(90,70,40,.14);
  box-shadow: 0 1px 2px rgba(60,40,10,.06), 0 14px 30px -18px rgba(60,40,10,.35);
}
:root[data-tema="oscuro"] .v3d-bodega {
  background: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.06), transparent 60%), linear-gradient(180deg, #1d2a25 0%, #141e1a 100%);
  border-color: rgba(255,255,255,.08);
}
.v3d-bodega-cab { display: flex; align-items: baseline; gap: .4rem 1rem; flex-wrap: wrap; margin-bottom: .4rem; }
.v3d-bodega-tit { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--ink-2); }
.v3d-bodega-nota { font-size: .76rem; color: var(--ink-mudo); }
.v3d-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: .4rem .6rem; }
.v3d-item { margin: 0; text-align: center; animation: v3dSube .5s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 45ms); }
.v3d-dib { max-width: 146px; margin: 0 auto; transition: transform .25s ease; }
.v3d-item:hover .v3d-dib { transform: translateY(-3px); }
.v3d-item figcaption { display: grid; gap: .05rem; line-height: 1.2; margin-top: -.15rem; }
.v3d-item figcaption b { font-size: .78rem; letter-spacing: .02em; overflow-wrap: anywhere; color: var(--ink); }
.v3d-num { font-size: .95rem; font-weight: 800; color: var(--tono, var(--ink)); font-variant-numeric: tabular-nums; }
:root[data-tema="oscuro"] .v3d-num { color: var(--ink); }
.v3d-item figcaption small { font-size: .7rem; color: var(--ink-mudo); }
.v3d-item.neg .v3d-num { color: var(--critico); }
.v3d-item.vacio .v3d-dib { opacity: .55; }
.v3d-mas { margin-top: .4rem; font-size: .76rem; color: var(--ink-mudo); text-align: right; }
.v3d-silo .v3d-nivel { animation: v3dLlena 1.1s cubic-bezier(.2,.7,.2,1) both; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes v3dSube { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes v3dLlena { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (max-width: 560px) {
  .v3d-bodega { padding: .8rem .7rem .7rem; border-radius: 14px; }
  .v3d-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem .4rem; }
  .v3d-item figcaption b { font-size: .7rem; }
  .v3d-num { font-size: .84rem; }
}
@media print { .v3d-bodega, .v3d-escena { display: none; } }
/* escenita del inicio de módulo (debajo del logo) */
.v3d-escena { display: flex; justify-content: center; align-items: flex-end; gap: .2rem; margin: -.4rem auto 1rem; max-width: 520px; height: 78px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.v3d-escena-p { width: 64px; flex: none; animation: v3dSube .6s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(.1s + var(--i, 0) * 70ms); }
.v3d-escena-p.ancho { width: 104px; }
.mm-grupo-pant .v3d-escena { display: none; }
@media (max-width: 560px) { .v3d-escena { height: 60px; } .v3d-escena-p { width: 50px; } .v3d-escena-p.ancho { width: 80px; } }
/* kardex: entradas y salidas con flechita */
.inv-kardex td.inv-mas::before, .inv-kardex td.inv-menos::before {
  display: inline-block; width: 1.15em; height: 1.15em; margin-right: .3em; border-radius: 50%;
  font-size: .7em; line-height: 1.15em; text-align: center; vertical-align: .1em; font-weight: 800;
}
.inv-kardex td.inv-mas::before { content: "▲"; background: color-mix(in srgb, var(--bien) 16%, transparent); color: var(--bien-texto); }
.inv-kardex td.inv-menos::before { content: "▼"; background: color-mix(in srgb, var(--critico) 13%, transparent); color: var(--critico); }
.inv-kardex tbody tr { transition: background-color .15s ease; }
.inv-kardex tbody tr:hover { background: color-mix(in srgb, var(--ink) 3.5%, transparent); }

/* ── 3) Camioncitos (Pedidos, patio, graneles) ─────────────────────── */
.ped-cel1 { display: flex; align-items: center; gap: .65rem; }
.ped-cel1-txt { min-width: 0; }
.ped-cam { flex: none; width: 66px; filter: drop-shadow(0 1px 0 rgba(255,255,255,.6)); transition: transform .25s ease; }
tr.ped-compacto { transition: background-color .15s ease, box-shadow .2s ease; }
tr.ped-compacto:hover { background: color-mix(in srgb, var(--azul) 4%, transparent); }
tr.ped-compacto:hover .ped-cam { transform: translateX(3px); }
.chip-estado { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(0,0,0,.06); }
.chip-estado::before { content: ""; display: inline-block; width: .45em; height: .45em; border-radius: 50%; margin-right: .35em; vertical-align: .12em; background: currentColor; opacity: .75; }
.chip-estado.est-carga::before { animation: v3dLatido 1.8s ease-in-out infinite; }
@keyframes v3dLatido { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@media (max-width: 600px) { .ped-cam { display: none; } .ped-cel1 { display: block; } }
.acomodo-cam { flex: none; width: 64px; margin: -.2rem 0; }
.op-tolva { width: 150px; justify-self: end; }
.op-tolva.activa .v3d-grano { animation: v3dGrano 2.4s ease-in-out infinite; }
@keyframes v3dGrano { 0%,100% { transform: translateY(1.5px); } 50% { transform: translateY(-1px); } }
@media (max-width: 560px) { .op-tolva { width: 110px; } .acomodo-cam { width: 52px; } }
@media print { .ped-cam, .acomodo-cam, .op-tolva { display: none; } }

/* ── 4) Toque general: profundidad suave, sin ruido ────────────────── */
@media screen {
  .tarjeta { box-shadow: 0 1px 2px rgba(40,30,10,.05), 0 10px 26px -18px rgba(40,30,10,.28); }
  :root[data-tema="oscuro"] .tarjeta { box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 28px -16px rgba(0,0,0,.6); }
  .btn { transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease; }
  .btn:not(:disabled):hover { box-shadow: 0 4px 12px -6px rgba(40,30,10,.35); }
  .btn:not(:disabled):active { transform: translateY(1px); box-shadow: none; }
  .btn.primario { background-image: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 60%); }
  .encabezado-vista h1 { position: relative; }
  /* inicio de cada módulo: el logo con luz y los grupos con relieve */
  .mm-hero { position: relative; }
  .mm-hero::before {
    content: ""; position: absolute; left: 50%; top: -1.2rem; width: min(560px, 92vw); height: 220px; transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,0)); pointer-events: none; z-index: -1;
  }
  :root[data-tema="oscuro"] .mm-hero::before { background: radial-gradient(closest-side, rgba(255,255,255,.07), transparent); }
  .mm-hero-logo { filter: drop-shadow(0 10px 14px rgba(40,30,10,.18)); animation: v3dSube .6s cubic-bezier(.2,.7,.2,1) both; }
  .mm-grupo {
    background: linear-gradient(180deg, var(--superficie), color-mix(in srgb, var(--superficie) 94%, #c9a878));
    box-shadow: 0 1px 2px rgba(40,30,10,.06), 0 12px 24px -16px rgba(40,30,10,.35);
    transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease, border-color .2s ease;
    animation: v3dSube .5s cubic-bezier(.2,.7,.2,1) both;
  }
  .mm-grupo:nth-child(2) { animation-delay: .05s; } .mm-grupo:nth-child(3) { animation-delay: .1s; }
  .mm-grupo:nth-child(4) { animation-delay: .15s; } .mm-grupo:nth-child(5) { animation-delay: .2s; } .mm-grupo:nth-child(6) { animation-delay: .25s; }
  .mm-grupo:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(40,30,10,.06), 0 20px 30px -18px rgba(40,30,10,.45); }
  .mm-grupo:active { transform: translateY(0); }
  .mm-grupo .mm-ico, .mm-tile .mm-ico {
    background: linear-gradient(145deg, color-mix(in srgb, var(--verde-suave) 70%, #fff), var(--verde-suave));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 6px 12px -6px rgba(10,80,55,.45);
  }
  :root[data-tema="oscuro"] .mm-grupo .mm-ico, :root[data-tema="oscuro"] .mm-tile .mm-ico { background: var(--verde-suave); box-shadow: none; }
  .mm-grupo .mm-flecha { transition: transform .2s ease; }
  .mm-grupo:hover .mm-flecha { transform: translateX(3px); }
  .mm-tile { transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease; }
  .mm-tile:hover { transform: translateY(-2px); }
  /* selector de módulos */
  .modulo-carta { transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease; animation: v3dSube .5s cubic-bezier(.2,.7,.2,1) both; }
  .modulo-carta:nth-child(2) { animation-delay: .04s; } .modulo-carta:nth-child(3) { animation-delay: .08s; }
  .modulo-carta:nth-child(4) { animation-delay: .12s; } .modulo-carta:nth-child(5) { animation-delay: .16s; } .modulo-carta:nth-child(6) { animation-delay: .2s; }
  .modulo-carta .modulo-ico { box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 8px 14px -8px rgba(40,30,10,.4); }
  /* pestañas de Inventario: la escogida con relieve */
  [data-invtab] { transition: background-color .15s ease, box-shadow .15s ease, transform .12s ease; }
  [data-invtab][aria-pressed="true"] { box-shadow: 0 6px 14px -8px rgba(20,30,60,.55); }
  /* KPIs con un poco de luz */
  .kpi { background-image: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0) 55%); }
  :root[data-tema="oscuro"] .kpi { background-image: none; }
}
@media (prefers-reduced-motion: reduce) {
  .v3d-item, .v3d-silo .v3d-nivel, .v3d-escena-p, .op-tolva.activa .v3d-grano, .chip-estado.est-carga::before,
  .mm-hero-logo, .mm-grupo, .modulo-carta { animation: none !important; }
  .caja3d .caja-celda, .mm-grupo, .mm-tile, .modulo-carta, .btn, .v3d-dib, .ped-cam { transition: none !important; }
  .mm-grupo:hover, .mm-tile:hover, .v3d-item:hover .v3d-dib, tr.ped-compacto:hover .ped-cam { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════
   20261024a · FACE ID / HUELLA EN ESTE APARATO
   ════════════════════════════════════════════════════════════════════ */
.fid-ico { width: 22px; height: 22px; display: block; }
.fid-zona { margin: 0 0 1rem; text-align: left; animation: v3dSube .45s cubic-bezier(.2,.7,.2,1) both; }
.fid-titulo:empty { display: none; }
.fid-titulo { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin: 0 0 .55rem; }
.fid-titulo span { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-mudo); }
.fid-lista { display: grid; gap: .5rem; }
.login-caja .fid-btn, .fid-btn {
  display: flex; align-items: center; gap: .8rem; width: 100%; margin: 0; padding: .75rem .9rem;
  border-radius: 14px; border: 1px solid rgba(10,122,85,.35); cursor: pointer; text-align: left; font: inherit;
  color: #fff; background: linear-gradient(160deg, #0d8a60 0%, #0a6a4b 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 22px -12px rgba(10,90,60,.75);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.fid-btn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 14px 26px -12px rgba(10,90,60,.8); }
.fid-btn:active { transform: translateY(0); filter: brightness(.96); }
.fid-btn:focus-visible { outline: 3px solid var(--azul-suave); outline-offset: 2px; }
.fid-btn-ico {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.fid-btn-ico .fid-ico { width: 24px; height: 24px; }
.fid-btn-txt { flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.fid-btn-txt b { font-size: 1rem; letter-spacing: .02em; }
.fid-btn-txt small { font-size: .78rem; opacity: .82; margin-top: .15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fid-btn-flecha { font-size: 1.5rem; opacity: .7; line-height: 1; }
.fid-btn.fid-esperando { pointer-events: none; }
.fid-btn.fid-esperando .fid-btn-ico { animation: fidLatido 1s ease-in-out infinite; }
@keyframes fidLatido { 0%,100% { transform: scale(1); } 50% { transform: scale(.9); } }
.fid-o { display: flex; align-items: center; gap: .6rem; margin: .95rem 0 .2rem; color: var(--ink-mudo); font-size: .76rem; }
.fid-o::before, .fid-o::after { content: ''; flex: 1; height: 1px; background: var(--linea); }
.login-caja .fid-quitar-link, .fid-quitar-link {
  display: block; width: auto; margin: .45rem 0 0 auto; padding: .2rem .3rem; background: none; border: 0;
  color: var(--ink-mudo); font: inherit; font-size: .74rem; cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.fid-zona[hidden] { display: none; }

/* Tarjeta «¿Entrar con Face ID la próxima vez?» (no es modal) */
.fid-oferta {
  position: fixed; z-index: 60; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
  width: min(560px, calc(100vw - 1.6rem)); display: grid; grid-template-columns: auto 1fr; gap: .4rem .85rem; align-items: center;
  padding: .95rem 1rem; border-radius: 18px; background: var(--superficie); color: var(--ink);
  border: 1px solid var(--borde); box-shadow: 0 2px 6px rgba(11,26,21,.06), 0 22px 48px -16px rgba(11,26,21,.35);
  animation: fidEntra .4s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes fidEntra { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
.fid-oferta-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(160deg, #0d8a60, #0a6a4b); box-shadow: 0 8px 16px -10px rgba(10,90,60,.8); }
.fid-oferta-ico .fid-ico { width: 26px; height: 26px; }
.fid-oferta-txt { display: flex; flex-direction: column; gap: .15rem; font-size: .86rem; line-height: 1.35; }
.fid-oferta-txt > b { font-size: .98rem; }
.fid-oferta-txt > span { color: var(--ink-mudo); }
.fid-oferta-txt > span b { color: var(--ink); }
.fid-oferta-btns { grid-column: 1 / -1; display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; margin-top: .25rem; }
@media (max-width: 520px) {
  .fid-oferta { bottom: .7rem; }
  .fid-oferta-btns .btn { flex: 1 1 100%; }
  .fid-oferta-btns .btn:last-child { order: 2; }
}

/* «Mi cuenta» */
#usuarioBarra.chip-cuenta { cursor: pointer; transition: box-shadow .15s ease, background-color .15s ease; }
#usuarioBarra.chip-cuenta:hover { box-shadow: 0 0 0 2px var(--verde-suave); }
#usuarioBarra.chip-cuenta:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.modulos-cuenta {
  display: inline-flex; align-items: center; gap: .3rem; margin-top: .35rem; padding: .22rem .55rem; border-radius: 999px;
  border: 1px solid var(--borde); background: var(--superficie); color: var(--verde); font: inherit; font-size: .72rem; font-weight: 600; cursor: pointer;
}
.modulos-cuenta .fid-ico { width: 15px; height: 15px; }
.modulos-cuenta:hover { background: var(--verde-suave); }
.cuenta-cabeza { display: flex; align-items: center; gap: .75rem; margin-bottom: .9rem; }
.cuenta-cabeza > span:last-child { display: flex; flex-direction: column; }
.cuenta-cabeza small { color: var(--ink-mudo); }
.cuenta-avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--verde);
  background: var(--verde-suave); box-shadow: inset 0 0 0 1px rgba(10,122,85,.2); }
.fid-seccion { border: 1px solid var(--borde); border-radius: 14px; padding: .9rem; background: linear-gradient(180deg, rgba(10,122,85,.05), rgba(10,122,85,0) 60%); }
.fid-seccion-tit { display: flex; align-items: center; gap: .7rem; margin-bottom: .75rem; }
.fid-seccion-tit > span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
.fid-seccion-tit small { color: var(--ink-mudo); }
.fid-seccion .fid-btn-ico, .fid-cuentas .fid-btn-ico { color: #fff; background: linear-gradient(160deg, #0d8a60, #0a6a4b); box-shadow: none; }
.fid-seccion > .btn { width: 100%; }
.fid-seccion > p { margin: .6rem 0 0; }
.fid-otros { margin-top: .8rem; padding-top: .7rem; border-top: 1px dashed var(--linea); }
.fid-otros > small { color: var(--ink-mudo); }
.fid-cuentas { display: grid; gap: .5rem; margin-top: .6rem; }
.fid-cuenta-fila { display: flex; align-items: center; gap: .7rem; padding: .35rem 0; }
.fid-cuenta-nom { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.fid-cuenta-nom small { color: var(--ink-mudo); }
:root[data-tema="oscuro"] .fid-oferta { box-shadow: 0 22px 48px -16px rgba(0,0,0,.7); }
@media (prefers-reduced-motion: reduce) {
  .fid-zona, .fid-oferta, .fid-btn.fid-esperando .fid-btn-ico { animation: none !important; }
  .fid-btn { transition: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   20261026a · FACTURACIÓN A PÁGINA COMPLETA
   Pedido de Danny: "que sea de página completa para no recorrerme de lado
   para poder seleccionar" el «regresó». La hoja usa todo el ancho
   (HOJAS_ANCHAS) y la casilla de «Factura de regreso» va en la PRIMERA
   columna, así que nunca queda escondida a la derecha.
   ════════════════════════════════════════════════════════════════════ */
body.hoja-ancha main#vista:has(> .fac-pantalla) { padding-left: clamp(.9rem, 2vw, 2rem); padding-right: clamp(.9rem, 2vw, 2rem); }
@media (min-width: 1200px) {
  .fac-pantalla { margin-right: 0; }      /* antes reservaba 19rem para los avisos */
}
/* Tablas de Facturación: caben solas, los textos largos bajan de renglón */
.fac-pantalla .tabla-scroll:has(> .tabla-fac) { overflow-x: auto; }
.fac-pantalla .tabla-fac { table-layout: auto; width: 100%; }
.fac-pantalla .tabla-fac th, .fac-pantalla .tabla-fac td { padding-left: .55rem; padding-right: .55rem; }
.fac-pantalla .tabla-fac td[data-et="Cliente"] { min-width: 9rem; overflow-wrap: break-word; }
.fac-pantalla .tabla-fac td[data-et="Camión · chofer"], .fac-pantalla .tabla-fac td[data-et="Pedidos"] { overflow-wrap: break-word; }
/* La columna de «regresó» */
.fac-pantalla .tabla-fac th.fac-regreso-th { width: 15rem; }
.fac-pantalla .tabla-fac td.fac-regreso { width: 15rem; min-width: 11rem; }
.fac-regreso-check {
  display: flex; align-items: flex-start; gap: .55rem; margin: 0; cursor: pointer;
  padding: .35rem .5rem; border-radius: 10px; border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease;
}
.fac-regreso-check:hover { background: var(--verde-suave); border-color: rgba(10,122,85,.25); }
.fac-regreso-check input[type="checkbox"] { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; margin: .05rem 0 0; accent-color: var(--verde); cursor: pointer; }
.fac-regreso-check > span { display: flex; flex-direction: column; line-height: 1.25; }
.fac-regreso-check small { font-size: .74rem; font-weight: 400; color: var(--ink-mudo); }
tr.fac-falta .fac-regreso-check { background: rgba(208,59,59,.05); border-color: rgba(208,59,59,.18); }
tr.fac-falta .fac-regreso-check:hover { background: rgba(208,59,59,.09); }
/* Teléfono/tablet angosta: cada factura es tarjetita y la casilla va arriba, grande */
@media (max-width: 760px) {
  .fac-pantalla .tabla-fac th, .fac-pantalla .tabla-fac td { padding-left: 0; padding-right: 0; }
  .fac-pantalla .tabla-fac td.fac-regreso { width: 100%; min-width: 0; padding: .1rem 0 .35rem; }
  .fac-regreso-check { padding: .55rem .65rem; }
  .fac-regreso-check input[type="checkbox"] { width: 1.45rem; height: 1.45rem; }
  .fac-pantalla .tabla-fac td[data-et="Cliente"] { min-width: 0; }
}
/* La misma casilla en las tarjetas («Devolvió la factura firmada») y en el buscador */
.fac-pantalla .check-firmada input[type="checkbox"] { width: 1.2rem; height: 1.2rem; accent-color: var(--verde); cursor: pointer; flex: 0 0 auto; }
.fac-pantalla .check-firmada { cursor: pointer; }
/* Tablet (761–1100 px): la misma tabla, más apretada, sin recorrer de lado */
@media (min-width: 761px) and (max-width: 1100px) {
  .fac-pantalla .tabla-fac { font-size: .86rem; }
  .fac-pantalla .tabla-fac th { white-space: normal; }
  .fac-pantalla .tabla-fac th, .fac-pantalla .tabla-fac td { padding-left: .35rem; padding-right: .35rem; }
  .fac-pantalla .tabla-fac th.fac-regreso-th, .fac-pantalla .tabla-fac td.fac-regreso { width: 9.5rem; min-width: 8.5rem; }
  .fac-pantalla .tabla-fac td[data-et="Cliente"] { min-width: 7rem; }
  .fac-pantalla .tabla-fac .fac-fecha, .fac-pantalla .tabla-fac td[data-et="Folio"] { white-space: normal; }
  .fac-regreso-check { padding: .3rem .35rem; gap: .4rem; }
}
:root[data-tema="oscuro"] tr.fac-falta .fac-regreso-check { background: rgba(208,59,59,.12); }
@media (prefers-reduced-motion: reduce) { .fac-regreso-check { transition: none; } }

/* ════════════════════════════════════════════════════════════════════
   20261026b · ¿DÓNDE ESTÁ CADA CAJA? (solo lectura)
   ════════════════════════════════════════════════════════════════════ */
body.hoja-ancha main#vista:has(> .dc-pantalla) { padding-left: clamp(.9rem, 2vw, 2rem); padding-right: clamp(.9rem, 2vw, 2rem); }
.dc-pantalla { padding-bottom: 6rem; }
.dc-libre     { --dc: #0a7a55; --dc-s: #d7f0e5; }
.dc-regreso   { --dc: #2a78d6; --dc-s: #dbe9fa; }
.dc-patio     { --dc: #8a5a12; --dc-s: #f6e7c8; }
.dc-cargando  { --dc: #b86a00; --dc-s: #fde9c8; }
.dc-lista     { --dc: #5b4bb7; --dc-s: #e6e2fa; }
.dc-bascula   { --dc: #0d7d8c; --dc-s: #d3f0f3; }
.dc-carretera { --dc: #b3261e; --dc-s: #f8dcd9; }
:root[data-tema="oscuro"] .dc-chip, :root[data-tema="oscuro"] .dc-fchip.activo { --dc-s: rgba(255,255,255,.08); }
.dc-resumen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin: 0 0 1rem; }
.dc-res {
  display: flex; flex-direction: column; gap: .15rem; text-align: left; cursor: pointer; font: inherit;
  padding: .8rem 1rem; border-radius: 14px; border: 1px solid var(--borde); background: var(--superficie);
  box-shadow: var(--sombra); border-left: 4px solid var(--dc); color: var(--ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.dc-res b { font-size: 1.9rem; line-height: 1; color: var(--dc); font-variant-numeric: tabular-nums; }
.dc-res span { font-size: .88rem; font-weight: 600; color: var(--ink-mudo); }
.dc-res:hover { transform: translateY(-1px); }
.dc-res.activo { background: var(--dc-s); }
.dc-buscar input { width: 100%; font-size: 1.05rem; padding: .75rem 1rem; border-radius: 12px; }
.dc-filtros { display: flex; flex-wrap: wrap; gap: .4rem; margin: .7rem 0 1rem; }
.dc-fchip {
  font: inherit; font-size: .85rem; cursor: pointer; padding: .32rem .7rem; border-radius: 999px;
  border: 1px solid var(--borde); background: var(--superficie); color: var(--ink);
  white-space: nowrap; min-height: 0; line-height: 1.25; width: auto; display: inline-flex; align-items: baseline; gap: .15rem;
}
.dc-fchip b { margin-left: .2rem; color: var(--dc, var(--ink)); font-variant-numeric: tabular-nums; }
.dc-fchip.activo { background: var(--dc-s, var(--verde-suave)); border-color: var(--dc, var(--verde)); font-weight: 700; }
.dc-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: .75rem; }
.dc-carta {
  display: flex; flex-direction: column; gap: .3rem; text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  padding: .85rem .95rem; border-radius: 14px; border: 1px solid var(--borde); background: var(--superficie);
  box-shadow: var(--sombra); min-width: 0; animation: v3dSube .4s cubic-bezier(.2,.7,.2,1) both;
  transition: transform .15s ease, box-shadow .15s ease;
}
.dc-carta:hover { transform: translateY(-2px); box-shadow: 0 2px 6px rgba(11,26,21,.06), 0 16px 30px -14px rgba(11,26,21,.3); }
.dc-carta:focus-visible { outline: 3px solid var(--azul-suave); outline-offset: 2px; }
.dc-cab { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.dc-num { font-size: 1.25rem; letter-spacing: .02em; }
.dc-chip { display: inline-block; padding: .14rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; color: var(--dc); background: var(--dc-s); border: 1px solid color-mix(in srgb, var(--dc) 30%, transparent); }
.dc-donde { font-weight: 600; font-size: .95rem; }
.dc-lin { font-size: .86rem; overflow-wrap: anywhere; display: flex; gap: .35rem; align-items: center; }
.dc-lin .ico-svg { width: 15px; height: 15px; flex: 0 0 auto; }
.dc-cli { display: block; }
.dc-mudo { color: var(--ink-mudo); }
.dc-pie { margin-top: .25rem; padding-top: .4rem; border-top: 1px dashed var(--linea); font-size: .76rem; color: var(--ink-mudo); }
.dc-det .dc-dcab { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .3rem; }
.dc-dfila { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--linea); font-size: .9rem; }
.dc-dfila span { color: var(--ink-mudo); flex: 0 0 auto; }
.dc-dfila b { text-align: right; overflow-wrap: anywhere; }
.dc-prods { display: grid; gap: .2rem; margin: .4rem 0; padding: .5rem .7rem; border-radius: 10px; background: var(--plano); }
.dc-prods span { display: flex; justify-content: space-between; gap: 1rem; font-size: .84rem; }
.dc-prods i { font-style: normal; overflow-wrap: anywhere; }
.dc-h3 { font-size: .95rem; margin: 1rem 0 .4rem; }
.dc-hist { display: grid; gap: .4rem; }
.dc-hfila { display: flex; flex-direction: column; padding: .45rem .6rem; border-radius: 10px; border: 1px solid var(--borde); font-size: .84rem; }
.dc-hfila small { color: var(--ink-mudo); }
.modulos-dondecajas .btn .ico-svg { width: 18px; height: 18px; }
@media (max-width: 640px) {
  .dc-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .dc-res { padding: .6rem .75rem; }
  .dc-res b { font-size: 1.5rem; }
  .dc-fchip { font-size: .8rem; padding: .28rem .6rem; }
}
@media (prefers-reduced-motion: reduce) { .dc-carta, .dc-res { animation: none !important; transition: none !important; } }

/* ── 20261026c · PASAR A PLAN: cada renglón a su hoja ─────────────── */
.rp-reparto { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0 0 .7rem; }
.rp-chip { display: inline-flex; align-items: center; white-space: nowrap; padding: .2rem .6rem; border-radius: 999px;
  font-size: .85rem; font-weight: 700; background: #eef2f7; color: #243447; border: 1px solid #d5dde8; }
.rp-chip.rp-costales, .rp-dest.rp-costales { --rp: #2f6fb0; }
.rp-chip.rp-graneles, .rp-dest.rp-graneles { --rp: #b7791f; }
.rp-chip.rp-forrajes, .rp-dest.rp-forrajes { --rp: #2f855a; }
.rp-chip.rp-costales, .rp-chip.rp-graneles, .rp-chip.rp-forrajes { border-color: var(--rp); color: var(--rp); background: #fff; }
.rp-chip.rp-sin { background: #fff4e5; border-color: #dd6b20; color: #9c4221; }
.rp-sinarea { border: 2px solid #dd6b20; background: #fffaf3; border-radius: 10px; padding: .6rem .7rem; margin: 0 0 .8rem; }
.rp-fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .4rem;
  padding: .45rem 0; border-top: 1px solid #f3d9bd; }
.rp-fila:first-of-type { border-top: 0; }
.rp-opciones { display: flex; flex-wrap: wrap; gap: .3rem; }
.rp-op { min-height: 40px; padding: .3rem .7rem; font-size: .9rem; }
.rp-frase { font-size: 1.1rem; margin: 0 0 .6rem; }
.rp-dest { border-left: 4px solid var(--rp, #999); padding: .3rem 0 .3rem .7rem; margin: 0 0 .6rem; }
.rp-dest ul { margin: .3rem 0 0; }
@media (max-width: 520px) { .rp-opciones { width: 100%; } .rp-op { flex: 1 1 auto; } }

/* ── 20261026c · PLANO GENERAL (hoja propia, solo ver) ─────────────── */
.plano-general { display: flex; flex-direction: column; gap: .7rem; }
.plano-mini.plano-grande { display: block; width: 100%; max-width: 1100px; margin: 0 auto; padding: 0; border: 0; background: none; cursor: zoom-in; }
.plano-mini.plano-grande img { display: block; width: 100%; height: auto; border-radius: 10px; }

/* ── 20261026c · FACTURA POR CLIENTE, cliente siempre, folios de tarimas ── */
.fac-clientes { display: grid; gap: .6rem; margin: .4rem 0 .6rem; }
.fac-multi-aviso { margin: 0; padding: .5rem .7rem; border-radius: 8px; background: #fff7e6; border: 1px solid #f0c36d; font-size: .92rem; }
.fac-cliente { border: 2px solid #d5dde8; border-radius: 10px; padding: .4rem .7rem .6rem; margin: 0; min-width: 0; }
.fac-cliente.completa { border-color: #8cc59a; }
.fac-cliente legend { padding: 0 .35rem; font-size: .95rem; }
.fac-cliente .log-envio { margin: .2rem 0; }
.fac-cli-linea { margin: .2rem 0; }
.fac-sincliente, .chip-falta.fac-sincliente { font-weight: 700; }
.fac-folio-txt { white-space: nowrap; }
.tar-facturas { display: flex; flex-wrap: wrap; gap: .3rem; }
td.tar-facturas { display: table-cell; }
.tar-fac { display: inline-block; margin: .1rem .3rem .1rem 0; padding: .15rem .5rem; border-radius: 8px; background: #eef4fb; border: 1px solid #c9d8ea; font-size: .85rem; white-space: nowrap; }
.tar-fac.sin { background: #fff4e5; border-color: #f0b27a; }
input.campo-falta, select.campo-falta { border-color: #c53030 !important; box-shadow: 0 0 0 3px rgba(197,48,48,.18); }
@media (max-width: 640px) {
  .fac-cliente .log-envio { display: grid; grid-template-columns: 1fr; }
  .tar-fac { white-space: normal; }
}

/* ── 20261026d · MÓDULOS NUEVOS, COSTALES DEL DÍA EN ENCOSTALADORAS, AJUSTES ── */
.modulo-carta[data-modulo="tablero"]     { --mod-acento: #2f6b5a; }
.modulo-carta[data-modulo="pedidos"]     { --mod-acento: #3d5f8a; }
.modulo-carta[data-modulo="formulas"]    { --mod-acento: #6a4f86; }
.modulo-carta[data-modulo="costalesdia"] { --mod-acento: #8a5a2b; }
.modulo-carta[data-modulo="ajustes"]     { --mod-acento: #505a64; }
:root[data-tema="oscuro"] .modulo-carta[data-modulo="tablero"],
:root[data-tema="oscuro"] .modulo-carta[data-modulo="pedidos"],
:root[data-tema="oscuro"] .modulo-carta[data-modulo="formulas"],
:root[data-tema="oscuro"] .modulo-carta[data-modulo="costalesdia"],
:root[data-tema="oscuro"] .modulo-carta[data-modulo="ajustes"] { --mod-acento: #b8c7d4; }
.modulo-n { position: absolute; top: 1rem; right: 1rem; min-width: 1.7rem; height: 1.7rem; padding: 0 .45rem;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 99px;
  background: #c0392b; color: #fff; font-weight: 700; font-size: .85rem; }
/* Costales del día dentro de Encostaladoras */
.enc-cd { margin-top: 1.3rem; padding-top: 1rem; border-top: 2px dashed var(--borde); }
.enc-cd-cab h2 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .2rem; font-size: 1.25rem; }
.enc-cd-cab h2 svg { width: 1.3em; height: 1.3em; }
.enc-cd .cd-tarimas .btn.accion { min-height: 52px; font-size: 1.05rem; padding: .4rem 1rem; }
.enc-cd-todo > summary { cursor: pointer; font-weight: 600; padding: .2rem 0; }
.enc-cd-todo[open] > summary { margin-bottom: .7rem; }
/* Dónde sale Costales del día (Configuración y Ajustes) */
.cd-lugar { display: grid; gap: .55rem; }
.cd-lugar-op { align-items: flex-start; padding: .6rem .75rem; border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); }
.cd-lugar-op span small { display: block; margin-top: .15rem; font-size: .86rem; line-height: 1.35; }
.cd-lugar .btn { justify-self: start; }
.cfg-resaltar { outline: 3px solid color-mix(in srgb, var(--verde) 55%, transparent); outline-offset: 3px; transition: outline-color .6s; }
/* Ajustes del sistema */
.aj-envoltura { max-width: 980px; margin: 0 auto; }
.aj-busca { max-width: 520px; margin: 0 auto 1rem; }
.aj-grupo { margin-bottom: 1rem; }
.aj-grupo > h2 { display: flex; align-items: center; gap: .5rem; }
.aj-grupo > h2 svg { width: 1.25em; height: 1.25em; }
.aj-lista { display: grid; gap: .5rem; }
.aj-item { display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left; font: inherit; color: var(--ink);
  padding: .7rem .9rem; border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); cursor: pointer; min-height: 56px; }
.aj-item:hover, .aj-item:focus-visible { border-color: var(--verde); }
.aj-item[hidden] { display: none; }
.aj-txt { flex: 1 1 auto; min-width: 0; }
.aj-txt b { display: block; }
.aj-txt small { display: block; color: var(--mudo, #667); font-size: .88rem; line-height: 1.35; margin-top: .1rem; }
.aj-ir { flex: none; font-weight: 600; color: var(--verde); white-space: nowrap; }
@media (max-width: 560px) { .aj-ir { display: none; } }

/* 20261027a · Toneladas por área (usa la hoja .rep-log / .rl-* del Reporte de logística) */
.rep-ton .rt-h2{font-size:1.02rem;margin:1rem 0 .4rem}
.rep-ton .rt-tot{min-width:8.5rem}
.rep-ton .rt-barra{display:block;height:6px;background:#efe6da;border-radius:3px;margin-top:.25rem;overflow:hidden}
.rep-ton .rt-barra i{display:block;height:100%;background:#b5652a;border-radius:3px}
.rep-ton .rt-est{font-size:.7rem;font-weight:600;color:#8a5a12;background:#fff3dc;border:1px solid #f0d7ad;border-radius:6px;padding:0 .3rem;vertical-align:middle}
.rep-ton .rt-des{font-size:.85rem;margin:.35rem 0;color:#333}
.rep-ton .rt-dias th,.rep-ton .rt-dias td{white-space:nowrap}
.rep-ton .rt-dia{font-weight:600}
.rep-ton .rt-descanso td{background:#f7f4f0;color:#888}
.rep-ton .rt-total th{background:#f6efe7;text-align:right}
.rep-ton .rt-total th:first-child{text-align:left}
.rep-ton .rt-avisos{font-size:.8rem;color:#6b4a1c;margin:.7rem 0 0;padding-left:1.2rem}
@media (max-width:600px){.rep-ton .rt-dias{font-size:.74rem}.rep-ton .rt-tot{min-width:6rem}}
@media print{
  body.imprimiendo-repton *{visibility:hidden}
  body.imprimiendo-repton #repTonHoja, body.imprimiendo-repton #repTonHoja *{visibility:visible}
  body.imprimiendo-repton #repTonHoja{position:absolute;left:0;top:0;width:100%;border:0;padding:0;max-width:none}
  body.imprimiendo-repton .rl-tabla thead th, body.imprimiendo-repton .rl-ch th, body.imprimiendo-repton .rt-total th, body.imprimiendo-repton .rt-barra, body.imprimiendo-repton .rt-barra i, body.imprimiendo-repton .rt-descanso td{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.imprimiendo-repton .rl-scroll{overflow:visible}
  body.imprimiendo-repton .rt-dias tr{break-inside:avoid}
}

/* 20261027b · PLANTA 3D (solo admin): el visor va en un marco a todo lo que queda de pantalla */
body.hoja-p3d main#vista { max-width: none; padding: .6rem .75rem .5rem; }
.p3d-hoja { display: flex; flex-direction: column; gap: .5rem;
  height: calc(100vh - var(--barra-h, 56px) - var(--volver-h, 0px) - 1.2rem);
  height: calc(100dvh - var(--barra-h, 56px) - var(--volver-h, 0px) - 1.2rem); min-height: 420px; }
.p3d-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.p3d-pestanas { display: flex; gap: .4rem; flex-wrap: wrap; }
button.btn.p3d-pest.activo, button.btn.p3d-pest.activo:hover, button.btn.p3d-pest.activo:focus { background: var(--ink); border-color: var(--ink); color: var(--superficie, #fff); }
.p3d-completa { margin-left: auto; text-decoration: none; }
.p3d-nota { flex: 1 1 100%; margin: 0; line-height: 1.35; }
.p3d-corto { display: none; }
.p3d-marco { flex: 1 1 auto; width: 100%; min-height: 0; border: 1px solid var(--linea, #d6dbd8); border-radius: 10px; background: #cfdde8; display: block; }
@media (max-width: 700px) {
  body.hoja-p3d main#vista { padding: .35rem .35rem .3rem; }
  .p3d-hoja { gap: .35rem; height: calc(100dvh - var(--barra-h, 56px) - var(--volver-h, 0px) - .7rem); min-height: 360px; }
  .p3d-pest, .p3d-completa { padding: .4rem .6rem; font-size: .85rem; }
  .p3d-nota { display: none; }
  .p3d-cabeza { flex-wrap: nowrap; }
  .p3d-largo { display: none; } .p3d-corto { display: inline; }
  .p3d-marco { border-radius: 8px; }
}

/* ── 20261028a: LETRA GRANDE ─────────────────────────────────────────
   Pedido de Danny: «letras más grandes en cargador frontal porque esa
   persona no ve muy bien». app.js le pone la clase `letra-grande` a <html>
   cuando entra el CARGADOR FRONTAL (o quien la prenda con el botón «A+»).
   Casi toda la app se mide en rem, así que subir la letra de <html> agranda
   todo parejo: ~1.4x en teléfono, ~1.5x en tableta y compu. Encima: más
   negrito, grises más oscuros (más contraste) y botones/campos más altos
   para atinarle con el dedo. A los demás usuarios no les toca nada.
   Va al final del archivo a propósito: tiene que ganarle a todo lo de arriba. */
html.letra-grande { font-size: 22.5px; }
@media (min-width: 700px) { html.letra-grande { font-size: 24px; } }
html.letra-grande body { font-size: 1rem; font-weight: 500; line-height: 1.4; }

/* Contraste: los grises claros se oscurecen (y en oscuro se aclaran). */
html.letra-grande:not([data-tema="oscuro"]) {
  --ink-2: #26332e;
  --ink-mudo: #45534d;
}
html.letra-grande[data-tema="oscuro"] { --ink-2: #dfe9e5; --ink-mudo: #c2d0ca; }
@media (prefers-color-scheme: dark) {
  html.letra-grande:not([data-tema="claro"]) { --ink-2: #dfe9e5; --ink-mudo: #c2d0ca; }
}
html.letra-grande .mudo,
html.letra-grande .chico { font-weight: 600; }
/* Lo «chico» no baja de 0.9 de la letra grande (antes .82). */
html.letra-grande .chico { font-size: .9rem; }
html.letra-grande h1, html.letra-grande h2, html.letra-grande h3 { font-weight: 800; }
html.letra-grande label, html.letra-grande th { font-weight: 700; }

/* Botones y campos: más altos y más negritos, fáciles de atinar. */
html.letra-grande button.btn {
  min-height: 56px; padding: .6rem 1.1rem; font-weight: 800; border-width: 2px;
}
html.letra-grande button.btn.chico { min-height: 48px; }
html.letra-grande input,
html.letra-grande select,
html.letra-grande textarea { min-height: 56px; font-size: 1rem; font-weight: 600; border-width: 2px; }
html.letra-grande input[type="checkbox"],
html.letra-grande input[type="radio"] { min-height: 0; width: 1.4rem; height: 1.4rem; }
html.letra-grande .op-acciones .btn { min-height: 72px; font-size: 1.15rem; min-width: 0; }

/* Hoja de la estación (Cargador Frontal; de noche también Minerales y
   Melazador): la lista de lo que hay que echar. Los KILOS mandan. */
html.letra-grande .op-ingredientes th { font-size: .8rem; }
html.letra-grande .op-ingredientes td { font-size: 1.05rem; font-weight: 600; padding: .65rem .5rem; }
html.letra-grande .op-ingredientes td.kilos { font-size: 1.3rem; font-weight: 900; }
html.letra-grande .op-ingredientes td.palomita { width: 1.6rem; padding-left: .2rem; padding-right: .2rem; }
html.letra-grande .seccion-titulo { font-size: .8rem; color: var(--ink-2); }
html.letra-grande .marca-ayuda { font-size: .95rem; font-weight: 600; }
html.letra-grande .marca-ayuda b { white-space: nowrap; }
html.letra-grande .hora-limite { font-size: 1rem; font-weight: 700; }

/* Bitácora de la mañana: puntos y botones Bueno/Malo grandes. */
html.letra-grande .bit-norma { font-size: .9rem; }
html.letra-grande .bit-punto { font-size: 1rem; font-weight: 700; }
html.letra-grande .bit-botones { gap: .5rem; }
html.letra-grande .bit-op { min-height: 52px; min-width: 5.2rem; padding: .4rem .9rem; font-size: 1rem; font-weight: 800;
  border-width: 2px; color: var(--ink); }
html.letra-grande .bit-corr input { font-size: 1rem; }

/* «Cerrar turno» flota abajo. Con letra grande va SÓLIDO (antes se
   transparentaba y se leía encima del texto) y la hoja deja hueco abajo
   para que lo último se pueda subir por encima del botón. */
html.letra-grande button.btn.cerrar-area-flot {
  background: var(--superficie); border: 2px solid var(--ink-2); color: var(--ink);
  font-size: 1rem; font-weight: 800; min-height: 56px; box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
}
html.letra-grande main#vista { padding-bottom: 6.5rem; }

/* La ventana de avisos (Quién está hoy, bitácora, cerrar…) ocupa casi todo
   el ancho del teléfono y se deja leer sin hacerla más angosta. */
html.letra-grande .modal { padding: .4rem; }
html.letra-grande .modal-caja { width: 100%; max-width: 760px; max-height: 94vh; }
html.letra-grande .modal-pie { flex-wrap: wrap; gap: .6rem; }
html.letra-grande .modal-pie .btn { flex: 1 1 auto; }

/* Barra de arriba: que quepa con la letra grande (no se sale de lado). */
html.letra-grande #barra { gap: .35rem; flex-wrap: nowrap; min-width: 0; }
html.letra-grande #barra .icono { flex: none; min-width: 44px; min-height: 44px; font-size: 1.05rem; }
html.letra-grande #barra .marca-img { height: 1.5rem; width: auto; }
html.letra-grande #barra .reloj-barra { display: none; }
html.letra-grande #barra .btn-modulos { flex: none; font-size: .75rem; }
html.letra-grande #barra #usuarioBarra { flex: 0 1 auto; min-width: 0; max-width: 11rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; }

/* Botón «A+» (solo lo ven los de estación; app.js lo esconde a los demás). */
.btn-letra { font-weight: 900; letter-spacing: -.02em; font-family: inherit; }
.btn-letra span { font-size: .75em; vertical-align: super; }
/* En el teléfono, a los de estación que traen el «A+» con letra normal se
   les quita el logo de la barra para que el botón quepa sin empujar nada. */
@media (max-width: 560px) {
  #barra:has(#btnLetra:not([hidden])) .marca { display: none; }
}
html.letra-grande .btn-letra { background: rgba(255, 255, 255, .22); outline: 2px solid rgba(255, 255, 255, .7); }

/* Teléfono: menos relleno a los lados para que el texto grande quepa. */
@media (max-width: 600px) {
  html.letra-grande main#vista { padding: .7rem .55rem 6.5rem; }
  html.letra-grande .card,
  html.letra-grande .tarjeta { padding-left: .8rem; padding-right: .8rem; }
  html.letra-grande .modal-caja { padding: .9rem .85rem; }
  /* La columna «Total» (acumulado) es de consulta; en el teléfono se quita
     para que los KILOS quepan completos sin barrer de lado. */
  html.letra-grande .op-ingredientes thead th:nth-child(4),
  html.letra-grande .op-ingredientes tbody td:nth-child(4),
  html.letra-grande .op-ingredientes tfoot td:nth-child(3) { display: none; }
  html.letra-grande .op-ingredientes td.kilos { font-size: 1.2rem; }
  /* Bitácora: el punto arriba y Bueno/Malo abajo, a todo lo ancho. */
  html.letra-grande .bit-fila { grid-template-columns: 1fr; }
  html.letra-grande .bit-botones .bit-op { flex: 1 1 0; }
  html.letra-grande .bit-corr { grid-template-columns: 1fr; }
  /* En el teléfono la barra se queda con lo que se usa: Cambiar módulo,
     campana, A+, tema y salir. El nombre y el logo ya salen en la hoja. */
  html.letra-grande #barra { gap: .15rem; padding-left: calc(.5rem + env(safe-area-inset-left, 0px)); padding-right: calc(.5rem + env(safe-area-inset-right, 0px)); }
  html.letra-grande #barra .marca,
  html.letra-grande #barra #usuarioBarra { display: none; }
  html.letra-grande #barra .btn-modulos { font-size: .7rem; padding: .3rem .55rem; min-height: 44px; }
  html.letra-grande #barra .icono { min-width: 40px; padding-left: 0; padding-right: 0; }
}

/* Al imprimir (bitácora, etiquetas…) sale igual que siempre. */
@media print {
  html.letra-grande { font-size: 16px; }
  html.letra-grande body { font-weight: 400; }
}

/* ── 20261028h · Vale de tarimas junto con Facturación ─────────────── */
.fac-vale-linea { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: .35rem 0 .2rem; }
.fac-vale { display: block; font-size: .9rem; line-height: 1.9; }
.fac-vale .btn { padding: .2rem .5rem; min-height: 0; vertical-align: middle; margin-left: .3rem; }
.fac-vale .chip { margin: 0 0 0 .2rem; vertical-align: middle; }
.fac-vale-va { color: var(--ink-mudo); }
.fac-vale-td { margin-top: .25rem; }
.fac-vale-td .fac-vale { display: inline; }
.vf-vale { border: 1px solid var(--linea); border-radius: 8px; padding: .4rem .7rem .6rem; margin: 0 0 .6rem; }
.vf-vale legend { padding: 0 .3rem; }
.vf-datos { font-size: .9rem; margin-bottom: .35rem; }
@media print {
  /* Varios vales de un jalón: cada uno en su hoja. */
  #hojaTarimas .vale-hoja-sig { break-before: page; page-break-before: always; }
}
/* 20261028h: la barra «← Menú de Producción» (#volverMenu, hija de <body>)
   salía impresa encima del vale, del reporte, de la bitácora y de las
   etiquetas. Al imprimir esas hojas se esconde. */
@media print {
  body.imprimiendo-tarimas > #volverMenu,
  body.imprimiendo-reporte > #volverMenu,
  body.imprimiendo-bitacora > #volverMenu,
  body.imprimiendo-etiquetas > #volverMenu { display: none !important; }
}

/* ═══ 20261028b · DIESEL (js/diesel.js) ═══════════════════════════ */
.dsl .dsl-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.6rem .8rem;align-items:end}
.dsl .dsl-rejilla .dsl-ancho{grid-column:span 2}
@media (max-width:560px){.dsl .dsl-rejilla{grid-template-columns:1fr 1fr}.dsl .dsl-rejilla .dsl-ancho{grid-column:1 / -1}}
.dsl .dsl-rejilla .check{grid-column:1 / -1}
.dsl .dsl-rejilla > *{min-width:0}
.dsl .dsl-rejilla .campo input,.dsl .dsl-rejilla .campo select{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
.dsl .dsl-grande{font-size:1.1rem;padding:.8rem 1.4rem;min-height:52px}
.dsl .dsl-ayuda{margin:.6rem 0 .2rem;color:var(--ink-2);min-height:1.2em}
.dsl .dsl-mal{color:var(--critico);font-weight:700}
.dsl .dsl-campo-mal{border-color:var(--critico)!important;box-shadow:0 0 0 2px rgba(208,59,59,.15)}
.dsl .dsl-ok{border-left:5px solid var(--verde);background:var(--verde-suave)}
.dsl .dsl-alerta{margin-top:.4rem;padding:.45rem .6rem;border-radius:8px;background:#fff4d6;color:#6b4e00;font-weight:700}
.dsl .dsl-tanque{display:flex;gap:1rem;align-items:center}
.dsl .dsl-tanque-dib{flex:0 0 54px;height:84px;border:3px solid var(--ink-2);border-radius:10px 10px 14px 14px;position:relative;overflow:hidden;background:var(--superficie-2)}
.dsl .dsl-tanque.grande .dsl-tanque-dib{flex-basis:74px;height:118px}
.dsl .dsl-tanque-nivel{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(#e9b949,#c98d12);transition:height .4s}
.dsl .dsl-tanque.bajo .dsl-tanque-nivel{background:linear-gradient(#ef8a6a,#d03b3b)}
.dsl .dsl-tanque-txt .etiqueta{font-size:.85rem;color:var(--ink-2)}
.dsl .dsl-tanque-litros{font-size:2rem;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.dsl .dsl-tanque.grande .dsl-tanque-litros{font-size:2.6rem}
.dsl .dsl-tanque-litros.neg{color:var(--critico)}
.dsl .dsl-tabla td,.dsl .dsl-tabla th{white-space:nowrap}
.dsl .dsl-tabla td small{white-space:normal}
.dsl .dsl-tabla td.dsl-envolver{white-space:normal;min-width:8rem}
.dsl .dsl-mias th,.dsl .dsl-mias td{padding-left:.4rem;padding-right:.4rem}
.dsl .dsl-mias{width:100%;table-layout:fixed}
.dsl .dsl-mias th,.dsl .dsl-mias td{white-space:normal;overflow-wrap:anywhere}
.dsl .dsl-mias th:nth-child(1){width:30%}.dsl .dsl-mias th:nth-child(3){width:26%}
.dsl .dsl-mias td.dsl-envolver{min-width:0}
.dsl .dsl-tabla tfoot td{border-top:2px solid var(--linea)}
.dsl tr.dsl-cancelada td{text-decoration:line-through;color:var(--ink-mudo)}
.dsl tr.dsl-cancelada td small,.dsl tr.dsl-cancelada td .btn{text-decoration:none}
.dsl tr.dsl-fuera td:first-child{box-shadow:inset 4px 0 0 var(--alerta)}
.dsl .dsl-chip-mal{background:#fde8e8;color:#8a1c1c}
.dsl .dsl-col-barra{width:40%;min-width:120px}
.dsl .dsl-barra{display:inline-block;height:12px;border-radius:6px;background:var(--azul);vertical-align:middle;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.dsl .dsl-checks{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;margin:.2rem 0 .8rem}
.dsl .dsl-flujo{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.7rem;margin:0 0 1rem}
.dsl .dsl-paso{display:flex;gap:.6rem;align-items:flex-start;background:var(--superficie);border:1px solid var(--linea);border-radius:12px;padding:.7rem .8rem}
.dsl .dsl-paso p{margin:.2rem 0 0}
.dsl .dsl-paso-n{flex:0 0 2rem;height:2rem;border-radius:50%;background:var(--verde);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
.dsl .dsl-veredicto{margin-top:.9rem;border-radius:12px;padding:.8rem 1rem;border:2px solid}
.dsl .dsl-veredicto.si{border-color:var(--verde);background:var(--verde-suave)}
.dsl .dsl-veredicto.no{border-color:var(--critico);background:#fff5f5}
.dsl .dsl-veredicto-tit{font-size:1.4rem;font-weight:800;margin-bottom:.2rem}
.dsl .dsl-veredicto ul{margin:.4rem 0 0;padding-left:1.1rem}
.dsl .dsl-estado-enlace p{margin:.3rem 0 0}
.dsl .dsl-solo-imprimir{display:none}
.dsl code{font-size:.85em;word-break:break-all}
@media print{
  body.imprimiendo-diesel *{visibility:hidden}
  body.imprimiendo-diesel .dsl-reporte,body.imprimiendo-diesel .dsl-reporte *{visibility:visible}
  body.imprimiendo-diesel .dsl-reporte{position:absolute;left:0;top:0;width:100%}
  body.imprimiendo-diesel .dsl-solo-imprimir{display:block}
  body.imprimiendo-diesel .dsl-solo-imprimir h1{font-size:16pt;margin:0 0 2pt}
  body.imprimiendo-diesel .tabla-scroll{overflow:visible}
  body.imprimiendo-diesel .tarjeta{break-inside:avoid-page;box-shadow:none;border:1px solid #ccc}
  body.imprimiendo-diesel .dsl-tabla tr{break-inside:avoid}
  body.imprimiendo-diesel .no-imprimir{display:none!important}
}

/* ── 20261101a: GPS, mandar documentos, CRM en la ruta (lo demás va en cada js) ── */
.crm-tabs .btn{flex:1 1 150px;min-height:44px}
.crm-visita input,.crm-visita select,.crm-visita textarea{font-size:16px}
.crm-res{max-height:340px;overflow:auto}
.crm-cli{width:100%;text-align:left;cursor:pointer;font:inherit}
.crm-cli:hover{border-color:#d9822b}
.crm-ubic a{font-weight:600}
.btn.wa{background:#1fa855;color:#fff;border-color:#1a8f48}
@media (max-width:640px){.crm-visita .mx-form{grid-template-columns:1fr}.crm-visita button[type=submit]{width:100%;min-height:48px}}

/* ══ 20261101b (33a): PANEL PRINCIPAL POR SECCIONES ══════════════════════════════════════ */
.modulo-carta.modulo-seccion .modulo-desc { display: block; }
.modulo-carta.modulo-seccion .modulo-miembros { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.modulo-carta.modulo-seccion .modulo-miembros span { font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.06); color: inherit; white-space: nowrap; }
.modulos-seccion-cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 0 auto 12px; max-width: 1180px; }
.modulos-seccion-cab h2 { margin: 0; font-size: 1.15rem; letter-spacing: .04em; }
.modulos-modo { text-align: center; margin: 6px 0 0; }
.modulos-modo .btn { font-size: .82rem; }

/* ══ 20261101c (33b) · ORDEN Y AYUDA ═══════════════════════════════════════════════════════
   Barra de arriba igual en todas las pantallas: [← Menú de X]  Sección › Módulo › Hoja  ……  [📘 Guía rápida] [❓ Ayuda]
   Colores de botones (los mismos de siempre, ahora en todos lados):
     azul  .primario   = guardar, confirmar, seguir (uno por pantalla)
     verde .accion     = las acciones grandes de planta (iniciar, terminar, descargar)
     borde .secundario = otras acciones (imprimir, ver, guía)
     rojo  .peligro    = borrar, quitar, anular, rechazar (lo pone solo el sistema si el botón dice eso)
   ------------------------------------------------------------------------------------- */
button.btn.secundario { background: var(--superficie); color: var(--azul); border-color: color-mix(in srgb, var(--azul) 55%, transparent); }
button.btn.secundario:hover { background: color-mix(in srgb, var(--azul) 10%, var(--superficie)); border-color: var(--azul); }
button.btn.peligro { color: var(--critico); border-color: color-mix(in srgb, var(--critico) 50%, transparent); background: var(--superficie); }
button.btn.peligro:hover { background: color-mix(in srgb, var(--critico) 12%, var(--superficie)); border-color: var(--critico); }

/* La barra de arriba (antes solo «← Menú de X»; ahora en todas, con dónde estás y la Ayuda) */
.volver-menu { flex-wrap: nowrap; min-height: 52px; }
.volver-menu .miga { display: flex; align-items: center; gap: .35rem; min-width: 0; flex: 0 1 auto; overflow: hidden; font-size: .88rem; color: var(--ink-mudo); }
.volver-menu .miga > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.volver-menu .miga-sec, .volver-menu .miga-mod { flex: 0 1 auto; max-width: 16rem; }
.volver-menu .miga-sep { flex: none; opacity: .6; }
.volver-menu .miga .volver-donde { color: var(--ink); font-weight: 700; flex: 0 1 auto; min-width: 3rem; }
.volver-menu .volver-esp { flex: 1 1 auto; }
.volver-menu button.volver-ayuda, .volver-menu button.volver-guia { flex: none; border-color: color-mix(in srgb, var(--azul) 55%, transparent); color: var(--azul); background: var(--superficie); }
.volver-menu button.volver-ayuda { font-weight: 800; }
.volver-menu button.volver-ayuda:hover, .volver-menu button.volver-guia:hover { border-color: var(--azul); background: color-mix(in srgb, var(--azul) 10%, var(--superficie)); }
.volver-menu button.volver-btn { flex: none; }
@media (max-width: 560px) {
  .volver-menu { gap: .4rem; padding: .35rem .6rem; }
  .volver-menu .miga-sec, .volver-menu .miga-mod, .volver-menu .miga-sep { display: none; }
  .volver-menu .volver-donde { display: inline; }
  .volver-menu.con-volver .miga { display: none; }
  .volver-menu button { padding: .35rem .75rem; font-size: .88rem; }
  .volver-menu button.volver-ayuda span, .volver-menu button.volver-guia span { display: none; }
}
@media print { .ayuda-panel, .ayuda-fondo, .ayuda-tour, .ayuda-globo, .ayuda-i, .modulos-guia { display: none !important; } }

/* Panel principal: Guía rápida */
.modulos-guia { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin: .2rem 0 1rem; }
.modulos-guia .btn { min-height: 46px; font-weight: 700; }

/* El cajón de ayuda */
.ayuda-fondo { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 90; }
.ayuda-fondo[hidden], .ayuda-panel[hidden] { display: none; }
.ayuda-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); z-index: 91; background: var(--superficie); color: var(--ink);
  box-shadow: -8px 0 30px rgba(0, 0, 0, .25); overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; }
.ayuda-cab { position: sticky; top: 0; display: flex; align-items: flex-start; gap: .6rem; padding: 1rem 1rem .7rem; background: var(--superficie); border-bottom: 1px solid var(--borde); z-index: 1; }
.ayuda-cab > div { flex: 1; min-width: 0; }
.ayuda-cab h2 { margin: .1rem 0 0; font-size: 1.3rem; line-height: 1.2; }
.ayuda-miga { color: var(--ink-mudo); font-size: .78rem; display: block; }
.ayuda-x { flex: none; min-width: 44px; min-height: 44px; font-size: 1.1rem; }
.ayuda-cuerpo { padding: .6rem 1rem 1.2rem; font-size: 1rem; line-height: 1.45; }
.ayuda-cuerpo section { margin: 0 0 1rem; }
.ayuda-cuerpo h3 { font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mudo); margin: 0 0 .35rem; }
.ayuda-cuerpo p { margin: 0; }
.ayuda-cuerpo ol, .ayuda-cuerpo ul { margin: 0; padding-left: 1.4rem; }
.ayuda-cuerpo li { margin: .25rem 0; }
.ayuda-como ol > li::marker { font-weight: 800; color: var(--azul); }
.ayuda-ojo { background: color-mix(in srgb, var(--alerta) 14%, var(--superficie)); border-left: 4px solid var(--alerta); border-radius: 10px; padding: .6rem .8rem; }
.ayuda-ojo h3 { color: color-mix(in srgb, var(--alerta) 55%, var(--ink)); }
.ayuda-quien p { font-weight: 600; }
.ayuda-campos dt { font-weight: 700; margin-top: .4rem; }
.ayuda-campos dd { margin: 0 0 .2rem; color: var(--ink-mudo); }
.ayuda-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.ayuda-pie { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: .8rem; border-top: 1px solid var(--borde); }
.ayuda-mod { border: 1px solid var(--borde); border-radius: 12px; padding: .55rem .75rem; margin: .45rem 0; }
.ayuda-mod summary { cursor: pointer; }
.ayuda-mod summary small { display: block; color: var(--ink-mudo); font-size: .82rem; }
.ayuda-mod ol { margin-top: .5rem; }
.ayuda-ojo-mini { color: color-mix(in srgb, var(--alerta) 55%, var(--ink)); font-size: .9rem; margin-top: .3rem !important; }
body.ayuda-abierta { overflow: hidden; }

/* ⓘ junto a un campo */
button.ayuda-i { display: inline-grid; place-items: center; width: 1.35em; height: 1.35em; margin-left: .3em; padding: 0; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--azul) 55%, transparent); background: var(--superficie); color: var(--azul); font-size: .85em; font-weight: 800; line-height: 1; cursor: help; vertical-align: middle; }
button.ayuda-i:hover { background: color-mix(in srgb, var(--azul) 12%, var(--superficie)); }
.ayuda-globo { position: absolute; z-index: 95; background: var(--superficie); color: var(--ink); border: 1px solid var(--azul); border-radius: 12px; padding: .7rem .8rem; box-shadow: var(--sombra); font-size: .92rem; }
.ayuda-globo[hidden] { display: none; }
.ayuda-globo p { margin: .25rem 0 .5rem; }

/* Recorrido de bienvenida: una tarjeta abajo; NO tapa la pantalla */
.ayuda-tour { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); width: min(420px, calc(100vw - 1.5rem)); z-index: 92;
  background: var(--superficie); color: var(--ink); border: 2px solid var(--azul); border-radius: 16px; padding: .9rem 1rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.ayuda-tour small { color: var(--ink-mudo); }
.ayuda-tour h3 { margin: .15rem 0 .3rem; font-size: 1.15rem; }
.ayuda-tour p { margin: 0 0 .7rem; }
.ayuda-tour-btns { display: flex; flex-wrap: wrap; gap: .4rem; }
.ayuda-resalta { outline: 3px solid var(--azul) !important; outline-offset: 3px; border-radius: 10px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--azul) 22%, transparent) !important; }

/* 20261101d (33c): el vendedor ya no ve lo del Plan del día en el pedido.
   La «Hoja del plan» la pone sola el producto (y la cambia el encargado de planta);
   el campo sigue en la página, escondido, para que se guarde igual que antes.
   Montacargas, tarimas y unidad SÍ se le quedan: son lo que necesita el cliente. */
body.rol-vendedor .p-campo-hoja,
body.rol-vendedor .p-hoja-nota { display: none !important; }

/* 20261104a (33d): foto de la caja / camión en la lista de Logística › Cajas y Camiones. */
.fl-tabla td.fl-foto-cel { white-space: nowrap; }
.fl-tabla td.fl-foto-cel .foto-celda { display: inline-flex; gap: .3rem; align-items: center; }
.fl-tabla td.fl-foto-cel .foto-mini { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; cursor: zoom-in; }
.fl-cab .fl-foto .foto-mini { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; cursor: zoom-in; }


/* ── 33n (20261105h) · Reporte de pedidos (carta horizontal) ───────── */
.rp-filtros .rp-estados{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:10px}
.rp-est-tit{font-size:.72rem;font-weight:800;letter-spacing:.06em;color:#555;margin-right:2px;flex:0 0 auto}
.rp-filtros .rp-chk, label.rp-chk{display:inline-flex!important;align-items:center;gap:6px;margin:0;padding:5px 11px;border:1px solid var(--linea,#d5ddd5);border-radius:999px;background:#f4f7f4;font-size:.85rem;line-height:1.2;white-space:nowrap;cursor:pointer;max-width:100%;width:auto;flex-direction:row}
.rp-filtros .rp-chk input[type=checkbox], label.rp-chk input[type=checkbox]{margin:0!important;position:static!important;transform:none!important;flex:0 0 auto;width:14px;height:14px;accent-color:#1d6b3a}
.rp-filtros .rp-chk span{display:inline;white-space:nowrap}
/* Ocultar filtros también al preparar impresión (clase en body, no solo @media print) */
body.imprimiendo-repped .rp-filtros,
body.imprimiendo-repped .encabezado-vista,
body.imprimiendo-repped .no-imprimir{display:none!important}
.rep-pedidos{background:#fff;border:1px solid var(--linea,#ddd);border-radius:14px;padding:14px 16px;margin-top:10px;overflow:auto}
.rp-cab{display:flex;gap:14px;align-items:center;margin-bottom:10px;border-bottom:2px solid #1d3a28;padding-bottom:8px}
.rp-cab img{height:48px;width:auto;object-fit:contain}
.rp-cab h1{margin:0;font-size:1.25rem;color:#14301c}
.rp-cab p{margin:2px 0 0;color:#555;font-size:.9rem}
.rp-meta{font-size:.85rem!important}
.rp-scroll{width:100%;overflow:auto}
.rp-tabla{width:100%;border-collapse:collapse;font-size:.78rem;table-layout:auto}
.rp-tabla th,.rp-tabla td{border:1px solid #ddd;padding:3px 5px;vertical-align:top}
.rp-tabla thead th{background:#eef3ee;text-align:left}
.rp-tabla th:nth-child(6),.rp-tabla td.rp-prods{min-width:12rem}
.rp-prods{font-size:.76rem;line-height:1.35}
.rp-lin{margin:0 0 2px}
.rp-pre{color:#555;font-variant-numeric:tabular-nums}
.rp-imp,.rp-tot-ped{font-variant-numeric:tabular-nums}
.rp-totales{width:100%;border-collapse:collapse;font-size:.82rem;margin-top:6px}
.rp-totales th,.rp-totales td{border:1px solid #ddd;padding:4px 6px}
.rp-totales thead th{background:#f4f7f4}
.rp-gran td{background:#f0f5f0}
.rp-h2{font-size:1rem;margin:12px 0 6px;color:#14301c}
.rp-pie{margin-top:10px;font-size:.78rem;color:#666}
.rp-vacio{padding:18px;color:#666}
@media print{
  @page{size:letter landscape;margin:8mm}
  body.imprimiendo-repped *{visibility:hidden}
  body.imprimiendo-repped #repPedHoja, body.imprimiendo-repped #repPedHoja *{visibility:visible}
  body.imprimiendo-repped #repPedHoja{position:absolute;left:0;top:0;width:100%;border:0;padding:0;max-width:none;border-radius:0;overflow:visible}
  body.imprimiendo-repped .rp-filtros,
  body.imprimiendo-repped .encabezado-vista,
  body.imprimiendo-repped .no-imprimir{display:none!important;visibility:hidden!important}
  body.imprimiendo-repped .rp-tabla{font-size:8.5pt}
  body.imprimiendo-repped .rp-tabla thead th, body.imprimiendo-repped .rp-totales thead th{background:#eee!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body.imprimiendo-repped .rp-scroll{overflow:visible}
}

/* ── 33o (20261105i) · Arrastrar tarimas en acomodo de caja ─── */

/* 33x · Cotizaciones → WhatsApp */
.btn.cot-wa{background:#236E45;color:#fff;border-color:#236E45;white-space:nowrap;line-height:1.25;min-height:40px}
.btn.cot-wa:hover{background:#195334;border-color:#195334}
.cot-detalle{display:grid;gap:12px}.cot-detalle h2,.cot-detalle p{margin:0}
.cot-wa-dialog textarea{width:100%;min-height:160px}.cot-wa-dialog input{width:100%;min-width:0}
.cot-wa-dialog [role=status]{font-size:.88rem;color:#3E4493}
@media(max-width:480px){.cot-wa-dialog{padding:16px;width:94vw}.cot-wa-dialog .env-pie>.btn{flex:1 1 140px}.acciones-cel .cot-wa{max-width:150px}}

.ayuda-video video{width:100%;max-height:290px;background:#111;border-radius:10px}.ayuda-video [hidden]{display:none!important}.ayuda-video{border-top:1px solid #ddd;padding-top:14px;margin:14px 0}.volver-ayuda b{display:inline-grid;place-items:center;border:2px solid currentColor;border-radius:50%;width:24px;height:24px}.ayuda-panel{overscroll-behavior:contain}

/* 33x · revisión visual: acciones compactas sin desbordamiento */
.cot-lista,.cot-lista .tabla-scroll{min-width:0;max-width:100%}
.cot-tabla{width:100%;table-layout:fixed;min-width:0}
.cot-tabla th,.cot-tabla td{padding:.45rem .35rem;white-space:normal;overflow-wrap:anywhere;font-size:.85rem}
.cot-tabla th:nth-child(1){width:6%}.cot-tabla th:nth-child(2){width:14%}
.cot-tabla th:nth-child(3){width:10%}.cot-tabla th:nth-child(4){width:24%}
.cot-tabla th:nth-child(5){width:12%}.cot-tabla th:nth-child(6){width:11%}
.cot-tabla th:nth-child(7){width:10%}.cot-tabla th:nth-child(8){width:13%}
.cot-tabla .plc-nom{flex-basis:100%;white-space:normal}
.cot-tabla .plc-cant,.cot-tabla .plc-pre,.cot-tabla .plc-imp{white-space:normal}
.cot-tabla .cot-acciones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;min-width:0;max-width:100%}
.cot-tabla .acciones-cel .btn.chico{margin:0;padding:.3rem .15rem;min-width:0;min-height:32px;justify-content:center}
.cot-tabla .cot-acciones .cot-wa{grid-column:1/-1;font-size:.8rem;white-space:nowrap;max-width:none;gap:3px}
.modal-cot-ver .modal-pie{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end;padding:.5rem .15rem .15rem;min-width:0;max-width:100%}
.modal-cot-ver .modal-pie .btn{flex:0 0 auto;white-space:nowrap;min-width:0;max-width:100%;margin:0}
@media(max-width:700px){
 .cot-lista{padding:.65rem}.cot-lista .tabla-scroll{overflow-x:visible}
 .cot-tabla,.cot-tabla tbody{display:block;width:100%}.cot-tabla thead{display:none}
 .cot-tabla tr{display:block;margin-bottom:.8rem;padding:.5rem;border:1px solid var(--borde);border-radius:10px}
 .cot-tabla td{display:block;width:auto!important;border:0;text-align:left;padding:.3rem .2rem;min-width:0}
 .cot-tabla td[data-label]::before{content:attr(data-label);display:block;font-size:.72rem;font-weight:700;color:var(--ink-2);margin-bottom:.15rem}
 .cot-tabla .cot-acciones{grid-template-columns:repeat(6,minmax(0,1fr))}
 .cot-tabla .cot-acciones .cot-wa{grid-column:span 3}
 .cot-tabla .plc .plc-r{display:flex;flex-wrap:wrap}.cot-tabla .plc .plc-nom{white-space:normal;overflow:visible}
 .cot-tabla .plc .plc-imp{margin-left:auto}
 .modal-cot-ver{padding:1rem}.modal-cot-ver .modal-pie{justify-content:stretch}
 .modal-cot-ver .modal-pie .btn{flex:1 1 auto}
}

/* 33x · dos destinos claros para WhatsApp */
.cot-wa-modos{display:flex;gap:.5rem;flex-wrap:wrap}
.cot-wa-modos .btn{flex:1 1 150px;white-space:normal;min-height:44px}
.cot-wa-modos .btn[aria-pressed=true]{outline:2px solid #236E45;outline-offset:1px}
.cot-wa-dialog [data-cot-telefono][hidden]{display:none!important}

/* 33y · aceptación del cliente: solo aviso, nunca pedido automático */
.cotpub-aceptada{font-size:.75rem;color:#236E45;font-weight:700;margin-top:.35rem;overflow-wrap:anywhere}.cotpub-aceptada span{font-weight:400}.cotpub-aceptada strong{color:#9a4400}.cotpub-badge{border-radius:20px;padding:2px 7px;background:#236E45;color:white;font-size:.75rem}.cotpub-boton{white-space:normal;font-size:.8rem}.cot-tabla .cot-pasar{grid-column:1/-1;white-space:normal}.cotpub-preparar{background:#f3f5f9;border:1px solid #ddd;border-radius:9px;padding:10px}.cotpub-check{display:flex!important;align-items:flex-start;font-size:.88rem!important}.cotpub-check input{width:20px!important;min-height:20px!important;flex:none}.cot-wa-dialog .cotpub-preparar input{font-size:.9rem}

.cot-tabla .cot-pasar-aceptada{grid-column:1/-1;white-space:nowrap}
@media(max-width:700px){.cot-tabla .cot-pasar-aceptada{grid-column:span 3}}