@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}
/* adelantos de un mes, uno por uno: fecha · monto (en rojo: resta) · ✕ */
.lista-adelantos{list-style:none;margin:0 0 4px;padding:0;border:1px solid var(--linea-2);border-radius:var(--r)}
.lista-adelantos li{display:flex;align-items:center;gap:10px;padding:7px 10px;font-size:13.5px}
.lista-adelantos li+li{border-top:1px solid var(--linea-2)}
.la-fecha{flex:1;color:var(--suave)}
.lista-adelantos b{color:#B23A28;font-weight:600}
.lista-adelantos form{margin:0}
.la-x{border:none;background:none;padding:2px 6px;font-size:14px;color:#A7B2A3;cursor:pointer;border-radius:6px}
.la-x:hover{color:var(--rojo);background:var(--rojo-suave)}
.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}
/* oscuro al pasar el ratón: un poco más claro, el texto sigue blanco (sin esto heredaba el fondo claro de .btn:hover) */
.btn-d:hover{background:#2A3A30;border-color:#2A3A30;color:#fff}
.btn-p:hover,.btn-d:hover{text-decoration:none}
.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)}
/* como popover (encima de los modales): sin los estilos por defecto del navegador */
.guardado-chip[popover]{inset:auto auto auto 50%;margin:0;border:0;overflow:visible}
.guardado-chip[popover]:not(:popover-open){display:none}
.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 de un almacén: a la izquierda lo pendiente de cobro (ámbar) o las entregas del mes;
   a la derecha, mini tabla producto · entregas del mes (hasta 4 productos) */
.cinta-izq{min-width:0;align-self:center}
.cinta-izq .n small{font-size:13px;font-weight:500;letter-spacing:0;color:#C6D4C0}
.cinta-izq.pend .rot{color:#E9C46A}
.cinta-izq.pend .n{color:#F4D58A}
.cinta-izq .rot{white-space:nowrap}
/* misma escala que el texto de la derecha de las demás cintas (11 px), para no competir con lo de la izquierda */
.cinta-tabla{width:auto;flex:none;border-collapse:collapse;color:#C6D4C0}
.cinta-tabla th{padding:0 0 2px;font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:#93A98E;text-align:left;border-bottom:1px solid #2E4438}
.cinta-tabla th+th,.cinta-tabla td+td{text-align:right;padding-left:14px}
.cinta-tabla td{padding:2px 0 0;border:0;font-size:11px;line-height:1.35;white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis}
.cinta-tabla td+td{font-weight:700;color:#EDF2E9}
/* 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:10px;display:flex;flex-direction:column;gap:6px}
.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}
/* fila de entrega/recogida: dos líneas a cada lado (como un movimiento de banco), fondo blanco
   y una franja fina a la izquierda con el color del estado */
.mov{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 4px 8px 10px;
  border:1px solid var(--linea);border-left:3px 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-txt,.mov-der{display:flex;flex-direction:column;gap:3px;min-width:0;line-height:1.2}
.mov-txt{flex:1}
/* derecha de la fila: los kilos arriba, de lado a lado (a la derecha); abajo, 3 columnas fijas
   bultos · % (el % en un hueco de ancho fijo), para que "bultos" acabe en la misma vertical siempre */
/* los anchos de las columnas son los del contenido más ancho de TODAS las filas (--mv-bultos, --mv-pct,
   los mide app.js): como en una tabla, todas iguales y sin espacio de más */
.mov-der{flex:none;display:grid;grid-template-columns:var(--mv-bultos,auto) 12px var(--mv-pct,auto);row-gap:3px;align-items:baseline;text-align:right}
.mov-der>b{grid-column:1 / -1}
.mov-der>i{font-style:normal}
.mv-punto{text-align:center;color:var(--suave);font-size:11.5px}
.mov-der .mov-dif{font-size:11.5px;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mov-dif.nada,.mov-dif.pend{font-family:'Public Sans',system-ui,sans-serif;font-weight:500;color:var(--suave)}
/* pendiente de factura: en ámbar, como "Sin cobrar"; se adapta al ancho de los % (si no cabe, "…") */
.mov-dif.pend{color:#A0740F;font-weight:600}
.mov-txt b,.mov-txt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mov-txt b{font-size:14px;font-weight:600}
.mov-der b{font-size:15px;font-weight:600;color:var(--tinta);white-space:nowrap}
.mov-der b small{font-family:'Public Sans',system-ui,sans-serif;font-size:11px;font-weight:500;color:var(--suave)}
.mov-der>.mv-sub{font-size:11.5px;color:var(--suave);white-space:nowrap}
/* estado: punto de color + texto, sin etiqueta rellena */
.mov-est{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;color:var(--suave)}
.mov-est::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.mov-est.cobrada{color:#1F7A55}
.mov-est.sin-cobrar{color:#A0740F}
.mov-est.pesando{color:#6B7A67}
.mov-est.recogida{color:var(--azul)}
/* diferencia con el almacén: solo color de texto; rojo si pesó de menos (fuera del margen) */
.mov-dif{font-style:normal;font-family:'IBM Plex Mono',monospace;font-weight:600}
.mov-dif.menos{color:#B23A28}
.mov-dif.bien{color:#1F7A55}
/* ícono al principio (solo informa): camión = entrega, caja de plástico = recogida */
.mov-ico{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;border-radius:9px}
.mov-ico svg{width:17px;height:17px}
/* ⋮ discreto: sin caja, solo el ícono */
.mov .btn-icono{flex:none;border-color:transparent;background:transparent;color:var(--suave);width:30px;padding:6px 0}
.mov .btn-icono:hover{background:#F2F6EE;color:var(--tinta)}
/* entrega: franja ámbar hasta que se cobra; luego verde */
.mov.entrega .mov-ico{background:var(--verde-suave);color:var(--verde)}
.mov.sin-cobrar{border-left-color:#D9A82E}
.mov.sin-cobrar .mov-ico{background:#FBF1D8;color:#A0740F}
.mov.cobrada{border-left-color:var(--verde)}
/* recogida: en azul, para no confundirla con una entrega */
.mov.recogida{border-left-color:var(--azul)}
.mov.recogida .mov-ico{background:#E3ECF5;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:9px}}
/* 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 */
/* fijos arriba al bajar (js-fija): cada uno se para debajo del anterior (top lo pone app.js);
   con el fondo de la página para tapar lo que pasa por debajo */
.js-fija{position:sticky;z-index:20;background:var(--papel)}
.migas.js-fija{margin:0 -12px;padding:6px 14px 2px}
.mes.js-fija{margin:0 -12px 10px;padding:4px 12px 6px}
.mes.js-fija .b,.mes.js-fija a.n{min-height:38px}
.js-fija.pegada{box-shadow:0 6px 8px -8px rgba(19,33,27,.35)}

/* ---------- 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;overscroll-behavior:contain}
/* con un modal abierto, la página de detrás no se mueve: ni al hacer scroll dentro del modal
   (al llegar al final no "pasa" al fondo) ni tocando fuera de él */
html:has(dialog.modal[open]),html:has(dialog.modal[open]) body{overflow:hidden;overscroll-behavior:none}
dialog.modal{overscroll-behavior:contain}
.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:3px solid #8A9A86;background:#FAFBF8}
.mov.pendiente .mov-ico{background:#EEF1EB;color:var(--tinta-2)}
.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}
/* bultos (corto) · peso (ancho) · botón, en una fila; las etiquetas encima */
.pes-fila{display:flex;align-items:flex-end;gap:8px}
.pes-fila label{display:flex;flex-direction:column;min-width:0}
.pes-fila .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-cant{flex:none;width:76px}
.pes-kg{flex:1}
.pes-fila input{width:100%;min-width:0;font-size:22px;padding:10px 12px}
.pes-cant input{text-align:center;padding:10px 4px}
.pes-fila .btn{flex:none;align-self:stretch;margin-top:18px;padding:0 18px;font-size:16px}
/* corrigiendo un peso de la lista */
.pes-editando{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0 0;padding:7px 10px;
  border-radius:var(--r);background:#FBF6E9;color:#7A5A0E;font-size:13px;font-weight:600}
.pes-editando[hidden]{display:none}
.pes-editando .ver-doc{padding:0;font-size:13px}
.pes-lista li{cursor:pointer}
.pes-lista li.editando{background:#FBF6E9;box-shadow:inset 3px 0 0 #D9A521}
.pes-estado{min-height:1.4em;margin:10px 0 6px;font-size:12.5px;color:var(--suave)}
.pes-estado.ok{color:#1F8A57}
.pes-estado:empty{min-height:0;margin:6px 0}
.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 */
/* cada sección es un card con su encabezado de color: azul = del almacén (factura),
   verde = del campo (pesos), gris = datos; el de Peso (campo frente a almacén) lleva las dos etiquetas */
.det-bloque{--sb:var(--linea);--sh:#F4F6F2;--st:var(--suave);
  border:1px solid var(--sb);border-radius:var(--r);background:#fff;overflow:hidden;box-shadow:0 1px 2px rgba(19,33,27,.05)}
.det-bloque>h3{margin:0;padding:8px 12px;background:var(--sh);color:var(--st);border-bottom:1px solid var(--sb)}
.det-bloque>dl,.det-bloque>ol{margin:0;padding:4px 12px}
.det-bloque>.dp-total,.det-bloque>.dp-ver{margin-left:12px;margin-right:12px}
.sec-almacen{--sb:#C9DAEA;--sh:#E9F0F7;--st:#2B5F94}
.sec-campo{--sb:#C4DCCB;--sh:#E6F2EA;--st:#14513C}
/* comparación de peso: el color sigue al resultado (rojo: el almacén pesa de menos; verde: igual
   o más); sin comparación todavía, neutro. Datos del huerto: lila suave, sin significado de estado */
.peso-comp{--sb:#CDD5DF;--sh:#EEF1F5;--st:#3F4A5A}
.peso-comp.pc-menos{--sb:#E7C6BF;--sh:#FAEBE7;--st:#8E2F22}
.peso-comp.pc-bien{--sb:#BFD8C6;--sh:#E9F4EC;--st:#14513C}
.sec-datos{--sb:#D5D0EA;--sh:#F0EEF8;--st:#4B3F8A}
.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}
.dp-ver{display:block;padding:8px;border:1px dashed #C4DCCB;border-radius:8px;
  background:#F4F9F5;color:#14513C;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.dp-ver:hover{background:#E6F2EA}
/* todo lo que resta (descuentos, tara, el almacén pesa de menos), en rojo */
.neg,.det-tabla td.neg,.det-tabla td.neg b,.det-tabla td.neg small,.det-bloque dd.neg{color:#B23A28}
/* pesos del campo: nº · bultos · peso · hora; con muchos, los 6 primeros y "Ver los N pesos" */
.det-pesos th:nth-child(1),.det-pesos td:nth-child(1){width:16%}
.det-pesos th:nth-child(2),.det-pesos td:nth-child(2){width:22%}
.det-pesos th:nth-child(4),.det-pesos td:nth-child(4){width:22%}
.det-pesos .dp-n,.det-pesos .dp-h{color:#A7B2A3}
.det-pesos table.corta tbody tr:nth-child(n+7):not(.dp-mas){display:none}
.det-pesos tr.dp-mas td{padding:6px 12px 8px;text-align:center}
.det-pesos .dp-ver{width:100%;margin:0}
.det-pesos tfoot td{border-top:1px solid #C4DCCB;background:#E6F2EA;color:#14513C;font-weight:700}
.det-pesos tfoot td b{color:#14513C}
/* tablas del detalle (Peso, Pesos del campo y Recibo compartido): compactas, cifras alineadas a la derecha */
.det-tabla>h3 span{margin-left:4px;text-transform:none;letter-spacing:0;opacity:.7}
.det-tabla table{width:100%;border-collapse:collapse;table-layout:fixed}
.det-tabla th{padding:6px 8px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--suave);text-align:right;border-bottom:1px solid var(--linea-2)}
.det-tabla th:first-child{text-align:left;padding-left:12px}
.det-tabla td{padding:7px 8px;font-size:12.5px;text-align:right;white-space:nowrap;border-top:1px solid var(--linea-2)}
.det-tabla td:first-child{text-align:left;white-space:normal;padding-left:12px;line-height:1.25}
.det-tabla td:last-child,.det-tabla th:last-child{padding-right:12px}
.det-tabla td b{font-weight:700;color:var(--tinta)}
.det-tabla td small{display:block;font-size:11px;color:var(--suave)}
/* peso: kg · Campo (verde) · Almacén (azul); al pie, la diferencia con su color */
.peso-comp th:nth-child(n+2),.peso-comp td:nth-child(n+2){width:30%}
.peso-comp tbody td:first-child{color:var(--suave)}
.peso-comp th.campo{color:#14513C}
.peso-comp th.almacen{color:#2B5F94}
.pc-nada{color:#C3CBBE}
.peso-comp tfoot td{border-top:1px solid;font-weight:600}
.peso-comp tfoot td b{font-size:15px;color:inherit}
.peso-comp tfoot td small{color:inherit;opacity:.8;font-weight:400}
.peso-comp tfoot td:last-child b,.peso-comp tfoot td:last-child small{display:inline;margin-left:6px}
.pc-dif.menos td{background:var(--rojo-suave);border-color:#E7C6BF;color:#8E2F22}
.pc-dif.mas td{background:var(--verde-suave);border-color:#BFD8C6;color:#14513C}
.pc-dif.igual td{background:#F2F6EE;border-color:var(--linea-2);color:var(--tinta)}
.pc-dif.pendiente td{background:#F7F9F4;border-color:var(--linea-2);color:var(--suave);font-weight:400}
.pc-dif .btn{padding:5px 10px;font-size:12.5px}

/* ---------- 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)}
/* detalle: tabla del recibo con las otras entregas (Entrega · Importe · Desc. · Cobra), en € */
/* cada card del detalle se pliega: el encabezado hace de botón (flecha a la derecha);
   plegado, a la derecha un resumen (det-res) con lo principal */
.det-bloque>summary{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--sh);color:var(--st);
  cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.det-bloque>summary::-webkit-details-marker{display:none}
.det-bloque>summary>span{text-transform:none;letter-spacing:0;opacity:.7}
.det-bloque>summary::after{content:"";width:7px;height:7px;flex:none;margin-left:auto;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
.det-res{margin-left:auto}
.det-bloque:not([open])>summary:has(.det-res)::after{margin-left:0}
.det-bloque[open]>summary{border-bottom:1px solid var(--sb)}
.det-bloque[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.det-res{font-style:normal;font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--tinta)}
.det-res.neg{color:#B23A28}
.det-bloque[open] .det-res{display:none}
.det-bloque>dl,.det-bloque>table{margin:0}
.det-recibo th span{text-transform:none;letter-spacing:0}
.det-bloque dt small{font-size:11px;color:var(--suave)}
.det-recibo th:nth-child(n+2),.det-recibo td:nth-child(n+2){width:23%}
.det-recibo .rd-desc{color:#8E2F22}
.det-recibo tr.esta td{background:#F4F8FC}
.det-recibo tfoot td{border-top:1px solid #C9DAEA;background:#E9F0F7;font-weight:700;color:#2B5F94}
.det-recibo tfoot td b{color:#2B5F94}
.det-recibo tfoot .rd-desc{color:#8E2F22}
/* recibo descuadrado (guardado con la regla anterior): se avisa para volver a guardarlo */
.det-red{margin:10px 12px;padding:7px 10px;border-radius:8px;background:var(--rojo-suave);color:#8E2F22;font-size:12.5px}
/* ---- cobro con recibo (varias entregas) ---- */
/* qué entregas trae el recibo: una fila marcable por entrega */
.rc-elegir{margin:0 0 12px;border:1px solid #C9DAEA;border-radius:var(--r);overflow:hidden;background:#fff}
.rc-tit{display:block;padding:8px 12px;background:#E9F0F7;color:#2B5F94;border-bottom:1px solid #C9DAEA;
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.rc-op{display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:13.5px;cursor:pointer}
.rc-op+.rc-op{border-top:1px solid var(--linea-2)}
.rc-op input{width:18px;height:18px;flex:none;accent-color:var(--verde)}
.rc-op.on{background:#F4F9F5}
.rc-op-txt{flex:1;min-width:0;color:var(--suave)}
.rc-op-txt b{color:var(--tinta);font-weight:600}
.rc-otras{border-top:1px solid var(--linea-2)}
.rc-otras summary{padding:9px 12px;font-size:13px;font-weight:600;color:var(--verde);cursor:pointer}
.rc-otras .rc-op{border-top:1px solid var(--linea-2)}
.rc-tag{flex:none;font-style:normal;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:999px;background:#EEF1EB;color:var(--tinta-2)}
/* la línea de cada entrega: su propio card */
.rc-linea{margin:0 0 12px;padding:0;border:1px solid var(--linea);border-radius:var(--r);min-width:0;overflow:hidden;background:#fff}
.rc-linea[hidden]{display:none}
.rc-linea-cab{padding:8px 12px;background:#F4F6F2;border-bottom:1px solid var(--linea)}
.rc-linea-cab b{display:block;font-size:13.5px;color:var(--tinta)}
.rc-linea-cab small{display:block;font-size:11.5px;color:var(--suave)}
.rc-linea-b{padding:10px 12px 0}
/* reparto del total entre las entregas */
.rc-reparto{margin:-2px 0 14px;border:1px solid #C4DCCB;border-radius:var(--r);overflow:hidden}
.rc-reparto[hidden]{display:none}
.rp-cab{display:flex;justify-content:space-between;padding:7px 12px;background:#E6F2EA;color:#14513C;
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.rp-fila{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--linea-2)}
.rp-izq{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.3}
.rp-izq b{font-size:13.5px;font-weight:600;color:var(--tinta)}
.rp-izq span{font-size:11.5px;color:var(--suave)}
.rp-cobra{flex:none;font-size:15px;font-weight:700;color:var(--tinta)}
.rp-fila.rp-tot{background:#F4F9F5;border-top-color:#C4DCCB}
.rp-fila.rp-tot .rp-cobra{color:#14513C}

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

/* ============================================================
   Ahorros (ahorros/index.php): lista de ahorros con su saldo, y en
   cada uno el saldo, sus 4 movimientos y el historial.
   ============================================================ */
/* acceso desde "Mi cuenta" (solo admin) y vuelta a la planilla desde la cabecera de ahorros */
.cuenta-ahorros{display:flex;align-items:center;gap:12px;padding:14px 16px;border-left:3px solid var(--verde);color:var(--tinta);text-decoration:none}
.cuenta-ahorros:hover{text-decoration:none;box-shadow:0 2px 8px rgba(19,33,27,.10)}
.ca-txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.ca-txt b{font-size:20px;font-weight:700}
.ca-txt .muted{font-size:12.5px}
.ca-ir{flex:none;padding:8px 14px;border-radius:var(--r);background:var(--verde);color:#fff;font-weight:600;font-size:14px}
/* ahorros: botón de salir (volver a la planilla), arriba a la derecha */
.top-salir{margin-left:auto;display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;
  border:1px solid #2E4438;border-radius:var(--r);background:var(--tinta-2);color:#C6D4C0;text-decoration:none}
.top-salir:hover{background:#2A3A30;color:#fff;text-decoration:none}
.ah-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 10px}
.ah-cab h1{margin:0}
.ah-lista{display:flex;flex-direction:column;gap:8px}
.ah-card{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--panel);border:1px solid var(--linea);
  border-left:3px solid var(--verde);border-radius:var(--r);box-shadow:var(--sombra);color:var(--tinta);text-decoration:none}
.ah-card:hover{text-decoration:none;box-shadow:0 2px 8px rgba(19,33,27,.10)}
.ah-nombre{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.ah-nombre b{font-size:15.5px;font-weight:600}
.ah-prestado{font-size:12px;font-weight:600;color:var(--ambar)}
.ah-sug{font-size:12px;font-weight:600;color:var(--verde)}
.ah-saldo{flex:none;font-size:18px;font-weight:700}
/* un ahorro: saldo grande y sus tres cifras */
.ah-resumen .card-b{text-align:center;padding:16px 12px 12px}
.ah-saldo-g{display:block;margin:2px 0 12px;font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.ah-cifras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ah-cifras>div{display:flex;flex-direction:column;gap:2px;padding:9px 6px;border-radius:var(--r);background:#F2F6EE}
.ah-cifras span{font-size:11.5px;color:var(--suave)}
.ah-cifras b{font-size:14.5px;font-weight:700}
.ah-cifras .pos{color:#1F7A55}
.ah-cifras .neg{color:#B23A28}
.ah-cifras .deuda{background:var(--ambar-suave)}
.ah-cifras .deuda b,.ah-cifras .deuda span{color:var(--ambar)}
.ah-acciones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 12px}
.ah-acciones .btn{padding:10px 4px;font-size:13.5px;text-align:center}
.ah-acciones .btn:disabled{opacity:.45;cursor:default}
/* cobros por añadir */
.ah-sugeridos{border-color:#C4DCCB}
.ah-sugeridos .card-h{background:#E6F2EA;border-bottom-color:#C4DCCB}
.ah-sugeridos .card-h .rot{color:#14513C}
.ah-sug-fila{display:flex;align-items:center;gap:10px;margin:0;padding:8px 0}
.ah-sug-fila+.ah-sug-fila{border-top:1px solid var(--linea-2)}
.ah-sug-txt{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.3}
.ah-sug-txt b{font-size:13.5px;font-weight:600}
.ah-sug-txt span{font-size:11.5px;color:var(--suave)}
.ah-sug-fila>b{font-size:14px;font-weight:700;color:#1F7A55}
.ah-sug-fila .btn{padding:7px 12px;font-size:13px}
/* historial */
.ah-movs{list-style:none;margin:0;padding:0}
.ah-movs li{display:flex;align-items:center;gap:10px;padding:9px 10px 9px 14px;border-left:3px solid transparent}
.ah-movs li+li{border-top:1px solid var(--linea-2)}
.am-txt{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.3}
.am-txt b{font-size:13.5px;font-weight:600}
.am-txt span{font-size:11.5px;color:var(--suave);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.am-monto{flex:none;font-size:14px;font-weight:700}
.ah-movs form{margin:0}
.am-ingreso{border-left-color:#1F7A55}.am-ingreso .am-monto{color:#1F7A55}
.am-devolucion{border-left-color:#1F7A55}.am-devolucion .am-monto{color:#1F7A55}
.am-retiro{border-left-color:#B23A28}.am-retiro .am-monto{color:#B23A28}
.am-prestamo{border-left-color:#C9962B}.am-prestamo .am-monto{color:#B23A28}