/* App del patio: pantalla oscura, números y botones grandes para usar con guantes.
   Con el botón «Modo sol» de la barra pasa a fondo blanco y letra negra (ver el final de este archivo). */

:root {
  --bg: #0b0f14;
  --panel: #151b23;
  --panel-2: #1d2531;
  --borde: #2d3949;
  --texto: #f3f6f9;
  --texto-2: #b3bfcc;
  --texto-3: #8592a2;
  --fondo: #1e6fd9;
  --fondo-claro: #6fa8f5;
  --fondo-osc: #0d2f5e;
  --frente: #f07d16;
  --frente-claro: #ffae5c;
  --frente-osc: #5c2c02;
  --ok: #34c77b;
  --aviso: #f5b82e;
  --error: #ff5d55;
  --toque: 60px;
  --radio: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  font-size: 18px;
  line-height: 1.3;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

h1 { font-size: 30px; margin: 8px 0 12px; line-height: 1.15; }
h2 { font-size: 24px; margin: 8px 0; }
h3 { font-size: 21px; margin: 0; }
p { margin: 6px 0; }
b { font-weight: 700; }
[hidden] { display: none !important; }

.cargando { padding: 24px; color: var(--texto-2); }

/* ---- botones ---- */

.btn {
  appearance: none;
  min-height: var(--toque);
  padding: 12px 20px;
  border-radius: 12px;
  border: 2px solid var(--borde);
  background: var(--panel-2);
  color: var(--texto);
  font: inherit;
  font-size: 20px;
  font-weight: 650;
  line-height: 1.15;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  touch-action: manipulation;
}
.btn small { font-size: 15px; font-weight: 500; color: var(--texto-2); }
.btn:active:not(:disabled) { transform: translateY(1px); filter: brightness(1.2); }
.btn:disabled { opacity: 0.38; cursor: default; }
.btn:focus { outline: none; }
.btn:focus-visible { outline: 3px solid var(--fondo-claro); outline-offset: 2px; }
.btn.primario { background: var(--texto); color: var(--bg); border-color: var(--texto); }
.btn.primario small { color: #3b4654; }
.btn.secundario { background: transparent; }
.btn.peligro { background: #3a1513; border-color: var(--error); color: #ffd0cc; }
.btn.btn-frente { background: var(--frente); border-color: var(--frente); color: #1a0d00; }
.btn.grande { min-height: 72px; font-size: 22px; }
.btn.enorme { width: 100%; min-height: 88px; font-size: 28px; margin: 8px 0 16px; }

/* ---- barra de arriba ---- */

.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 14px;
  padding: 8px 16px;
  padding-top: max(8px, env(safe-area-inset-top));
  background: var(--panel);
  border-bottom: 1px solid var(--borde);
  font-size: 16px;
}
.barra-izq, .barra-der { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.barra-app { font-weight: 800; letter-spacing: 0.02em; }
.barra-equipo { color: var(--texto-2); }
.barra-dato { color: var(--texto-2); white-space: nowrap; }
.barra-dato.pend { color: var(--aviso); font-weight: 700; }
.barra-dato.viejo { color: var(--aviso); }
.barra-red { white-space: nowrap; font-weight: 700; color: var(--texto-2); }
.barra-red::before { content: "●"; margin-right: 4px; }
.barra-red.ok { color: var(--ok); }
.barra-red.mal { color: var(--aviso); }
.barra-red.error { color: var(--error); }
.barra-version { color: var(--texto-3); font-size: 14px; }
.barra-tema {
  appearance: none; font: inherit; font-weight: 700; white-space: nowrap; cursor: pointer;
  min-height: 40px; padding: 4px 12px; border-radius: 999px;
  border: 2px solid var(--borde); background: var(--panel-2); color: var(--texto);
}
.barra-tema:active { filter: brightness(1.2); }
body[data-etapa="fondo"] .barra { background: var(--fondo-osc); border-bottom-color: var(--fondo); }
body[data-etapa="frente"] .barra { background: var(--frente-osc); border-bottom-color: var(--frente); }

.banda { padding: 10px 16px; font-weight: 700; font-size: 18px; }
.banda-lista { background: var(--ok); color: #04170c; }
.banda-espera { background: var(--panel-2); color: var(--texto-2); font-weight: 500; }

/* ---- pantallas ---- */

.pantalla { flex: 1; min-height: 0; padding: 16px; width: 100%; max-width: 1400px; margin: 0 auto; }
body[data-pantalla="carga"] .pantalla { padding: 0; max-width: none; }

.chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  background: var(--panel-2);
  color: var(--texto-2);
  white-space: nowrap;
}
.chip-fondo { background: var(--fondo); color: #fff; }
.chip-frente { background: var(--frente); color: #1a0d00; }
.chip-carga { background: #12351f; color: var(--ok); }
.chip-pausa { background: #3d300b; color: var(--aviso); }
.chip-cerrado { background: var(--panel-2); color: var(--texto-2); }
.chip-aviso { background: #3d300b; color: var(--aviso); }
.chip-error { background: #3a1513; color: #ff9a93; }
.chip-pend { background: transparent; color: var(--aviso); border: 1px solid #6b5313; }
.chip-copia { background: #4a2a5c; color: #f0c8ff; }

.ayuda { color: var(--texto-2); font-size: 17px; }
.vacio { color: var(--texto-3); padding: 12px 0; }
.chico { font-size: 15px; color: var(--texto-2); }

.caja { border-radius: var(--radio); padding: 14px 16px; margin: 0 0 14px; border: 2px solid var(--borde); background: var(--panel); }
.caja-error { border-color: var(--error); background: #2a1210; }
.caja-error ul { margin: 6px 0 12px; padding-left: 22px; }
.caja-aviso { border-color: var(--aviso); background: #2a220c; }

.titulo-seccion { margin: 18px 0 10px; color: var(--texto-2); font-size: 20px; text-transform: uppercase; letter-spacing: 0.04em; }

.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 12px; }
.tarjeta {
  appearance: none;
  font: inherit;
  color: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 110px;
  padding: 14px 16px;
  border-radius: var(--radio);
  border: 2px solid var(--borde);
  background: var(--panel);
  position: relative;
  min-width: 0;
}
button.tarjeta { cursor: pointer; }
button.tarjeta:active { filter: brightness(1.25); }
.tarjeta-abierta.etapa-fondo { border-left: 10px solid var(--fondo); }
.tarjeta-abierta.etapa-frente { border-left: 10px solid var(--frente); }
.tarjeta-cerrada { opacity: 0.92; }
.tarjeta-numero { font-size: 28px; font-weight: 800; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tarjeta-linea { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; color: var(--texto-2); }
.tarjeta-datos { font-size: 19px; }
.tarjeta-pie { color: var(--texto-2); font-size: 16px; }
.tarjeta-accion {
  position: absolute; right: 14px; top: 14px;
  font-weight: 800; font-size: 18px; color: var(--bg); background: var(--texto);
  padding: 8px 14px; border-radius: 10px;
}

.pie-inicio { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--borde); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pie-inicio .ayuda { flex-basis: 100%; }

.centro { max-width: 760px; margin: 0 auto; padding-top: 12px; }
.grilla-botones { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; margin: 16px 0; }

.paso { max-width: 1000px; margin: 0 auto; }
.paso-n { color: var(--texto-2); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 15px; }
.botonera { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.botonera .btn { flex: 1 1 200px; }

.numero-grande { font-size: clamp(32px, 8vw, 54px); font-weight: 800; letter-spacing: 0.05em; font-variant-numeric: tabular-nums; margin: 6px 0; overflow-wrap: anywhere; }

.miniatura { display: block; max-width: 100%; max-height: 220px; border-radius: 10px; border: 2px solid var(--borde); margin: 10px 0; object-fit: contain; background: #000; }
.miniatura.grande { max-height: 320px; }

/* ---- visor y teclado ---- */

.visor {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
  padding: 14px 8px;
  margin: 8px 0;
  border-radius: var(--radio);
  background: #000;
  border: 2px solid var(--borde);
  min-height: 84px;
  font-variant-numeric: tabular-nums;
}
.visor .celda {
  width: 1.05em;
  text-align: center;
  border-bottom: 4px solid var(--borde);
  font-weight: 800;
  line-height: 1.2;
  min-height: 1.3em;
}
.visor .celda.llena { border-bottom-color: var(--texto-2); }
.visor .celda.corte { margin-right: 0.35em; }
.visor-contenedor { font-size: clamp(26px, 6.4vw, 56px); }
.visor-serie { font-size: clamp(40px, 10vw, 64px); }
.visor-serie .prefijo { color: var(--texto-2); font-weight: 800; margin-right: 0.15em; }
.visor-texto { font-size: clamp(30px, 7vw, 48px); font-weight: 800; justify-content: flex-start; padding-left: 16px; overflow: hidden; }
.visor .cursor { display: inline-block; width: 4px; height: 1em; background: var(--texto-2); margin-left: 4px; animation: parpadeo 1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }

.validacion { min-height: 1.4em; font-size: 20px; font-weight: 700; color: var(--texto-2); text-align: center; }
.validacion.mal { color: var(--error); }
.validacion.bien { color: var(--ok); }

.teclado { display: grid; gap: 8px; margin-top: 8px; }
.teclado-num { grid-template-columns: repeat(3, 1fr); max-width: 560px; margin-left: auto; margin-right: auto; }
.teclado-abc { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); }
.teclado-ujz { grid-template-columns: repeat(3, 1fr); max-width: 560px; margin-left: auto; margin-right: auto; }
.teclado-pie { display: flex; gap: 8px; margin-top: 8px; }
.teclado-pie .tecla { flex: 1; font-size: 20px; }
.tecla {
  appearance: none;
  min-height: 66px;
  border-radius: 12px;
  border: 2px solid var(--borde);
  background: var(--panel-2);
  color: var(--texto);
  font: inherit;
  font-size: 30px;
  font-weight: 750;
  cursor: pointer;
  touch-action: manipulation;
}
.teclado-ujz .tecla { min-height: 96px; font-size: 44px; }
.teclado-num .tecla { min-height: 72px; font-size: 34px; }
.tecla:active:not(:disabled) { background: var(--borde); }
.tecla:disabled { opacity: 0.3; }
.tecla:focus { outline: none; }
.tecla-borrar, .tecla-modo { font-size: 22px; background: var(--panel); }

/* ---- capas: diálogos, teclados, cámara ---- */

.capa {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: auto;
}
.dialogo, .hoja {
  width: 100%;
  max-width: 680px;
  max-height: 100%;
  overflow: auto;
  background: var(--panel);
  border: 2px solid var(--borde);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.hoja { max-width: 900px; }
.dialogo.peligro { border-color: var(--error); border-width: 4px; }
.dialogo h2, .hoja h2 { font-size: 26px; margin-top: 0; }
.dialogo-texto { font-size: 20px; color: var(--texto-2); }
.dialogo-texto.chico { font-size: 17px; }
.dialogo-botones { display: grid; gap: 10px; margin-top: 16px; }
.dialogo-botones .btn { width: 100%; min-height: 68px; font-size: 22px; }
@media (min-width: 640px) {
  .dialogo-botones.columnas { grid-template-columns: 1fr 1fr; }
  .dialogo-botones:not(.columnas):has(> :nth-child(2):last-child) { grid-template-columns: 1fr 1fr; }
}
.hoja-botones { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.hoja-botones .btn { flex: 1 1 160px; min-height: 68px; font-size: 22px; }

.capa-camara { padding: 0; background: #000; }
.camara { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; }
.camara video { flex: 1; width: 100%; min-height: 0; object-fit: cover; background: #000; }
.camara-marco { position: absolute; left: 10%; right: 10%; top: 35%; height: 22%; border: 4px solid var(--ok); border-radius: 12px; pointer-events: none; }
.camara-ayuda { position: absolute; top: 12px; left: 0; right: 0; text-align: center; font-size: 22px; font-weight: 700; text-shadow: 0 2px 6px #000; }
.camara-botones { padding: 12px 16px 16px; background: var(--panel); margin: 0; }
.camara-ayuda.ultimo { left: 16px; right: 16px; margin: 0; min-height: 0; text-align: left; text-shadow: none; font-weight: normal; }

.avisos { position: fixed; left: 16px; right: 16px; top: max(6px, env(safe-area-inset-top)); z-index: 200; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.aviso {
  max-width: 720px;
  padding: 14px 20px;
  border-radius: 12px;
  background: var(--panel-2);
  border: 2px solid var(--borde);
  font-size: 19px;
  font-weight: 650;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s, transform 0.3s;
}
.aviso-ok { border-color: var(--ok); }
.aviso-error { border-color: var(--error); background: #2a1210; }
.aviso.saliendo { opacity: 0; transform: translateY(-10px); }
/* En la pantalla de carga, abajo: arriba están el número y el selector Fondo / Frente. */
body[data-pantalla="carga"] .avisos { top: auto; bottom: 16px; }

/* ---- pantalla de carga ---- */

.carga { display: flex; flex-direction: column; }
.cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 10px 16px 14px;
  background: var(--fondo);
  color: #fff;
}
body[data-etapa="frente"] .cab { background: var(--frente); color: #1a0d00; }
.cab-izq { min-width: 0; }
.cab-numero { font-size: clamp(34px, 8.4vw, 60px); font-weight: 850; letter-spacing: 0.04em; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cab-info { font-size: 18px; opacity: 0.95; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.selector-etapa { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1 1 380px; max-width: 760px; }
.etapa-btn {
  appearance: none;
  min-height: 76px;
  padding: 8px 16px;
  border-radius: 14px;
  font: inherit;
  font-size: 28px;
  font-weight: 850;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.55);
  border: 4px solid transparent;
  touch-action: manipulation;
}
.etapa-btn:focus { outline: none; }
.etapa-btn-fondo { color: var(--fondo-claro); border-color: var(--fondo-claro); }
.etapa-btn-frente { color: var(--frente-claro); border-color: var(--frente-claro); }
.etapa-btn.activo { box-shadow: 0 0 0 4px #fff; }
.etapa-btn-fondo.activo { background: var(--fondo); color: #fff; border-color: #fff; }
.etapa-btn-frente.activo { background: var(--frente); color: #1a0d00; border-color: #1a0d00; }
.etapa-btn.activo::before { content: "✓ "; }

.carga-cuerpo { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px 24px; }
.col-principal, .col-lista { min-width: 0; }

.numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.num-total-fila { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; }
.num-bloque {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: var(--radio);
  background: var(--panel);
  border: 3px solid var(--borde);
  min-width: 0;
}
.num-fondo { border-top: 8px solid var(--fondo); }
.num-frente { border-top: 8px solid var(--frente); }
.num-fondo.activo { border-color: var(--fondo); border-top-width: 8px; }
.num-frente.activo { border-color: var(--frente); border-top-width: 8px; }
.num-total { grid-column: 1 / -1; }
.col-botones { margin-top: 2px; }
.num-et { color: var(--texto-2); font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.num-et b { color: var(--texto); font-size: 22px; }
.num-kg { font-size: clamp(28px, 7vw, 36px); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.num-m3 { font-size: clamp(20px, 5vw, 24px); font-weight: 750; color: var(--texto-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.num-m3 small { font-size: 15px; font-weight: 600; }
.num-total-m3 { display: block; }
.num-total-kg { font-size: clamp(44px, 11vw, 60px); font-weight: 850; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
.num-dif { font-size: clamp(22px, 5.5vw, 28px); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

.faltan { font-size: 21px; font-weight: 650; padding: 10px 14px; margin: 10px 0 0; border-radius: var(--radio); background: var(--panel); border-left: 8px solid var(--fondo); }
.provisorios { font-size: 18px; color: var(--aviso); margin: 8px 0 0; }
.pregunta { margin-top: 10px; padding: 12px 14px; border-radius: var(--radio); background: var(--panel-2); border: 3px solid var(--aviso); }
.pregunta p { font-size: 21px; margin: 0 0 10px; }
.pregunta-botones { display: flex; flex-wrap: wrap; gap: 10px; }
.pregunta-botones .btn { flex: 1 1 180px; }

.ultimo {
  margin-top: 12px;
  padding: 12px 16px;
  min-height: 88px;
  border-radius: var(--radio);
  background: var(--panel);
  border: 3px solid var(--borde);
  border-left-width: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.ultimo-titulo { font-size: 26px; font-weight: 800; overflow-wrap: anywhere; }
.ultimo-texto { font-size: 18px; color: var(--texto-2); }
.ultimo-ok { border-color: var(--ok); background: #0f2a1b; }
.ultimo-repetido { border-color: var(--aviso); background: #2c240c; }
.ultimo-otro, .ultimo-invalido { border-color: var(--error); background: #2c1110; }
.ultimo-desconocido { border-color: #ff9b3d; background: #2c1a0a; }
.ultimo-quitado { border-color: var(--texto-3); }
.ultimo-etapa { border-color: var(--fondo-claro); }
body[data-etapa="frente"] .ultimo-etapa { border-color: var(--frente); }
.ultimo-previo, .ultimo-vacio { border-color: var(--borde); }

.acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.acciones .btn { min-height: 72px; font-size: 21px; padding: 8px 10px; }
.acciones .btn small { font-size: 15px; color: inherit; opacity: 0.85; }
.acciones-2 { grid-template-columns: 1fr 1.4fr 1fr; }
.acciones-2 .primario { grid-column: 1 / -1; }

.lista-titulo { font-size: 20px; color: var(--texto-2); margin: 4px 0 8px; }
.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lista > li.vacio { padding: 12px; }
.fila {
  appearance: none;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr) auto auto;
  grid-template-areas: "pos serie etapa kg" "pos modo modo modo" "pos marcas marcas marcas";
  align-items: center;
  gap: 2px 10px;
  min-height: 62px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--panel);
  border: 2px solid var(--borde);
  border-left: 8px solid var(--fondo);
  cursor: pointer;
}
.fila.etapa-frente { border-left-color: var(--frente); }
.fila:active { filter: brightness(1.3); }
.fila.resaltada { border-color: var(--aviso); box-shadow: 0 0 0 3px var(--aviso); }
.fila-pos { grid-area: pos; color: var(--texto-3); font-weight: 700; font-variant-numeric: tabular-nums; }
.fila-serie { grid-area: serie; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fila .chip { grid-area: etapa; }
.fila-kg { grid-area: kg; font-size: 21px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.fila-modo { grid-area: modo; color: var(--texto-3); font-size: 15px; }
.fila-marcas { grid-area: marcas; display: flex; flex-wrap: wrap; gap: 4px; }
.fila-marcas:empty { display: none; }
.fila-marcas .chip { grid-area: auto; font-size: 14px; }
.fila-conflicto { grid-column: 2 / -1; color: #ff9a93; font-size: 15px; }

/* Tablet vertical o pantalla ancha: un poco más de aire. */
@media (min-width: 700px) {
  .acciones { grid-template-columns: repeat(4, 1fr); }
  .acciones-2 { grid-template-columns: 1fr 1.4fr 1fr 2fr; }
  .acciones-2 .primario { grid-column: auto; }
}

/* Tablet apaisada: números y botones a la izquierda, lista a la derecha, sin mover la pantalla. */
@media (min-width: 960px) and (orientation: landscape) {
  html, body { font-size: 19px; }
  body[data-pantalla="carga"] { height: 100vh; height: 100dvh; overflow: hidden; }
  body[data-pantalla="carga"] .pantalla { overflow: hidden; display: flex; flex-direction: column; }
  body[data-pantalla="carga"] .pantalla > div { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .carga { flex: 1; min-height: 0; }
  .carga-cuerpo {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 16px;
    padding-bottom: 12px;
  }
  .col-principal { display: flex; flex-direction: column; min-height: 0; }
  .col-info { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
  .col-botones { flex: none; padding-top: 2px; }
  .col-lista { overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
  .acciones { grid-template-columns: repeat(4, 1fr); }
  .acciones-2 { grid-template-columns: 1fr 1.4fr 1fr 2fr; }
  .acciones-2 .btn { min-height: 62px; }
  .acciones-2 .primario { grid-column: auto; }
  .cab { padding: 8px 16px 10px; }
  .cab-numero { font-size: 54px; }
  .etapa-btn { min-height: 70px; }
  .faltan { font-size: 19px; padding: 8px 12px; }
  .pregunta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 6px 10px; margin-top: 8px; }
  .pregunta p { margin: 0; flex: 1 1 170px; font-size: 19px; }
  .pregunta-botones { flex: 2 1 360px; flex-wrap: nowrap; }
  .pregunta-botones .btn { flex: 1 1 auto; min-height: 58px; font-size: 19px; padding: 8px 12px; }
  .faltan { margin-top: 8px; }
  .ultimo { margin-top: 8px; }
  .ultimo { min-height: 76px; padding: 8px 14px; }
  .ultimo-titulo { font-size: 24px; }
  body[data-pantalla="carga"] .avisos { left: auto; top: auto; bottom: 16px; width: 44%; align-items: stretch; }
  .num-bloque { padding: 8px 12px; }
  .num-total-kg { font-size: 52px; }
  .lista-titulo { position: sticky; top: 0; background: var(--bg); padding: 2px 0 6px; margin-top: 0; z-index: 1; }
}

/* Celular angosto. */
@media (max-width: 480px) {
  html, body { font-size: 17px; }
  .barra { font-size: 14px; padding: 6px 12px; gap: 4px 10px; }
  .barra-tema .tema-modo { display: none; }
  .barra-version { display: none; }
  .pantalla { padding: 12px; }
  h1 { font-size: 26px; }
  .cab { padding: 8px 12px 12px; }
  .selector-etapa { flex: 1 1 100%; }
  .etapa-btn { min-height: 68px; font-size: 26px; }
  .carga-cuerpo { padding: 12px 12px 20px; }
  .num-kg { font-size: 26px; }
  .num-n b { font-size: 26px; }
  .faltan { font-size: 19px; }
  .ultimo-titulo { font-size: 23px; }
  .acciones .btn { font-size: 19px; }
  .tarjeta-numero { font-size: 25px; }
  .fila-serie { font-size: 20px; }
  .dialogo, .hoja { padding: 16px; }
  .hoja-botones .btn { flex-basis: 120px; }
}

/* ---- lista de cierre ---- */

.resumen-cierre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding: 12px 16px; border-radius: var(--radio); background: var(--panel); border: 2px solid var(--borde); font-size: 21px; }
.resumen-m3 { font-size: 24px; font-weight: 750; font-variant-numeric: tabular-nums; }
.resumen-kg { font-size: 36px; font-weight: 850; font-variant-numeric: tabular-nums; }
.resumen-cierre .chico { flex-basis: 100%; }
.checklist { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.item { padding: 14px 16px; border-radius: var(--radio); background: var(--panel); border: 2px solid var(--borde); }
.item.hecho { border-color: var(--ok); }
.item.opcional:not(.hecho) { border-style: dashed; }
.item-cab h3 small { font-weight: 400; font-size: 0.8em; color: var(--texto-2); }
.item-cab { display: flex; align-items: center; gap: 12px; }
.marca { flex: none; width: 40px; height: 40px; border-radius: 10px; border: 3px solid var(--borde); display: inline-flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 900; }
.marca.ok { background: var(--ok); border-color: var(--ok); color: #04170c; }
.item-botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.item-botones .btn { flex: 1 1 220px; }
.botonera-cierre { position: sticky; bottom: 0; background: var(--bg); padding: 10px 0; margin-top: 12px; }
.botonera-cierre .btn { flex: 1 1 140px; }
@media (max-width: 480px) { .botonera-cierre .btn.grande { font-size: 20px; min-height: 68px; } }
.falta { text-align: center; }
@media (min-width: 960px) and (orientation: landscape) {
  .checklist { grid-template-columns: 1fr 1fr; }
}

/* Franja fija de la cámara: troncos y kilos a la vista mientras se escanea. */
.camara-franja { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding: max(10px, env(safe-area-inset-top)) 16px 10px; background: rgba(0, 0, 0, .82); font-size: 30px; font-weight: 800; line-height: 1.2; }
.camara-franja small { display: block; font-size: 20px; font-weight: 600; color: var(--texto-2); }
.camara-franja .fr-sacar { color: var(--aviso); }
.camara-ayuda { top: 92px; }

/* Contenedor que volvió de Saman o modo «Sacar troncos». */
.reabierto { margin-top: 10px; padding: 12px 14px; border-radius: var(--radio); background: var(--panel-2); border: 3px solid var(--aviso); }
.reabierto p { font-size: 21px; margin: 0; }
.reabierto p + p { margin-top: 6px; }
.reabierto .rb-grande { font-size: 26px; font-weight: 800; }
.sacando { margin-top: 10px; padding: 12px 14px; border-radius: var(--radio); background: var(--error); color: #1a0504; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sacando b { font-size: 26px; letter-spacing: .5px; }
.sacando span { font-size: 21px; font-weight: 700; }
.sacando .btn { background: #fff; color: #1a0504; min-height: 56px; }
.tarjeta-reabierto { display: block; margin-top: 4px; font-size: 18px; font-weight: 700; color: var(--aviso); }

.acciones-2 .retirar { border-color: #ff6b5e; color: #ffb1aa; }
.acciones-2 .retirar.activo { background: #ff6b5e; color: #1b0705; }

/* Descarte */
.descarte { display: flex; flex-direction: column; gap: 4px; }
.descarte-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.descarte-cab h1 { margin: 0; font-size: 30px; }
.descarte-motivos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.descarte-fila { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "serie deshacer" "motivo deshacer"; gap: 2px 12px; align-items: center; padding: 10px 14px; border-radius: var(--radio); background: var(--panel); border: 2px solid var(--borde); }
.descarte-fila .fila-serie { grid-area: serie; }
.descarte-fila .descarte-motivo { grid-area: motivo; color: var(--texto-2); font-size: 17px; }
.descarte-fila .btn { grid-area: deshacer; min-height: 52px; }

/* Ver o eliminar fotos del contenedor */
.lista-fotos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; max-height: 60vh; overflow-y: auto; }
.lista-fotos li { display: grid; grid-template-columns: 120px 1fr auto; gap: 12px; align-items: center; }
.lista-fotos .miniatura { margin: 0; max-height: 90px; }
.lista-fotos .btn { min-height: 56px; }

/* Casita al lado de Volver: va al inicio. */
.btn.btn-casa, .botonera .btn.btn-casa { flex: 0 0 auto; min-width: 64px; padding-left: 16px; padding-right: 16px; display: inline-flex; align-items: center; justify-content: center; }
.btn-casa svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nav-volver { display: flex; gap: 10px; }

/* ---- inicio: Cerrados, Balanza Saman y Balanza Puerto (como los botones del encargado) ---- */
.menu-inicio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; margin-top: 22px; }
.menu-boton {
  --c: var(--fondo-claro);
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left;
  min-height: 132px; padding: 18px 20px; border-radius: 20px; cursor: pointer; font-family: inherit; color: var(--texto);
  background: var(--panel);
  border: 2px solid color-mix(in srgb, var(--c) 55%, transparent);
  box-shadow: 0 0 24px -8px color-mix(in srgb, var(--c) 60%, transparent), inset 0 0 36px -20px color-mix(in srgb, var(--c) 45%, transparent);
}
.menu-boton:active { filter: brightness(1.25); }
.menu-icono { width: 44px; height: 44px; color: var(--c); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 4px; }
.menu-flecha { position: absolute; right: 18px; top: 20px; width: 26px; height: 26px; color: var(--texto-3); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.menu-titulo { font-size: 26px; font-weight: 800; line-height: 1.1; }
.menu-sub { font-size: 17px; color: var(--texto-2); }
.menu-cuenta { color: var(--c); }
.menu-boton[data-a="cerrados"] { --c: #a78bfa; }
.menu-boton[data-a="saman"] { --c: #fbbf24; }
.menu-boton[data-a="puerto"] { --c: #38bdf8; }

/* ---- Balanza Saman / Balanza Puerto ---- */
.balanza-lista { display: grid; gap: 12px; }
.balanza-fila { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: var(--radio); border: 2px solid var(--borde); background: var(--panel); }
.balanza-saman .balanza-fila:not(.pesado) { border-left: 10px solid #fbbf24; }
.balanza-puerto .balanza-fila:not(.pesado) { border-left: 10px solid #38bdf8; }
.balanza-fila.pesado { opacity: 0.9; }
.balanza-info { display: grid; gap: 4px; min-width: 0; flex: 1 1 260px; }
.balanza-wa { color: var(--ok); font-weight: 700; font-size: 16px; }
.balanza-boton { min-height: 64px; font-size: 20px; flex: 0 0 auto; min-width: 180px; }
@media (max-width: 480px) { .balanza-boton { width: 100%; } }
@media (max-width: 600px) {
  .menu-boton { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; row-gap: 2px; align-items: center; min-height: 96px; padding: 14px 52px 14px 16px; }
  .menu-icono { grid-row: 1 / 3; width: 40px; height: 40px; margin: 0; }
  .menu-titulo { font-size: 23px; }
  .menu-sub { font-size: 16px; }
  .menu-flecha { top: 50%; transform: translateY(-50%); }
}

/* ================================================================================================
   MODO SOL: fondo blanco puro, letra negra y gruesa, bordes negros y colores de estado bien
   saturados. Sin sombras ni brillos suaves, que al sol se lavan. Se activa con <html data-tema="sol">.
   ================================================================================================ */

:root[data-tema="sol"] {
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-2: #ebebeb;
  --borde: #1a1a1a;
  --texto: #000000;
  --texto-2: #262626;
  --texto-3: #4d4d4d;
  --fondo: #0a4fc7;
  --fondo-claro: #0a4fc7;
  --fondo-osc: #d3e2fb;
  --frente: #c24e00;
  --frente-claro: #a64300;
  --frente-osc: #fde0c8;
  --ok: #00783a;
  --aviso: #9a5c00;
  --error: #c4001a;
  color-scheme: light;
}
[data-tema="sol"] body { font-weight: 500; }
[data-tema="sol"] .barra { border-bottom: 3px solid #000; }
[data-tema="sol"] .barra-equipo, [data-tema="sol"] .barra-dato, [data-tema="sol"] .barra-red { font-weight: 600; }

/* Botones y teclas: borde negro, al tocar se oscurecen (no se aclaran). */
[data-tema="sol"] .btn, [data-tema="sol"] .tecla { border-color: #000; }
[data-tema="sol"] .btn.secundario { background: #fff; }
[data-tema="sol"] .btn:active:not(:disabled),
[data-tema="sol"] button.tarjeta:active,
[data-tema="sol"] .fila:active,
[data-tema="sol"] .menu-boton:active,
[data-tema="sol"] .barra-tema:active { filter: brightness(0.85); }
[data-tema="sol"] .tecla:active:not(:disabled) { background: #c8c8c8; }
[data-tema="sol"] .btn.primario { background: #000; color: #fff; border-color: #000; }
[data-tema="sol"] .btn.primario small { color: #d9d9d9; }
[data-tema="sol"] .btn.peligro { background: #fff; border-color: var(--error); color: var(--error); border-width: 3px; }
[data-tema="sol"] .btn.btn-frente { color: #fff; }
[data-tema="sol"] .btn small { color: #333; }
[data-tema="sol"] .barra-tema { background: #000; color: #fff; border-color: #000; }

/* Tarjetas y cajas: borde negro grueso. */
[data-tema="sol"] .tarjeta, [data-tema="sol"] .caja, [data-tema="sol"] .item,
[data-tema="sol"] .balanza-fila, [data-tema="sol"] .descarte-fila, [data-tema="sol"] .resumen-cierre,
[data-tema="sol"] .num-bloque, [data-tema="sol"] .ultimo, [data-tema="sol"] .fila { border-color: #000; }
[data-tema="sol"] .tarjeta-abierta.etapa-fondo { border-left-color: var(--fondo); }
[data-tema="sol"] .tarjeta-abierta.etapa-frente { border-left-color: var(--frente); }
[data-tema="sol"] .fila { border-left-color: var(--fondo); }
[data-tema="sol"] .fila.etapa-frente { border-left-color: var(--frente); }
[data-tema="sol"] .num-fondo { border-top-color: var(--fondo); }
[data-tema="sol"] .num-frente { border-top-color: var(--frente); }
[data-tema="sol"] .num-fondo.activo { border-color: var(--fondo); border-width: 4px; border-top-width: 8px; }
[data-tema="sol"] .num-frente.activo { border-color: var(--frente); border-width: 4px; border-top-width: 8px; }
[data-tema="sol"] .tarjeta-cerrada, [data-tema="sol"] .balanza-fila.pesado { opacity: 1; background: #f2f2f2; }
[data-tema="sol"] .item.hecho { border-color: var(--ok); border-width: 3px; }

/* Chips y avisos: color lleno con letra blanca, o fondo blanco con borde de color. */
[data-tema="sol"] .chip { background: #e6e6e6; color: #000; }
[data-tema="sol"] .chip-fondo { background: var(--fondo); color: #fff; }
[data-tema="sol"] .chip-frente { background: var(--frente); color: #fff; }
[data-tema="sol"] .chip-carga { background: var(--ok); color: #fff; }
[data-tema="sol"] .chip-pausa, [data-tema="sol"] .chip-aviso { background: #ffd23f; color: #000; }
[data-tema="sol"] .chip-error { background: var(--error); color: #fff; }
[data-tema="sol"] .chip-pend { background: #fff; color: #000; border: 2px solid var(--aviso); }
[data-tema="sol"] .chip-copia { background: #5b2a86; color: #fff; }
[data-tema="sol"] .caja-error, [data-tema="sol"] .aviso-error { background: #ffe5e8; border-color: var(--error); }
[data-tema="sol"] .caja-aviso { background: #fff3cf; border-color: var(--aviso); }
[data-tema="sol"] .banda-lista { background: var(--ok); color: #fff; }
[data-tema="sol"] .banda-espera { background: #ebebeb; color: #000; }
[data-tema="sol"] .marca.ok { color: #fff; }
[data-tema="sol"] .fila-conflicto { color: var(--error); font-weight: 700; }
[data-tema="sol"] .provisorios, [data-tema="sol"] .tarjeta-reabierto { color: var(--aviso); font-weight: 700; }

/* Último tronco leído: fondo de color clarito y borde fuerte. */
[data-tema="sol"] .ultimo-ok { border-color: var(--ok); background: #dcf5e6; }
[data-tema="sol"] .ultimo-repetido { border-color: #c98a00; background: #fff3cf; }
[data-tema="sol"] .ultimo-otro, [data-tema="sol"] .ultimo-invalido { border-color: var(--error); background: #ffe5e8; }
[data-tema="sol"] .ultimo-desconocido { border-color: #d45f00; background: #ffe8d4; }
[data-tema="sol"] .ultimo-quitado { border-color: #666; }
[data-tema="sol"] .ultimo-etapa { border-color: var(--fondo); }
[data-tema="sol"] .ultimo-previo, [data-tema="sol"] .ultimo-vacio { border-color: #000; }

/* Pantalla de carga: la franja de arriba sigue en azul o naranja, con letra blanca. */
[data-tema="sol"] .cab { color: #fff; }
[data-tema="sol"] body[data-etapa="frente"] .cab { color: #fff; }
[data-tema="sol"] .etapa-btn { background: #fff; border-color: #fff; }
[data-tema="sol"] .etapa-btn-fondo { color: var(--fondo); }
[data-tema="sol"] .etapa-btn-frente { color: var(--frente); }
[data-tema="sol"] .etapa-btn.activo { box-shadow: 0 0 0 4px #000; }
[data-tema="sol"] .etapa-btn-fondo.activo { background: #000; color: #fff; border-color: #fff; }
[data-tema="sol"] .etapa-btn-frente.activo { background: #000; color: #fff; border-color: #fff; }
[data-tema="sol"] .faltan { border: 2px solid #000; border-left: 8px solid var(--fondo); }
[data-tema="sol"] .pregunta, [data-tema="sol"] .reabierto { background: #fff3cf; border-color: var(--aviso); }
[data-tema="sol"] .sacando { color: #fff; }
[data-tema="sol"] .sacando .btn { background: #fff; color: #000; border-color: #000; }
[data-tema="sol"] .acciones-2 .retirar { border-color: var(--error); color: var(--error); }
[data-tema="sol"] .acciones-2 .retirar.activo { background: var(--error); color: #fff; }
[data-tema="sol"] .fila.resaltada { border-color: var(--aviso); box-shadow: 0 0 0 3px var(--aviso); }

/* Visor de lo que se tipea: blanco con letra negra. */
[data-tema="sol"] .visor { background: #fff; border-color: #000; border-width: 3px; }
[data-tema="sol"] .visor .celda { border-bottom-color: #bbb; }
[data-tema="sol"] .visor .celda.llena { border-bottom-color: #000; }
[data-tema="sol"] .miniatura { background: #eee; border-color: #000; }

/* Diálogos: sin sombra, borde negro grueso. */
[data-tema="sol"] .capa { background: rgba(0, 0, 0, 0.6); }
[data-tema="sol"] .dialogo, [data-tema="sol"] .hoja { box-shadow: none; border: 3px solid #000; }
[data-tema="sol"] .dialogo.peligro { border-color: var(--error); border-width: 5px; }
[data-tema="sol"] .aviso { box-shadow: none; border-width: 3px; border-color: #000; background: #fff; }
[data-tema="sol"] .aviso-ok { border-color: var(--ok); background: #dcf5e6; }

/* La cámara sigue oscura (es video): la letra encima va en blanco. */
[data-tema="sol"] .camara-franja, [data-tema="sol"] .camara-ayuda:not(.ultimo) { color: #fff; }
[data-tema="sol"] .camara-franja small { color: #ddd; }
[data-tema="sol"] .camara-franja .fr-sacar { color: #ffd23f; }

/* Botones del inicio (Cerrados, Saman, Puerto): sin brillo, borde de color lleno. */
[data-tema="sol"] .menu-boton { box-shadow: none; border: 3px solid var(--c); border-left-width: 12px; background: #fff; }
[data-tema="sol"] .menu-boton[data-a="cerrados"] { --c: #6a3fd4; }
[data-tema="sol"] .menu-boton[data-a="saman"] { --c: #b27600; }
[data-tema="sol"] .menu-boton[data-a="puerto"] { --c: #0369a8; }
[data-tema="sol"] .menu-flecha { color: #000; }
[data-tema="sol"] .balanza-saman .balanza-fila:not(.pesado) { border-left-color: #b27600; }
[data-tema="sol"] .balanza-puerto .balanza-fila:not(.pesado) { border-left-color: #0369a8; }