/* Agrap Scan — formato visual de AGRAP: azul profundo sobre crema, Outfit local.
   Alto contraste para bodega, tipografía grande, sin animaciones decorativas. */

@font-face { font-family: 'Outfit'; font-weight: 400; font-display: swap; src: url('../fuentes/outfit-400.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 600; font-display: swap; src: url('../fuentes/outfit-600.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 700; font-display: swap; src: url('../fuentes/outfit-700.woff2') format('woff2'); }

:root {
  --azul: #003b5c;
  --azul-vivo: #00507d;
  --azul-profundo: #00283f;
  --azul-lobby: #153a5a;
  --crema: #f9f9f7;
  --blanco: #ffffff;
  --tinta: #10202b;
  --gris: #5b6770;
  --linea: #d9dcd6;
  --verde: #007a33;
  --verde-fondo: #e3f3e9;
  --amarillo: #fdb913;
  --amarillo-fondo: #fff4d6;
  --rojo: #d92d20;
  --rojo-fondo: #fde8e6;
  --radio: 16px;
  --sombra: 0 1px 2px rgba(0, 40, 63, .06), 0 4px 16px rgba(0, 40, 63, .06);
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
  --seguro-arriba: env(safe-area-inset-top, 0px);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--crema); color: var(--tinta);
  font-family: 'Outfit', -apple-system, system-ui, sans-serif; font-size: 18px; line-height: 1.35;
  padding-bottom: calc(76px + var(--seguro-abajo));
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4 { font-weight: 600; margin: 0 0 .5em; line-height: 1.15; }
h2 { font-size: 1.3rem; color: var(--azul); }
h3 { font-size: 1.05rem; }
h4 { font-size: .95rem; color: var(--gris); margin-top: 1em; }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
small { color: var(--gris); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 52px; padding: .6em 1.1em; border-radius: 12px; border: 2px solid transparent;
  font-weight: 600; cursor: pointer; touch-action: manipulation; text-align: center;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primario { background: var(--azul); color: var(--blanco); }
.btn.primario:active { background: var(--azul-profundo); }
.btn.secundario { background: var(--blanco); color: var(--azul); border-color: var(--azul); }
.btn.oscuro { background: var(--azul-profundo); color: var(--blanco); }
.btn.peligro { background: var(--rojo); color: var(--blanco); }
.btn.btn-claro { background: rgba(255,255,255,.12); color: var(--crema); border-color: rgba(255,255,255,.35); }
.btn.mini { min-height: 40px; padding: .3em .7em; font-size: .9rem; background: var(--blanco); border-color: var(--linea); color: var(--azul); }
.btn-grande { min-height: 64px; font-size: 1.1rem; }
.btn:focus-visible, .tecla:focus-visible, .lobby-finca:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px;
  background: var(--azul-profundo); color: var(--blanco);
  padding: calc(8px + var(--seguro-arriba)) 12px 8px;
}
.cabecera-bodega {
  flex: 1; min-width: 0; text-align: left; background: none; border: 0; color: inherit; padding: 4px 0; cursor: pointer;
  display: flex; flex-direction: column;
}
.cabecera-bodega #bodegaActiva { font-size: 1.35rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cabecera-bodega #bodegaActiva::after { content: ' ▾'; font-weight: 400; opacity: .7; }
.cabecera-bodega small { color: #b8cad6; font-size: .8rem; }
.indicador {
  background: var(--amarillo); color: var(--azul-profundo); border: 0; border-radius: 999px;
  padding: 6px 12px; font-weight: 700; font-size: .9rem; cursor: pointer; white-space: nowrap;
}
.indicador.alerta-dias { background: var(--rojo); color: var(--blanco); }
.version { font-size: .75rem; color: #8fa8b8; }
.banda-pendientes { background: var(--rojo); color: var(--blanco); padding: 10px 14px; font-weight: 600; font-size: .95rem; }

/* ---------- Pestañas ---------- */
.pestanas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--blanco); border-top: 1px solid var(--linea); padding-bottom: var(--seguro-abajo);
}
.pestana {
  min-height: 68px; border: 0; background: none; color: var(--gris); font-size: .82rem; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer;
}
.pestana span { font-size: 1.45rem; line-height: 1; }
.pestana.activa { color: var(--azul); box-shadow: inset 0 3px 0 var(--azul); }

main { max-width: 980px; margin: 0 auto; }
.pantalla { padding: 12px; }
body[data-pantalla="escanear"] .pantalla[data-pantalla="escanear"] { padding: 0; }

/* ---------- Lobby ---------- */
body.en-lobby { overflow: hidden; }
.lobby {
  position: fixed; inset: 0; z-index: 50; overflow-y: auto; background: var(--azul-lobby); color: var(--crema);
  padding: calc(24px + var(--seguro-arriba)) 18px calc(24px + var(--seguro-abajo));
  display: flex; flex-direction: column;
}
.lobby-marca { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.lobby-marca h1 { font-size: 1.9rem; margin: 0; color: var(--blanco); }
.lobby-marca p { margin: 0; color: #b8cad6; }
.lobby-pregunta { color: var(--blanco); font-size: 1.6rem; margin-bottom: 16px; }
.lobby-fincas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.lobby-finca {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center;
  min-height: 92px; padding: 14px 18px; border-radius: var(--radio); text-align: left; cursor: pointer;
  background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.22); color: var(--blanco);
}
.lobby-finca:active { background: rgba(255,255,255,.18); }
.lobby-finca.actual { border-color: var(--amarillo); background: rgba(253,185,19,.12); }
.lobby-codigo { grid-row: span 2; font-size: 1rem; font-weight: 700; background: var(--crema); color: var(--azul-profundo); border-radius: 10px; padding: 8px 10px; }
.lobby-nombre { font-size: 1.45rem; font-weight: 700; }
.lobby-sub { font-size: .9rem; color: #b8cad6; }
.lobby-vacio { color: #b8cad6; }
.lobby-ingreso { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.lobby-input { min-height: 60px; font-size: 1.35rem; border-radius: var(--radio); border: 2px solid rgba(255,255,255,.35); background: rgba(255,255,255,.95); color: var(--azul-profundo); padding: 8px 16px; }
.lobby-input:focus { outline: 3px solid var(--amarillo); outline-offset: 1px; }
.lobby-error { color: #ffb4a8; font-weight: 600; min-height: 1.3em; margin: 0; }
.lobby-nota { color: #dbe7ef; font-size: .95rem; margin: 0; }
.lobby-input[hidden], .lobby-nota[hidden] { display: none; }
.lobby-salir { grid-column: 1 / -1; justify-self: start; margin-top: 6px; }
.lobby-pie { margin-top: auto; padding-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; color: #8fa8b8; font-size: .85rem; }

/* ---------- Escanear ---------- */
.camara { position: relative; background: #000; height: 38vh; min-height: 220px; max-height: 420px; overflow: hidden; }
.camara video { width: 100%; height: 100%; object-fit: cover; display: block; }
.guia { position: absolute; inset: 14% 22%; border: 3px solid rgba(253,185,19,.9); border-radius: 14px; pointer-events: none; }
.btn-iniciar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-height: 72px; font-size: 1.25rem; padding: 0 28px; }
.camara-estado { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; color: var(--blanco); font-weight: 600; }

.franja-destino {
  position: sticky; top: calc(58px + var(--seguro-arriba)); z-index: 10;
  background: var(--amarillo-fondo); border-bottom: 3px solid var(--amarillo); padding: 10px 14px;
}
.franja-destino.con-despacho { background: var(--azul); color: var(--blanco); border-bottom-color: var(--azul-profundo); }
.franja-id { font-weight: 700; font-size: 1.05rem; color: var(--amarillo); }
.franja-datos { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 10px; font-size: 1.15rem; font-weight: 600; }
.franja-datos span { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.franja-datos small { color: #b8cad6; font-size: .72rem; font-weight: 400; text-transform: uppercase; letter-spacing: .04em; }
.franja-vacia { font-size: 1.2rem; font-weight: 700; color: var(--azul-profundo); }

.mensaje-lectura { margin: 10px 12px 0; padding: 12px 14px; border-radius: 12px; font-size: 1.1rem; font-weight: 600; background: var(--blanco); border: 2px solid var(--linea); min-height: 52px; }
.mensaje-lectura.ok { background: var(--verde-fondo); border-color: var(--verde); color: #004d20; }
.mensaje-lectura.error { background: var(--rojo-fondo); border-color: var(--rojo); color: #8a1a12; font-size: 1.2rem; }
.mensaje-lectura.aviso { background: var(--amarillo-fondo); border-color: var(--amarillo); }

.ultimo { margin: 10px 12px 0; padding: 12px 14px; background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); }
.ultimo:empty { display: none; }
.ultimo-nombre { font-size: 1.45rem; font-weight: 700; color: var(--azul-profundo); }
.ultimo-cant { font-size: 2rem; font-weight: 700; color: var(--azul); }
.ultimo-vacio { font-size: 1.2rem; font-weight: 600; color: var(--gris); }

.acumulado-caja { margin: 10px 12px 0; padding: 12px 14px; background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); }
.acumulado-caja h3 { color: var(--gris); font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; }
.tabla-acumulado td { font-size: 1.05rem; }
.tabla-acumulado td.num:nth-child(2) { font-weight: 700; font-size: 1.2rem; }

.acciones-escaneo { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 8px; padding: 12px; }
.btn-guardar-drive { display: block; width: calc(100% - 24px); margin: 0 12px 12px; }

/* Teclado de cantidad: pantalla completa */
.capa-cantidad {
  position: fixed; inset: 0; z-index: 60; background: var(--crema); display: flex; flex-direction: column;
  padding: calc(12px + var(--seguro-arriba)) 14px calc(12px + var(--seguro-abajo)); overflow-y: auto;
}
.cantidad-producto { display: flex; gap: 14px; align-items: center; background: var(--azul); color: var(--blanco); border-radius: var(--radio); padding: 16px; }
.cantidad-foto { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; background: var(--blanco); flex: none; }
.cantidad-nombre { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.cantidad-unidad { font-size: 1.35rem; color: var(--amarillo); font-weight: 600; margin-top: 4px; }
.cantidad-codigo { font-size: .9rem; color: #b8cad6; margin-top: 4px; }
.cantidad-fila { display: flex; align-items: baseline; gap: 12px; margin: 14px 0; }
.cantidad-visor {
  flex: 1; text-align: right; font-size: 3.4rem; font-weight: 700; background: var(--blanco); border: 3px solid var(--azul);
  border-radius: var(--radio); padding: 4px 18px; min-height: 84px; font-variant-numeric: tabular-nums; overflow: hidden;
}
.cantidad-visor.sacudir { border-color: var(--rojo); background: var(--rojo-fondo); }
.cantidad-und { font-size: 1.5rem; font-weight: 700; color: var(--azul); min-width: 60px; }

.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; flex: 1; max-height: 560px; }
.tecla {
  min-height: 72px; border-radius: 14px; border: 2px solid var(--linea); background: var(--blanco); color: var(--tinta);
  font-size: 2rem; font-weight: 700; cursor: pointer; touch-action: manipulation; user-select: none;
}
.tecla:active { background: #e8edf1; }
.tecla-borrar { font-size: 1.2rem; color: var(--azul); }
.tecla-cancelar { font-size: 1.2rem; background: var(--rojo-fondo); color: #8a1a12; border-color: var(--rojo); }
.tecla-ok { grid-column: span 2; font-size: 1.5rem; background: var(--verde); color: var(--blanco); border-color: var(--verde); }

/* ---------- Tarjetas, tablas, formularios ---------- */
.tarjeta { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: 16px; margin-bottom: 14px; }
.tabla { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabla th { text-align: left; font-weight: 600; color: var(--gris); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; border-bottom: 2px solid var(--linea); padding: 6px; }
.tabla td { border-bottom: 1px solid var(--linea); padding: 8px 6px; vertical-align: top; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla tr.inactivo td { color: #9aa3a9; text-decoration: line-through; }
.tabla tr.inactivo td.acciones-celda { text-decoration: none; }
.acciones-celda { white-space: nowrap; text-align: right; }
.acciones-celda .btn + .btn { margin-left: 4px; }
.tabla-scroll { overflow-x: auto; max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.tabla-scroll.corta { max-height: 30vh; }
.vacio { color: var(--gris); }
.nota { color: var(--gris); font-size: .9rem; }
.fila-botones { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.fila-botones .btn-grande { flex: 1 1 220px; }
.fila-campos { display: flex; flex-wrap: wrap; gap: 10px; }
.fila-campos > .campo { flex: 1 1 200px; }
.campo { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.campo > span { font-size: .85rem; color: var(--gris); font-weight: 600; }
.campo input:not([type=checkbox]), .campo select {
  min-height: 52px; border: 2px solid var(--linea); border-radius: 10px; padding: 8px 12px; background: var(--blanco); width: 100%;
}
.campo input:focus, .campo select:focus { border-color: var(--azul); outline: none; }
.campo input[readonly] { background: #f0f1ee; color: var(--gris); }
.campo.check { flex-direction: row; align-items: center; gap: 10px; }
.campo.check input { width: 26px; height: 26px; accent-color: var(--azul); }
.campo.check > span { font-size: 1rem; color: var(--tinta); font-weight: 400; }
.segmentos { display: flex; gap: 6px; margin: 10px 0; }
.segmento { flex: 1; min-height: 48px; border: 2px solid var(--azul); background: var(--blanco); color: var(--azul); border-radius: 10px; font-weight: 600; cursor: pointer; }
.segmento.activo { background: var(--azul); color: var(--blanco); }
.alerta { border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.alerta-aviso { background: var(--amarillo-fondo); border: 2px solid var(--amarillo); }
.alerta-info { background: #e5eff6; border: 2px solid var(--azul-vivo); }
.alerta-error { background: var(--rojo-fondo); border: 2px solid var(--rojo); margin: 12px; }
.resumen { padding-left: 1.2em; }
.pendientes-texto { font-weight: 600; color: var(--rojo); }
.pendientes-texto.ok { color: var(--verde); }
.fecha-larga { font-weight: 600; color: var(--azul); }
.fecha-larga::first-letter { text-transform: uppercase; }
details.reexportar { margin-top: 10px; border-top: 1px solid var(--linea); padding-top: 10px; }
details summary { cursor: pointer; font-weight: 600; color: var(--azul); min-height: 40px; display: flex; align-items: center; }

.despacho { border: 2px solid var(--linea); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.despacho summary { display: block; list-style: none; }
.despacho summary::-webkit-details-marker { display: none; }
.despacho-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 1.1rem; }
.despacho-sub { color: var(--gris); font-size: .9rem; }
.etiqueta { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: .8rem; font-weight: 700; margin-left: 6px; }
.etiqueta.exportado { background: #dce8f1; color: var(--azul); }
.etiqueta.pendiente { background: var(--amarillo-fondo); color: #7a5600; border: 1px solid var(--amarillo); }
.etiqueta.parcial { background: var(--amarillo-fondo); color: #7a5600; }
.etiqueta.abierto { background: var(--verde-fondo); color: var(--verde); }
.etiqueta.vacio { background: #eceeea; color: var(--gris); }

/* ---------- Diálogos y avisos ---------- */
.capa { position: fixed; inset: 0; z-index: 80; background: rgba(0, 25, 40, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.dialogo { background: var(--blanco); border-radius: 20px; padding: 20px; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.dialogo h2 { font-size: 1.4rem; }
.dialogo-texto { font-size: 1.1rem; }
.dialogo-botones { display: flex; gap: 10px; margin-top: 16px; }
.dialogo-botones .btn { flex: 1; min-height: 60px; font-size: 1.1rem; }
.dialogo-pin { max-width: 420px; }
.pin-puntos { text-align: center; font-size: 2.2rem; letter-spacing: .3em; margin: 6px 0 14px; min-height: 52px; color: var(--azul); }
.dialogo-pin .teclado { max-height: none; }
.confirmar-deshacer { background: var(--rojo-fondo); border-radius: 12px; padding: 12px; margin: 8px 0; }
.error-form { color: var(--rojo); font-weight: 600; }
.toast {
  position: fixed; left: 12px; right: 12px; bottom: calc(84px + var(--seguro-abajo)); z-index: 90; max-width: 600px; margin: 0 auto;
  background: var(--azul-profundo); color: var(--blanco); padding: 14px 16px; border-radius: 12px; font-weight: 600; box-shadow: 0 6px 24px rgba(0,0,0,.25);
}
.toast.ok { background: var(--verde); }
.toast.error { background: var(--rojo); }
.toast.aviso { background: var(--amarillo); color: var(--azul-profundo); }

/* ---------- Vista previa del libro en pantalla ---------- */
.vista-libro { display: flex; flex-direction: column; align-items: center; gap: 16px; overflow-x: auto; padding-bottom: 20px; }
.vista-libro .hoja { box-shadow: var(--sombra); background: var(--blanco); transform-origin: top center; }
@media (max-width: 820px) { .vista-libro .hoja { zoom: .42; } }

@media (min-width: 700px) {
  .camara { height: 42vh; }
  .franja-datos { font-size: 1.35rem; }
}

/* ---------- Hojas del libro (medidas físicas; iguales en pantalla e impresión) ---------- */
.hoja {
  width: 210mm; height: 297mm; padding: 10mm 10mm 8mm; overflow: hidden; display: flex; flex-direction: column;
  background: #fff; color: #000; font-family: 'Outfit', sans-serif;
}
.hoja-cab { display: flex; align-items: center; justify-content: space-between; gap: 6mm; height: 14mm; border-bottom: .6mm solid #000; flex: none; }
.hoja-bodega { font-size: 15pt; font-weight: 700; }
.hoja-seccion { font-size: 10pt; overflow: hidden; max-height: 12mm; font-weight: 600; text-align: center; flex: 1; }
.hoja-app { font-size: 8pt; color: #555; }
.hoja-pie { display: none; }
.rejilla { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; margin-top: 4mm; }
.rejilla > .celda, .rejilla > .celda-vacia { height: 49mm; }
.cat-titulo { grid-column: 1 / -1; height: 9mm; display: flex; align-items: flex-end; padding: 0 1mm 1mm; font-size: 12pt; font-weight: 700; border-bottom: .4mm solid #000; }
.celda {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center;
  padding: 3mm 3mm 2mm; border: .25mm dashed #b5b5b5; margin: -.125mm; overflow: hidden;
}
.qr svg { width: 30mm; height: 30mm; display: block; }
.celda-nombre { font-size: 10pt; font-weight: 700; line-height: 1.12; margin-top: 1.5mm; max-height: 2.3em; overflow: hidden; }
.celda-linea { font-size: 9pt; line-height: 1.15; }
.celda-linea.fuerte { font-weight: 600; }
.qr-texto { font-family: ui-monospace, Menlo, monospace; font-size: 7pt; color: #555; margin-top: auto; }
.comandos { display: grid; grid-template-rows: 1fr 1fr; flex: 1; }
.comando { display: flex; flex-direction: column; align-items: center; justify-content: center; border-bottom: .3mm dashed #b5b5b5; }
.comando:last-child { border-bottom: 0; }
.qr-grande svg { width: 85mm; height: 85mm; display: block; }
.comando-titulo { font-size: 26pt; font-weight: 700; margin-top: 3mm; }
.comando-desc { font-size: 12pt; }

/* ---------- Revisión antes de exportar ---------- */
.dialogo-revision { max-width: 760px; }
.revision-resumen { font-weight: 700; color: var(--azul); }
.revision-despacho { border: 2px solid var(--linea); border-radius: 12px; padding: 8px 10px; margin-bottom: 10px; }
.revision-cab { color: var(--gris); font-size: .9rem; margin-bottom: 4px; }
.revision-cab strong { color: var(--azul); }
.revision-linea { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--linea); }
.revision-linea:first-of-type { border-top: 0; }
.revision-prod div { font-weight: 600; }
.revision-edit { display: flex; align-items: center; gap: 6px; }
.revision-cant { width: 110px; min-height: 52px; font-size: 1.3rem; font-weight: 700; text-align: right; border: 2px solid var(--linea); border-radius: 10px; padding: 4px 10px; }
.revision-cant:focus { border-color: var(--azul); outline: none; }
.revision-cant.invalida { border-color: var(--rojo); background: var(--rojo-fondo); }
.revision-und { min-width: 38px; color: var(--gris); font-weight: 600; }
.revision-linea.editada .revision-cant { border-color: var(--amarillo); background: var(--amarillo-fondo); }
.revision-linea.quitada .revision-prod { text-decoration: line-through; color: #9aa3a9; }
.revision-linea.quitada .quitar { background: var(--amarillo-fondo); }
.revision-linea.exportada { opacity: .6; }
@media (max-width: 520px) {
  .revision-linea { grid-template-columns: 1fr auto; }
  .revision-linea .quitar { grid-column: 2; }
}
.tarjeta-nuevos { border: 3px solid var(--azul); }
.marcas-bodegas { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.foto-nuevo { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; border: 2px solid var(--linea); }
.pestanas-2 { grid-template-columns: repeat(2, 1fr); }
.cabecera-oficina { cursor: default; }
.cabecera-oficina span { font-size: 1.25rem; font-weight: 700; }
.pestanas-3 { grid-template-columns: repeat(3, 1fr); }
.pestanas-4 { grid-template-columns: repeat(4, 1fr); }
.pestanas-5 { grid-template-columns: repeat(5, 1fr); }
.pestanas-6 { grid-template-columns: repeat(6, 1fr); }
.pestanas-7 { grid-template-columns: repeat(7, 1fr); }
.pestana[hidden] { display: none; }

/* ---------- ¿Quién recibe? ---------- */
.franja-recibe { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.2); font-size: 1.15rem; font-weight: 700; }
.franja-recibe span { display: flex; flex-direction: column; }
.franja-recibe small { color: #b8cad6; font-size: .72rem; font-weight: 400; text-transform: uppercase; letter-spacing: .04em; }
.btn-cambiar { background: rgba(255,255,255,.15) !important; color: #fff !important; border-color: rgba(255,255,255,.4) !important; }
.dialogo-persona { max-width: 600px; }
.persona-sub { color: var(--gris); margin: -4px 0 10px; }
.persona-input { width: 100%; min-height: 64px; font-size: 1.6rem; font-weight: 600; border: 3px solid var(--azul); border-radius: 14px; padding: 8px 16px; }
.persona-input:focus { outline: none; border-color: var(--azul-vivo); }
.persona-nota { color: var(--gris); font-size: .95rem; min-height: 1.3em; margin: 8px 0; }
.persona-sugerencias { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; }
.persona-opcion { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 64px; padding: 10px 16px; border-radius: 14px; border: 2px solid var(--linea); background: var(--blanco); font-size: 1.35rem; font-weight: 700; color: var(--azul-profundo); text-align: left; cursor: pointer; touch-action: manipulation; }
.persona-opcion:active { background: #e8edf1; }
.persona-opcion small { font-size: .85rem; font-weight: 400; color: var(--gris); white-space: nowrap; }
.persona-opcion.persona-nueva { border-style: dashed; border-color: var(--azul); color: var(--azul); }
.persona-opcion.persona-misma { background: var(--azul); color: #fff; border-color: var(--azul); }
.persona-opcion.persona-misma small { color: #b8cad6; }
.ultimo-recibe { font-size: 1.2rem; font-weight: 600; color: var(--verde); }
/* En el iPhone el teclado tapa la mitad de abajo: el diálogo del nombre va arriba. */
.capa:has(.dialogo-persona) { align-items: flex-start; padding-top: calc(10px + var(--seguro-arriba)); }
.dialogo-persona .persona-sugerencias { max-height: 34vh; }

/* ---------- Jornada ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 10px; }
.kpi { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: 14px 16px; border-left: 5px solid var(--azul); }
.kpi-valor { font-size: 2.1rem; font-weight: 700; color: var(--azul-profundo); line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-rotulo { font-size: .9rem; color: var(--gris); }
.kpi.kpi-alerta { border-left-color: #c0392b; background: #fdecea; }
.kpi.kpi-alerta .kpi-valor { color: #a5281b; }
.tarjeta-alerta { border: 2px solid #e2a19a; background: #fff7f6; }
td.desvio { color: #a5281b; font-weight: 700; }
small.sub { display: block; color: var(--gris); font-weight: 400; font-size: .85rem; }
.tabla-jornada td { vertical-align: top; }
.dialogo-numero { max-width: 460px; }
.dialogo-numero .cantidad-fila { margin: 6px 0 12px; }
.celda-carne .celda-nombre { font-size: 9pt; max-height: none; }
.lotes-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; margin: 8px 0; }
.lote-boton { min-height: 64px; font-size: 1.5rem; font-weight: 700; border-radius: 14px; border: 2px solid var(--linea); background: var(--blanco); color: var(--azul-profundo); }
.lote-boton[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }
.ingreso-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ingreso-fotos img, .ingreso-foto-grande { width: 100%; border-radius: 10px; border: 1px solid var(--linea); }
.ingresos-lista { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.ingreso { display: flex; align-items: center; gap: 10px; background: var(--blanco); border-radius: 12px; padding: 8px 12px 8px 8px; border: 1px solid var(--linea); }
.ingreso img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.ingreso-oficina { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(260px, 1.2fr); gap: 14px; align-items: start; padding: 12px 0; border-top: 1px solid var(--linea); }
@media (max-width: 760px) { .ingreso-oficina { grid-template-columns: 1fr 1fr; } .ingreso-oficina form { grid-column: 1 / -1; } }
.carne-blanco .celda-nombre { color: #999; font-weight: 400; }
body[data-modo="personal"] .solo-salidas, body[data-modo="personal"] .acumulado-caja,
body[data-modo="personal"] #pendientes, body[data-modo="personal"] #bandaPendientes { display: none !important; }
.lobby-modo { grid-template-columns: auto 1fr; min-height: 120px; }
.lobby-icono { grid-row: span 2; font-size: 2.6rem; line-height: 1; }
/* Teléfono: nada más ancho que la pantalla; las tablas anchas se desplazan dentro de su tarjeta. */
/* clip y no hidden: hidden convierte al body en contenedor de scroll y la cabecera deja de quedar fija. */
html, body { overflow-x: clip; }
.tarjeta { max-width: 100%; overflow-x: auto; }
.capa .dialogo { max-width: min(600px, calc(100vw - 24px)); }
.lobby-finca.lobby-nueva { border-style: dashed; border-color: var(--amarillo); }


/* ================= v2.0.1 · interfaz más compacta para el teléfono ================= */
:root { --alto-cabecera: 64px; }

/* Cabecera: una línea para la finca y otra para el modo, nunca más alta. */
.cabecera { padding-top: calc(6px + var(--seguro-arriba)); padding-bottom: 6px; gap: 8px; }
.cabecera-bodega #bodegaActiva { font-size: 1.2rem; }
.cabecera-bodega small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.indicador { padding: 6px 10px; font-size: .85rem; }

/* Franja del despacho: id + lote arriba, la labor grande. */
.franja-destino { top: var(--alto-cabecera); padding: 8px 14px 10px; }
.franja-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.franja-id { font-weight: 700; font-size: .95rem; color: var(--amarillo); }
.franja-chip { background: rgba(255,255,255,.14); border-radius: 999px; padding: 2px 10px; font-size: .9rem; font-weight: 600; }
.franja-otra { background: var(--amarillo); color: var(--azul-profundo); }
.franja-labor { font-size: 1.35rem; font-weight: 700; line-height: 1.15; margin-top: 4px; }
.franja-vacia { font-size: 1.1rem; }

/* Mensaje de lectura y último producto: menos aire. */
.mensaje-lectura { margin-top: 8px; padding: 10px 12px; font-size: 1rem; min-height: 0; }
.mensaje-lectura.error { font-size: 1.05rem; }
.ultimo { margin-top: 8px; padding: 10px 14px; }
.ultimo-nombre { font-size: 1.25rem; }
.ultimo-cant { font-size: 1.7rem; line-height: 1.1; }
.acumulado-caja { margin-top: 8px; padding: 10px 12px; }
.tabla-acumulado td { font-size: .95rem; padding: 7px 4px; }
.tabla-acumulado td.num:nth-child(2) { font-size: 1.1rem; }
.acciones-escaneo { padding: 10px 12px 12px; }

@media (max-width: 600px) {
  .camara { height: 30vh; min-height: 190px; }
  .guia { inset: 12% 18%; }
  .pantalla { padding: 10px; }
  .tarjeta { padding: 14px; border-radius: 16px; }
  h2 { font-size: 1.2rem; }
}

/* Lobby: nombre centrado cuando no hay subtítulo. */
.lobby-finca { align-content: center; min-height: 84px; }
.lobby-sub:empty { display: none; }
.lobby-finca:has(.lobby-sub:empty) .lobby-codigo { grid-row: auto; }

/* Pestañas: la activa con fondo, más fácil de ver con guantes y sol. */
.pestana { min-height: 64px; }
.pestana.activa { color: var(--azul); background: #e7eef4; box-shadow: inset 0 3px 0 var(--azul); }
@media (max-width: 600px) {
  .kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi { padding: 10px 12px; }
  .kpi-valor { font-size: 1.7rem; }
  .kpi-rotulo { font-size: .82rem; }
}

/* Libro: ningún texto se encoge ni se monta sobre otro. QR de 28 mm (se lee igual) para que
   quepan nombres de dos líneas y los destinos con finca, lote y labor. */
.celda { padding: 2mm 2.5mm 1.5mm; }
.celda > * { flex-shrink: 0; }
.qr svg { width: 28mm; height: 28mm; }
.celda-nombre { font-size: 9.5pt; line-height: 1.1; margin-top: 1mm; max-height: 2.2em; }
.celda-linea { font-size: 8.5pt; line-height: 1.12; }
.celda-destino .qr svg { width: 25mm; height: 25mm; }
.celda-destino .celda-nombre { max-height: 1.15em; }

/* Botón Atrás de la cabecera (volver a escoger Salidas o Personal). */
.btn-atras {
  flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px 0 10px;
  border-radius: 12px; border: 2px solid rgba(255,255,255,.35); background: rgba(255,255,255,.1);
  color: #fff; font-size: 1.25rem; font-weight: 700; cursor: pointer; touch-action: manipulation;
}
.btn-atras span { font-size: .9rem; }
.btn-atras:active { background: rgba(255,255,255,.25); }
@media (max-width: 380px) { .btn-atras span { display: none; } }
@media (max-width: 600px) { .cabecera > .version { display: none; } }

/* Traspaso por QR (oficina → teléfono) */
.dialogo-traspaso { max-width: 640px; text-align: center; }
.traspaso-qr svg { width: min(70vh, 520px, 86vw); height: auto; display: block; margin: 8px auto; background: #fff; }
.traspaso-cuenta { font-weight: 700; color: var(--azul); }
.qr-grande svg { width: 72mm; height: 72mm; } .comando { padding: 4mm 0; }

/* Número sugerido (se acepta con Enter; la primera tecla lo reemplaza) */
.cantidad-visor.sugerido { color: #8a96a0; }

/* Quién recibe: aviso de escanear el carné */
.persona-aviso { background: var(--azul); color: #fff; border-radius: 12px; padding: 12px 14px; font-size: 1.15rem; font-weight: 700; margin-bottom: 10px; text-align: center; }

/* Opciones de la lista: el detalle (código, carné) debajo del nombre */
.persona-opcion { flex-direction: column; align-items: flex-start; gap: 2px; }
.persona-opcion small { white-space: normal; }

/* Cámara en vivo dentro de «¿Quién recibe?» para apuntar el carné */
.persona-camara { position: relative; background: #000; border-radius: 12px; overflow: hidden; height: 30vh; min-height: 170px; margin-bottom: 10px; }
.persona-camara video { width: 100%; height: 100%; object-fit: cover; display: block; }
.persona-guia { position: absolute; inset: 12% 22%; border: 3px solid var(--amarillo); border-radius: 12px; pointer-events: none; }
.dialogo-persona:has(.persona-camara) .persona-sugerencias { max-height: 22vh; }

.lobby-respaldo { grid-column: 1 / -1; color: var(--amarillo); font-size: .95rem; margin: 6px 2px 0; }

/* Correo del cierre */
.tarjeta-correo { border: 3px solid var(--azul); }
.correo-cola { color: #7a5600; font-weight: 600; }
.dialogo-correo { max-width: 760px; }
.correo-previa { border: 1px solid var(--linea); border-radius: 10px; max-height: 50vh; overflow: auto; margin-top: 8px; }

textarea.firma { width: 100%; min-height: 80px; border: 2px solid var(--linea); border-radius: 10px; padding: 8px 12px; font: inherit; }
.btn-simulador { min-height: 40px; font-size: .9rem; text-decoration: none; }

/* Salidas: buscador de materiales en vez de cámara */
body[data-modo="salidas"] .pantalla[data-pantalla="escanear"] .camara { display: none; }
.solo-salidas-bloque { display: none; }
body[data-modo="salidas"] .solo-salidas-bloque { display: block; }
.buscador-material { padding: 10px 12px 0; }
.buscador-material input { width: 100%; min-height: 60px; font-size: 1.35rem; font-weight: 600; border: 3px solid var(--azul); border-radius: 14px; padding: 8px 16px; background: var(--blanco); }
.buscador-material input:focus { outline: none; border-color: var(--azul-vivo); }
.resultados-material { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.material-titulo { margin: 4px 2px 0; font-size: .85rem; color: var(--gris); text-transform: uppercase; letter-spacing: .05em; }
.material-opcion { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 60px; padding: 10px 16px; border-radius: 14px; border: 2px solid var(--linea); background: var(--blanco); text-align: left; cursor: pointer; touch-action: manipulation; }
.material-opcion:active { background: #e8edf1; }
.material-nombre { font-size: 1.2rem; font-weight: 700; color: var(--azul-profundo); }
.material-opcion small { color: var(--gris); }
.tarjeta-materiales { border: 3px solid var(--verde); }

/* PC: guardado automático en la carpeta de Materiales */
.materiales-auto { border: 1px dashed var(--linea); border-radius: 14px; padding: 12px 14px; margin: 10px 0; }
.materiales-auto p { margin: 0 0 8px; }
.materiales-auto[data-activo="1"] { border-style: solid; background: var(--verde-fondo); }
.banda-pendientes[data-accion="reconectar"] { cursor: pointer; text-decoration: underline; }

/* ---------- Oficina: diseño de computador (no se abre en teléfonos) ---------- */
body[data-modo="oficina"] { padding-bottom: 24px; }
body[data-modo="oficina"] .cabecera { padding-left: 24px; padding-right: 24px; }
body[data-modo="oficina"] .pestanas {
  position: sticky; top: 0; z-index: 19; display: flex; justify-content: flex-start; gap: 4px;
  padding: 0 24px; border-top: 0; border-bottom: 1px solid var(--linea); background: var(--blanco);
}
body[data-modo="oficina"] .pestana { flex-direction: row; min-height: 50px; padding: 0 22px; font-size: 1rem; gap: 8px; }
body[data-modo="oficina"] .pestana span { font-size: 1.15rem; }
body[data-modo="oficina"] .pestana.activa { box-shadow: inset 0 -3px 0 var(--azul); }
body[data-modo="oficina"] main { max-width: 1440px; }
body[data-modo="oficina"] .pantalla[data-pantalla="catalogo"]:not([hidden]) {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; padding: 20px 24px;
}
body[data-modo="oficina"] .pantalla[data-pantalla="catalogo"] > * { margin: 0; min-width: 0; }
body[data-modo="oficina"] .pantalla[data-pantalla="catalogo"] > .alerta,
body[data-modo="oficina"] .pantalla[data-pantalla="catalogo"] > .tarjeta-ancha { grid-column: 1 / -1; }
.oficina-bloqueada { max-width: 560px; margin: 48px auto; text-align: center; }

/* ---------- Modo RDT (nómina): digitar con teclado en el PC ---------- */
.pantalla[data-pantalla="rdt"] { max-width: 1280px; margin: 0 auto; }
.rdt-cabeza { display: grid; gap: 10px; }
.rdt-dia { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rdt-dia input[type=date] { font: inherit; padding: 8px 10px; border: 2px solid var(--linea); border-radius: 10px; }
.rdt-dia .btn { min-width: 44px; }
.rdt-dia-texto { display: grid; margin-left: 8px; }
.rdt-dia-texto span { color: var(--gris); font-size: .9rem; }
.rdt-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.rdt-estado { font-size: .9rem; color: var(--gris); }
.rdt-estado.alerta { color: var(--rojo); font-weight: 600; }
.rdt-estado.rdt-nube { padding: .45rem .7rem; border-radius: 10px; background: #f3f5f7; }
.rdt-estado.rdt-nube.ok { background: #e6f4ea; color: #0f6b2c; font-weight: 600; }
.rdt-estado.rdt-nube.pendiente { background: #fff6dd; color: #8a6300; font-weight: 600; }
.rdt-captura { position: sticky; top: var(--alto-cabecera, 0px); z-index: 5; border: 2px solid var(--azul); }
.rdt-linea { display: grid; grid-template-columns: 2.2fr 2.2fr .8fr 1fr .7fr auto; gap: 8px; align-items: end; }
.rdt-campo { display: grid; gap: 4px; font-size: .8rem; font-weight: 600; color: var(--gris); text-transform: uppercase; letter-spacing: .02em; min-width: 0; }
.rdt-caja { position: relative; }
.rdt-input { width: 100%; font: inherit; font-size: 1.05rem; text-transform: none; letter-spacing: 0; color: var(--tinta);
  padding: 10px 12px; border: 2px solid var(--linea); border-radius: 10px; background: var(--blanco); }
.rdt-input:focus { outline: none; border-color: var(--azul-vivo); box-shadow: 0 0 0 3px rgba(0, 80, 125, .15); }
.rdt-num { text-align: right; }
.rdt-agregar { height: 48px; white-space: nowrap; }
.rdt-sugerencias { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--blanco);
  border: 1px solid var(--linea); border-radius: 10px; box-shadow: var(--sombra); max-height: 360px; overflow: auto; }
.rdt-opcion { display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 12px; border: 0; background: none;
  font: inherit; font-size: .98rem; text-align: left; cursor: pointer; color: var(--tinta); text-transform: none; letter-spacing: 0; }
.rdt-opcion small { color: var(--gris); font-weight: 400; white-space: nowrap; }
.rdt-opcion.marcada { background: var(--azul); color: var(--blanco); }
.rdt-opcion.marcada small { color: #cfe0ea; }
.rdt-opcion.nueva { border-top: 1px dashed var(--linea); }
.rdt-lotes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.rdt-lotes:empty { display: none; }
.rdt-lote { background: var(--amarillo-fondo); border-radius: 999px; padding: 4px 6px 4px 12px; font-size: .9rem; font-weight: 600; }
.rdt-lote button { border: 0; background: none; font-size: 1rem; cursor: pointer; color: var(--gris); }
.rdt-ayuda { margin: 8px 0 0; font-size: .9rem; color: var(--azul-vivo); font-weight: 600; }
.rdt-faltan h3 { margin-bottom: 2px; }
.rdt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rdt-chip { border: 1px solid var(--linea); background: var(--blanco); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: .9rem; cursor: pointer; }
.rdt-chip:hover { border-color: var(--azul-vivo); color: var(--azul-vivo); }
.rdt-tabla tbody tr { cursor: pointer; }
.rdt-tabla tbody tr:hover { background: #eef4f8; }
.rdt-tabla small { color: var(--gris); }
.rdt-tabla .rdt-sin { color: var(--rojo); font-weight: 600; }
.rdt-tabla tr.rdt-copiada { background: var(--amarillo-fondo); }
@media (max-width: 900px) {
  .rdt-linea { grid-template-columns: 1fr 1fr; }
  .rdt-agregar { grid-column: 1 / -1; }
}

/* ---------- Formato Agrap (3 oct 2026): entrada, cabecera y tarjetas como la App Unificada ---------- */
.lobby { background: linear-gradient(170deg, #153a5a 0%, #153a5a 55%, #0d2840 100%); overflow-x: hidden; }
.lobby > *:not(.lobby-filigrana) { position: relative; z-index: 1; width: 100%; max-width: 880px; margin-left: auto; margin-right: auto; }
.lobby-filigrana { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(112vh, 100vw); opacity: .06; pointer-events: none; user-select: none; z-index: 0; }
.lobby-marca { display: block; text-align: center; margin: 12px auto 30px; }
.lobby-kicker { font-size: 11px; font-weight: 700; color: var(--amarillo); letter-spacing: .42em; text-transform: uppercase; margin-bottom: 16px; }
.lobby-wordmark { height: 46px; width: auto; display: block; margin: 0 auto; }
.lobby-marca p { margin-top: 12px; font-size: 11.5px; color: rgba(249,249,247,.6); letter-spacing: .2em; text-transform: uppercase; font-weight: 600; }
.lobby-pregunta { text-align: center; font-size: 1.45rem; }
.lobby-finca { border-radius: 18px; border: 1px solid rgba(249,249,247,.2); background: rgba(249,249,247,.06); transition: background .15s, border-color .15s, transform .15s; }
.lobby-finca:hover { background: rgba(249,249,247,.1); border-color: rgba(249,249,247,.35); transform: translateY(-1px); }
.lobby-finca.actual { border-color: var(--amarillo); background: rgba(253,185,19,.1); }
.lobby-codigo { background: var(--amarillo); color: #3d2c00; }
.lobby-ingreso { margin: 0 auto; width: min(410px, 100%); }
.lobby-input { min-height: 54px; font-size: 1.1rem; border-radius: 13px; border: 1px solid rgba(249,249,247,.2); background: rgba(249,249,247,.06); color: var(--crema); }
.lobby-input::placeholder { color: rgba(249,249,247,.45); }
.lobby-input:focus { outline: none; border-color: var(--amarillo); background: rgba(249,249,247,.1); box-shadow: 0 0 0 4px rgba(253,185,19,.14); }
.lobby-ingreso .btn.primario { background: var(--amarillo); color: #3d2c00; border-color: var(--amarillo); border-radius: 14px; box-shadow: 0 8px 22px rgba(253,185,19,.24); }
.lobby-error { text-align: center; }
.lobby-salir { justify-self: center; }
.lobby-ingreso + .lobby-salir { display: block; margin: 14px auto 0; }
.lobby-pie { max-width: 880px; }

.cabecera { background: var(--azul); border-bottom: 3px solid var(--amarillo); }
.cabecera-logo { width: 34px; height: 34px; object-fit: contain; flex: none; }
.tarjeta { border-radius: 18px; border: 1px solid #e3e6e4; box-shadow: 0 1px 2px rgba(0, 40, 63, .06); }
.pestana.activa { color: var(--azul); box-shadow: inset 0 3px 0 var(--amarillo); }
@media (max-width: 600px) {
  .lobby-wordmark { height: 36px; }
  .cabecera-logo { width: 28px; height: 28px; }
}
.lobby-fincas { justify-content: center; grid-template-columns: repeat(auto-fit, minmax(260px, 330px)); }
.lobby-fincas:has(.lobby-ingreso) { display: flex; flex-direction: column; align-items: center; }
.lobby-ingreso { width: min(410px, 100%) !important; }

/* ---------- Almacén en el PC (digitar-almacen.js) ---------- */
.pantalla[data-pantalla="almacen"] { max-width: 1280px; margin: 0 auto; }
.alm-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.alm-dia { display: grid; }
.alm-dia span { color: var(--gris); font-size: .9rem; }
.alm-linea { display: grid; grid-template-columns: 2.6fr 1fr 2.2fr auto; gap: 8px; align-items: end; }
@media (max-width: 900px) {
  /* Teléfono: Material | Cantidad | Quién recibe en una fila; la lista ocupa todo el ancho. */
  .alm-linea { grid-template-columns: 1.5fr .75fr 1.3fr; gap: 6px; position: relative; }
  .alm-linea .rdt-agregar { grid-column: 1 / -1; }
  .alm-linea .rdt-caja { position: static; }
  .alm-linea .rdt-input { font-size: 16px; padding: 10px 8px; }
  .alm-linea .rdt-opcion { padding: 12px; }
  .alm-tabla th:nth-child(1), .alm-tabla td:nth-child(1),
  .alm-tabla th:nth-child(5), .alm-tabla td:nth-child(5),
  .alm-tabla th:nth-child(6), .alm-tabla td:nth-child(6) { display: none; }
}

/* RDT: modos (uno a uno / cuadrilla) y horas fijas — el segmento amarillo de Agrap (Banano/Palma). */
.rdt-modos { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.rdt-segmento { display: inline-flex; gap: 4px; padding: 3px; border-radius: 12px; background: #e9edf0; }
.rdt-segmento button { border: 0; background: none; font: inherit; font-size: .95rem; font-weight: 600; padding: 8px 18px; border-radius: 9px; color: var(--gris); cursor: pointer; }
.rdt-segmento button.on { background: var(--amarillo); color: var(--azul-profundo); box-shadow: 0 1px 3px rgba(0, 40, 63, .15); }
.rdt-fijas { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--gris); font-weight: 600; }
.rdt-fijas input[type=checkbox] { width: 20px; height: 20px; }
.rdt-fijas-n { width: 70px; padding: 6px 8px; font-size: 1rem; }
.rdt-cuad-linea { display: grid; grid-template-columns: 2.4fr 2.2fr .8fr .8fr auto; gap: 8px; align-items: end; }
.rdt-cuad-chips { margin-top: 10px; }
.rdt-cuad-cant { margin-top: 12px; }
.rdt-cuad-cant:empty { display: none; }
.rdt-cuad-filas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 14px; }
.rdt-cuad-fila { display: grid; grid-template-columns: 1fr 110px; align-items: center; gap: 8px; font-size: .95rem; }
@media (max-width: 900px) { .rdt-cuad-linea { grid-template-columns: 1fr 1fr; } }
.rdt-poca { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--amarillo-fondo); color: #7a5600; font-weight: 600; font-size: .92rem; }

/* ---------- Corte y embolse (digitar-campo.js) ---------- */
.pantalla[data-pantalla="campo"] { max-width: 1100px; margin: 0 auto; }
.campo-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 10px; }
.recep-dia { margin-top: 12px; }
.recep-dia .alm-cabeza { margin-bottom: 6px; }
.pantalla[data-pantalla="recepcion"] { max-width: 1280px; margin: 0 auto; }

/* ---------- Recepción (oficina): una bandeja por finca, lo pendiente arriba ---------- */
.recep-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin: 4px 0 12px; }
.recep-cabeza h1 { margin: 0; font-size: 1.6rem; color: var(--azul-profundo); }
.recep-fincas { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-bottom: 14px; }
.recep-finca { position: relative; display: grid; text-align: left; gap: 2px; padding: 12px 14px; border: 2px solid var(--linea); border-radius: 14px;
  background: var(--blanco); font: inherit; cursor: pointer; color: var(--azul-profundo); }
.recep-finca.on { border-color: var(--amarillo); background: var(--amarillo-fondo); box-shadow: 0 2px 8px rgba(0, 40, 63, .08); }
.recep-finca-nombre { font-weight: 700; }
.recep-finca-sub { font-size: .8rem; color: var(--gris); }
.recep-badge, .recep-ok { position: absolute; top: 10px; right: 10px; min-width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center;
  font-size: .85rem; font-weight: 700; padding: 0 7px; }
.recep-badge { background: var(--azul-profundo); color: var(--amarillo); }
.recep-ok { background: #e3f3e8; color: #17703a; }
.recep-bandeja { border: 2px solid var(--amarillo); }
.recep-bandeja.recep-aldia { border-color: var(--linea); }
.recep-vacio { display: grid; justify-items: center; gap: 4px; padding: 18px 0; text-align: center; }
.recep-vacio span { font-size: 2rem; color: #17703a; }
.recep-grupo { border-top: 1px solid var(--linea); padding-top: 12px; margin-top: 12px; }
.recep-grupo:first-of-type { border-top: 0; margin-top: 4px; padding-top: 0; }
.recep-grupo-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.recep-accion { width: 1%; white-space: nowrap; text-align: right; }
.recep-conectar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; background: var(--amarillo-fondo);
  border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.recep-rdt-listos { display: grid; gap: 8px; margin: 10px 0; }
.recep-rdt { display: flex; align-items: center; gap: 10px; justify-content: space-between; border: 1px solid var(--linea); border-radius: 12px; padding: 8px 12px; }
.recep-rdt span { flex: 1; font-weight: 600; }

/* ---------- Usuarios (master) ---------- */
.pantalla[data-pantalla="usuarios"] { max-width: 1100px; margin: 0 auto; }
.usu-lista { display: grid; gap: 8px; }
.usu-fila { display: grid; grid-template-columns: 1.4fr 1.4fr auto; gap: 10px; align-items: center; text-align: left; width: 100%;
  padding: 12px 14px; border: 1px solid var(--linea); border-radius: 12px; background: var(--blanco); font: inherit; color: var(--azul-profundo); cursor: pointer; }
.usu-fila:hover { border-color: var(--amarillo); background: var(--amarillo-fondo); }
.usu-fila small, .usu-estado { color: var(--gris); font-size: .85rem; }
.usu-fila.bloqueado { opacity: .6; }
.usu-form { border: 2px solid var(--amarillo); }
.usu-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 10px; }
.usu-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.usu-opcion { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border: 2px solid var(--linea); border-radius: 12px; background: var(--blanco);
  font: inherit; color: var(--azul-profundo); cursor: pointer; text-transform: none; letter-spacing: 0; }
.usu-opcion small { color: var(--gris); font-weight: 400; }
.usu-opcion.on { border-color: var(--amarillo); background: var(--amarillo-fondo); }
.usu-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.usu-chip { padding: 8px 14px; border-radius: 999px; border: 2px solid var(--linea); background: var(--blanco); font: inherit; font-weight: 600; color: var(--azul); cursor: pointer; }
.usu-chip.on { background: var(--azul-profundo); border-color: var(--azul-profundo); color: var(--amarillo); }
.usu-activo { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-weight: 600; }
@media (max-width: 700px) { .usu-fila { grid-template-columns: 1fr; } }

/* =====================================================================
   FORMATO AGRAP 2 (6 oct 2026) — pedido: «que se parezca más a Agrap».
   Copia la ficha visual de la App Unificada (static/estilos.css, static_shell/shell.css,
   acabado.css y la hoja «Informe de corte» de la Escalera): crema #f9f9f7, tarjetas blancas
   de radio 20 con sombra suave, Outfit, cifras tabulares, cabecera de tabla en azul marino,
   control segmentado tipo iOS, botones píldora y, en el PC, la barra lateral azul con filo
   amarillo. Solo forma: ningún nombre de clase cambia (el JS depende de ellos).
   ===================================================================== */
@font-face { font-family: 'Outfit'; font-weight: 500; font-display: swap; src: url('../fuentes/outfit-500.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 800; font-display: swap; src: url('../fuentes/outfit-800.woff2') format('woff2'); }

:root {
  --bg: #f9f9f7; --bg2: #ffffff;
  --ink: #1d1d1f; --ink2: #424245; --mut: #86868b;
  --line: #e5e5ea; --line2: #d2d2d7;
  --blue: #00507d; --blue-d: #003b5c; --blue-deep: #00283f; --blue-soft: #e6eef3;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 28px rgba(0,0,0,.07);
  --shadow-l: 0 2px 6px rgba(0,0,0,.05), 0 18px 50px rgba(0,0,0,.12);
  --r: 20px; --r-s: 14px;
  --font: Outfit, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  /* los nombres viejos apuntan a la ficha nueva */
  --tinta: var(--ink); --gris: #6e6e73; --linea: var(--line); --radio: var(--r); --sombra: var(--shadow);
  --filo: linear-gradient(90deg, #fdb913 0%, #fdb913 22%, #007a33 40%, #003b5c 66%, #00283f 100%);
}
body {
  background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: rgba(0, 80, 125, .18); }
h1, h2, h3, h4 { letter-spacing: -.02em; }
h2 { font-size: 17px; font-weight: 650; color: var(--ink); }
h3 { font-size: 15px; font-weight: 640; }
h4 { color: var(--mut); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; font-weight: 640; }
small, .nota, .vacio { color: var(--mut); }
.nota { font-size: 13px; }
.mut { color: var(--mut); font-weight: 480; letter-spacing: 0; }
td, th, .num, .kpi-valor { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---------- Cabecera: barra clara translúcida con el filo de marca (topbar de Agrap) ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 25; gap: 12px; min-height: 64px;
  background: rgba(249, 249, 247, .82); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  color: var(--ink); border-bottom: .5px solid var(--line2);
  padding: calc(10px + var(--seguro-arriba)) 18px 10px;
}
.cabecera::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--filo); pointer-events: none; }
.cabecera-logo { width: 48px; height: 34px; padding-right: 13px; border-right: 1px solid rgba(0, 59, 92, .16); object-fit: contain; object-position: left center; box-sizing: border-box; }
.cabecera-bodega { padding: 0; gap: 1px; }
.cabecera-bodega #bodegaActiva { font-size: 18px; font-weight: 680; letter-spacing: -.02em; color: var(--ink); }
.cabecera-bodega #bodegaActiva::after { color: var(--mut); font-size: 13px; }
.cabecera-bodega small { color: var(--mut); font-size: 11.5px; letter-spacing: -.01em; }
.btn-atras {
  min-height: 36px; padding: 0 14px 0 10px; border-radius: 980px; border: .5px solid var(--line2); background: #fff;
  color: var(--blue-d); font-size: 15px; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); transition: .12s;
}
.btn-atras span { font-size: 13.5px; }
.btn-atras:hover { border-color: var(--blue); }
.btn-atras:active { background: var(--blue-soft); }
.indicador { background: rgba(253, 185, 19, .22); color: #8a6300; font-size: 12px; font-weight: 640; padding: 5px 12px; }
.indicador.alerta-dias { background: rgba(255, 59, 48, .14); color: #c4271d; }
.version { color: var(--mut); font-size: 11.5px; }
.banda-pendientes { background: #fff4f2; color: #c4271d; border-bottom: .5px solid #f3c7c2; font-size: 14px; }

/* ---------- Pestañas del teléfono: barra inferior translúcida tipo iOS ---------- */
.pestanas {
  background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-top: .5px solid var(--line2);
}
.pestana, .pestana.activa { min-height: 60px; color: var(--mut); font-size: 11px; font-weight: 600; gap: 3px; background: none; box-shadow: none; letter-spacing: -.01em; }
.pestana span { font-size: 1.25rem; padding: 3px 16px; border-radius: 980px; transition: background .12s; }
.pestana.activa { color: var(--blue-d); font-weight: 680; }
.pestana.activa span { background: var(--blue-soft); }

/* ---------- PC: la barra lateral azul de Agrap (filo amarillo, ítem activo en pastilla crema) ---------- */
@media (min-width: 1000px) {
  body:not([data-modo="oficina"]) { padding-left: 236px; padding-bottom: 40px; }
  body:not([data-modo="oficina"]) .pestanas {
    position: fixed; inset: 0 auto 0 0; width: 236px; z-index: 30; display: flex; flex-direction: column; gap: 3px;
    padding: 92px 12px 14px; background: var(--azul); border: 0; border-right: 3px solid var(--amarillo);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  body:not([data-modo="oficina"]) .pestanas::before {
    content: ""; position: absolute; left: 20px; top: 24px; width: 150px; height: 30px;
    background: url('../iconos/wordmark-cream.png') left center / contain no-repeat;
  }
  body:not([data-modo="oficina"]) .pestanas::after {
    content: "Campo · fincas de banano"; position: absolute; left: 21px; top: 58px; font-size: 11px; color: rgba(255, 255, 255, .7);
    letter-spacing: -.01em; padding-bottom: 12px; width: calc(100% - 42px); border-bottom: 1px solid rgba(255, 255, 255, .14);
  }
  body:not([data-modo="oficina"]) .pestana {
    flex-direction: row; justify-content: flex-start; min-height: 0; padding: 9px 10px; border-radius: 10px; gap: 10px;
    color: rgba(255, 255, 255, .86); font-size: 13.5px; font-weight: 520; text-align: left;
  }
  body:not([data-modo="oficina"]) .pestana span { width: 20px; padding: 0; font-size: 15px; text-align: center; background: none; }
  body:not([data-modo="oficina"]) .pestana:hover { background: rgba(255, 255, 255, .09); color: #fff; }
  body:not([data-modo="oficina"]) .pestana.activa { background: var(--crema); color: var(--azul); font-weight: 640; box-shadow: 0 2px 8px rgba(0, 20, 35, .25); }
  body:not([data-modo="oficina"]) .pestana:focus-visible { outline: 3px solid rgba(253, 185, 19, .72); outline-offset: 2px; }
  body:not([data-modo="oficina"]) .cabecera { padding-left: 28px; padding-right: 28px; }
  body:not([data-modo="oficina"]) .pantalla { padding: 26px 28px; }
  body:not([data-modo="oficina"]) main { max-width: 1320px; }
  body:not([data-modo="oficina"]) .toast { bottom: 26px; left: 236px; }
}

/* ---------- Tarjetas ---------- */
.tarjeta { background: var(--bg2); border-radius: var(--r); border: .5px solid rgba(0, 0, 0, .04); box-shadow: var(--shadow); padding: 22px 24px; margin-bottom: 18px; }
.tarjeta h2 { font-size: 17px; font-weight: 650; color: var(--ink); margin-bottom: 12px; }
.tarjeta h2 .mut { font-size: 13px; }
@media (max-width: 600px) {
  body { font-size: 16px; }
  .tarjeta { padding: 16px; border-radius: 18px; margin-bottom: 12px; }
  .tarjeta h2 { font-size: 16.5px; }
}

/* ---------- Botones: píldoras como .btn-refresh / .pillbtn de Agrap ---------- */
.btn {
  min-height: 44px; border-radius: 980px; padding: .5em 1.25em; border: 1px solid transparent; font-size: 15px; font-weight: 600;
  letter-spacing: -.01em; transition: background .12s, color .12s, border-color .12s, box-shadow .12s, transform .12s;
}
.btn.primario { background: var(--blue-d); color: #fff; box-shadow: 0 1px 2px rgba(0, 59, 92, .4); }
.btn.primario:hover:not(:disabled) { background: var(--blue); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 59, 92, .36); }
.btn.primario:active { background: var(--blue-deep); transform: none; }
.btn.secundario { background: #fff; color: var(--blue-d); border: 1.5px solid rgba(0, 59, 92, .3); box-shadow: 0 1px 2px rgba(0, 59, 92, .12); }
.btn.secundario:hover:not(:disabled) { background: var(--blue-d); color: #fff; border-color: var(--blue-d); }
.btn.oscuro { background: var(--blue-deep); color: #fff; }
.btn.peligro { background: #c4271d; color: #fff; }
.btn.mini { min-height: 34px; padding: .3em 1em; font-size: 13px; font-weight: 560; background: #fff; border: .5px solid var(--line2); color: var(--ink2); }
.btn.mini:hover:not(:disabled) { border-color: var(--blue); color: var(--blue-d); }
.btn-grande { min-height: 54px; font-size: 16.5px; }
.btn:focus-visible { outline: 3px solid rgba(253, 185, 19, .72); outline-offset: 2px; }
.btn.btn-claro { background: rgba(249, 249, 247, .06); color: var(--crema); border: 1px solid rgba(249, 249, 247, .22); }
.btn.btn-claro:hover { background: rgba(249, 249, 247, .12); }
.lobby-ingreso .btn.primario:hover:not(:disabled) { background: var(--amarillo); filter: brightness(1.06); box-shadow: 0 8px 22px rgba(253, 185, 19, .3); }
@media (max-width: 600px) { .btn { min-height: 48px; } .btn.mini { min-height: 38px; } }

/* ---------- Campos ---------- */
.campo > span { font-size: 11px; font-weight: 640; color: var(--mut); text-transform: uppercase; letter-spacing: .03em; }
.campo input:not([type=checkbox]), .campo select, .rdt-input, textarea.firma, .rdt-dia input[type=date] {
  min-height: 44px; border: .5px solid var(--line2); border-radius: 10px; padding: 8px 12px; background: #fff; font-size: 15px; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.campo input:focus, .campo select:focus, .rdt-input:focus, textarea.firma:focus, .rdt-dia input[type=date]:focus {
  border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(0, 80, 125, .18);
}
.campo input[readonly] { background: #f2f2f4; color: var(--mut); }
.rdt-campo { font-size: 11px; font-weight: 640; color: var(--mut); letter-spacing: .03em; }
.rdt-sugerencias { border: .5px solid var(--line2); border-radius: 14px; box-shadow: var(--shadow-l); }
.rdt-opcion.marcada { background: var(--blue-d); }
.rdt-ayuda { color: var(--blue-d); font-size: 13px; }
.rdt-captura { border: 1.5px solid rgba(0, 59, 92, .35); }
.rdt-lote { background: rgba(253, 185, 19, .22); color: #8a6300; }
.buscador-material input, .persona-input { border: 1.5px solid rgba(0, 59, 92, .35); border-radius: 14px; }
.buscador-material input:focus, .persona-input:focus { border-color: var(--blue-d); box-shadow: 0 0 0 4px rgba(0, 80, 125, .15); }
.material-opcion, .persona-opcion { border: .5px solid var(--line2); box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
@media (max-width: 600px) { .campo input:not([type=checkbox]), .campo select, .rdt-input { font-size: 16px; } }

/* ---------- Control segmentado (iOS, como .seg de Agrap) ---------- */
.segmentos, .rdt-segmento { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: rgba(120, 120, 128, .12); }
.segmentos { display: flex; }
.segmento, .rdt-segmento button {
  min-height: 36px; border: 0; background: none; color: var(--ink2); border-radius: 9px; font-size: 13.5px; font-weight: 560;
  padding: 7px 16px; cursor: pointer; transition: .15s;
}
.segmento.activo, .rdt-segmento button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 1px rgba(0, 0, 0, .04); }
.usu-chip, .rdt-chip {
  padding: 6px 14px; border-radius: 980px; border: .5px solid var(--line2); background: #fff; font-size: 13px; font-weight: 560; color: var(--ink2); transition: .15s;
}
.usu-chip:hover, .rdt-chip:hover { border-color: var(--blue); color: var(--blue-d); }
.usu-chip.on { background: var(--blue-d); border-color: var(--blue-d); color: #fff; box-shadow: 0 1px 5px rgba(0, 59, 92, .35); }

/* ---------- Tablas: cabecera en azul marino (acabado.css de Agrap) ---------- */
.tabla { border-collapse: separate; border-spacing: 0; font-size: 14px; }
.tabla thead th {
  background: var(--blue-d); color: #fff; font-size: 11.5px; font-weight: 640; text-transform: none; letter-spacing: 0;
  border-bottom: 0; padding: 10px 12px; white-space: nowrap;
}
.tabla thead tr:first-child th:first-child { border-top-left-radius: 8px; }
.tabla thead tr:first-child th:last-child { border-top-right-radius: 8px; }
.tabla td { padding: 10px 12px; border-bottom: 1px solid #eef0f2; }
.tabla tbody tr { transition: background .12s; }
.rdt-tabla tbody tr:hover, .rdt-tabla tbody tr:hover td { background: var(--blue-soft); }
.rdt-tabla tr.rdt-copiada, .rdt-tabla tr.rdt-copiada td { background: #fff7d6; }
.tabla-scroll { border-radius: 8px; }

/* ---------- Cifras (KPI de Agrap) ---------- */
.kpis { gap: 14px; }
.kpi { border-left: 0; border-radius: var(--r); border: .5px solid rgba(0, 0, 0, .03); box-shadow: var(--shadow); padding: 18px 20px; display: flex; flex-direction: column; }
.kpi-valor { order: 2; font-size: 28px; font-weight: 680; letter-spacing: -.025em; color: var(--ink); margin-top: 6px; }
.kpi-rotulo { order: 1; font-size: 11.5px; font-weight: 600; color: var(--mut); text-transform: uppercase; letter-spacing: .01em; }
.kpi.kpi-alerta { background: #fff5f4; }

/* ---------- Avisos, etiquetas, diálogos ---------- */
.alerta { border-radius: var(--r-s); padding: 14px 18px; font-size: 14.5px; }
.alerta-aviso { background: #fffaf0; border: 1px solid #ffe1a8; color: #7a5600; }
.alerta-info { background: var(--blue-soft); border: 1px solid rgba(0, 80, 125, .18); color: var(--blue-deep); }
.alerta-error { background: #fff4f2; border: 1px solid #f3c7c2; color: #a3231a; }
.etiqueta { border-radius: 980px; padding: 3px 10px; font-size: 11px; font-weight: 600; letter-spacing: -.01em; border: 0; }
.etiqueta.exportado { background: var(--blue-soft); color: var(--blue-d); }
.etiqueta.pendiente, .etiqueta.parcial { background: rgba(253, 185, 19, .22); color: #8a6300; border: 0; }
.etiqueta.abierto { background: rgba(0, 122, 51, .14); color: #00602a; }
.etiqueta.vacio { background: rgba(120, 120, 128, .14); color: var(--ink2); }
.capa { background: rgba(0, 0, 0, .34); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.dialogo { border-radius: 22px; padding: 22px 24px; box-shadow: 0 30px 90px rgba(0, 0, 0, .4); }
.dialogo h2 { font-size: 21px; font-weight: 680; }
.toast { background: rgba(30, 30, 32, .94); border-radius: 13px; font-size: 14.5px; font-weight: 520; padding: 12px 20px; box-shadow: 0 10px 40px rgba(0, 0, 0, .3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.toast.ok { background: rgba(0, 96, 42, .95); }
.toast.error { background: rgba(196, 39, 29, .95); }
.toast.aviso { background: var(--amarillo); color: #3d2c00; }
.despacho, .revision-despacho { border: .5px solid var(--line2); border-radius: var(--r-s); }
.ultimo, .acumulado-caja { border-radius: var(--r); box-shadow: var(--shadow); }
details summary { color: var(--blue-d); }

/* ---------- Encabezados de pantalla (Recepción, Panel) ---------- */
.recep-cabeza h1 { font-size: 24px; font-weight: 680; letter-spacing: -.025em; color: var(--ink); }
.recep-cabeza .nota { margin: 4px 0 0; }
.recep-finca, .usu-fila, .usu-opcion {
  border: .5px solid rgba(0, 0, 0, .06); border-radius: 16px; background: #fff; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s;
}
.recep-finca:hover, .usu-fila:hover { transform: translateY(-2px); box-shadow: var(--shadow-l); background: #fff; border-color: rgba(0, 59, 92, .09); }
.recep-finca.on, .usu-opcion.on { border-color: var(--blue-d); background: #fff; box-shadow: 0 0 0 2px var(--blue-d), var(--shadow); }
.recep-badge { background: var(--blue-d); color: #fff; }
.recep-bandeja { border: .5px solid rgba(0, 0, 0, .04); box-shadow: 0 0 0 2px rgba(253, 185, 19, .65), var(--shadow); }
.recep-bandeja.recep-aldia { box-shadow: var(--shadow); }
.recep-conectar, .rdt-poca { background: #fffaf0; border: 1px solid #ffe1a8; color: #7a5600; }
.recep-rdt { border: .5px solid var(--line2); }
.usu-form { border: 0; box-shadow: 0 0 0 2px rgba(0, 59, 92, .25), var(--shadow); }

/* =====================================================================
   HOJA DE CAMPO · «Informe de corte» (como en Agrap › Escalera › Informe de corte)
   La usan el modo Corte y embolse (digitar-campo.js) y el Panel del master.
   ===================================================================== */
.pantalla[data-pantalla="campo"] { max-width: 1100px; }
.inf-header {
  display: flex; gap: 16px 24px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 16px; padding: 20px 22px;
  background: linear-gradient(135deg, #003b5c, #00283f); border-radius: 20px; color: #f9f9f7; box-shadow: 0 18px 40px rgba(0, 40, 63, .22);
}
.inf-header .ih-txt { flex: 1 1 320px; min-width: 0; }
.ih-kicker, .pan-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fdb913; }
.pan-kicker { color: #b07d10; }
.inf-header h2 { margin: 4px 0 0; font-size: 22px; font-weight: 650; color: #f9f9f7; }
.inf-header p { margin: 8px 0 0; color: rgba(249, 249, 247, .78); line-height: 1.55; font-size: 14px; max-width: 54ch; }
.inf-header p::first-letter { text-transform: uppercase; }
.ih-meta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.ih-finca { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.ih-sem { font-size: 12px; color: rgba(249, 249, 247, .7); }
.ih-fecha { display: flex; gap: 6px; align-items: center; margin-top: 2px; }
.ih-fecha input, .ih-fecha button {
  font: inherit; font-size: 13.5px; font-weight: 600; min-height: 36px; border-radius: 9px; padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer;
}
.ih-fecha button { min-width: 36px; font-size: 17px; line-height: 1; }
.ih-fecha button:hover:not(:disabled) { background: rgba(255, 255, 255, .24); }
.ih-fecha button:disabled { opacity: .35; cursor: default; }
.ih-fecha input::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .8; }
.inf-avance { display: flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 560; color: rgba(249, 249, 247, .85); margin-top: 2px; }
.inf-avance .barra { width: 110px; height: 6px; border-radius: 980px; background: rgba(249, 249, 247, .22); overflow: hidden; }
.inf-avance .barra i { display: block; height: 100%; background: linear-gradient(90deg, #007a33, #fdb913); transition: width .3s; }
@media (max-width: 700px) {
  .inf-header { padding: 16px; border-radius: 18px; }
  .ih-meta { align-items: flex-start; text-align: left; }
  .inf-header p { display: none; }
  .inf-header h2 { font-size: 20px; }
}

/* chips del día: nombre arriba, fecha abajo; hoy en amarillo, con dato = filo verde */
.dchip {
  display: block; border-radius: 11px; padding: 6px 4px 5px; background: #eef1f5; border: 1px solid transparent; line-height: 1.15;
  text-align: center; font: inherit; color: inherit; transition: .15s;
}
.dchip .dnom { display: block; font-size: 11.5px; font-weight: 700; color: #00283f; letter-spacing: .04em; text-transform: uppercase; }
.dchip .dfec { display: block; font-size: 10px; font-weight: 520; color: #6b7684; margin-top: 2px; font-variant-numeric: tabular-nums; }
.dchip.dom { background: #f4eef6; }
.dchip.lleno { border-color: rgba(0, 122, 51, .45); }
.dchip.hoy { background: #fdb913; border-color: #e0a30c; }
.dchip.hoy .dnom, .dchip.hoy .dfec { color: #3d2c00; }
.dchip.on { background: #003b5c; border-color: #003b5c; box-shadow: 0 4px 12px rgba(0, 59, 92, .3); }
.dchip.on .dnom { color: #fff; }
.dchip.on .dfec { color: #fdb913; }
button.dchip { cursor: pointer; }
button.dchip:hover:not(:disabled):not(.on) { border-color: #003b5c; }
button.dchip:disabled { opacity: .4; cursor: default; }
.inf-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 16px; }

/* cifras de la hoja: la primera con filo amarillo, las demás verde */
.inf-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 18px; }
.inf-kpi {
  background: #fff; border: 1px solid #e5e7eb; border-top: 3px solid #007a33; border-radius: 16px; padding: 14px 16px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .05); min-width: 0; transition: transform .15s, box-shadow .15s;
}
.inf-kpi:first-child { border-top-color: #fdb913; }
.inf-kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-l); }
.inf-kpi .lbl { font-size: 11.5px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: .01em; }
.inf-kpi .val { font-size: 22px; font-weight: 700; line-height: 1.1; color: #00283f; margin-top: 6px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.inf-kpi:first-child .val { color: #003b5c; font-size: 26px; }
.inf-kpi .note { font-size: 12px; color: var(--mut); margin-top: 5px; font-weight: 480; }
@media (max-width: 600px) {
  .inf-totals { grid-template-columns: 1fr 1fr; gap: 10px; }
  .inf-totals .inf-kpi:first-child { grid-column: 1 / -1; }
  .inf-kpi { padding: 12px 14px; }
}

/* la hoja: secciones con raya amarilla, rótulo + unidad a la izquierda, cifra a la derecha */
.inf-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.inf-cabeza h2 { margin: 0; }
.inf-estado { font-size: 12px; color: var(--mut); font-weight: 560; }
.inf-sec-t {
  display: flex; align-items: center; gap: 7px; margin: 18px 0 8px; font-size: 10.5px; font-weight: 760; color: #00283f;
  text-transform: uppercase; letter-spacing: .07em;
}
.inf-sec-t::after { content: ""; display: block; width: 26px; height: 2px; border-radius: 2px; background: #fdb913; }
.inf-filas { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 8px 22px; }
.inf-fila { display: grid; grid-template-columns: minmax(0, 1fr) 116px; align-items: center; gap: 10px; }
.inf-lbl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-width: 0; color: var(--ink2); font-size: 14px; font-weight: 560; }
.inf-lbl .un { font-size: 10.5px; color: var(--mut); font-weight: 500; white-space: nowrap; }
.inf-in, .inf-v {
  width: 100%; min-width: 0; border: 1px solid rgba(0, 0, 0, .08); border-radius: 14px; padding: 10px 12px; text-align: right;
  font: 600 15px var(--font); color: #00283f; background: linear-gradient(180deg, #fff, #fbfdff); font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 18px rgba(2, 30, 45, .04); transition: border-color .12s, box-shadow .12s, background .12s;
}
.inf-in::placeholder { color: #c7ccd4; font-weight: 400; }
.inf-in:hover { border-color: #b9bcc4; }
.inf-in:focus { border-color: #003b5c; outline: none; box-shadow: 0 0 0 3px rgba(0, 59, 92, .15); background: #fff; }
.inf-in.lleno { border-color: rgba(0, 122, 51, .35); background: rgba(0, 122, 51, .05); }
.inf-in.inf-draft { border-color: #f59e0b; background: #fffbeb; }
.inf-v { display: block; background: #f7f8fa; box-shadow: none; border-color: transparent; }
.inf-obs { text-align: left; font-weight: 500; }
.inf-edades { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.inf-edad { display: grid; gap: 6px; min-width: 0; }
.inf-edad .inf-in, .inf-edad .inf-v { text-align: center; }
.inf-edad.tot .dchip { background: #003b5c; }
.inf-edad.tot .dnom { color: #fff; }
.inf-edad.tot .dfec { color: rgba(255, 255, 255, .7); }
.inf-edad.tot .inf-v { background: var(--blue-soft); color: #003b5c; font-weight: 700; }
.inf-pie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.inf-pie .mut, .inf-total { font-size: 13px; }
.inf-total { color: var(--blue-d); font-weight: 600; }
@media (max-width: 600px) {
  .inf-filas { grid-template-columns: 1fr; gap: 8px; }
  .inf-fila { grid-template-columns: minmax(0, 1fr) 120px; }
  .inf-in { font-size: 16px; }
  .inf-edades { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .inf-edad.tot { grid-column: 1 / -1; grid-template-columns: 1fr 120px; align-items: center; }
  .inf-edad .inf-in, .inf-edad .inf-v { padding: 10px 4px; }
  .inf-semana { gap: 4px; }
  .dchip .dnom { font-size: 10.5px; letter-spacing: .02em; }
  .pantalla[data-pantalla="campo"] .rdt-tabla th:nth-child(4), .pantalla[data-pantalla="campo"] .rdt-tabla td:nth-child(4) { display: none; }
}

/* la hoja SEMANAL del informe de corte (digitar-campo.js): la tabla de Agrap › Informe de corte
   (escalera/templates/index.html › table.inf-tabla), con la columna de rótulos fija al desplazarse */
.campo-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 10px; }
@media (min-width: 701px) { .campo-scroll { max-height: 72vh; overflow-y: auto; scroll-padding: 64px 0 8px 170px; } }
table.campo-tabla { border-collapse: separate; border-spacing: 6px 7px; width: 100%; min-width: 700px; }
table.campo-tabla th, table.campo-tabla td { border: none; padding: 0; background: none; }
table.campo-tabla thead th { position: sticky; top: 0; z-index: 3; background: #fff; color: var(--mut); font-weight: 600; font-size: 11px; text-align: center; padding-bottom: 2px; box-shadow: 0 -7px 0 #fff, 0 7px 0 #fff; }
table.campo-tabla thead th.tot { background: #003b5c; color: #fff; border-radius: 11px; padding: 6px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; box-shadow: none; }
table.campo-tabla .tb-lbl { position: sticky; left: 0; z-index: 2; background: #fff; box-shadow: -6px 0 0 #fff, 6px 0 0 #fff; text-align: left; color: var(--ink2); font-weight: 560; font-size: 14px; white-space: nowrap; padding-right: 6px; min-width: 150px; }
table.campo-tabla thead th.tb-lbl { z-index: 4; }
table.campo-tabla tr.inf-sec td { padding: 14px 0 2px; }
table.campo-tabla tr.inf-sec:first-child td { padding-top: 2px; }
table.campo-tabla tr.inf-sec .inf-sec-t { display: inline-flex; margin: 0; position: sticky; left: 0; }
.campo-tabla .lbl-txt { display: flex; align-items: baseline; gap: 6px; }
.campo-tabla .lbl-txt .un { font-size: 10px; color: var(--mut); font-weight: 500; }
.campo-tabla .lbl-cinta { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; width: 80px; flex: none; font-size: 10px; font-weight: 550; color: var(--mut); letter-spacing: .02em; white-space: nowrap; }
.campo-tabla .lbl-cinta .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0, 0, 0, .25); flex: none; }
table.campo-tabla input {
  width: 100%; min-width: 64px; min-height: 42px; border: 1px solid rgba(0, 0, 0, .06); border-radius: 14px; padding: 10px 12px;
  font: 600 14px var(--font); text-align: right; background: linear-gradient(180deg, #fff, #fbfdff); color: #00283f;
  font-variant-numeric: tabular-nums; transition: .12s; box-shadow: 0 6px 18px rgba(2, 30, 45, .04);
}
table.campo-tabla input::placeholder { color: #c7ccd4; font-weight: 400; }
table.campo-tabla input:hover { border-color: #b9bcc4; }
table.campo-tabla input:focus { border-color: #003b5c; outline: none; box-shadow: 0 0 0 3px rgba(0, 59, 92, .15); background: #fff; }
table.campo-tabla input.lleno { border-color: rgba(0, 122, 51, .35); background: rgba(0, 122, 51, .05); }
table.campo-tabla input.inf-draft { border-color: #f59e0b !important; background: #fffbeb !important; }
/* Repique (9 oct 2026): por día, las cintas con repique como puntos de color con su edad; abre la lista. */
.campo-tabla .repique-btn { width: 100%; min-width: 64px; min-height: 42px; border: 1px dashed #b9bcc4; border-radius: 14px; padding: 6px 8px;
  background: #fff; color: #6b7280; font: 600 14px var(--font); cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: center; }
.campo-tabla .repique-btn:hover:not(:disabled) { border-color: #003b5c; color: #003b5c; }
.campo-tabla .repique-btn:disabled { cursor: default; opacity: .55; }
.campo-tabla .repique-btn.lleno { border-style: solid; border-color: rgba(0, 122, 51, .35); background: rgba(0, 122, 51, .05); }
.campo-tabla .repique-btn.inf-draft { border-style: solid; border-color: #f59e0b; background: #fffbeb; }
.rq-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: #00283f; font-variant-numeric: tabular-nums; }
.rq-chip .dot, .rq-opcion .dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0, 0, 0, .25); flex: none; }
.rq-lista { display: grid; gap: 6px; margin-top: 10px; max-height: 55vh; overflow-y: auto; }
.rq-opcion { display: grid; grid-template-columns: 22px 12px minmax(70px, auto) 1fr auto; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid #e3e6ea; border-radius: 12px; cursor: pointer; font-size: 15px; }
.rq-opcion:has(input:checked) { border-color: #003b5c; background: #eef4f8; }
.rq-opcion input { width: 20px; height: 20px; margin: 0; min-height: 0; padding: 0; }
.rq-opcion .mut { font-size: 12.5px; text-align: right; }
table.campo-tabla input:disabled { background: #f4f5f7; border-color: transparent; box-shadow: none; cursor: not-allowed; }
table.campo-tabla td.col-hoy input { box-shadow: inset 0 0 0 1px rgba(253, 185, 19, .5); }
table.campo-tabla td.col-hoy input:focus { box-shadow: 0 0 0 3px rgba(0, 59, 92, .15); }
table.campo-tabla td.tot { text-align: right; font-weight: 700; color: #003b5c; padding-left: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 64px; }
table.campo-tabla tr.fila-obs input { text-align: left; font-weight: 500; font-size: 13px; }
/* chip del día en la cabecera: botón (escoge el día del embolse); .sel = ese día; ✓/punto = estado en Agrap */
.campo-tabla .dchip { position: relative; width: 100%; cursor: pointer; }
.campo-tabla .dchip:disabled { opacity: .45; cursor: default; }
.campo-tabla .dchip.sel { box-shadow: 0 0 0 2px #003b5c; }
.campo-tabla .dchip.lleno { border-color: rgba(0, 122, 51, .45); }
.dchip .dok { display: none; }
.dchip.aprob .dok, .dchip.pend .dok { display: block; position: absolute; top: -5px; right: -4px; width: 15px; height: 15px; border-radius: 50%; border: 2px solid #fff; font-size: 9px; line-height: 11px; font-weight: 800; color: #fff; }
.dchip.aprob .dok { background: #007a33; }
.dchip.aprob .dok::before { content: "✓"; }
.dchip.pend .dok { background: #f59e0b; width: 11px; height: 11px; top: -3px; right: -2px; }
.campo-borrador { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 12px 16px; background: #fffbeb; border: 1px solid #f5d56f; border-radius: 14px; font-size: 13px; color: #92400e; }
.campo-borrador .btn { margin-left: auto; min-height: 34px; font-size: 12.5px; }
.campo-ayuda { font-size: 12px; margin: 10px 0 0; }
.ih-fecha .ih-hoy { font-size: 13px; min-width: 0; }
@media (max-width: 700px) {
  table.campo-tabla { border-spacing: 5px 6px; min-width: 640px; }
  table.campo-tabla .tb-lbl { min-width: 112px; font-size: 13px; }
  .campo-tabla .lbl-txt { flex-wrap: wrap; gap: 0 5px; }
  .campo-tabla .lbl-cinta { margin-left: 0; width: auto; flex-basis: 100%; }
  table.campo-tabla input { font-size: 16px; padding: 9px 8px; min-width: 60px; min-height: 44px; }
  table.campo-tabla .tb-lbl { box-shadow: -5px 0 0 #fff, 5px 0 0 #fff, 8px 0 10px -6px rgba(0, 0, 0, .12); }
}

/* =====================================================================
   PANEL del master (panel.js): tablero como el de Agrap
   ===================================================================== */
.pantalla[data-pantalla="panel"] { max-width: 1320px; margin: 0 auto; }
.panel .recep-cabeza { margin-bottom: 16px; }
.pan-dias { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; margin-bottom: 14px; scrollbar-width: thin; }
.pan-dia {
  flex: 0 0 auto; display: grid; justify-items: center; gap: 1px; min-width: 66px; padding: 6px 8px 6px; border-radius: 11px;
  background: #eef1f5; border: 1px solid transparent; font: inherit; cursor: pointer; line-height: 1.15; transition: .15s;
}
.pan-dia span { font-size: 11.5px; font-weight: 700; color: #00283f; letter-spacing: .04em; text-transform: uppercase; }
.pan-dia small { font-size: 10px; font-weight: 520; color: #6b7684; font-variant-numeric: tabular-nums; }
.pan-dia em { font-style: normal; font-size: 10px; font-weight: 640; color: #6b7684; margin-top: 2px; }
.pan-dia.dom { background: #f4eef6; }
.pan-dia.lleno { border-color: rgba(0, 122, 51, .45); }
.pan-dia.lleno em { color: #00602a; }
.pan-dia.hoy { background: #fdb913; border-color: #e0a30c; }
.pan-dia.hoy span, .pan-dia.hoy small, .pan-dia.hoy em { color: #3d2c00; }
.pan-dia:hover:not(.on) { border-color: #003b5c; }
.pan-dia.on { background: #003b5c; border-color: #003b5c; box-shadow: 0 4px 12px rgba(0, 59, 92, .3); }
.pan-dia.on span { color: #fff; }
.pan-dia.on small, .pan-dia.on em { color: #fdb913; }

.pan-fincas { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-bottom: 18px; }
.pan-finca {
  display: grid; gap: 8px; align-content: start; text-align: left; padding: 16px 18px; border-radius: 18px; background: #fff; font: inherit; cursor: pointer;
  border: .5px solid rgba(0, 0, 0, .04); box-shadow: var(--shadow); transition: transform .2s cubic-bezier(.22, .7, .25, 1), box-shadow .2s;
}
.pan-finca:hover { transform: translateY(-3px); box-shadow: var(--shadow-l); }
.pan-finca.on { box-shadow: 0 0 0 2px var(--blue-d), var(--shadow-l); }
.pan-finca-nombre { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 640; color: var(--mut); text-transform: uppercase; letter-spacing: .03em; }
.pan-finca-nombre::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--finca); flex: none; }
.pan-finca.on .pan-finca-nombre { color: var(--blue-d); }
.pan-cifras { font-size: 13px; color: var(--ink2); }
.pan-cifras b { font-size: 24px; font-weight: 680; letter-spacing: -.025em; color: var(--ink); }
.pan-nada { color: var(--mut); font-size: 15px; font-weight: 560; padding: 4px 0; }
.pan-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.pan-chip { font-size: 11px; font-weight: 580; padding: 3px 9px; border-radius: 980px; background: rgba(120, 120, 128, .12); color: var(--ink2); }
.pan-chip.pan-alerta { background: rgba(255, 59, 48, .12); color: #c4271d; }

.pan-rdt-cabeza h2 { margin: 2px 0 0; font-size: 18px; }
.pan-rdt-cabeza .nota { margin: 2px 0 0; font-size: 12.5px; }
.pan-rdt-cabeza .nota::first-letter { text-transform: uppercase; }
.pan-cabeza-fila { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pan-barras { display: flex; align-items: flex-end; gap: 5px; height: 76px; margin: 16px 0; padding: 6px 0 0; border-bottom: 1px solid var(--line); }
.pan-barra { flex: 1; height: 100%; display: flex; align-items: flex-end; padding: 0; border: 0; background: none; cursor: pointer; }
.pan-barra i { display: block; width: 100%; border-radius: 3px 3px 0 0; background: var(--blue-d); opacity: .22; transition: opacity .12s, filter .12s; }
.pan-barras:hover .pan-barra i { opacity: .16; }
.pan-barra.on i, .pan-barras .pan-barra:hover i { opacity: 1; }
.pan-barra.on i { background: #fdb913; }
.pan-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin: 4px 0 16px; }
.pan-kpis div {
  display: flex; flex-direction: column; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid #e5e7eb;
  border-top: 3px solid #007a33; box-shadow: 0 4px 16px rgba(15, 23, 42, .05);
}
.pan-kpis div:first-child { border-top-color: #fdb913; }
.pan-kpis small { order: -1; font-size: 11.5px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: .01em; }
.pan-kpis b { font-size: 24px; font-weight: 700; color: #00283f; line-height: 1.1; margin-top: 6px; letter-spacing: -.02em; }
.pan-kpis .pan-alerta { border-top-color: #c4271d; background: #fff8f7; }
.pan-kpis .pan-alerta b { color: #c4271d; }
.pan-vistas { margin-bottom: 12px; display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: rgba(120, 120, 128, .12); }
.pan-vistas .usu-chip { border: 0; background: none; border-radius: 9px; padding: 7px 16px; color: var(--ink2); box-shadow: none; }
.pan-vistas .usu-chip.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 1px rgba(0, 0, 0, .04); }
.pan-tabla td small { color: var(--mut); }
.pan-horas { display: flex; align-items: center; gap: 8px; min-width: 140px; font-variant-numeric: tabular-nums; }
.pan-bar { flex: 1; height: 6px; border-radius: 4px; background: rgba(120, 120, 128, .14); overflow: hidden; }
.pan-bar i { display: block; height: 100%; background: var(--blue-d); border-radius: 4px; }
.pan-fila-alerta td { background: rgba(217, 95, 57, .07); }
.pan-fila-alerta td:last-child { color: #a8401f; font-weight: 700; }
.pan-sello { padding: 5px 12px; border-radius: 980px; background: rgba(0, 122, 51, .14); color: #00602a; font-weight: 640; font-size: 12.5px; white-space: nowrap; }
.pan-corte .inf-totals { margin: 16px 0 4px; }
.pan-obs { margin: 0; color: var(--ink2); font-size: 14px; }
@media (max-width: 700px) {
  .pan-fincas { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pan-finca { padding: 12px 14px; }
  .pan-horas { min-width: 90px; }
  .pan-kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .pan-cabeza-fila { flex-wrap: wrap; }
}

/* Escalera: la hoja de Agrap (modulos/escalera/templates/index.html › .egrid), solo para ver.
   Una fila por semana de embolse; bloques de color; amarillo = cosechado, gris = estimación,
   azul = la semana que toca estimar, diagonal = edad de cada cohorte en esa semana. */
.pan-escalera .pan-rdt-cabeza { margin-bottom: 10px; }
.pan-escalera .pan-rdt-cabeza h2 .mut { font-size: 12.5px; font-weight: 480; }
.esc-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 12px; font-size: 12.5px; }
.segmini { display: inline-flex; background: rgba(120, 120, 128, .12); border-radius: 9px; padding: 2px; }
.segmini button { border: none; background: none; font: 560 12px var(--font, inherit); color: var(--ink2); padding: 5px 11px; border-radius: 7px; cursor: pointer; transition: .12s ease; }
.segmini button.active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.egrid-wrap { overflow: auto; max-height: 70vh; border: 1px solid var(--line); border-radius: 12px; -webkit-overflow-scrolling: touch; }
table.egrid { border-collapse: separate; border-spacing: 0; font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.egrid th, table.egrid td { padding: 8px 11px; border-bottom: 1px solid #e3e6ec; border-right: 1px solid #e3e6ec; }
table.egrid td:last-child, table.egrid th:last-child { border-right: none; }
table.egrid thead th { position: sticky; z-index: 5; background: #f0f2f5; color: var(--ink2); font-weight: 600; text-align: center; box-shadow: 0 1px 0 var(--line2); }
table.egrid thead tr.grp th { top: 0; height: 30px; box-sizing: border-box; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; font-weight: 700; color: var(--ink2); padding: 6px 8px; }
table.egrid thead tr.cols th { top: 30px; }
table.egrid .hb1 { background: #e8f1ff !important; } table.egrid .hb2 { background: #e7f8ee !important; }
table.egrid .hb3 { background: #fff3e0 !important; } table.egrid .hb4 { background: #f1ecfb !important; }
table.egrid .blkstart { border-left: 3px solid #aab0bb; }
table.egrid td.n { text-align: right; }
.celd-ej { background: #fff7d6; }
.celd-pr { background: #f4f4f6; }
.celd-ed { background: #c5dcf8; }
.celd-wh { background: #fff; }
table.egrid td.emb-act { background: #d6e9ff !important; }
table.egrid tr.estim8 td.blk3 { background-image: linear-gradient(rgba(0, 80, 125, .10), rgba(0, 80, 125, .10)); font-weight: 700; }
table.egrid tr.estim8 .s0 { box-shadow: inset 4px 0 0 var(--blue-d); font-weight: 700; }
table.egrid .stick { position: sticky; z-index: 4; }
table.egrid .s0 { left: 0; width: 48px; min-width: 48px; max-width: 48px; box-sizing: border-box; }
table.egrid .s1 { left: 48px; text-align: left; }
table.egrid thead .stick { z-index: 6; background: #f0f2f5 !important; }
table.egrid tbody tr:hover td { filter: brightness(.97); }
table.egrid td.celd-diag { background-image: linear-gradient(rgba(0, 90, 200, .22), rgba(0, 90, 200, .22)) !important; }
.esc-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; vertical-align: middle; margin-right: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.esc-hoy { display: inline-block; padding: 0 5px; border-radius: 6px; background: var(--blue-d); color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; vertical-align: 1px; }
.pan-leyenda { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-size: 12.5px; color: var(--ink2); }
.pan-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.pan-leyenda i { width: 14px; height: 14px; border-radius: 3px; border: 1px solid #e3e6ec; }
.pan-leyenda i.celd-diag { background: #f4f4f6; background-image: linear-gradient(rgba(0, 90, 200, .22), rgba(0, 90, 200, .22)); }
.pan-leyenda i.pan-ley-8 { background: #e6eef3; box-shadow: inset 3px 0 0 var(--blue-d); }
.pan-tabla-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 600px) { .pan-kpis > div:last-child:nth-child(odd) { grid-column: span 2; } }
/* Informes para descargar */
.pan-informes .pan-rdt-cabeza { margin-bottom: 12px; }
.pan-inf-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.pan-inf { display: flex; align-items: flex-start; gap: 10px; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line2); background: #fff; cursor: pointer; font: inherit; color: var(--ink); transition: .12s; min-width: 0; }
.pan-inf:hover:not(:disabled) { border-color: var(--blue-d); box-shadow: 0 4px 12px rgba(0, 59, 92, .12); }
.pan-inf:disabled { opacity: .5; cursor: default; }
.pan-inf > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pan-inf strong { font-size: 13.5px; font-weight: 640; color: var(--blue-deep); overflow-wrap: anywhere; }
.pan-inf small { font-size: 12px; color: var(--mut); }
.pan-inf-ico { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #fdb913; color: #3d2c00; font-weight: 800; }
@media (max-width: 600px) { .pan-inf-lista { grid-template-columns: 1fr; } table.egrid { font-size: 12px; } table.egrid th, table.egrid td { padding: 7px 9px; } }
.btn.mini, .recep-cabeza .btn { white-space: nowrap; }
.recep-cabeza { align-items: center; }
@media (max-width: 600px) { .pan-tabla th, .pan-tabla td { padding: 9px 8px; } .pan-horas { min-width: 70px; } }
a.btn { text-decoration: none; }
@media (min-width: 1000px) { body.en-lobby:not([data-modo="oficina"]) .toast { left: 12px; } }
.inf-cabeza + .inf-filas, .inf-cabeza + .tabla-scroll { margin-top: 14px; }

/* ---------- Todos los equipos: teléfono, iPad, Android, Windows (v2.37) ---------- */
html { text-size-adjust: 100%; }
/* Barra de direcciones móvil: alturas con dvh donde el navegador lo entiende (vh queda de respaldo). */
@supports (height: 100dvh) {
  .dialogo { max-height: 90dvh; }
  .tabla-scroll { max-height: 60dvh; }
  .egrid-wrap { max-height: 70dvh; }
  @media (min-width: 701px) { .campo-scroll { max-height: 72dvh; } }
}
/* iPhone de lado: nada debajo de la muesca. */
.cabecera { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
.pantalla { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
.lobby { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
.pestanas { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.toast { bottom: calc(76px + var(--seguro-abajo)); }
/* Almacén en un teléfono angosto: el material a todo lo ancho, cantidad y quién recibe debajo. */
@media (max-width: 480px) {
  .alm-linea { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .alm-linea > :first-child { grid-column: 1 / -1; }
}
/* Campos de números: cifras alineadas; el teclado lo pone inputmode. */
input[inputmode="decimal"], input[inputmode="numeric"] { font-variant-numeric: tabular-nums; }

/* Pantallas táctiles (teléfono, iPad, portátiles con pantalla táctil): toques de 44 px y letra de
   16 px en los campos (con menos, el iPhone y el iPad agrandan la página al escribir). */
@media (pointer: coarse) {
  .campo input:not([type=checkbox]), .campo select, .rdt-input, .rdt-dia input[type=date], .inf-in,
  table.campo-tabla input, .ih-fecha input, .tarjeta input:not([type=checkbox]):not([type=radio]), .tarjeta select,
  .dialogo input:not([type=checkbox]):not([type=radio]), .dialogo select, textarea { font-size: 16px; }
  /* los campos grandes siguen grandes */
  :is(.tarjeta, .dialogo) input.revision-cant { font-size: 1.3rem; }
  :is(.tarjeta, .dialogo) input.persona-input { font-size: 1.6rem; }
  :is(.tarjeta, .dialogo) .buscador-material input { font-size: 1.35rem; }
  .btn-atras, .btn.mini, .usu-chip, .rdt-chip, .rdt-segmento button, .ih-fecha button, .ih-fecha input { min-height: 44px; }
  .ih-fecha button, .btn-atras { min-width: 44px; }
  .segmini button { min-height: 40px; min-width: 44px; }
  .usu-activo { min-height: 44px; }
  .usu-activo input[type=checkbox] { width: 22px; height: 22px; }
  .campo.check { min-height: 44px; }
  .rdt-fijas { min-height: 44px; }
  body:not([data-modo="oficina"]) .pestana { min-height: 48px; }
  .tabla td button, .rdt-lote button { min-width: 36px; min-height: 36px; }
}
@media (pointer: coarse) and (min-width: 1000px) {
  body:not([data-modo="oficina"]) .pestana { min-height: 46px; font-size: 14.5px; }
}
/* Sin mouse no hay «hover»: nada se queda levantado después de tocar. */
@media (hover: none) {
  .lobby-finca:hover, .recep-finca:hover, .usu-fila:hover, .inf-kpi:hover, .btn.primario:hover:not(:disabled) { transform: none; }
  .btn.primario:hover:not(:disabled) { box-shadow: none; background: var(--azul); }
  .btn.secundario:hover:not(:disabled) { background: #fff; color: var(--blue-d); border-color: var(--blue-d); }
}
/* Fluidez: el desenfoque detrás de barras y diálogos es caro en teléfonos Android sencillos;
   en pantallas táctiles se cambia por un fondo casi opaco (se ve igual). */
@media (pointer: coarse), (max-width: 999px) {
  .cabecera { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(249, 249, 247, .97); }
  .pestanas { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .98); }
  .capa { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0, 20, 32, .45); }
  .toast { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; } }
/* lo que se lleva a la vista no queda debajo de la cabecera fija */
.usu-form, .tarjeta { scroll-margin-top: calc(var(--alto-cabecera, 64px) + 12px); }
input, select, textarea { scroll-margin-bottom: calc(80px + var(--seguro-abajo)); }

/* ---------- ⚖️ Pesos de la báscula (digitar-pesos.js) ---------- */
.pantalla[data-pantalla="pesos"] { max-width: 1000px; margin: 0 auto; }
.pantalla[data-pantalla="pesos"].pes-soltar .pes-carga { outline: 3px dashed #003b5c; outline-offset: 4px; background: var(--blue-soft); }
.pes-boton {
  display: flex; align-items: center; gap: 16px; width: 100%; padding: 22px 20px; border-radius: 18px; cursor: pointer;
  background: linear-gradient(135deg, #00507d, #003b5c); color: #fff; box-shadow: 0 10px 26px rgba(0, 59, 92, .25); transition: transform .12s, box-shadow .12s;
}
.pes-boton:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(0, 59, 92, .3); }
.pes-boton:focus-within { outline: 3px solid #fdb913; outline-offset: 3px; }
.pes-boton-ic { font-size: 34px; line-height: 1; }
.pes-boton-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pes-boton-txt b { font-size: 19px; font-weight: 650; }
.pes-boton-txt small { font-size: 13px; color: rgba(255, 255, 255, .78); }
.pes-soltar-txt { margin: 10px 2px 0; font-size: 13px; }
@media (hover: none) { .pes-soltar-txt { display: none; } }
.pes-vista .inf-cabeza h2 { overflow-wrap: anywhere; }
.pes-dia { border-radius: 14px; padding: 14px 16px; margin: 14px 0 16px; display: grid; gap: 8px; }
.pes-dia.ok { background: var(--verde-fondo); border: 1px solid rgba(0, 122, 51, .25); }
.pes-dia.revisar { background: var(--amarillo-fondo); border: 2px solid var(--amarillo); }
.pes-dia b { font-size: 16px; color: #00283f; }
.pes-dia b::first-letter { text-transform: uppercase; }
.pes-sem { display: inline-block; margin-left: 8px; font-size: 13px; font-weight: 650; color: #003b5c; background: rgba(255, 255, 255, .7); border-radius: 999px; padding: 2px 10px; }
.pes-motivos { margin: 0; padding-left: 20px; font-size: 14px; color: #5c4300; }
.pes-fila-fecha { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-weight: 600; font-size: 14px; }
.pes-fecha { font: 600 16px var(--font); padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line2); background: #fff; min-height: 44px; }
.pes-cambiar summary { cursor: pointer; font-size: 13px; color: #00507d; font-weight: 600; }
.pes-cambiar .pes-fila-fecha { margin-top: 8px; }
.pes-confirmo { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; cursor: pointer; margin: 4px 0 10px; }
.pes-confirmo input { width: 24px; height: 24px; accent-color: #003b5c; flex: none; }
.pes-kpis { margin-bottom: 12px; }
.pes-avisos { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.pes-avisos li { border-radius: 10px; padding: 8px 12px; font-size: 13.5px; line-height: 1.4; }
.pes-avisos li.alerta { background: var(--rojo-fondo); color: #8a1c12; }
.pes-avisos li.info { background: #eef1f5; color: #42505c; }
.pes-tabla { max-height: 46vh; }
.pes-tabla .tabla td, .pes-subidos td { vertical-align: middle; }
.pes-tabla tr.pes-lote-ini td { border-top: 2px solid var(--linea); }
.pes-tabla tr.pes-subtotal td { font-weight: 650; color: #003b5c; background: #f6f8fa; }
.pes-cinta { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13.5px; }
.pes-cinta .dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .2); flex: none; }
.pes-subir { min-height: 50px; font-size: 16px; }
.pes-archivo { font-size: 13px; overflow-wrap: anywhere; min-width: 140px; }
.pes-semana { font-size: 12px; }
.pes-archivo-movil { display: none; }
.pes-subidos .etiqueta { white-space: nowrap; margin-left: 0; }
.pes-estado { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.pes-quitar { min-height: 36px; padding: 6px 12px; font-size: 13px; }
@media (max-width: 600px) {
  .pes-boton { padding: 18px 16px; gap: 12px; }
  .pes-boton-txt b { font-size: 17px; }
  .pes-subir { width: 100%; }
  .pes-subidos th:nth-child(2), .pes-subidos td:nth-child(2), .pes-subidos th:nth-child(4), .pes-subidos td:nth-child(4) { display: none; }
  .pes-subidos td:first-child { min-width: 150px; }
  .pes-archivo-movil { display: block !important; font-size: 11.5px; overflow-wrap: anywhere; margin-top: 2px; }
}

/* Un solo link (7 oct 2026): Agrap, Nómina, Taller y Materiales dentro de agrap.co */
.pantalla.pantalla-marco { padding: 0; max-width: none; margin: 0; }
.marco-barra { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--linea); background: var(--blanco); }
.marco-barra strong { color: var(--azul-profundo); }
.marco-acciones { display: flex; gap: 6px; }
.marco-app { display: block; width: 100%; height: calc(100dvh - 150px); border: 0; background: var(--blanco); }
@media (min-width: 1000px) { .marco-app { height: calc(100dvh - 110px); } }

/* ✏️ Corregir un día ya cerrado (V1 Usuarios, 7 oct 2026): va debajo del chip del día escogido. */
.corregir-dia { display: block; margin: 4px auto 0; padding: 2px 8px; font-size: 11px; white-space: nowrap; }

/* «Ver mi RDT» (7 oct 2026): en el teléfono las 5 columnas tienen que caber sin esconder las horas */
.rdt-prev .rdt-tabla{font-size:12.5px;width:100%}
.rdt-prev .rdt-tabla th,.rdt-prev .rdt-tabla td{padding:6px 5px}
.rdt-prev .rdt-tabla td:first-child{min-width:90px}

/* ---------- Almacén en grande (7 oct 2026: «más grande») ----------
   La pantalla de salidas de la finca se usa de pie, en un portátil o una tableta en la
   bodega, muchas veces con guantes y con prisa: todo un escalón más grande. Va con su
   propia clase (.alm-grande) para no agrandar la Recepción, que reusa .alm-cabeza. */
.alm-grande.alm-cabeza .alm-dia strong { font-size: 1.7rem; letter-spacing: -.02em; }
.alm-grande.alm-cabeza .alm-dia span { font-size: 1.15rem; margin-top: 2px; }
.alm-grande.alm-cabeza .btn { font-size: 1.15rem; padding: 14px 24px; min-height: 56px; }
.alm-grande.alm-captura { padding: 22px 24px; }
.alm-grande .alm-linea { gap: 14px; }
.alm-grande .rdt-campo { font-size: 15px; gap: 8px; }
.alm-grande .rdt-input { font-size: 1.5rem; padding: 16px 18px; min-height: 66px; border-radius: 14px; }
.alm-grande .rdt-agregar { height: 66px; font-size: 1.3rem; padding: 0 30px; }
.alm-grande .rdt-opcion { font-size: 1.25rem; padding: 14px 16px; }
.alm-grande .rdt-opcion small { font-size: 1rem; }
.alm-grande .rdt-sugerencias { max-height: 480px; }
.alm-grande .rdt-ayuda { font-size: 1.1rem; margin-top: 12px; }
.alm-grande .vacio { font-size: 1.3rem; padding: 10px 0; }
/* Bodega de la salida (usuario con varias fincas, 8 oct 2026): botones grandes, la escogida en azul. */
.alm-bodegas { display: grid; gap: 8px; margin-bottom: 16px; }
.alm-bodegas > span { font-size: 15px; font-weight: 600; color: var(--gris); text-transform: uppercase; letter-spacing: .02em; }
.alm-bodegas-opc { display: flex; flex-wrap: wrap; gap: 10px; }
.alm-bodega { font: inherit; font-size: 1.25rem; font-weight: 600; min-height: 56px; padding: 0 22px; border-radius: 14px;
  border: 2px solid var(--linea); background: var(--blanco); color: var(--tinta); cursor: pointer; }
.alm-bodega:hover { border-color: var(--azul-vivo); }
.alm-bodega.activa { background: var(--azul); border-color: var(--azul); color: var(--blanco); }
@media (max-width: 640px) { .alm-bodega { flex: 1 1 0; padding: 0 10px; font-size: 1.05rem; } }
.alm-grande .alm-tabla { font-size: 1.2rem; }
.alm-grande .alm-tabla thead th { font-size: .95rem; padding: 14px 14px; }
.alm-grande .alm-tabla td { padding: 16px 14px; vertical-align: middle; }
.alm-grande .alm-tabla small { font-size: .95rem; }
.alm-grande .alm-tabla td .btn.mini { min-width: 44px; min-height: 44px; font-size: 1.1rem; }
@media (max-width: 900px) {
  .alm-grande .rdt-input { font-size: 1.25rem; min-height: 58px; padding: 12px 12px; }
  .alm-grande .rdt-agregar { height: 58px; }
  .alm-grande.alm-cabeza .alm-dia strong { font-size: 1.35rem; }
}

/* Almacén: selector del día (digitar días pasados, 8 oct 2026) */
.alm-elegir-dia { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.alm-elegir-dia input { font: inherit; font-size: 1.05rem; padding: 10px 12px; border: 2px solid var(--linea); border-radius: 12px; background: var(--blanco); }
.alerta-ok { background: var(--verde-fondo); border: 2px solid var(--verde); color: var(--tinta); }

/* =====================================================================
   FINCA CON BARRA LATERAL (8 oct 2026): «como el resto de Agrap, a un lado».
   La barra usa las clases de la Oficina (css/oficina.css › .ofi-*). En el PC queda fija a la
   izquierda; en el teléfono se esconde y sale con ☰ (o tocando el nombre de la finca).
   ===================================================================== */
.btn-menu { display: none; }
body.con-lateral { padding-bottom: 0; }
body.con-lateral .pestanas, body.con-lateral #btnAtras { display: none !important; }
body.con-lateral .cabecera-bodega #bodegaActiva::after { content: ''; }
.lateral-finca .ofi-marca-sub { letter-spacing: .08em; text-transform: uppercase; }
.lateral-finca-uno { margin: 0 10px 8px; padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,.08); font-weight: 650; }
.lateral-finca-sel { display: grid; gap: 4px; margin: 0 6px 8px; }
.lateral-finca-sel span { font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .06em; padding-left: 4px; }
.lateral-finca-sel select { padding: 9px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: #fff; font-weight: 650; }
.lateral-finca-sel option { color: var(--tinta); }
.lateral-velo { display: none; }
@media (min-width: 900px) {
  body.con-lateral { padding-left: var(--lado); }
  body.con-lateral .cabecera { padding-left: 24px; }
  body.con-lateral main { max-width: 1180px; padding: 8px 16px 40px; }
}
@media (max-width: 899px) {
  body.con-lateral .btn-menu { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--linea); border-radius: 10px; background: var(--blanco); color: var(--azul); font-size: 1.3rem; cursor: pointer; flex: none; }
  body.con-lateral .cabecera-logo { display: none; }
  .lateral-finca { transform: translateX(-105%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0,0,0,.35); }
  body.lateral-abierta .lateral-finca { transform: none; }
  body.lateral-abierta .lateral-velo { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0,20,35,.45); }
}

/* ---------- Inicio con widgets ---------- */
.wg-barra { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 2px 14px; }
.wg-barra h1 { font-size: 1.7rem; color: var(--azul); margin: 0; letter-spacing: -.02em; }
.wg-barra p { margin: 2px 0 0; color: var(--gris); font-size: .95rem; }
.wg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.wg { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; min-height: 150px; }
.wg.grande { grid-column: span 2; }
@media (max-width: 560px) { .wg.grande { grid-column: span 1; } }
.wg.tocable { cursor: pointer; transition: border-color .15s, transform .15s; }
.wg.tocable:hover { border-color: var(--azul); transform: translateY(-1px); }
.wg-cab { display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; color: var(--gris); text-transform: uppercase; letter-spacing: .05em; }
.wg-ic { font-size: 1.1rem; }
.wg-ir { margin-left: auto; font-size: 1.3rem; color: var(--azul); }
.wg-cuerpo { display: flex; flex-direction: column; gap: 6px; }
.wg-cuerpo p { margin: 0; }
.wg-cifra { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wg-cifra strong { font-size: 2rem; color: var(--azul); line-height: 1.05; letter-spacing: -.02em; }
.wg-cifra span { color: var(--gris); font-size: .9rem; }
.wg-hora { font-size: 2.2rem; color: var(--azul); }
.wg-fila { display: flex; justify-content: space-between; gap: 10px; font-size: .92rem; border-top: 1px solid var(--linea); padding-top: 5px; }
.wg-fila span { color: var(--gris); }
.wg-nota { color: var(--gris); font-size: .85rem; }
.wg-clima { display: flex; align-items: center; gap: 12px; }
.wg-clima-ico { font-size: 2.6rem; }
.wg-clima strong { font-size: 1.8rem; color: var(--azul); display: block; }
.wg-dias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; }
.wg-dias > div { display: grid; background: var(--crema); border-radius: 10px; padding: 6px 4px; font-size: .9rem; }
.wg-dias span { font-size: 1.4rem; }
.wg-editar { display: flex; gap: 6px; flex-wrap: wrap; border-top: 1px dashed var(--linea); padding-top: 8px; margin-top: auto; }
.wg-galeria-lista { display: flex; gap: 8px; flex-wrap: wrap; }
.inf-tipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; margin: 10px 0; }

body.con-lateral .alm-cabeza .etiqueta { align-self: center; }

/* ---------- Informes de la finca: el diseño de la pantalla de Informes de Agrap ---------- */
.inf-cabeza h1 { font-size: 1.7rem; color: var(--azul); margin: 6px 0 0; letter-spacing: -.02em; }
.inf-cabeza p { margin: 2px 0 14px; color: var(--gris); font-size: .95rem; }
.inf-sub { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-style: italic; font-size: 1rem; color: #33485c; line-height: 1.55;
  padding-bottom: 13px; margin-bottom: 18px; border-bottom: 1px solid var(--azul); position: relative; }
.inf-sub::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--azul); }
.inf-sub b { font-style: normal; font-weight: 640; color: var(--azul); }
.inf-rango { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px 16px; margin-bottom: 18px; }
.inf-rango .campo { flex: 1 1 160px; margin: 0; }
.inf-atajos { display: flex; gap: 6px; flex-wrap: wrap; }
.inf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.inf-card { background: var(--blanco); border-radius: var(--radio); padding: 22px; box-shadow: var(--sombra); border: 1px solid rgba(0,0,0,.04); display: flex; flex-direction: column; gap: 10px; transition: .2s; }
.inf-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,40,63,.14); }
.inf-card .ic { font-size: 30px; }
.inf-card h3 { font-size: 1.05rem; font-weight: 660; letter-spacing: -.02em; color: var(--azul); margin: 0; }
.inf-card .desc { color: #33485c; font-size: .9rem; line-height: 1.6; flex: 1; font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; }
.inf-card .para { font-size: .72rem; font-weight: 640; color: var(--azul); background: #dce8f1; border-radius: 980px; padding: 3px 11px; align-self: flex-start; }
.inf-card.destacada { grid-column: span 2; }
@media (max-width: 760px) { .inf-card.destacada { grid-column: span 1; } }
.inf-botones { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 4px; }
.inf-xls { display: inline-flex; align-items: center; gap: 7px; border: none; border-radius: 980px; padding: 10px 18px; font: 600 .88rem 'Outfit', system-ui, sans-serif; cursor: pointer; color: #fff; background: #1e7e34; transition: .18s; }
.inf-xls:hover { background: #186429; transform: translateY(-1px); }
.inf-xls:disabled { opacity: .6; cursor: wait; }
.inf-seccion { grid-column: 1 / -1; margin: 12px 0 0; font-size: .72rem; font-weight: 700; color: var(--azul); text-transform: uppercase; letter-spacing: .16em; display: flex; align-items: center; gap: 14px; }
.inf-seccion::after { content: ""; flex: 1; height: 1px; background: var(--linea); }
/* En el teléfono la barra sale completa (oficina.css la encoge a íconos por debajo de 960 px). */
@media (max-width: 899px) {
  .lateral-finca.ofi-lado { width: min(290px, 86vw); }
  .lateral-finca .ofi-marca > div, .lateral-finca .ofi-item .txt, .lateral-finca .ofi-lbl, .lateral-finca .ofi-reloj small, .lateral-finca .ofi-version { display: revert; }
  .lateral-finca .ofi-item { justify-content: flex-start; padding: 11px 10px; }
  .lateral-finca .ofi-marca { justify-content: flex-start; padding: 2px 8px 14px; }
  .lateral-finca .ofi-reloj { text-align: left; padding: 2px 10px 12px; }
  .lateral-finca .ofi-reloj span { font-size: 18px; }
}
/* La lista de sugerencias (Material, Quién recibe, Trabajador…) sale por fuera de la tarjeta de captura:
   el overflow-x de .tarjeta la recortaba y solo se veía la primera opción (8 oct 2026). */
.tarjeta.rdt-captura, .tarjeta.alm-captura { overflow: visible; position: relative; z-index: 5; }

/* ---------- Pedido de insumos (8 oct 2026): Fecha · Semana · Finca arriba; Código · Und · Saldo · Pedido · Obs. ---------- */
.ped-encabezado { flex-basis: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.ped-encabezado .campo { margin: 0; }
.ped-encabezado select, .ped-encabezado input { width: 100%; }
.ped-finca-fija, .ped-semana { display: flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: 12px; background: var(--crema); color: var(--azul); font-size: 1.1rem; }
.ped-linea { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr) auto; gap: 10px; align-items: end; }
.ped-linea .rdt-campo > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) {
  .ped-encabezado { grid-template-columns: 1fr; }
  .ped-linea { grid-template-columns: 1fr 1fr; }
  .ped-linea .ped-c-mat, .ped-linea .ped-c-obs, .ped-linea .rdt-agregar { grid-column: 1 / -1; }
}
/* Lista de verificación de lo que llegó */
.rec-lista { display: grid; gap: 8px; }
.rec-item { display: grid; grid-template-columns: 44px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 12px; background: var(--blanco); }
.rec-item.ok { border-color: var(--verde); background: var(--verde-fondo); }
.rec-item.falta { border-color: var(--amarillo); background: var(--amarillo-fondo); }
.rec-item input[type=checkbox] { width: 30px; height: 30px; accent-color: var(--verde); }
.rec-item input[type=text] { width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--linea); font: inherit; }
@media (max-width: 760px) { .rec-item { grid-template-columns: 40px 1fr 1fr; } .rec-item > :nth-child(n+4) { grid-column: 2 / -1; } }

/* Embolse: quién embolsó cada lote (8 oct 2026) — chips bajo el lote, con racimos cuando son varios */
.emb-lote { display: grid; gap: 6px; padding-bottom: 8px; border-bottom: 1px dashed var(--linea); }
.emb-quien { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.emb-quien-lbl { color: var(--gris); font-size: 12px; }
.emb-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--crema); border: 1px solid var(--linea); border-radius: 999px; padding: 3px 6px 3px 10px; }
.emb-chip small { color: var(--gris); }
.emb-rac { width: 64px; font: inherit; font-size: 13px; padding: 3px 6px; border: 1px solid var(--linea); border-radius: 8px; text-align: right; }
.emb-quitar { border: 0; background: none; color: var(--gris); cursor: pointer; font-size: 12px; padding: 2px 4px; }
.emb-falta { color: #b45309; font-size: 12px; font-weight: 600; }
.emb-buscar { min-width: 170px; flex: 1 1 170px; }
.emb-buscar > span:first-child:empty { display: none; }
.emb-buscar .rdt-input { padding: 6px 10px; font-size: 14px; min-height: 0; }

/* Artículo nuevo (8 oct 2026): el diálogo para pedirlo, con lo parecido arriba para no pedirlo dos veces. */
.art-dialogo { max-width: 620px; width: calc(100vw - 32px); }
.art-pedir { display: grid; gap: 12px; }
.art-fila { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.art-sugerencias { display: grid; gap: 6px; max-height: 300px; overflow-y: auto; }
.art-titulo { margin: 4px 0 0; font-weight: 600; color: var(--azul); }
.art-opcion { display: grid; text-align: left; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--linea);
  background: var(--blanco); font: inherit; cursor: pointer; }
.art-opcion:hover { border-color: var(--azul-vivo); }
.art-opcion span { font-weight: 600; color: var(--tinta); }
.art-opcion small { color: var(--gris); }
.art-opcion.pendiente { background: var(--amarillo-fondo); }
@media (max-width: 560px) { .art-fila { grid-template-columns: 1fr; } }

/* ---------- Sanidad en la hoja de campo (digitar-sanidad.js, 9 oct 2026) ---------- */
.san-envio { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; margin-bottom: 14px; border-radius: 12px; background: #eef6f0; color: var(--verde, #007a33); font-size: .92rem; font-weight: 600; }
.san-envio small { color: var(--gris); font-weight: 500; }
.san-envio.pendiente { background: var(--amarillo-fondo, #fdf3dd); color: #8a5a00; }
.san-vistas { margin: 0 0 14px; }
.san-gps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 9px 14px; margin: 0 0 14px; border-radius: 12px; background: #f1f4f7; font-size: .9rem; color: var(--tinta); }
.san-gps span { flex: 1; min-width: 200px; }
.san-gps .ok { color: var(--verde, #007a33); font-weight: 600; }
.san-gps .mal, .san-hecho .mal { color: #a8281c; font-weight: 600; }
.san-fila { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 12px; }
.san-fila .rdt-campo { min-width: 120px; }
.san-crece { flex: 1; min-width: 200px; }
.san-tabla th { text-align: left; }
.san-tabla td { padding: 4px 6px; }
.san-tabla td:first-child { font-weight: 700; color: var(--gris); width: 64px; }
.san-num { max-width: 120px; text-align: right; }
.san-cinta { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 999px; border: 1px solid #d2d6d4; background: #fff; font-size: .9rem; font-weight: 600; color: var(--tinta); text-transform: none; letter-spacing: 0; }
.san-cinta i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); display: inline-block; }
.san-cinta-campo { display: flex; align-items: center; gap: 8px; min-height: 44px; flex-wrap: wrap; }
.san-color { width: auto; }
.san-guardado { color: var(--gris); font-size: .85rem; margin-right: auto; }
.san-hechos { display: flex; flex-wrap: wrap; gap: 8px; }
.san-hecho { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; border: 1px solid #d2d6d4; background: #fff; cursor: pointer; font: inherit; color: var(--tinta); }
.san-hecho small { color: var(--gris); }
.san-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.san-foto-lectura { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0 4px; }
.san-fotos-mini { display: flex; gap: 6px; flex-wrap: wrap; }
.san-fotos-mini img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid #d8dee4; }
.san-foto { margin: 0; border: 1px solid #e3e6e4; border-radius: 12px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.san-foto img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.san-foto figcaption { padding: 6px 10px; font-size: .85rem; }
.san-foto figcaption small { color: var(--gris); }
.san-foto .btn { margin: 0 10px 10px; }

/* ---------- Avance de corte (digitar-avance.js, 10 oct 2026) ---------- */
.av-hitos { margin: 0 0 14px; }
.av-fila { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 12px; }
.av-fila .rdt-campo { min-width: 130px; flex: 1; }
.av-racimos .rdt-campo { min-width: 96px; }
.av-num { text-align: right; }
.av-calc { display: grid; gap: 2px; min-width: 110px; padding: 6px 12px; border-radius: 12px; background: #eef4f8; }
.av-calc span { font-size: 11px; font-weight: 640; color: var(--gris); text-transform: uppercase; letter-spacing: .03em; }
.av-calc b { font-size: 1.6rem; color: var(--azul); line-height: 1.1; }
.av-calc small { color: var(--gris); font-size: .75rem; }
.av-sub { font-size: .85rem; font-weight: 640; color: var(--tinta); margin: 4px 0 8px; }
.av-sub small { color: var(--gris); font-weight: 500; }
.av-punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); margin-right: 5px; vertical-align: -1px; }
.av-rac span { text-transform: none; }
.av-tabla-caja { overflow-x: auto; }
.av-tabla th.num, .av-tabla td.num { text-align: right; white-space: nowrap; }

/* ---------- Evaluar labores (evaluar-labores.js, 13 oct 2026) ----------
   Se usa con el teléfono en una mano y al sol: botones de 48 px o más, letra grande y buen contraste. */
.ev-finca { font: inherit; font-size: 1rem; font-weight: 600; min-height: 44px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--linea); background: var(--blanco); color: var(--tinta); }
.ev-gps { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #eef2f5; color: var(--tinta); margin-bottom: 12px; }
.ev-gps.ev-bien { background: var(--verde-fondo); color: #00521f; }
.ev-gps.ev-aviso { background: var(--amarillo-fondo); color: #6b4500; }
.ev-gps.ev-mal { background: var(--rojo-fondo); color: #8a1c13; }
.ev-gps-txt { display: grid; gap: 3px; flex: 1; min-width: 0; }
/* El mapa pequeño con el punto del GPS (js/mapa-gps.js, 14 oct 2026) */
.mapa-gps .oculto { display: none; }
/* «Cerca del borde entre dos lotes» (14 oct 2026): se pregunta con un botón por lote */
.ev-borde { display: grid; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--amarillo-fondo, #fff4d6); color: #6b4500; font-size: 14px; flex-basis: 100%; }
.ev-borde-bot { display: flex; flex-wrap: wrap; gap: 8px; }
.ev-borde-bot .btn { min-height: 44px; min-width: 96px; font-weight: 600; }
.mapa-gps-caja { position: relative; width: 100%; max-width: 420px; margin: 0 auto 12px; flex-basis: 100%; }
.mapa-gps { display: block; width: 100%; height: auto; border-radius: 10px; cursor: zoom-in; }
.mapa-gps-ampliar { position: absolute; top: 8px; right: 8px; min-height: 34px; padding: 0 12px; border: 1px solid #c9d3cc; border-radius: 999px;
  background: rgba(255,255,255,.92); color: #00283f; font: 600 13px system-ui, sans-serif; cursor: pointer; }
.mapa-gps-velo { position: fixed; inset: 0; z-index: 400; background: #e9efe6; display: flex; flex-direction: column; overscroll-behavior: contain; }
html.mapa-gps-abierto, html.mapa-gps-abierto body { overflow: hidden; }
.mapa-gps-barra { display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; background: #00283f; color: #fff; }
.mapa-gps-datos { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.mapa-gps-datos b { font-size: 16px; width: 100%; }
.mapa-gps-datos span { font-size: 12.5px; opacity: .85; white-space: nowrap; }
.mapa-gps-cerrar { width: 44px; min-height: 44px; padding: 0; font-size: 18px; border-radius: 50%; }
.mapa-gps-mandos { position: absolute; right: 14px; bottom: calc(22px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; }
.mapa-gps-mandos .btn { width: 52px; min-height: 52px; padding: 0; font-size: 22px; border-radius: 50%; box-shadow: 0 2px 10px rgba(0,0,0,.2); }
.mapa-gps-mandos .btn.on { background: #1a73e8; color: #fff; border-color: #1a73e8; }
.mapa-gps-grande { flex: 1; width: 100%; height: 100%; min-height: 0; border-radius: 0; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.mapa-gps-grande .mapa-gps-lote { vector-effect: non-scaling-stroke; stroke-width: 1.5; }
.mapa-gps-grande .mapa-gps-lote.suyo { stroke-width: 3; }
.mapa-gps-grande .mapa-gps-lote-g.tocado .mapa-gps-lote { fill: #fdb913; fill-opacity: .35; stroke: #b07d00; stroke-width: 3; }
.mapa-gps-grande .mapa-gps-num { font-size: calc(15px * var(--k, 1)); stroke-width: calc(4px * var(--k, 1)); pointer-events: none; }
.mapa-gps-grande .mapa-gps-num.suyo { font-size: calc(19px * var(--k, 1)); }
.mapa-gps-grande .mapa-gps-precision, .mapa-gps-grande .mapa-gps-punto { vector-effect: non-scaling-stroke; pointer-events: none; transition: cx .4s, cy .4s, r .4s; }
.mapa-gps-hoja { position: absolute; left: 12px; right: 78px; bottom: calc(18px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; background: #fff; border-radius: 16px; box-shadow: 0 4px 18px rgba(0,0,0,.2); }
.mapa-gps-hoja[hidden] { display: none; }
.mapa-gps-hoja b { flex: 1; font-size: 16px; color: #00283f; }
.mapa-gps-hoja .btn { min-height: 44px; }
.mapa-gps-x { width: 40px; padding: 0; }
.mapa-gps-fondo { fill: #e9efe6; }
.mapa-gps-lote { fill: #ffffff; fill-opacity: .55; stroke: #6b7c72; stroke-width: 1.2; }
.mapa-gps-lote.suyo { fill: #007a33; fill-opacity: .22; stroke: #007a33; stroke-width: 2.2; }
.mapa-gps-num { font: 600 12px system-ui, sans-serif; fill: #3d4a42; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.mapa-gps-num.suyo { font-size: 15px; fill: #00521f; }
.mapa-gps-precision { fill: #1a73e8; fill-opacity: .15; stroke: #1a73e8; stroke-opacity: .5; stroke-width: 1; }
.mapa-gps-punto { fill: #1a73e8; stroke: #fff; stroke-width: 2.5; }
.mapa-gps-escala { stroke: #3d4a42; stroke-width: 2; }
.mapa-gps-escala-txt { font: 600 10px system-ui, sans-serif; fill: #3d4a42; }
.ev-gps-txt b { font-size: 1.2rem; }
.ev-gps-txt small { font-size: .9rem; }
.ev-vieja { font-weight: 700; }
.ev-ubicarme { min-height: 48px; white-space: nowrap; }
.ev-lote select { min-height: 48px; }
.ev-nota-lote { display: block; margin-top: 6px; color: #6b4500; font-weight: 600; }
.ev-aviso-txt { background: var(--amarillo-fondo); color: #6b4500; padding: 8px 12px; border-radius: 10px; font-weight: 600; }
.ev-sub { margin: 10px 0 6px; font-size: .8rem; font-weight: 700; color: var(--gris); text-transform: uppercase; letter-spacing: .03em; }
.ev-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ev-labor { display: grid; gap: 2px; text-align: left; min-height: 52px; padding: 8px 14px; border-radius: 12px; border: 2px solid var(--linea); background: var(--blanco); color: var(--tinta); font: inherit; cursor: pointer; }
.ev-labor b { font-size: 1rem; }
.ev-labor small { color: var(--gris); font-size: .8rem; }
.ev-labor.on { border-color: var(--azul); background: var(--azul); color: var(--blanco); }
.ev-labor.on small { color: rgba(255, 255, 255, .85); }
.ev-otra-campo { margin-top: 10px; }
.ev-notas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.ev-n { display: grid; place-items: center; gap: 2px; min-height: 72px; padding: 6px 2px; border-radius: 14px; border: 2px solid var(--linea); background: var(--blanco); color: var(--tinta); font: inherit; cursor: pointer; }
.ev-n b { font-size: 1.6rem; line-height: 1; }
.ev-n small { font-size: .72rem; font-weight: 600; }
.ev-n.on { color: var(--blanco); border-color: transparent; }
.ev-n1.on, .ev-nota-chip.ev-n1 { background: #b42318; }
.ev-n2.on, .ev-nota-chip.ev-n2 { background: #c4540a; }
.ev-n3.on, .ev-nota-chip.ev-n3 { background: #8a6a00; }
.ev-n4.on, .ev-nota-chip.ev-n4 { background: #2f7a3a; }
.ev-n5.on, .ev-nota-chip.ev-n5 { background: #00521f; }
.ev-foto { margin: 0 0 10px; }
.ev-foto img { width: 100%; max-height: 320px; object-fit: contain; border-radius: 12px; background: #eef2f5; display: block; }
.ev-comentario { min-height: 80px; resize: vertical; }
.ev-guardar .btn-grande { flex: 1 1 100%; }
.ev-meta { display: grid; gap: 6px; }
.ev-meta b { font-size: 1.1rem; }
.ev-barra { height: 10px; border-radius: 999px; background: #e3e6e4; overflow: hidden; }
.ev-barra i { display: block; height: 100%; background: var(--verde); border-radius: 999px; }
.ev-cumplio { color: var(--verde); font-weight: 700; }
.ev-pend { margin: 10px 0 0; color: #8a5a00; font-weight: 600; }
.ev-lista { display: grid; gap: 8px; margin-top: 12px; }
.ev-item { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid #e3e6e4; border-radius: 12px; background: var(--blanco); }
.ev-mini { width: 56px; height: 56px; flex: none; border-radius: 10px; object-fit: cover; }
.ev-sinfoto { display: grid; place-items: center; background: #eef2f5; color: var(--gris); }
.ev-item-txt { display: grid; gap: 2px; flex: 1; min-width: 0; }
.ev-item-txt small { color: var(--gris); }
.ev-com { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-nota-chip { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; color: var(--blanco); font-weight: 800; font-size: 1.15rem; }

/* Auditoría de riego (auditar-riego.js): tipo y gravedad con botones grandes. */
.rg-tipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.rg-gravedad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rg-op { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 8px 12px; border-radius: 12px; border: 2px solid var(--linea); background: var(--blanco); color: var(--tinta); font: inherit; text-align: left; cursor: pointer; }
.rg-gravedad .rg-op { justify-content: center; font-size: 1.05rem; }
.rg-ic { font-size: 1.4rem; line-height: 1; }
.rg-op.on { border-color: var(--azul); background: var(--azul); color: var(--blanco); }
.rg-gravedad .rg-alta.on, .rg-grav.rg-alta { background: #b42318; border-color: #b42318; }
.rg-gravedad .rg-media.on, .rg-grav.rg-media { background: #8a5a00; border-color: #8a5a00; }
.rg-gravedad .rg-baja.on, .rg-grav.rg-baja { background: #2f7a3a; border-color: #2f7a3a; }
.rg-grav { flex: none; padding: 6px 10px; border-radius: 999px; color: var(--blanco); font-weight: 700; font-size: .85rem; }
/* Presiones del manómetro (13 oct 2026) */
.rg-modos { margin: 0 0 12px; }
.rg-modos .segmento { flex: 1; font-size: 15px; min-height: 42px; }
.rg-nombre { margin-top: 12px; }
.rg-psi-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rg-psi-in { font-size: 1.5rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.rg-psi-chip { display: grid; place-items: center; align-content: center; background: #e6eef4; color: var(--tinta); border-radius: 10px; line-height: 1.05; }
.rg-psi-chip b { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.rg-psi-chip small { font-size: .7rem; font-weight: 700; }
.ev-nocuentan { color: #8a5a00; font-weight: 600; }
.ev-contador { display: grid; gap: 6px; }
.ev-contador-txt { font-size: 1.15rem; }
.ev-contador.con-meta .ev-contador-txt { font-size: 1.45rem; color: var(--azul); }
.ev-contador.listo { background: var(--verde-fondo); }
.ev-contador.listo .ev-contador-txt { color: #00521f; }
.ev-otras { color: var(--gris); }

/* Volver al inicio de Agrap (13 oct 2026): mismo trato que «Atrás» (la píldora blanca del rediseño). */
.btn-agrap { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 14px 0 10px;
  border-radius: 980px; border: .5px solid var(--line2, #d8dde2); background: #fff; color: var(--blue-d, #00283f);
  font-size: 15px; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); text-decoration: none; white-space: nowrap; }
.btn-agrap span { font-size: 13.5px; }
.btn-agrap:hover { border-color: var(--blue, #003b5c); }
.btn-agrap[hidden] { display: none; }
@media (max-width: 380px) { .btn-agrap span { display: none; } }

/* Dentro del marco de Agrap (14 oct 2026): Agrap pone su barra y sus pestañas; aquí solo va la pantalla. Se deja la
   cabecera para cambiar de finca, sin el menú ni los botones de volver. */
html.dentro-agrap #lateral, html.dentro-agrap #lateralVelo, html.dentro-agrap .pestanas, html.dentro-agrap #barraFinca,
html.dentro-agrap #hojaMas, html.dentro-agrap #btnMenu, html.dentro-agrap #btnAtras, html.dentro-agrap #btnAgrap { display: none !important; }
html.dentro-agrap body, html.dentro-agrap body.con-lateral { padding-left: 0; padding-bottom: 0; }
html.dentro-agrap body.con-lateral .cabecera { padding-left: 16px; }