@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Public+Sans:wght@400;500;600;700&display=swap');

:root{
  --tinta:#13211B;
  --tinta-2:#22362C;
  --papel:#E7ECE3;
  --panel:#FFFFFF;
  --linea:#D3DBCE;
  --linea-2:#E8EDE3;
  --suave:#63735F;
  --verde:#1B5E47;
  --verde-suave:#E9F1EB;
  --rojo:#A93B2C;
  --rojo-suave:#FBEFEC;
  --ambar:#8A6A1F;
  --ambar-suave:#F8F1DF;
  --azul:#2F6690;
  --descanso:#DDE3D8;
  --r:10px;
  --sombra:0 1px 2px rgba(19,33,27,.05), 0 1px 8px rgba(19,33,27,.045);
}

*{box-sizing:border-box;margin:0;padding:0}
/* sin el destello celeste que el celular pone al tocar un botón o enlace (se hereda a toda la página) */
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{
  background:var(--papel);color:var(--tinta);
  font-family:'Public Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;
  padding-bottom:96px;
}
.mono,input[type=time],.num{font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
a{color:var(--verde);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:900px;margin:0 auto;padding:0 12px}

/* ---------- barra superior ---------- */
.top{background:var(--tinta);color:#EDF2E9}
.top-in{max-width:900px;margin:0 auto;padding:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.marca{font-weight:700;letter-spacing:-.02em;font-size:16px;line-height:1.1}
.marca small{display:block;font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#93A98E;margin-top:3px}
.top .quien{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:11px;color:#93A98E;text-align:right}
nav.menu{background:var(--tinta-2);border-top:1px solid #2E4438;position:sticky;top:0;z-index:26;
  box-shadow:0 2px 8px rgba(19,33,27,.14);overflow:hidden}
/* El indicador de scroll de iOS se dibuja pegado al borde inferior de la
   caja que scrollea y no se puede ocultar solo con ::-webkit-scrollbar
   (eso alcanza para Chrome/Firefox de escritorio). Se agranda la caja
   20px hacia abajo con padding, se compensa con margin negativo para que
   no ocupe espacio visual, y nav.menu (overflow:hidden) recorta esa
   franja de abajo -- ahí es donde iOS dibuja la barrita, así que queda
   fuera de la vista. */
nav.menu ul{max-width:900px;margin:0 auto -20px;display:flex;list-style:none;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding-bottom:20px;scrollbar-width:none;-ms-overflow-style:none}
nav.menu ul::-webkit-scrollbar{display:none;height:0}
nav.menu a{display:block;padding:11px 14px;color:#C6D4C0;font-size:13px;font-weight:500;white-space:nowrap}
nav.menu a:hover{background:#2C4237;text-decoration:none;color:#fff}
nav.menu a.on{color:#fff;box-shadow:inset 0 -3px 0 var(--verde)}

/* ---------- tarjetas ---------- */
.card{background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);margin:12px 0;box-shadow:var(--sombra)}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-bottom:1px solid var(--linea);flex-wrap:wrap}
.card-b{padding:12px}
/* varios botones chicos en la cabecera de una card (ej. PDF + Editar) */
.btns-h{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.btns-h .btn{padding:7px 10px;font-size:12.5px;white-space:nowrap}
/* "Recoger cajas" + "Nueva entrega" (entregas.php): en celular, debajo del título,
   los dos a lo ancho y un poco más grandes */
.btns-movs .btn{padding:6px 11px}
@media(max-width:520px){
  .btns-movs{flex:1 1 100%;flex-wrap:nowrap;gap:8px}
  .btns-movs .btn{flex:1 1 0;min-width:0;padding:8px 10px;font-size:14.5px;justify-content:center;text-align:center}
}
.rot{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--suave)}
h1{font-size:19px;letter-spacing:-.02em}
h2{font-size:16px;letter-spacing:-.01em}

/* ---------- formularios ---------- */
label.campo,div.campo{display:block;margin-bottom:10px}
label.campo>span,div.campo>.etq{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--suave);margin-bottom:4px}
input[type=text],input[type=password],input[type=number],input[type=time],input[type=date],select,textarea{
  width:100%;padding:10px;border:1px solid var(--linea);border-radius:var(--r);background:#fff;
  font-size:16px;color:var(--tinta);font-family:inherit}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{
  outline:2px solid var(--verde);outline-offset:1px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* input + su botón en la misma línea (ej. Adelantos + Actualizar) */
.campo-accion{display:flex;align-items:flex-end;gap:8px;margin-bottom:10px}
.campo-accion .campo{flex:1;min-width:0;margin-bottom:0}
.campo-accion .btn{flex:none;padding:12px 14px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
/* switch dentro de una caja con el mismo alto/borde que un input
   (input: 16px × 1.45 de línea + 10px de padding arriba/abajo + borde) */
.switch-caja{display:flex;align-items:center;gap:10px;height:calc(16px * 1.45 + 22px);padding:0 10px;
  border:1px solid var(--linea);border-radius:var(--r);background:#fff;cursor:pointer;font-size:14px;user-select:none}
input.switch{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:40px;height:22px;
  border-radius:11px;background:var(--linea);cursor:pointer;transition:background .15s}
input.switch::before{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(19,33,27,.25);transition:transform .15s}
input.switch:checked{background:var(--verde)}
input.switch:checked::before{transform:translateX(18px)}
.switch-caja .sw-si{display:none;color:var(--verde);font-weight:600}
.switch-caja .sw-no{color:var(--suave)}
.switch-caja input.switch:checked ~ .sw-si{display:inline}
.switch-caja input.switch:checked ~ .sw-no{display:none}
@media(max-width:400px){.g2.g2-sw{grid-template-columns:1fr}}
@media(max-width:520px){.g3{grid-template-columns:1fr 1fr}}

.btn{display:inline-block;border:1px solid var(--linea);background:#fff;color:var(--tinta);
  border-radius:var(--r);padding:10px 14px;font:600 13.5px/1.2 'Public Sans',sans-serif;cursor:pointer}
.btn:hover{background:#F2F6EE;text-decoration:none}
.btn-p{background:var(--verde);border-color:var(--verde);color:#fff}
.btn-p:hover{background:#17513D}
.btn-d{background:var(--tinta);border-color:var(--tinta);color:#EDF2E9}
.btn-x{border-color:#E0C4BE;color:var(--rojo)}
.btn-x:hover{background:var(--rojo-suave)}
.btns{display:flex;gap:8px;flex-wrap:wrap}
.btns.chicos{gap:6px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.btns.chicos .btn{padding:7px 10px;font-size:12.5px;white-space:nowrap;flex:none}

/* ---------- avisos ---------- */
.aviso{padding:10px 12px;border-radius:var(--r);font-size:13.5px;margin:12px 0;border:1px solid}
.aviso.ok{background:var(--verde-suave);border-color:#BFD8C6;color:#14513C}
.aviso.mal{background:var(--rojo-suave);border-color:#E7C6BF;color:#8E2F22}
.aviso.info{background:var(--ambar-suave);border-color:#E5D5A8;color:#6E5316}

/* avisos flotantes (assets/avisos.js): arriba, en columna, 5 s y se desvanecen */
[data-aviso]{display:none}
.toasts{position:fixed;top:12px;left:50%;right:auto;bottom:auto;transform:translateX(-50%);
  width:min(420px,calc(100vw - 32px));margin:0;padding:0;border:0;background:transparent;overflow:visible;
  display:flex;flex-direction:column;gap:8px;z-index:1000;pointer-events:none}
.toasts[popover]:not(:popover-open){display:none}
.toast{padding:10px 14px;border-radius:var(--r);font-size:13.5px;border:1px solid;cursor:pointer;
  box-shadow:0 6px 20px rgba(19,33,27,.16);pointer-events:auto;
  animation:toast-entra .25s ease-out;transition:opacity .9s ease,transform .9s ease}
.toast.ok{background:var(--verde-suave);border-color:#BFD8C6;color:#14513C}
.toast.mal{background:var(--rojo-suave);border-color:#E7C6BF;color:#8E2F22}
.toast.info{background:var(--ambar-suave);border-color:#E5D5A8;color:#6E5316}
.toast.saliendo{opacity:0;transform:translateY(-6px)}
/* indicador de guardado automático (assets/avisos.js): abajo, encima de la cinta */
.guardado-chip{position:fixed;left:50%;bottom:12px;z-index:40;display:flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:999px;background:var(--tinta);color:#EDF2E9;font-size:13.5px;font-weight:600;
  box-shadow:0 6px 20px rgba(19,33,27,.25);pointer-events:none;white-space:nowrap;
  opacity:0;transform:translate(-50%,10px);transition:opacity .5s ease,transform .3s ease}
.guardado-chip.visible{opacity:1;transform:translate(-50%,0)}
.guardado-chip.guardado svg{color:#7FD3A4}
.guardado-chip.error{background:var(--rojo);color:#fff}
.gc-giro{width:14px;height:14px;border-radius:50%;border:2px solid rgba(237,242,233,.3);border-top-color:#EDF2E9;
  animation:gc-gira .8s linear infinite}
@keyframes gc-gira{to{transform:rotate(360deg)}}
/* deslizar entre pestañas (app.js): indicador en el borde hacia donde se va */
/* cápsula oscura translúcida (bien desenfocada): nombre de la pestaña y un anillo que se
   llena con el avance del dedo; lleno = soltar cambia de pestaña. El anillo va del lado del borde. */
.desliza-ind{position:fixed;z-index:45;display:none;align-items:center;gap:10px;margin-top:-26px;height:52px;
  padding:0 7px 0 16px;border-radius:999px;flex-direction:row-reverse;
  background:rgba(19,33,27,.52);color:#fff;border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8);
  text-shadow:0 1px 2px rgba(19,33,27,.35); /* con el fondo más a la vista, el texto se sigue leyendo */
  box-shadow:0 10px 30px rgba(19,33,27,.28),0 2px 6px rgba(19,33,27,.18);white-space:nowrap;pointer-events:none}
.desliza-ind.visible{display:flex}
.desliza-ind.der{right:12px;transform-origin:right center}
.desliza-ind.izq{left:12px;flex-direction:row;padding:0 16px 0 7px;transform-origin:left center}
.di-textos{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.desliza-ind.izq .di-textos{align-items:flex-start}
.di-textos b{font-size:14px;font-weight:600;letter-spacing:-.01em}
.di-anillo{width:38px;height:38px;flex:none;overflow:visible}
.di-anillo circle{fill:none;stroke-width:2.5}
.di-pista{stroke:rgba(237,242,233,.16)}
.di-avance{stroke:#7FD3A4;stroke-linecap:round;stroke-dasharray:94.25;stroke-dashoffset:94.25;
  transform:rotate(-90deg);transform-origin:18px 18px;transition:fill .18s ease}
.di-flecha{fill:none;stroke:#EDF2E9;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transform-origin:18px 18px;transition:stroke .18s ease}
.desliza-ind.izq .di-flecha{transform:rotate(180deg)}
/* listo para soltar: el anillo se rellena y da un pequeño rebote */
.desliza-ind.listo .di-avance{fill:#7FD3A4}
.desliza-ind.listo .di-flecha{stroke:var(--tinta)}
.desliza-ind.listo .di-anillo{animation:di-rebote .28s ease-out}
@keyframes di-rebote{50%{transform:scale(1.12)}}
/* en las pestañas, el navegador solo hace el scroll vertical y el zoom: el gesto
   de lado es de app.js. Lo que se desplaza de lado por sí mismo lo conserva. */
.con-deslizar body{touch-action:pan-y pinch-zoom}
.con-deslizar nav.menu ul,.con-deslizar .btns.chicos,.con-deslizar .tabla-scroll{touch-action:pan-x pan-y pinch-zoom}
/* al soltar pasado el umbral, solo en navegadores sin transición entre páginas:
   la página se apaga mientras carga la siguiente pestaña */
body.saliendo-tab main{opacity:.45;transition:opacity .2s ease}

/* Transición entre páginas (Chrome/Android, Safari 18.2+): sin pantallazo de carga.
   Cabecera y menú se quedan quietos; el contenido (main) cambia, y al pasar de
   pestaña entra deslizándose por su lado (clase vt-der/vt-izq, ver inc/cabecera.php). */
@view-transition{navigation:auto}
main.wrap{view-transition-name:contenido}
.cinta{view-transition-name:cinta}
::view-transition-old(root),::view-transition-new(root),
::view-transition-group(contenido),::view-transition-old(contenido),::view-transition-new(contenido){animation-duration:.2s}
html.vt-der::view-transition-group(contenido),html.vt-izq::view-transition-group(contenido){animation:none}
html.vt-der::view-transition-old(contenido){animation:vt-sale-izq .26s ease-in both}
html.vt-der::view-transition-new(contenido){animation:vt-entra-der .26s ease-out both}
html.vt-izq::view-transition-old(contenido){animation:vt-sale-der .26s ease-in both}
html.vt-izq::view-transition-new(contenido){animation:vt-entra-izq .26s ease-out both}
@keyframes vt-sale-izq{to{transform:translateX(-35%);opacity:0}}
@keyframes vt-entra-der{from{transform:translateX(35%);opacity:0}}
@keyframes vt-sale-der{to{transform:translateX(35%);opacity:0}}
@keyframes vt-entra-izq{from{transform:translateX(-35%);opacity:0}}
@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
@keyframes toast-entra{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- entregas.php ---------- */
.ent-fecha{display:flex;flex-direction:column;align-items:center;min-width:34px;line-height:1}
.ent-fecha b{font-family:'IBM Plex Mono',monospace;font-size:17px;font-weight:600}
.ent-fecha i{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.1em;color:var(--suave);margin-top:3px}
.ent-cajas{display:flex;flex-direction:column;align-items:flex-end;font-size:13.5px;font-weight:600;line-height:1.3;white-space:nowrap}
.ent-cajas span:first-child{color:var(--verde)}
.ent-cajas .vacias{color:var(--suave);font-weight:500}
.saldo-cajas{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1}
.saldo-cajas b{font-size:18px}
.saldo-cajas .rot{font-size:8.5px}
.saldo-cajas .rojo{color:var(--rojo)}
.btn-crear:disabled{opacity:.45;cursor:default}
/* "+ Agregar" en la cabecera de un card (entregas): compacto en escritorio; en celular
   toma el tamaño de todos los "+ Agregar" (ver .btn-crear.txt-corto más abajo) */
.card-h .btn-crear{padding:6px 11px;font-size:12.5px}
/* card de almacén: siempre la misma altura -- nombre y una línea de datos, cada
   uno en una sola línea (con "…" si no entra), y un único número a la derecha */
.card-almacen{border-left:4px solid var(--verde)}
.card-almacen .card-b{padding:12px 12px 12px 10px}
.card-almacen .fila-cuad{align-items:center;gap:6px 12px}
.alm-insignia{display:flex;align-items:center;justify-content:center;width:42px;height:42px;flex:none;
  border-radius:12px;background:var(--verde-suave);color:var(--verde)}
.alm-insignia svg{width:22px;height:22px}
.card-almacen.de-baja{border-left-color:#B9C2B4}
.card-almacen.de-baja .alm-insignia{background:#EEF1EB;color:var(--suave)}
.card-almacen.de-baja .cuad-nom{color:var(--suave)}
.card-almacen .alm-nom{display:flex;align-items:center;gap:6px;min-width:0}
.card-almacen .alm-nom .cuad-nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-almacen .alm-nom .pill{flex:none}
.card-almacen .alm-nom .cuad-nom{font-size:15.5px}
.card-almacen .alm-meta{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--tinta);
  margin-top:6px;overflow:hidden;white-space:nowrap}
.card-almacen .alm-meta span{display:inline-flex;align-items:center;gap:4px;flex:none;
  padding:3px 8px;border-radius:20px;background:#F0F3EC;font-family:'IBM Plex Mono',monospace}
.card-almacen .alm-meta svg{color:var(--suave);flex:none}
.card-almacen .alm-meta .alm-sin-cobrar{background:#FBEFCF;color:#7A5A0E;font-family:inherit;font-weight:600}
/* ayuda corta debajo de un campo de formulario */
.campo-ayuda{margin:-6px 0 12px;font-size:11.5px}
.card-almacen .saldo-cajas{min-width:64px}
/* cajas prestadas por tipo, dentro del almacén: rejilla que pasa a varias filas */
.rejilla-cajas{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px 10px}
.rejilla-cajas>div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;min-width:0}
.rejilla-cajas .rot{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rejilla-cajas b{font-size:16px;font-weight:600}
.rejilla-cajas .rojo{color:var(--rojo)}
/* saldo por tipo de caja en el card de cada destino */
.chips-saldo{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:6px}
.chip-saldo{display:inline-flex;align-items:baseline;gap:5px;padding:2px 8px;border-radius:20px;
  background:#EFF3EA;font-size:11.5px;color:var(--suave);white-space:nowrap}
.chip-saldo b{color:var(--tinta);font-size:12px}
.chip-saldo b.rojo{color:var(--rojo)}
/* formulario de entrega: una fila por tipo de caja (llenas / vacías) */
.cajas-form{border:1px solid var(--linea);border-radius:var(--r);padding:6px 10px;margin-bottom:10px}
.cajas-form .cf-cab,.cajas-form .cf-fila{display:grid;grid-template-columns:1fr 84px 84px;gap:8px;align-items:center}
.cajas-form .cf-cab{padding:2px 0 4px}
.cajas-form .cf-cab .rot{text-align:center}
.cajas-form .cf-fila{padding:4px 0;border-top:1px solid var(--linea-2)}
.cajas-form .cf-nom{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis}
.cajas-form input{padding:7px 6px;text-align:center}
/* líneas de una entrega: tipo  ▲ llenas  ▼ vacías */
.ent-lineas{margin-top:4px;display:flex;flex-direction:column;gap:2px}
.ent-lineas div{display:flex;align-items:baseline;gap:10px;font-size:12.5px}
.ent-lineas span{color:var(--suave);min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ent-lineas b{font-size:13px;min-width:44px;text-align:right}
.ent-lineas .llenas{color:var(--verde)}
.ent-lineas .vacias{color:var(--suave);font-weight:500}
/* cinta de un almacén: dos líneas fijas, la de productos recortada con "…" */
.cinta-entregas{display:flex;flex-direction:column;align-items:flex-end;min-width:0;max-width:65%}
.cinta-entregas span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* vista de un almacén: título con su ⋮ de configuración */
.titulo-almacen{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 10px}
.titulo-almacen h1{margin:0;min-width:0}
.titulo-almacen .ta-acciones{flex:none}
/* un card por día: subtítulo Entrega(s) / Recogida(s) y sus filas a lo ancho, apiladas
   (todas de la misma altura) */
.dia-card + .dia-card{margin-top:10px}
.dia-card:has(+ .dia-card){margin-bottom:10px}
/* encabezado tipo agenda: hoja de calendario + día de la semana y resumen */
/* el card del día se recorta del fondo con un borde verde; la fecha, del mismo verde
   (lo bastante oscuro para leerse bien sobre el fondo claro) */
.dia-card{--dia:#2F6E53;border-color:var(--dia);box-shadow:0 1px 3px rgba(20,70,45,.08)}
.dia-card .card-h{padding:8px 12px;background:#F7F9F4;border-bottom-color:#D3E4D9;border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0}
.dia-card .de-fecha,.dia-card .de-fecha b{color:var(--dia)}
.dia-card .de-fecha{font-size:14px;font-weight:500}
.de-cuantas{font-size:12.5px;font-weight:600;color:var(--dia)}
.dia-card .card-b{padding:4px 12px 12px}
.db-sub{padding:8px 0 6px;font-size:9.5px}
.db-sub.entrega{color:var(--verde)}
.db-sub.recogida{color:var(--azul)}
.pila-mov{display:flex;flex-direction:column;gap:6px}
.mov{display:flex;align-items:center;gap:12px;height:58px;padding:0 6px;
  border:1px solid var(--linea);border-left:4px solid var(--verde);border-radius:var(--r);background:#fff;min-width:0}
/* sin el destello azul del móvil al tocar la fila o sus botones */
.mov,.mov *{-webkit-tap-highlight-color:transparent}
.mov-num{font-size:11px;flex:none;min-width:10px}
.mov-txt{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.3}
.mov-txt b,.mov-txt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mov-txt b{font-size:14.5px}
.mov-txt span{font-size:12px;color:var(--suave)}
.mov-cifras{display:flex;gap:16px;flex:none}
.mov-cifras>span{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1;min-width:34px}
.mov-cifras b{font-size:17px;font-weight:600}
.mov-cifras i{font-style:normal;font-size:10px;color:var(--suave)}
.mov-cifras .bultos b{color:var(--verde)}
/* ícono al principio (solo informa): camión = entrega, caja de plástico = recogida */
.mov-ico{display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;border-radius:50%}
.mov-ico svg{width:20px;height:20px}
.mov .btn-icono{flex:none}
/* entrega: borde ámbar + "Sin cobrar" hasta que se cobra; luego verde + "✓ Cobrada" */
.mov.entrega .mov-ico{background:var(--verde-suave);color:var(--verde)}
.mov.sin-cobrar{border-left-color:#D9A82E}
.mov.sin-cobrar .mov-ico{background:#FBEFCF;color:#B07F12}
.mov.cobrada{background:#F4F9F5;border-color:#BFD8C6;border-left-color:var(--verde)}
.mov-estado{display:inline-block;font-style:normal;font-size:10.5px;font-weight:700;line-height:1;
  padding:3px 6px;border-radius:20px;margin-right:4px;vertical-align:1px}
.mov-estado.no{background:#FBEFCF;color:#7A5A0E}
.mov-estado.si{background:var(--verde);color:#fff}
/* recogida: todo en azul, para no confundirla con una entrega */
.mov.recogida{background:#F0F5FA;border-color:#CFDDEA;border-left-color:var(--azul)}
.mov.recogida .mov-ico{background:#DCE8F3;color:var(--azul)}
.mov.recogida .mov-cifras .vacias b{color:var(--azul)}
/* la fila abre su detalle al tocarla */
.mov[data-abrir-card]{cursor:pointer;transition:box-shadow .15s ease}
.mov[data-abrir-card]:hover{box-shadow:0 2px 8px rgba(19,33,27,.10)}
/* al presionar, un sombreado interior. Nada de transform ni filter: cualquiera de los dos
   hace que su menú ⋮ (position:fixed) se ubique respecto a la fila y aparezca abajo hasta soltar */
.mov[data-abrir-card]:active{box-shadow:inset 0 0 0 999px rgba(19,33,27,.035)}
/* modal de detalle de una entrega/recogida (solo lectura) */
.detalle-mov{width:100%;border-collapse:collapse}
.detalle-mov td{padding:7px 0;border-bottom:1px solid var(--linea-2);vertical-align:top}
.detalle-mov tr:last-child td{border-bottom:0}
.detalle-mov td:first-child{padding-right:12px;white-space:nowrap}
.detalle-mov td:last-child{text-align:right}
.detalle-mov .bultos b{color:var(--verde);font-size:15px}
.detalle-mov .vacias b{color:var(--azul);font-size:15px}
@media(max-width:420px){.mov{gap:8px}.mov-cifras{gap:10px}.mov-cifras b{font-size:15px}}
/* entregas de una cooperativa: un card por día, con un viaje por fila */
.dia-entregas{margin:8px 0}
.dia-entregas .card-h{padding:8px 12px;background:#F7F9F4;border-radius:var(--r) var(--r) 0 0}
.de-fecha{font-size:13px;color:var(--suave)}
.de-fecha b{font-family:'IBM Plex Mono',monospace;font-size:17px;color:var(--tinta);margin-right:2px}
.de-resumen{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px 12px;font-size:12.5px;color:var(--suave)}
.de-resumen b{font-size:12.5px;margin-left:3px}
.dia-entregas .llenas{color:var(--verde)}
.dia-entregas .vacias{color:var(--suave);font-weight:500}
/* modal "Tipos de caja" / "Productos" */
.tipo-fila{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.tipo-fila form{margin:0}
.tipo-fila .tipo-nombre{display:flex;gap:6px;flex:1;min-width:0}
.tipo-fila input[type=text]{padding:8px;font-size:15px}
.tipo-fila .btn{padding:8px 11px;flex:none}
/* tara de un tipo de caja: campo corto con "kg" dentro; sin anotar, borde discontinuo */
.tipo-fila input[name=nombre]{flex:1;min-width:0;width:auto}
.tipo-tara{position:relative;flex:none;width:86px}
.tipo-fila .tipo-tara input{width:100%;padding-right:28px;text-align:right}
.tipo-tara i{position:absolute;right:9px;top:50%;transform:translateY(-50%);font-style:normal;font-size:12px;color:var(--suave);pointer-events:none}
.tipo-tara.falta input{border-style:dashed}
.tipo-nuevo{margin-top:12px;padding-top:12px;border-top:1px solid var(--linea)}
/* modal "Productos y cajas": un bloque por lista */
.lista-bloque + .lista-bloque{margin-top:14px;padding-top:12px;border-top:1px solid var(--linea)}

/* ---------- jornada.php: mes ya pagado ---------- */
.estado-pagado{display:flex;align-items:center;gap:12px;padding:12px;border-color:#BFD8C6;
  background:var(--verde-suave);box-shadow:inset 3px 0 0 var(--verde),var(--sombra)}
.estado-pagado .ico-ok{flex:none;width:32px;height:32px;border-radius:50%;background:var(--verde);color:#fff;
  display:flex;align-items:center;justify-content:center}
.estado-pagado .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.3}
.estado-pagado .txt b{color:#14513C;font-size:15px}
.estado-pagado form{flex:none;margin:0}
.estado-pagado .btn{padding:7px 12px;font-size:12.5px;background:#fff}

/* ---------- navegación de mes ---------- */
/* flechas y recuadro del centro siempre de la misma altura (stretch): mínimo 44px,
   y más altos los tres juntos cuando el centro lleva una segunda línea (día + nombre) */
.mes{display:flex;align-items:stretch;gap:8px;margin:12px 0}
.mes .b{flex:1;min-width:0;min-height:44px;display:flex;flex-direction:column;justify-content:center;
  text-align:center;background:var(--panel);border:1px solid var(--linea);
  border-radius:var(--r);padding:6px;font-weight:700;letter-spacing:-.01em}
.mes .b small{display:block;font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--suave);margin-top:2px}
.mes a.n,.mes span.n{width:44px;min-height:44px;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);
  font-size:18px;color:var(--tinta);text-decoration:none}
.mes a.n:hover{background:#F2F6EE}
/* span.n = flecha sin destino (primer/último mes con datos): mismo recuadro, apagada */

/* ---------- cuadrícula de días para saltar directo (registrar.php) ---------- */
.grid-dias{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.dia-num{display:flex;align-items:center;justify-content:center;aspect-ratio:1;
  border:1px solid var(--linea);border-radius:var(--r);background:#fff;color:var(--tinta);
  font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:13px;text-decoration:none}
.dia-num:hover{background:#F2F6EE;text-decoration:none}
.dia-num.actual{background:var(--verde);border-color:var(--verde);color:#fff}

/* ---------- migas de pan (para volver, sin botón "volver") ---------- */
.migas{display:flex;align-items:center;gap:6px;margin:10px 2px;font-size:12.5px;color:var(--suave);flex-wrap:wrap}
.migas a{color:var(--verde)}
.migas .actual{color:var(--tinta);font-weight:600}
.migas .sep{color:var(--linea)}

/* ---------- tabla ---------- */
table{width:100%;border-collapse:collapse}
th{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--suave);text-align:left;padding:8px 10px;border-bottom:1px solid var(--linea);font-weight:500}
td{padding:9px 10px;border-bottom:1px solid var(--linea-2);font-size:14px}
tr:last-child td{border-bottom:none}
td.n,th.n{text-align:right}
/* cabecera de card que despliega/contrae su contenido (jornada: Asistencia) */
.card-h.plegable{cursor:pointer;user-select:none;border-radius:var(--r) var(--r) 0 0;
  -webkit-tap-highlight-color:transparent;outline:none}
.card-h.plegable:focus-visible{outline:2px solid var(--verde);outline-offset:-2px}
.card-h.plegable:hover{background:#F7F9F4}
.card-h.plegable[aria-expanded="false"]{border-bottom:none;border-radius:var(--r)}
.plegable-ico{flex:none;color:var(--suave);transition:transform .2s}
.card-h.plegable[aria-expanded="true"] .plegable-ico{transform:rotate(180deg)}
/* cierre del trabajo: importes en una línea (el € no se baja) */
table.cierre td{font-size:13px}
table.cierre td.n{white-space:nowrap}

/* cards compactas (jornada: detalles del trabajo / días vacíos) */
.card.compacta{margin:8px 0}
.card.compacta .card-h{padding:6px 12px}
table.detalles td{padding:5px 12px;font-size:13px}
table.detalles td:first-child{color:var(--suave)}
.card.vacios{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px}
.card.vacios .ayuda{font-size:11.5px;line-height:1.35}
.card.vacios .btn{padding:7px 11px;font-size:12.5px;flex:none}
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabla-scroll table{min-width:520px}

/* ---------- filas de días ---------- */
.dia{border-bottom:1px solid var(--linea-2);padding:8px 10px 10px;display:grid;
  grid-template-columns:54px 1fr;gap:8px;align-items:start;
  background:linear-gradient(to right,var(--linea) 0 3px,transparent 3px)}
.dia:last-child{border-bottom:none}
.dia .fch{padding-top:4px}
.dia .fch b{display:block;font-family:'IBM Plex Mono',monospace;font-size:17px;font-weight:600;line-height:1}
.dia .fch i{display:block;font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:9px;
  letter-spacing:.1em;color:var(--suave);margin-top:2px}
.dia .cuerpo{min-width:0}
.linea1{display:flex;align-items:center;gap:5px}
.dia input[type=time]{width:96px;flex:none;padding:7px 4px;text-align:center;font-size:14px}
.dia input[type=time]::-webkit-calendar-picker-indicator{display:none}
.flecha{color:var(--suave);font-size:12px;flex:none}
.resultado{flex:1;min-width:0;text-align:right;white-space:nowrap;line-height:1.2}
.resultado .h{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600}
.resultado .m{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--verde);display:block}
.resultado-dia{flex:none;margin-top:6px}
.linea2{display:flex;gap:5px;align-items:center;margin-top:6px;flex-wrap:wrap}
.linea3{margin-top:6px}
.chip{border:1px solid var(--linea);background:#fff;border-radius:20px;padding:4px 8px;flex:none;
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--suave);cursor:pointer;line-height:1.3}
.chip:hover{background:#F2F6EE}
.chip.on-f{background:var(--rojo);border-color:var(--rojo);color:#fff}
.chip.on-j{background:var(--ambar);border-color:var(--ambar);color:#fff}
.chip.on-t{background:var(--verde);border-color:var(--verde);color:#fff}
.dia input.nota{width:100%;padding:6px 8px;font-size:13px}

/* ---------- turnos (jornada.php): cada turno es entrada/salida
   + su propio refrigerio, en filas separadas para no apretar todo
   en una sola línea en celular ---------- */
.turno + .turno{margin-top:8px;padding-top:8px;border-top:1px dashed var(--linea-2)}
/* turnos que se pisan (validación de app.js) */
.turno-error input[type=time]{border-color:var(--rojo);background:var(--rojo-suave)}
.error-turnos{margin-top:4px;font-size:12px;color:var(--rojo);line-height:1.35}
.js-agregar-turno{display:block;width:100%;text-align:center;margin:8px 0;padding:8px}
/* Cuando el día es falta/justificada los campos de turno quedan
   deshabilitados -- se tiñe todo el bloque para que se note de un
   vistazo, no solo el chip chico de "Falta". */
.turnos{padding:5px 6px;border-radius:var(--r);background:transparent}
.turnos.es-falta{background:var(--rojo-suave)}
.turnos.es-justificada{background:var(--ambar-suave)}
/* jornada.php: turnos a la izquierda, total del día a la derecha
   (uno solo, sumando todos los turnos). Las horas se encogen para
   que entren en celular junto al ☕ y el total. */
.turnos-fila{display:flex;align-items:center;gap:6px}
.turnos-fila .turnos{flex:1;min-width:0;padding:4px}
.turnos-fila .linea1{gap:4px}
.turnos-fila input[type=time]{flex:1 1 0;min-width:0;max-width:96px}
.turnos-fila .turno + .turno{margin-top:6px;padding-top:6px}
.turnos-fila .resultado-dia{flex:none;margin-top:0;min-width:58px}
.chip.ref-mini{padding:3px 6px;font-size:13px;line-height:1.2;text-transform:none;letter-spacing:0}
.chip.ref-mini.js-ref-toggle:not(.on-t){opacity:.45;filter:grayscale(1)}
.chip.ref-mini:disabled{cursor:default;opacity:.35}
.linea2 .js-agregar-turno{display:inline-block;width:auto;margin:0;padding:4px 8px}
.linea2 .js-agregar-turno:disabled{opacity:.45;cursor:default}
.estado-g{flex:1;min-width:0;overflow:hidden;text-align:right;
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.06em;color:var(--suave)}
.estado-g.guardado{color:var(--verde)}
.estado-g.error{color:var(--rojo)}

/* Colores del día: rojo = falta, ámbar = justificada, verde = con horas,
   blanco = sin registrar, gris = domingo libre. */
.dia{background:linear-gradient(to right,var(--linea) 0 3px,#fff 3px)}
.dia.trabajado{background:linear-gradient(to right,var(--verde) 0 3px,var(--verde-suave) 3px)}
.dia.falta{background:linear-gradient(to right,var(--rojo) 0 3px,var(--rojo-suave) 3px)}
.dia.justificada{background:linear-gradient(to right,var(--ambar) 0 3px,var(--ambar-suave) 3px)}
.dia.domingo{background:linear-gradient(to right,#C9CCC7 0 3px,#ECEDEB 3px);color:#868B84;
  align-items:center}  /* solo "Descanso" y su botón: centrados en el alto de la fila */
.dia.domingo .fch b,.dia.domingo .fch i{color:#868B84}
/* día con falta: el ☕ (refrigerio) no aplica, se oculta; vuelve al quitar la falta
   (jornada.php: .dia; registrar.php: .fila-registro) */
.dia.falta .js-ref-toggle,.dia.justificada .js-ref-toggle,
.fila-registro.falta .js-ref-toggle{display:none}

/* Día con falta compacto, como el domingo: solo "Falta" y el botón "Trabajado"
   (que la quita). Horas, ☕, + Turno y ✎ se esconden; una nota ya escrita sigue a la vista. */
.solo-falta{display:none}
.dia.falta .solo-falta,.fila-registro.falta .solo-falta{display:inline-block}
.dia.falta .turnos-fila,.dia.falta .js-error-turnos,
.dia.falta .linea2 .js-chip,.dia.falta .linea2 .js-agregar-turno,.dia.falta .linea2 .js-nota,
.fila-registro.falta .turnos-fila,.fila-registro.falta .js-error-turnos,
.fila-registro.falta .linea2 .js-chip,.fila-registro.falta .linea2 .js-agregar-turno{display:none}
.dia.falta,.fila-registro.falta{align-items:center}
.dia.falta .fch{padding-top:0}
.dia.falta .linea2,.fila-registro.falta .linea2{margin-top:0;min-height:30px}
.fila-registro.falta{background:linear-gradient(to right,var(--rojo) 0 3px,var(--rojo-suave) 3px)}
.solo-falta.rot{color:var(--rojo)}
/* registrar.php: un card por trabajador. Arriba nombre (izq.) y botones
   (der.) en la misma línea; debajo las horas. Verde = con horas,
   rojo = falta (reglas de arriba), gris = domingo en descanso. */
.card-registro{overflow:hidden;-webkit-tap-highlight-color:transparent}
.card-registro .card-b{padding:12px 12px 10px}
.reg-cab{display:flex;align-items:center;gap:8px;min-height:30px}
.reg-cab .cuad-nom{flex:0 1 auto;min-width:0;font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reg-cab .estado-g{flex:1}
.reg-botones{flex:none;margin-top:0;flex-wrap:nowrap}
.reg-cuerpo{margin-top:8px}
.fila-registro.trabajado{background:linear-gradient(to right,var(--verde) 0 3px,var(--verde-suave) 3px)}
.fila-registro.domingo{background:linear-gradient(to right,#C9CCC7 0 3px,#ECEDEB 3px)}
.fila-registro.domingo .cuad-nom{color:#868B84}
.solo-domingo{display:none}
.fila-registro.domingo .solo-domingo{display:inline-block}
.fila-registro.domingo .reg-cuerpo,.fila-registro.domingo .reg-botones .js-chip,
.fila-registro.domingo .js-ref-toggle,.fila-registro.domingo .js-agregar-turno{display:none}
.solo-domingo.rot{color:#868B84}
.chip.solo-domingo{background:#fff}
.chip.js-quitar-falta{flex:none;background:#fff}
.dia.falta .linea2 .pill.gris{display:none}  /* mes pagado: ya lo dice "Falta" */
/* mi-planilla.php: días de solo lectura (horario a la izquierda, horas y monto a la derecha) */
.horario-lectura{font-size:13.5px;line-height:1.45}
.dia.vacio{align-items:center}
.dia.vacio .fch{padding-top:0}
.dia .linea1 .horario-lectura + .resultado{align-self:center}
.dia.domingo .fch{padding-top:0}
.dia.domingo .linea1{min-height:30px}
.dia.hoy{box-shadow:inset 3px 0 0 var(--verde)}
.sello{display:inline-block;border:1.5px solid var(--rojo);color:var(--rojo);border-radius:2px;
  padding:5px 12px;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.14em;
  transform:rotate(-2.5deg)}
.sello.j{border-color:var(--ambar);color:var(--ambar)}
.semana{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:8px 12px;
  background:#EFF3EA;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.semana b{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--suave)}
.semana span{font-family:'IBM Plex Mono',monospace;font-size:12px}

/* ---------- fila de trabajador en el panel ---------- */
.ft{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:11px 12px;
  border-bottom:1px solid var(--linea-2);color:var(--tinta);text-decoration:none}
.ft:last-of-type{border-bottom:none}
.ft:hover{background:#F4F7F1;text-decoration:none}
.ft-nom{grid-column:1;grid-row:1;font-weight:600;font-size:15px;line-height:1.25}
.ft-meta{grid-column:1;grid-row:2;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--suave)}
.ft-tot{grid-column:2;grid-row:1/3;align-self:center;text-align:right;white-space:nowrap;
  font-family:'IBM Plex Mono',monospace;font-size:16px;font-weight:600;color:var(--verde)}

/* ---------- fila de la cuadrilla (trabajo.php): info + monto/menú ----------
   grid en vez de flex-wrap: así la columna de acciones nunca se cae a su
   propia línea (y termina mal alineada, arrastrando también el menú ⋮). */
.fila-cuad{display:grid;grid-template-columns:auto 1fr auto;gap:6px 10px;align-items:start}
/* trabajo.php: íconos de transporte / tarifa propia delante del nombre */
.iconos-estado{display:flex;flex-direction:column;gap:3px;padding-top:1px}
.iconos-estado .ico{display:flex;width:20px;height:20px;align-items:center;justify-content:center;color:#B7C0B2}
.iconos-estado .ico.on-azul{color:var(--azul)}
.iconos-estado .ico.on-ambar{color:#C08A1E}
.fila-cuad .info{min-width:0}
.fila-cuad .acciones{display:flex;align-items:center;gap:8px;flex:none}
.fila-cuad .monto{font-weight:600;white-space:nowrap}
/* trabajo.php: cada trabajador de la cuadrilla es un card que se abre al tocarlo */
.card-cuad{cursor:pointer;overflow:hidden}
/* sin el destello azul que el celular pone al tocar el card o su ⋮ */
.card-cuad,.card-cuad *{-webkit-tap-highlight-color:transparent}
/* los cards de la cuadrilla van más juntos que los de trabajos */
.grid-trabajos.grid-cuadrilla{gap:5px}
.cuad-nom{color:var(--verde)}
/* Sombreado: al pasar el mouse (solo donde hay mouse; en el celular el
   :hover se queda "pegado" tras tocar) y mientras su menú ⋮ está abierto. */
@media (hover:hover){
  .card-cuad:hover{background:#F4F7F1}
  .card-cuad.fila-pagada:hover{background:#DFEBE2}
}
.card-cuad.con-menu{background:#F4F7F1}
.card-cuad.fila-pagada.con-menu{background:#DFEBE2}
/* trabajo.php: trabajador ya cancelado (pagado) este periodo */
.fila-pagada{background:var(--verde-suave);box-shadow:inset 3px 0 0 var(--verde)}
/* trabajadores.php: card por trabajador (nombre + resumen, ⋮ a la derecha); tocarlo abre su detalle */
.fila-trab{display:flex;align-items:center;gap:10px}
.fila-trab .info{flex:1;min-width:0}
.fila-trab .acciones{flex:none}
.card-trab .cuad-nom{font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trab-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;margin-top:3px;
  font-size:12px;color:var(--suave)}
.trab-meta>span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.trab-meta svg{flex:none}
.card-trab .ct-titulo .punto{flex:none;margin-right:0}
/* trabajadores.php: card tipo contacto -- avatar con iniciales (azul hombre, rosa mujer,
   gris sin indicar) con el puntito del portal, nombre y una línea de datos */
.grid-trabajos.grid-cuadrilla:has(.card-persona){gap:8px}
.card-persona .card-b{padding:12px}
.card-persona .fila-trab{gap:12px}
.avatar{position:relative;flex:none;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:14px;font-weight:700;letter-spacing:.02em;background:#EEF1EB;color:var(--suave)}
.avatar.h{background:#E4EEF8;color:#2B5F94}
.avatar.m{background:#F8E7EF;color:#9C3A68}
.avatar-portal{position:absolute;right:0;bottom:0;width:12px;height:12px;border-radius:50%;
  background:#C9D1C4;border:2px solid var(--panel)}
.avatar-portal.ok{background:#2EA36B}
.card-persona .cuad-nom{color:var(--tinta);font-weight:600;font-size:15px}
.persona-meta{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:12.5px;color:var(--suave);
  white-space:nowrap;overflow:hidden}
.persona-meta .mono{font-size:12px;color:var(--tinta)}
/* trabajadores: "💼 3 trabajos · último: Finca Norte" (el último se recorta con …) */
.persona-trab{display:inline-flex;align-items:center;gap:5px;flex:none}
.persona-trab svg{color:var(--verde);flex:none}
.persona-trab b{color:var(--tinta);font-weight:700}
.persona-ultimo{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* jornada.php (resumen): ficha del trabajador. Perfil con acciones y datos, y un card de
   meses: tira + el mes elegido con sus trabajos. */
.ficha{padding:16px}
.ficha-cab{display:flex;align-items:center;gap:14px}
.avatar.avatar-g{width:58px;height:58px;font-size:19px}
.avatar.avatar-g .avatar-portal{width:15px;height:15px;border-width:3px}
.ficha-nom{min-width:0}
.ficha-nom h1{margin:0;font-size:20px;line-height:1.2;letter-spacing:-.02em;overflow-wrap:anywhere}
.ficha-sub{display:flex;align-items:center;gap:8px;margin-top:3px;font-size:13.5px;color:var(--suave)}
.ficha-acciones{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.ficha-acciones form{margin:0}
.ficha-acciones .btn{padding:8px 12px;font-size:13px}
.ficha-datos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:12px 0 0;
  padding-top:12px;border-top:1px solid var(--linea-2)}
.ficha-datos dt{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--suave)}
.ficha-datos dd{margin:3px 0 0;font-size:14px;overflow-wrap:anywhere}
.ver-doc{border:none;background:none;padding:0 0 0 6px;font:600 12px 'Public Sans',sans-serif;color:var(--verde);cursor:pointer}
.ficha-datos .ver-trabajos{padding:0;font-size:14px}
@media(max-width:520px){
  .ficha-datos{grid-template-columns:1fr 1fr}
  .ficha-acciones .btn{flex:1 1 auto}
}
/* modal "Trabajos en los que estuvo": lista compacta */
.perfil-trabajos{border:1px solid var(--linea-2);border-radius:var(--r)}
.pt-fila{padding:8px 10px}
.pt-fila+.pt-fila{border-top:1px solid var(--linea-2)}
.pt-nom{font-size:14px}
.pt-meta{font-size:11.5px;color:var(--suave);margin-top:1px}
/* tira de meses trabajados: chips de lado a lado, el elegido en verde */
.meses-card .card-h{flex-wrap:wrap;row-gap:4px}
.meses-tira{position:relative;display:flex;gap:12px;overflow-x:auto;padding:12px 14px 10px;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin}
.mes-sel{position:relative;flex:none;width:54px;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:7px 4px 6px;border:1px solid var(--linea);border-radius:var(--r);background:#fff;color:var(--tinta);
  scroll-snap-align:center;text-decoration:none;line-height:1.15}
.mes-sel:hover{background:#F4F7F1;text-decoration:none}
.ms-mes{font-weight:700;font-size:14px}
.ms-anio{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--suave)}
/* estado del pago: ✓ pagado (verde), círculo a medias = adelanto (azul), reloj = pendiente (ámbar) */
.pago-pagado{color:#1F8A57}
.pago-adelanto{color:var(--azul)}
.pago-pendiente{color:#B07F12}
/* íconos del pago en la esquina del mes, como insignias (con adelanto: adelanto + pendiente) */
.ms-pagos{position:absolute;top:-6px;right:-6px;display:flex;gap:1px}
.ms-pagos i{display:flex;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px #fff}
.ms-pagos svg{width:14px;height:14px}
.mes-sel.actual{border-style:dashed}
.mes-sel.on{background:var(--verde);border-color:var(--verde);border-style:solid;color:#fff}
.mes-sel.on .ms-anio{color:#D7EADF}
.meses-leyenda{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:11px}
.meses-leyenda span{display:inline-flex;align-items:center;gap:4px}
.meses-leyenda svg{width:13px;height:13px}
.ft-pago{display:inline-flex;vertical-align:-3px;margin-left:5px}
.ft-adelanto{font-weight:600}
/* el mes elegido, dentro del mismo card: título + estado, resumen y PDF; debajo sus trabajos */
.mes-det-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-top:1px solid var(--linea);background:#F7F9F4}
.mes-det-tit{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px}
.mes-det-res{font-size:12px;color:var(--suave);margin-top:2px}
/* en celular solo el nº de trabajos: el "último" no entra bien */
@media(max-width:520px){.persona-meta .persona-ultimo,.persona-meta .persona-ultimo-sep{display:none}}
/* flecha a la derecha: el card lleva a la vista del trabajador */
.persona-ir{flex:none;font-size:22px;line-height:1;color:#B7C0B2;padding:0 4px}
@media (hover:hover){.card-persona:hover .persona-ir{color:var(--verde)}}
.persona-meta .sep{color:#C3CBBE}
.card-persona.de-baja .avatar{opacity:.55}
.card-persona.de-baja .cuad-nom{color:var(--suave)}
/* usuarios.php: mismo card, pero el avatar es CUADRADO y de color sólido según el rol,
   para no confundirlo con un trabajador (redondo, pastel). Puntito: cuenta activa/bloqueada. */
.avatar-rol{border-radius:12px;color:#fff}
.avatar-rol.admin{background:var(--verde)}
.avatar-rol.operador{background:var(--azul)}
.avatar-rol .avatar-portal{right:-3px;bottom:-3px}
.avatar-portal.no{background:var(--rojo)}
.card-usuario.de-baja .avatar-rol{background:#AEB8A9;opacity:1}
.rol-txt{font-weight:600}
.rol-txt.admin{color:var(--verde)}
.rol-txt.operador{color:var(--azul)}
.persona-meta .acceso{display:inline-flex;align-items:center;gap:4px;overflow:hidden;text-overflow:ellipsis}
.persona-meta .acceso svg{flex:none}
.card-trab.de-baja .cuad-nom{color:var(--suave)}
.det-trabajos{display:flex;flex-wrap:wrap;gap:6px}
.det-trabajos .pill{font-size:11px;padding:4px 10px;text-transform:none;letter-spacing:0;color:var(--tinta)}
.det-trabajos .pill.apagado{background:transparent;border:1px dashed var(--linea);color:var(--suave)}
.det-titulo{display:flex;align-items:center;gap:6px;min-width:0}
.det-titulo .punto{flex:none;margin-right:0}
.det-trabajos .pill:hover{background:var(--verde-suave);color:var(--verde);text-decoration:none}
.monto-pagado{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.monto-pagado .rot{font-size:9px;color:var(--verde)}
.monto-pagado .monto{color:var(--verde)}
@media(max-width:520px){
  .fila-cuad{gap:4px 6px}
  .fila-cuad .monto{font-size:13px}
  .fila-cuad .acciones{gap:5px}
}

/* ---------- bitácora ---------- */
.log{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:10px 12px;border-bottom:1px solid var(--linea-2)}
.log:last-of-type{border-bottom:none}
.log-a{grid-column:1;font-weight:600;font-size:14px}
.log-f{grid-column:2;grid-row:1;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--suave);white-space:nowrap}
.log-u{grid-column:1/3;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--suave)}
.log-r{grid-column:1/3;font-size:13px;margin-top:2px}
.log-c{grid-column:1/3;margin-top:3px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;line-height:1.5}
.log-c .antes{color:var(--rojo)}
.log-c .despues{color:var(--verde)}

/* los campos dentro de rejillas no deben desbordar en pantallas chicas */
.g2>*,.g3>*{min-width:0}
.g2 input,.g2 select,.g3 input,.g3 select{min-width:0;max-width:100%}

/* ---------- cinta de total ---------- */
.cinta{position:fixed;left:0;right:0;bottom:0;background:var(--tinta);color:#EDF2E9;
  padding:12px;z-index:30;box-shadow:0 -2px 12px rgba(19,33,27,.18)}
.cinta-in{max-width:900px;margin:0 auto;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.cinta .rot{color:#93A98E}
.cinta .n{font-weight:700;font-size:27px;line-height:1.05;letter-spacing:-.03em;
  font-family:'IBM Plex Mono',monospace}
.cinta .der{text-align:right;font-family:'IBM Plex Mono',monospace;font-size:11px;color:#93A98E;line-height:1.5}
/* cinta de trabajo.php y jornada.php: monto que se achica si es largo
   (el € no se baja) + detalles con íconos, uno por línea, alineados a la izquierda */
.cinta-iconos .cinta-in{align-items:center}
.cinta-iconos .izq{min-width:0}
.cinta-iconos .n{white-space:nowrap}
.cinta-iconos .n.n-s{font-size:22px}
.cinta-iconos .n.n-xs{font-size:18px}
.cinta-iconos .der{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  text-align:left;white-space:nowrap;line-height:1.35}
.cinta-iconos .der>span{display:flex;align-items:center;gap:6px}
.cinta-iconos .der svg{flex:none;color:#C6D4C0}
.cinta-iconos .der .desc,.cinta-iconos .der .desc svg{color:#E8A79B}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login{width:100%;max-width:360px}
.login .card{margin:0}
.login-top{background:var(--tinta);color:#EDF2E9;padding:18px;border-radius:var(--r) var(--r) 0 0}

/* ---------- utilidades ---------- */
.muted{color:var(--suave);font-size:12.5px}
.pill{display:inline-block;padding:2px 8px;border-radius:20px;font-family:'IBM Plex Mono',monospace;
  font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.pill.ok{background:var(--verde-suave);color:var(--verde)}
.pill.no{background:var(--rojo-suave);color:var(--rojo)}
.pill.gris{background:#EDF1E8;color:var(--suave)}
.punto{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle}
.punto-ok{background:var(--verde)}
.punto-no{background:var(--rojo)}
.punto-ambar{background:var(--ambar)}
.punto-gris{background:var(--linea)}
.oculto{display:none!important}
.ayuda{font-size:12.5px;color:var(--suave);line-height:1.5}
.ayuda code{font-family:'IBM Plex Mono',monospace;background:#EDF1E8;padding:1px 5px;border-radius:2px}

@media(max-width:520px){
  .linea1 input[type=time]{width:92px;font-size:14px}
  .cinta .n{font-size:23px}
  .cinta-iconos .n.n-s{font-size:19px}
  .cinta-iconos .n.n-xs{font-size:16px}
  .dia{grid-template-columns:46px 1fr}
  /* Botones de "+ Nuevo X": en celular solo el "+", el texto lo lleva
     el title/aria-label. Evita que el botón se vaya a su propia línea
     y empuje el resto del contenido hacia abajo. */
  .btn-crear{padding:10px 15px;font-size:17px;line-height:1}
  .btn-crear .btn-txt{display:none}
  /* "+ Agregar" (texto corto) sí entra en celular: mismo tamaño que los botones de
     entregas (.btns-movs) en todas las pantallas */
  .btn-crear.txt-corto{padding:8px 10px;font-size:14.5px;line-height:1.2}
  .btn-crear.txt-corto .btn-txt{display:inline}
  /* Botones largos tipo "Reporte de este trabajo" / "PDF cuadrícula de
     Agosto 2026" (.btns.chicos, en trabajo.php y otras fichas): letra
     más chica en celular para que se vean mejor. */
  .btns.chicos .btn{font-size:11.5px;padding:6px 9px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{
  .top,nav.menu,.cinta,.btns,.chip,.mes a.n,.no-print{display:none!important}
  nav.menu{position:static}
  body{background:#fff;padding-bottom:0}
  .card{break-inside:avoid}
}

/* ---------- modal ---------- */
dialog.modal{border:none;padding:0;border-radius:var(--r);width:min(480px,92vw);
  box-shadow:0 12px 40px rgba(19,33,27,.28);background:var(--panel);margin:auto;color:var(--tinta)}
dialog.modal::backdrop{background:rgba(19,33,27,.55)}
dialog.modal[open]{animation:modal-in .15s ease-out}
@keyframes modal-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* cabecera y pie fijos; solo el cuerpo hace scroll (el pie lo arma app.js con el botón principal) */
dialog.modal[open]{display:flex;flex-direction:column;max-height:90vh;max-height:90dvh}
.modal .card-h{flex:none;border-radius:var(--r) var(--r) 0 0}
.modal .card-b{flex:1 1 auto;min-height:0;overflow-y:auto}
.modal-pie{flex:none;padding:12px;border-top:1px solid var(--linea);background:var(--panel);border-radius:0 0 var(--r) var(--r)}
.modal-pie .btn{width:100%}
.modal-x{border:none;background:transparent;font-size:20px;line-height:1;padding:2px 6px;
  color:var(--suave);cursor:pointer;border-radius:var(--r)}
.modal-x:hover{color:var(--tinta);background:var(--linea-2)}

/* ---------- buscador de tabla ---------- */
.buscador-caja{padding:10px 12px;border-bottom:1px solid var(--linea)}
.buscador-caja input{margin-bottom:0}

/* ---------- buscador + botón en una sola fila: buscador chico a la
   izquierda, el botón anclado a la derecha con una línea de por medio ---------- */
.buscador-fila{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-bottom:1px solid var(--linea);flex-wrap:wrap}
.buscador-fila input{flex:0 1 50%;min-width:120px;margin-bottom:0}
.buscador-fila .der{display:flex;align-items:center;gap:10px;flex:none}
.buscador-fila .sep-v{width:1px;align-self:stretch;background:var(--linea)}
.buscador-fila .btn{flex:none;white-space:nowrap}
.buscador-fila.sin-borde{border-bottom:none}
/* en celular el buscador baja a la altura del botón "+ Agregar" (la letra se queda
   en 16px: con menos, el iPhone hace zoom al tocar el campo) */
@media(max-width:520px){
  .buscador-fila input{padding:7px 10px;line-height:1.2}
}
/* pantallas muy angostas: "+ Agregar" no entra junto al buscador, queda solo el "+" */
@media(max-width:340px){
  .btn-crear.txt-corto{padding:8px 13px;font-size:17px;line-height:1}
  .btn-crear.txt-corto .btn-txt{display:none}
}

/* ---------- trabajos.php: un card por trabajo ---------- */
.grid-trabajos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0}
.grid-trabajos .card{margin:0}
.card-trabajo{display:flex;flex-direction:column}
.card-trabajo .card-h{flex-wrap:nowrap}
.ct-titulo{display:flex;align-items:center;gap:6px;min-width:0}
.ct-nom{font-weight:700;font-size:15.5px;letter-spacing:-.01em;color:var(--tinta);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill.mini{flex:none;font-size:8.5px;padding:1px 6px;letter-spacing:.06em;white-space:nowrap}
.ct-acciones{display:flex;align-items:center;gap:6px;flex:none}
.ct-datos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;flex:1;
  color:var(--tinta);border-radius:0 0 var(--r) var(--r)}
.ct-datos:hover{background:#F4F7F1;text-decoration:none}
/* tres columnas del mismo ancho, cada una con su contenido centrado */
.ct-datos>span{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;min-width:0}
.ct-datos b{font-size:14px;font-weight:600;white-space:nowrap}
.ct-datos i{font-style:normal;font-size:11.5px;color:var(--suave);white-space:nowrap}
.ct-datos .verde{color:var(--verde)}
/* trabajo.php: tarifa / refrigerio / transporte, cada uno en su casilla, mismo ancho */
.datos-trabajo{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;padding-bottom:6px}
.datos-trabajo>div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;min-width:0}
.datos-trabajo b{font-size:14px;font-weight:600;white-space:nowrap}
/* botón con el ícono de PDF (sin texto) */
.btns-h .btn-pdf{display:inline-flex;align-items:center;justify-content:center;padding:3px 7px;color:#5B6B57}
.btns-h .btn-pdf:hover{color:var(--tinta)}
.ct-gente{display:flex;align-items:center;justify-content:center;gap:5px}
.ct-gente svg{color:var(--suave);flex:none}
.ct-datos>span.ct-pagado{justify-content:center;align-items:center;font-weight:700;font-size:14px;color:var(--verde);
  letter-spacing:.02em}
.ct-datos .rojo{color:var(--rojo)}
.ct-datos .rot{font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-trabajo.de-baja .ct-datos{opacity:.7}
.card-trabajo.de-baja .card-h{background:var(--rojo-suave);border-radius:var(--r) var(--r) 0 0}
@media(max-width:640px){.grid-trabajos{grid-template-columns:minmax(0,1fr)}}
@media(max-width:400px){.ct-datos{gap:6px}.ct-datos b{font-size:13px}}

/* ---------- menú de acciones (⋮) ---------- */
.btn-icono{padding:7px 11px;font-size:15px;line-height:1;letter-spacing:1px}
.menu-desplegable{position:fixed;background:#fff;border:1px solid var(--linea);border-radius:var(--r);
  box-shadow:0 10px 30px rgba(19,33,27,.22);min-width:190px;z-index:50;overflow:hidden;display:none}
.menu-desplegable.abierto{display:block}
.menu-desplegable a,.menu-desplegable button{display:block;width:100%;text-align:left;padding:10px 13px;
  border:none;background:none;font:inherit;font-size:13.5px;color:var(--tinta);cursor:pointer;border-radius:0}
.menu-desplegable a:hover,.menu-desplegable button:hover{background:var(--linea-2);text-decoration:none}
.menu-desplegable form{margin:0}
.menu-desplegable>*+*{border-top:1px solid var(--linea-2)}
.menu-desplegable .rojo{color:var(--rojo)}

/* marca de cambio de mes dentro del periodo */
.mes-chip{display:inline-block;margin-top:2px;background:var(--verde);color:#fff;
  border-radius:2px;padding:0 4px;font-size:8.5px;letter-spacing:.08em}
/* ".dia .fch i" (texto del día, gris verdoso) le ganaba al blanco y casi no se leía */
.dia .fch i.mes-chip{color:#fff;font-weight:700}

/* ---------- reporte en tabla ---------- */
.rep2{width:100%;border-collapse:collapse}
.rep2 th{padding:8px 6px;font-size:9.5px;letter-spacing:.1em}
.rep2 th:first-child,.rep2 td:first-child{padding-left:12px}
.rep2 th:last-child,.rep2 td:last-child{padding-right:12px}
.rep2 tbody td{padding:9px 5px;font-size:14px;vertical-align:top}
.rep2 td:nth-child(2),.rep2 th:nth-child(2){width:34px}
.rep2 td:nth-child(3),.rep2 th:nth-child(3){width:54px}
.rep2 td:nth-child(4),.rep2 th:nth-child(4){width:82px}
.rep2 td:nth-child(2),.rep2 td:nth-child(3){font-size:13px}
.rep-fila{cursor:pointer}
.rep-fila:hover{background:#F4F7F1}
.rep-fila b{font-weight:600;font-size:13.5px;line-height:1.3;display:inline}
.rep-fila .sub{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--suave);margin-top:2px}
.rep-fila .sub .pill{font-size:9px;padding:1px 5px;margin-left:2px}
.rep2 td.pago{font-weight:600;font-size:13.5px;color:var(--verde);white-space:nowrap}
.chev{display:inline-block;color:var(--suave);margin-right:4px;transition:transform .15s}
.rep-fila.abierta .chev{transform:rotate(90deg)}
.rep-fila.abierta{background:#EFF3EA}
.rep-det>td{background:#F7F9F4;padding:0 0 10px!important;border-bottom:2px solid var(--linea)}
.det-pie{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:8px 12px;
  font-size:12.5px;color:var(--suave)}
.det-pie b{color:var(--tinta)}
.pill.amb{background:var(--ambar-suave);color:var(--ambar)}
tfoot td{border-top:2px solid var(--tinta);padding-top:11px!important;padding-bottom:11px!important;
  font-size:14px;background:#EFF3EA}
tfoot .sub{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--suave);margin-top:2px}

/* ---------- detalle diario ---------- */
.rep th,.rep td{padding:7px 8px;font-size:13px}
.rep td.n,.rep th.n{text-align:right}
.tabla-scroll table.rep{min-width:0}
.rep th,.rep td{padding:7px 5px}
.rep td:first-child{padding-left:10px}
.rep td:last-child,.rep th:last-child{padding-right:10px}
.fila-falta{background:var(--rojo-suave)}
.resumen-lineas div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:5px 0;border-bottom:1px solid var(--linea-2);font-size:14px}
.resumen-lineas div:last-child{border-bottom:none}
.pagar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;
  padding:10px 12px;background:var(--tinta);color:#EDF2E9;border-radius:var(--r)}
.pagar .rot{color:#93A98E}
.pagar b{font-family:'IBM Plex Mono',monospace;font-size:20px;letter-spacing:-.02em}
@media print{
  .rep{page-break-inside:auto}
  .pagar{background:#fff;color:#000;border:1.5px solid #000}
  .pagar .rot{color:#000}
}

/* ---------- entregas.php: entrega pendiente (pesándose en el campo) ---------- */
.mov.pendiente{border-style:dashed;border-left:4px solid #8A9A86;background:#FAFBF8}
.mov.pendiente .mov-ico{background:#EEF1EB;color:var(--tinta-2)}
.mov-estado.pesando{background:#E8ECE5;color:var(--tinta-2)}
.mov-cifras .kilos b{color:var(--tinta)}
.campo-fijo{padding:10px 0;font-size:15px}
/* pesaje: el total grande, el peso del bulto + Añadir, y la lista de pesos (el último arriba) */
.pes-total{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.pes-total>div{display:flex;flex-direction:column;align-items:center;padding:12px 6px;border-radius:var(--r);background:#F2F6EE}
.pes-total b{font-size:30px;font-weight:700;line-height:1.1;letter-spacing:-.02em}
.pes-total span{font-size:12px;color:var(--suave)}
/* con tara de la caja: bultos · bruto · neto (el neto, destacado: es lo que se compara) */
.pes-total.tres{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pes-total.tres b{font-size:22px}
.pes-total .neto{background:#E4F1E8}
.pes-total .neto b,.pes-total .neto span{color:#14513C}
.pes-form .campo{margin-bottom:8px}
.pes-peso .etq{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--suave);margin-bottom:4px}
.pes-fila{display:flex;gap:8px}
.pes-fila input{flex:1;min-width:0;font-size:22px;padding:10px 12px}
.pes-fila .btn{flex:none;padding:0 20px;font-size:16px}
.pes-estado{min-height:1.4em;margin:10px 0 6px;font-size:12.5px;color:var(--suave)}
.pes-estado.ok{color:#1F8A57}
.pes-estado.mal{color:var(--rojo)}
.pes-estado.aviso-cola{color:#7A5A0E;font-weight:600}
.pes-lista{list-style:none;margin:0;padding:0;max-height:240px;overflow-y:auto;border:1px solid var(--linea-2);border-radius:var(--r)}
.pes-lista:empty{display:none}
.pes-lista li{display:flex;align-items:center;gap:10px;padding:7px 10px;font-size:14px}
.pes-lista li+li{border-top:1px solid var(--linea-2)}
.pes-lista li.en-cola{background:#FBF6E9}
.pl-n{flex:1;color:var(--suave)}
.pl-kg{font-size:15px}
.pl-hora{width:62px;text-align:right;font-size:11.5px;color:var(--suave)}
.pes-lista li.en-cola .pl-hora{color:#7A5A0E;font-weight:600}
.pl-x{border:none;background:none;padding:2px 6px;font-size:14px;color:#A7B2A3;cursor:pointer;border-radius:6px}
.pl-x:hover{color:var(--rojo);background:var(--rojo-suave)}
.pes-entregar{margin-top:16px;padding-top:14px;border-top:1px solid var(--linea-2)}
.entregar-volver{margin-top:12px;text-align:center}
/* cobro: tu peso del campo, y en el detalle la diferencia con el del almacén */
.peso-campo{margin:0 0 10px;padding:8px 10px;border-radius:var(--r);background:#F2F6EE;font-size:13px}
.dif-peso.menos{color:var(--rojo)}
.dif-peso.mas{color:#1F8A57}
.dif-caja{margin:4px 0 10px;padding:9px 11px;border-radius:var(--r);border:1px solid var(--linea);background:#F7F9F4;
  font-size:13.5px;font-weight:600;line-height:1.35}
.dif-caja.menos{background:var(--rojo-suave);border-color:#E7C6BF;color:#8E2F22}
.dif-caja.mas{background:var(--verde-suave);border-color:#BFD8C6;color:#14513C}

/* ---------- entregas.php: detalle de una entrega, en bloques ---------- */
.modal-det .card-b{display:flex;flex-direction:column;gap:12px}
/* los bloques no se encogen para caber: si no entran, el cuerpo hace scroll */
.modal-det .card-b>*{flex-shrink:0}
.det-fecha{font-size:13.5px;font-weight:600;color:var(--tinta)}
.det-fecha span{font-weight:400;color:var(--suave)}
/* cobro: arriba y destacado (verde cobrado, ámbar sin cobrar) */
.det-cobro{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;
  border-radius:var(--r);border:1px solid}
.det-cobro .rot{display:block;margin-bottom:2px}
.det-cobro b{font-size:22px;font-weight:700;letter-spacing:-.02em}
.det-cobro.si{background:var(--verde-suave);border-color:#BFD8C6}
.det-cobro.si .rot,.det-cobro.si b{color:#14513C}
.det-cobro.no{background:#FBF4E1;border-color:#EBD9A6}
.det-cobro.no .rot,.det-cobro.no b{color:#7A5A0E}
.det-cobro .btn{flex:none;padding:8px 12px;font-size:13px}
.det-cobro-der{text-align:right}
.det-cobro-der b{font-size:15px}
/* cifras principales en recuadros */
.det-cifras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.det-cifras[data-n="1"]{grid-template-columns:minmax(0,1fr)}
.det-cifras[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.det-cifras[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:520px){.det-cifras[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
.det-cifras>div{display:flex;flex-direction:column;align-items:center;padding:10px 6px;border-radius:var(--r);background:#F2F6EE;text-align:center}
.det-cifras b{font-size:20px;font-weight:700;line-height:1.15}
.det-cifras span{font-size:11.5px;color:var(--suave)}
/* bloques: factura, peso, datos */
.det-bloque{border:1px solid var(--linea-2);border-radius:var(--r);padding:10px 12px}
.det-bloque h3{margin:0 0 6px}
.det-bloque dl{margin:0}
.det-bloque dl>div{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:13.5px}
.det-bloque dl>div+div{border-top:1px solid var(--linea-2)}
.det-bloque dt{color:var(--suave)}
.det-bloque dd{margin:0;text-align:right;overflow-wrap:anywhere}
.det-bloque dl>div.total dt{color:var(--tinta);font-weight:600}
.det-bloque dl>div.total dd{font-weight:700}
/* peso: comparación CAMPO | ALMACÉN en columnas alineadas, y la diferencia en una franja de color */
.peso-comp{padding:0;overflow:hidden}
.pc-fila{display:grid;grid-template-columns:minmax(0,1fr) 84px 84px;align-items:center;gap:8px;padding:7px 12px}
.pc-fila+.pc-fila{border-top:1px solid var(--linea-2)}
.pc-cab{padding:8px 12px;background:#F7F9F4}
.pc-cab h3{margin:0}
.pc-cab h3 span{margin-left:4px;text-transform:none;letter-spacing:0;color:#A7B2A3}
.pc-col{justify-self:end;padding:3px 9px;border-radius:999px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.pc-col.campo{background:#E4F1E8;color:#14513C}
.pc-col.almacen{background:#E3ECF5;color:#2B5F94}
.pc-etq{font-size:13px;color:var(--suave)}
.pc-val{text-align:right;font-size:14px;font-variant-numeric:tabular-nums;color:var(--tinta)}
.pc-nada{color:#C3CBBE}
.pc-dif{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid;font-size:13px;font-weight:600}
.pc-dif>span:first-child{flex:1;min-width:0}
.pc-dif small{display:block;font-weight:400;font-size:11.5px}
.pc-dif b{font-size:16px}
.pc-dif-kg{font-size:12.5px;opacity:.85}
.pc-dif.menos{background:var(--rojo-suave);border-color:#E7C6BF;color:#8E2F22}
.pc-dif.mas{background:var(--verde-suave);border-color:#BFD8C6;color:#14513C}
.pc-dif.igual{background:#F2F6EE;border-color:var(--linea-2);color:var(--tinta)}
.pc-dif .btn{flex:none;padding:6px 11px;font-size:13px}
.pc-dif.pendiente{background:#F7F9F4;border-color:var(--linea-2);color:var(--suave);font-weight:400}

/* ---------- entregas.php: cobro con los datos de la factura ---------- */
.factura-mas summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--verde);margin-bottom:10px}
.factura-calc{min-height:1.4em;margin:2px 0 12px;font-size:12px;color:var(--suave)}

/* ---------- panel.php ----------
   Las gráficas se dibujan en <canvas> con Chart.js (assets/panel.js); aquí solo va su
   marco. Colores validados con la guía de visualización (validate_palette.js): ver panel.js. */
.panel-filtros{display:flex;gap:10px;margin:12px 0}
.panel-filtros label{flex:1;min-width:0}
.panel-filtros .rot{display:block;margin-bottom:4px}
.panel-filtros select{padding:8px 10px}
.panel-cifras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}
.cifra{min-width:0;padding:12px;background:var(--panel);border:1px solid var(--linea);border-radius:var(--r);box-shadow:var(--sombra)}
.cifra-v{margin-top:4px;font-size:21px;font-weight:600;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cifra-sub{margin-top:2px;font-size:11.5px;color:var(--suave)}
@media(max-width:640px){.panel-cifras{grid-template-columns:1fr 1fr}.cifra-v{font-size:19px}}
.tendencia.sube{color:#1F8A57}
.tendencia.baja{color:var(--rojo)}
/* una gráfica por card: dos columnas en escritorio, una en celular; las anchas ocupan toda la fila */
.panel-graficas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0}
.panel-graficas .card{margin:0}
.grafica.ancha{grid-column:1/-1}
@media(max-width:700px){.panel-graficas{grid-template-columns:minmax(0,1fr)}}
.grafica .card-h{flex-direction:column;align-items:flex-start;gap:2px}
.g-sub{font-size:12px;color:var(--suave)}
.g-lienzo{position:relative;width:100%}
.g-dona{height:260px}
.g-vacio{margin:0;padding:18px 0;text-align:center;font-size:13px;color:var(--suave)}
.panel-nota{margin:12px 0 0;font-size:12px}
.ley{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:50%;vertical-align:-1px}
.ley.ley-cuadro{border-radius:2px}
.g-leyenda{display:flex;flex-wrap:wrap;gap:4px 16px;margin-bottom:8px;font-size:12px;color:var(--tinta)}
.panel-tabla{margin-top:14px}
.panel-tabla summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--verde)}
.panel-tabla .tabla-scroll table{min-width:0;margin-top:8px}
.g-datos{margin:0;padding:12px}
.g-datos .tabla-scroll table{min-width:620px}