/* Estilos de las áreas (programa 07/11): Operaciones, Acopio, Administración y Fundo.

   Cascada: styles.css → rrhh.css → areas.css. page() enlaza las tres en ese orden (src/render.js), así que aquí se afina
   lo de las hojas anteriores sin tocarlas. Los componentes de DESIGN.md (.fld, .ctl, .notice, .panel, table.datos) siguen
   en styles.css: este archivo no los copia.

   Cómo está ordenado:
   · la sección común, entre «==== común ====» y «==== fin común ====», con las piezas de src/paginas/_vistas.js y el menú
     que se pliega. La escribe P0, no un módulo, y ningún selector suyo está ya en styles.css ni en rrhh.css;
   · una sección por módulo, entre «==== <etiqueta> ====» y «==== fin <etiqueta> ====», en el orden del programa. Cada
     módulo escribe solo en la suya y cada selector suyo lleva una clase con su prefijo. Afinar una pieza común también va
     dentro de esa clase (.fac-ficha .casillas {…}), para no pisar a los demás;
   · fuera de las secciones no va nada.

   Reglas de todo el archivo (las vigila tests/areas_base_07nov.test.js):
   · ningún selector .ficha, .resumen ni .dato: son de Colaboradores, de la carta de plásticos de Envíos y del documento de
     la orden de servicio;
   · ningún color en hex, solo los tokens de styles.css. El ☰ de la barra usa currentColor, porque la tinta del menú no es
     un token;
   · ninguna letra de menos de 12 px;
   · ninguna sombra nueva: box-shadow solo var(--shadow) o none. El foco de teclado es un outline mango de 2 px, nunca una
     sombra.

   Prefijos (etiqueta y prefijo, en el orden de las secciones):
     op-recepcion rmp-        op-calidad rc-          op-despachos desp-        op-costos-planta cpl-
     acopio-compras acp-      op-envios env-          op-costos-export cex-     op-proforma prof-
     op-ordenes-servicio osv- adm-movilidad mov-      adm-clientes cli-         adm-facturas fac-
     adm-marcas mr-           acopio-ventas acv-      fundo-ventas fnd-         fundo-gastos fga-
     fundo-resumen fres-      fundo-planilla cam-
*/

/* ==== común ==== */
/* Utilidades. .solo-lector: el texto que lee el lector de pantalla y no se ve (la regla de .plf-oculto de rrhh.css). */
.solo-lector{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* El recuadro que abre un botón con data-abre (app.js › abreDebajoInit), fuera de las listas de RR. HH. Va como .abierta.recuadro y no como
   .abierta[id]: con el mismo peso y después en la cascada, esa pisaría las .abierta de Vacaciones y Tarjetas. */
.abierta.recuadro{margin-top:10px;padding:14px 16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m)}
.abierta.recuadro .form-foot{background:var(--paper)} /* en el celular el pie del formulario es fijo con fondo de tarjeta (styles.css): aquí, del papel del recuadro */

/* casillasEstado: lo que tiene y lo que falta, en recuadros parejos. El valor dice el estado en palabras; el color lo acompaña. Lo que
   falta va punteado en mango (la regla del mango: señala, no decora). Con enlace, la casilla entera es el enlace. */
.casillas{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:0;padding:0;list-style:none}
.casilla{display:grid;align-content:start;gap:2px;min-width:0;padding:10px 12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m)}
.casilla>a{display:grid;align-content:start;gap:2px;margin:-10px -12px;padding:10px 12px;border-radius:var(--r-m);color:inherit}
.casilla:has(>a):hover{border-color:var(--verde-2)}
.casilla small{font-size:12px;color:var(--ink-soft)}
.casilla b{font-size:14px;font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.casilla.ok b{color:var(--good)}
.casilla.pend b{color:var(--mango-dark)}
.casilla.mal b{color:var(--bad)}
.casilla.falta{border-style:dashed;border-color:var(--mango)}
.casilla.falta b{color:var(--mango-dark)}

/* avisoConAcciones: un .notice con sus botones a la derecha. blanco: sobre tarjeta, para lo que espera sin ser una alerta. */
.notice.notice-acc{flex-wrap:wrap;align-items:flex-start}
.notice.notice-acc>div:not(.notice-acc-botones){flex:1 1 260px;min-width:0}
.notice-acc-botones{display:flex;flex-wrap:wrap;align-items:center;gap:8px;align-self:center;margin-left:auto}
.notice-acc-botones form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;margin:0}
.notice.notice-acc.blanco{background:var(--card);border-color:var(--line)}

/* insignia: el cuadro (el N° de un envío, «Ago»). El círculo, sus seis fondos y su tamaño (--av) son de .av, en rrhh.css. */
.av.av-cuadro{border-radius:var(--r-m);font-family:"Bricolage Grotesque",sans-serif}

/* menuMas: «⋯ Más», la lista cae bajo el botón, alineada a su derecha, como tarjeta. Abierto, el botón queda como en hover. No crece
   como los demás details (styles.css › B): su lista flota y no tiene alto que crecer, y al cerrar se quedaría 0.2 s a la vista. */
.acciones-mas{position:relative;display:inline-block}
.acciones-mas>summary{list-style:none}
.acciones-mas>summary::-webkit-details-marker{display:none}
.acciones-mas[open]>summary{border-color:var(--verde-2);background:var(--line-soft)}
html.anima-lista details.acciones-mas::details-content{transition:none}
/* Sin transición de vista (html:not(.vt), render.js), la entrada escalonada (styles.css › pageIn, que se queda puesta) hace de cada
   bloque de .contenido-int una capa aparte, y la lista abierta quedaría debajo del bloque que sigue. Mientras está abierta, su bloque
   sube una capa (z-index 1): queda sobre sus hermanos y debajo de la barra de arriba (.topbar, capa 6; 7 en el celular). Con transición de
   vista la entrada no corre y la lista ya flota sobre todo. Lo mismo el panel del selector de campañas (.sel-camp), que también flota. */
html:not(.vt) .contenido-int>:has(details:is(.acciones-mas,.sel-camp)[open]){position:relative;z-index:1}
.acciones-mas-lista{position:absolute;top:calc(100% + 6px);right:0;z-index:20;min-width:220px;max-width:320px;margin:0;padding:6px;list-style:none;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow)}
.acciones-mas-lista>li>a{display:block;padding:8px 12px;border-radius:var(--r-s);font-size:13.5px;color:var(--ink)}
.acciones-mas-lista>li>span{display:block;padding:8px 12px;font-size:13.5px;color:var(--ink-soft)} /* un item sin destino seguro (Ruling 23): texto, sin enlace */
.acciones-mas-lista>li>a:hover{background:var(--line-soft);color:var(--verde)}
.acciones-mas-lista>li>form{margin:0;padding:4px 6px}

/* botonEnOtraEmpresa: el formulario va en línea, junto a los demás botones. */
.form-otra-empresa{display:inline-flex;margin:0}

/* cifrasEnFila. rayas: columnas iguales separadas por una raya, sin tarjetas, la cifra en Bricolage; el signo (cf-op) va entre las
   columnas, a la altura de la cifra, y esa raya no se dibuja. */
.cifras-fila{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:0}
.cifras-fila .cf{position:relative;min-width:0;padding:4px 20px;border-left:1px solid var(--line)}
.cifras-fila .cf:first-child{padding-left:0;border-left:0}
.cifras-fila:not(.cajas) .cf:has(>dt>.cf-op){border-left-color:transparent}
.cifras-fila dt{font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.cifras-fila .cf-v{margin:2px 0 0;font-family:"Bricolage Grotesque",sans-serif;font-size:24px;font-weight:600;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums}
.cifras-fila .cf-n{margin:2px 0 0;font-size:12px;color:var(--ink-soft)}
.cifras-fila .cf-op{position:absolute;top:40px;left:0;transform:translate(-50%,-50%);font-size:18px;font-weight:600;line-height:1;color:var(--ink-soft)}
.cifras-fila .cf:first-child .cf-op{position:static;transform:none;margin-right:6px;font-size:inherit}
.cifras-fila .cf.suave .cf-v{color:var(--ink-soft)}
.cifras-fila .cf.pend .cf-v{color:var(--mango-dark)}
.cifras-fila .cf.mal .cf-v{color:var(--bad)}
.cifras-fila .cf.fin .cf-v{font-weight:700}
/* cajas: la cuenta de una compra o una venta, en cajitas con borde; el signo entre cajas; el resultado (fin) en verde suave. */
.cifras-fila.cajas{display:flex;flex-wrap:nowrap;align-items:stretch;gap:0 22px}
.cifras-fila.cajas .cf{padding:8px 12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m)}
.cifras-fila.cajas .cf-v{font-family:inherit;font-size:15px;font-weight:600}
.cifras-fila.cajas .cf-op{top:50%;left:-11px;font-size:15px}
.cifras-fila.cajas .cf.fin{background:var(--ok-soft);border-color:var(--verde-suave)}

/* recibo: las cuentas de un comprobante, como en el papel. */
.recibo{max-width:420px}
.recibo dl{margin:0}
.recibo .rb{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:5px 0;font-size:13.5px}
.recibo .rb dt{min-width:0;color:var(--ink-soft)}
.recibo .rb dd{margin:0;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.recibo .rb.total{margin-top:4px;padding-top:8px;border-top:2px solid var(--line)}
.recibo .rb.total dt,.recibo .rb.total dd{font-weight:700;color:var(--ink)}
.recibo .rb.ok dd{color:var(--good)}
.recibo .rb.pend dd{color:var(--mango-dark)}
.recibo .rb.mal dd{color:var(--bad)}
.recibo .rb.info dd{color:var(--info-tinta)}
.recibo .rb.neutro dd{color:var(--ink-soft)}
.recibo-pie{margin:8px 0 0;font-size:12.5px;color:var(--ink-soft)}
/* Una cifra con enlace dentro del recibo, la leyenda de una barra o el camino lleva el color de su renglón y se reconoce por su raya: con
   el verde de los enlaces, una nota de crédito (mal) o lo vencido se leían como algo que está bien. */
.recibo dd>a,.partes-ley>li>b>a,.camino .paso>b>a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:3px}
.recibo dd>a:hover,.partes-ley>li>b>a:hover,.camino .paso>b>a:hover{text-decoration-color:currentColor}

/* barraPartes: un solo svg decorativo; la escala, la marca y cada parte van en sus atributos (sin style=) y leyendaPartes lo dice en texto.
   Cada tono de parte, y la clase propia de un módulo, pone a la vez fill (para el rect) y background-color (para la muestra de la leyenda
   y la pila de columnasPeriodo). Lo de fábrica va en :where(), con peso 0: cualquier tono o clase de un módulo le gana. */
.pb-barra{display:block;width:100%;border-radius:4px}
:where(.pb-barra) rect{fill:var(--verde-2)}
.pb-fondo{fill:var(--line-soft)}
.pb-ok{fill:var(--verde-2);background-color:var(--verde-2)}
.pb-pend{fill:var(--mango);background-color:var(--mango)}
.pb-mal{fill:var(--bad);background-color:var(--bad)}
.pb-info{fill:var(--info-tinta);background-color:var(--info-tinta)}
.pb-neutro{fill:color-mix(in srgb,var(--ink-tenue) 40%,var(--line-soft));background-color:color-mix(in srgb,var(--ink-tenue) 40%,var(--line-soft))}
.pb-suave{fill:var(--verde-suave);background-color:var(--verde-suave)}
.pb-raya{stroke:var(--ink);stroke-width:2}
.pb-marca-txt{font-size:12px;font-weight:600;fill:var(--ink-soft)}
/* leyendaPartes: la muestra, el rótulo y debajo la cifra en Bricolage y su detalle (como la leyenda del costo de Planilla). */
.partes-ley{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px 16px;margin:12px 0 0;padding:0;list-style:none}
.partes-ley>li{display:grid;grid-template-columns:12px minmax(0,1fr);align-content:start;column-gap:8px;min-width:0}
.partes-ley .muestra{display:block;width:12px;height:12px;margin-top:3px;border-radius:4px}
:where(.partes-ley .muestra){background-color:var(--verde-2)}
.partes-ley>li>span{font-size:12.5px;color:var(--ink-soft);overflow-wrap:anywhere}
.partes-ley>li>b{grid-column:2;font-family:"Bricolage Grotesque",sans-serif;font-size:16px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.partes-ley>li>small{grid-column:2;font-size:12px;color:var(--ink-tenue)}

/* barrasCifra: el rótulo, la barra y la cifra con su %, alineados de fila a fila (subgrid: todas las barras miden lo mismo y se comparan;
   sin subgrid, cada fila usa los mismos anchos fijos). La barra es dibujo: la cifra y el % dicen lo mismo en texto. */
.barras-cifra{display:grid;grid-template-columns:minmax(0,15rem) minmax(60px,1fr) auto auto;column-gap:14px;margin:0;padding:0;list-style:none}
.barras-cifra>li,.barras-cifra>li>a{display:grid;grid-column:1/-1;grid-template-columns:minmax(0,15rem) minmax(60px,1fr) 8.5rem 3.5rem;grid-template-columns:subgrid;align-items:center}
.barras-cifra>li{padding:8px 0;border-bottom:1px solid var(--line-soft)}
.barras-cifra>li:last-child{border-bottom:0}
.barras-cifra>li>a{color:inherit;text-decoration:none}
.barras-cifra>li>a:hover .bc-rot{color:var(--verde)}
.barras-cifra .bc-rot{grid-column:1;min-width:0;font-size:14px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.barras-cifra .bc-rot>small{display:block;font-size:12px;font-weight:400;color:var(--ink-soft)}
.barras-cifra .bc-barra{grid-column:2;min-width:0}
.barras-cifra .bc-barra>svg{display:block;width:100%;border-radius:3px;background:var(--line-soft)}
.barras-cifra rect{fill:var(--verde-2)}
.barras-cifra>li.pend rect{fill:var(--mango)}
.barras-cifra>li.mal rect{fill:var(--bad)}
.barras-cifra>li.info rect{fill:var(--info-tinta)}
.barras-cifra>li.neutro rect{fill:color-mix(in srgb,var(--ink-tenue) 40%,var(--line-soft))}
.barras-cifra>li.suave rect{fill:var(--verde-suave)}
.barras-cifra .bc-raya{stroke:var(--ink);stroke-width:2}
.barras-cifra .bc-v{grid-column:3;font-size:14px;font-weight:600;color:var(--ink);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.barras-cifra .bc-pct{grid-column:4;font-size:12.5px;color:var(--ink-soft);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.bc-marca{margin:8px 0 0;font-size:12.5px;color:var(--ink-soft)}
.bc-muestra{display:inline-block;width:2px;height:12px;margin-right:8px;background:var(--ink);vertical-align:-1px} /* la raya de las filas, dibujada al pie */

/* columnasPeriodo: el año de Planilla (.plf-anio, .plf-pila) para cualquier período: columnas iguales, la cifra encima, la pila de alto
   fijo (120 px; alto, 170) y el rótulo, el de la elegida en verde. La marca sin monto va encima de la pila: pend, mango con borde; curso,
   rayada; fuera, una raya fina. Las clases son cper- porque cp- es de Costeo por caja. */
.col-periodo{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;align-items:end}
.cper-col{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;color:inherit;text-decoration:none}
a.cper-col:hover{text-decoration:none}
.cper-txt{max-width:100%;overflow:hidden;font-size:12px;color:var(--ink-soft);white-space:nowrap;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.cper-pila{display:flex;flex-direction:column;justify-content:flex-end;width:100%;max-width:40px;height:120px;overflow:hidden}
.col-periodo.alto .cper-pila{max-width:54px;height:170px}
.cper-pila>svg{display:block;flex:none;width:100%;border-radius:5px}
/* El respiro entre dos partes lo pone la de abajo (cper-sep, solo si mide 5 % o más: _vistas.js › columnasPeriodo), como una máscara que
   esconde sus 2 px de arriba; no como gap ni borde (un borde no baja de 2 px aunque la parte mida menos): así la pila mide lo que suman sus
   partes, 60 partes chicas no la hacen crecer y una parte chica no desaparece. De la máscara solo cuenta la opacidad: el token da igual. */
.cper-pila>.cper-sep{-webkit-mask-image:linear-gradient(to bottom,transparent 2px,var(--ink) 2px);mask-image:linear-gradient(to bottom,transparent 2px,var(--ink) 2px)}
:where(.cper-pila>svg){background-color:var(--verde-suave)}
:where(.cper-col[aria-current] .cper-pila>svg){background-color:var(--verde-2)}
.cper-col.pend .cper-pila::before,.cper-col.curso .cper-pila::before{content:"";flex:none;box-sizing:border-box;height:18px;margin-bottom:2px;border-radius:5px}
.cper-col.pend .cper-pila::before{border:1.5px solid color-mix(in srgb,var(--mango) 55%,var(--card));background:var(--mango-soft)}
.cper-col.curso .cper-pila::before{border:1.5px solid color-mix(in srgb,var(--verde-suave) 60%,var(--card));background-color:var(--card);background-image:repeating-linear-gradient(135deg,transparent 0 5px,color-mix(in srgb,var(--verde-suave) 45%,var(--card)) 5px 7px)}
.cper-col.fuera .cper-pila::before{content:"";flex:none;height:3px;border-radius:2px;background:var(--line)}
.cper-rot{max-width:100%;overflow:hidden;padding:2px 1px;border-radius:6px;font-size:12px;font-weight:600;color:var(--ink-soft);white-space:nowrap} /* con muchas columnas angostas el rótulo se corta en la suya: nunca pisa al de al lado (lo entero va en el aria-label). El relleno de 6 px es solo de la pastilla de la elegida: en los demás, sin fondo, solo le quitaba sitio al número */
a.cper-col:hover .cper-rot{color:var(--ink)}
.cper-col.fuera .cper-rot{font-weight:400;color:var(--ink-tenue)}
.cper-col[aria-current] .cper-rot{max-width:calc(100% + 8px);padding:2px min(6px,15%);background:var(--verde);color:var(--card)} /* después de fuera: un día fuera que es el elegido (hoy domingo) no queda gris sobre verde. En una columna angosta (31 a 1100 px) la pastilla adelgaza su relleno y toma la mitad del hueco de 8 px de cada lado, sin llegar al rótulo vecino: «18» salía «1» */

/* caminoRegistro: una columna por paso con su raya arriba (verde lo hecho, mango donde va, línea lo que falta). De 1 a 4 pasos, columnas
   iguales (2 × 2 en ≤ 880 px); largo (de 5 a 12), cada paso de 150 px como mínimo y el marco se desplaza de lado en cualquier ancho. El
   marco y cada paso son relative: el texto del lector (absoluto) se queda adentro y no ensancha la página en el celular. */
.camino-marco{position:relative;overflow-x:auto;contain:inline-size} /* inline-size: dentro de una columna 1fr de un grid, el camino largo no la estira */
.camino{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:14px;margin:0;padding:0;list-style:none}
.camino.largo{grid-auto-columns:minmax(150px,1fr);padding-bottom:6px}
.camino .paso{position:relative;display:flex;flex-direction:column;gap:2px;min-width:0;padding-top:10px;border-top:3px solid var(--line)}
.camino .paso.hecho{border-top-color:var(--verde-2)}
.camino .paso.aqui{border-top-color:var(--mango)}
.camino .paso>small{font-size:12px;font-weight:600;color:var(--ink-soft)}
.camino .paso.aqui>small{color:var(--mango-dark)}
.camino .paso>b{font-size:14.5px;font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.camino .paso.falta>b{font-weight:600;color:var(--ink-soft)}
.camino .paso>span:not(.solo-lector){font-size:12.5px;color:var(--ink-soft);overflow-wrap:anywhere}

/* lineaTiempo: la de ol.plf-tl de Planilla (la fecha en 74 px, el punto de 10 px y la raya que los une). El tono va en --lt-c y pinta el
   punto: hoy, lleno de tinta; futuro, hueco (solo el borde de su tono) y su texto en tinta suave. */
.linea-tiempo{margin:0;padding:0;list-style:none}
.linea-tiempo>li{--lt-c:var(--verde-suave);position:relative;display:grid;grid-template-columns:74px 14px minmax(0,1fr);gap:10px;padding:0 0 14px}
.linea-tiempo>li::before{content:"";position:absolute;left:88px;top:14px;bottom:-2px;width:2px;background:var(--line)}
.linea-tiempo>li:last-child::before{display:none}
.linea-tiempo .lt-f{padding-top:1px;font-size:12.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.linea-tiempo .lt-pt{position:relative;z-index:1;box-sizing:border-box;width:10px;height:10px;margin-top:5px;border:2px solid var(--lt-c);border-radius:50%;background:var(--lt-c)}
.linea-tiempo .lt-tx{min-width:0;font-size:14px;overflow-wrap:anywhere}
.linea-tiempo .lt-tx>small{display:block;font-size:12.5px;color:var(--ink-soft)}
.linea-tiempo>li.lt-ok{--lt-c:var(--verde-2)}
.linea-tiempo>li.lt-info{--lt-c:var(--info-tinta)}
.linea-tiempo>li.lt-pend{--lt-c:var(--mango)}
.linea-tiempo>li.lt-mal{--lt-c:var(--bad)}
.linea-tiempo>li.lt-neutro{--lt-c:var(--ink-tenue)}
.linea-tiempo>li.lt-suave{--lt-c:var(--verde-suave)}
.linea-tiempo>li.lt-hoy{--lt-c:var(--ink)}
.linea-tiempo>li.lt-hoy .lt-f{font-weight:700;color:var(--ink)}
.linea-tiempo>li.lt-futuro .lt-pt{background:var(--card)}
.linea-tiempo>li.lt-futuro .lt-tx{color:var(--ink-soft)}
.lt-nada{margin:0;font-size:14px;color:var(--ink-soft)}

/* selectorAnio: «‹ 2026 ›» y su pastilla, enlaces de un GET. Una flecha sin destino queda apagada (es un span: no se toca ni se lee). En el
   modo mes, el medio tiene el ancho del mes más largo, así las flechas no saltan de un mes a otro. */
.sel-anio{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.sel-anio-fl{display:inline-grid;place-items:center;width:36px;height:36px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--card);font-size:18px;line-height:1;color:var(--ink)}
a.sel-anio-fl:hover{border-color:var(--verde-2);color:var(--verde);text-decoration:none}
span.sel-anio-fl{border-color:var(--line-soft);background:transparent;color:var(--line-strong)}
.sel-anio-v{min-width:4.5ch;font-family:"Bricolage Grotesque",sans-serif;font-size:16px;font-weight:600;color:var(--ink);text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums}
a.sel-anio-v{color:var(--verde)}
.sel-anio-v.sel-anio-mes{min-width:8.5em}
/* La pastilla, como las de chipsFiltro: .chip de styles.css pide --borde y --panel-suave, que no son tokens (saldrían sus colores de
   repuesto). Su borde gana al a.chip:hover de styles.css, así que el hover va aquí, también como el de chipsFiltro. */
.sel-anio .chip{margin-left:6px;background:var(--card);border-color:var(--line)}
.sel-anio .chip:hover{border-color:var(--verde-2);text-decoration:none}
.sel-anio .chip.sel{background:var(--verde);border-color:var(--verde);color:var(--card)}

/* eleccionEnFila: radios de verdad que se ven como pastillas en fila. El radio sale de la vista pero no del teclado (nunca display:none;
   así también lo encuentra el aviso de «required»); la elegida, verde llena; el foco de teclado, el anillo mango en su pastilla. La
   etiqueta pisa la de .fld (styles.css), por si la elección va dentro de un campo. */
.eleccion{min-width:0;margin:0;padding:0;border:0}
.eleccion>legend{margin:0 0 6px;padding:0;font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.eleccion-ops{display:flex;flex-wrap:wrap;gap:8px}
.eleccion-ops>label{position:relative;display:inline-flex;margin:0;font-size:14px;font-weight:400;color:var(--ink);cursor:pointer}
.eleccion-ops input{position:absolute;bottom:0;left:50%;width:1px;height:1px;margin:0;opacity:0}
.eleccion-ops input+span{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);line-height:1.2}
.eleccion-ops>label:hover>input:not(:checked)+span{border-color:var(--verde-2)}
.eleccion-ops input:checked+span{border-color:var(--verde);background:var(--verde);color:var(--card);font-weight:600}
.eleccion-ops input:focus-visible+span{outline:2px solid var(--mango-dark);outline-offset:2px}

/* chipsFiltro: las pastillas de .plf-filtros (rrhh.css), blancas con su número; la elegida, verde llena. Enlaces de un GET (nav) o
   botones que filtran en el navegador (role="group"): los dos se ven igual. En ≤ 880 px se deslizan de lado en una sola fila. */
.chips-filtro{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.chips-filtro .chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:var(--card);border-color:var(--line);font:inherit;font-size:13px;line-height:1.3;color:var(--ink);white-space:nowrap;cursor:pointer}
.chips-filtro .chip:hover{border-color:var(--verde-2);text-decoration:none}
.chips-filtro .chip b{font-size:12px;font-weight:700;color:var(--ink-soft)}
.chips-filtro .chip.sel{background:var(--verde);border-color:var(--verde);color:var(--card)}
.chips-filtro .chip.sel b{color:var(--card)}
.chips-filtro span.chip:not(.sel){cursor:default;color:var(--ink-soft)} /* sin destino seguro (Ruling 23): texto, sin enlace */
.chips-filtro .chip:focus-visible{outline:2px solid var(--mango-dark);outline-offset:2px}

/* subPestanas: la segunda fila de pestañas, en pastillas de 13.5 px (páginas o las hojas de una ficha). La elegida, con borde y texto
   verdes y fondo verde suave; la cuenta, la pastilla mango de .tabs-vista. Margen de 32 px a los lados, como .tabs-vista; dentro de un
   .panel o de la ficha de la lista (.lf-derecha), sin margen a los lados. En ≤ 880 px se deslizan de lado (app.js › hojasInit deja la
   elegida a la vista). */
.subtabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 32px 16px}
.panel .subtabs,.lf-derecha .subtabs{margin-left:0;margin-right:0}
.subtabs>a,.subtabs>span{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:13.5px;line-height:1.3;color:var(--ink-soft);white-space:nowrap;text-decoration:none}
.subtabs>a:hover{border-color:var(--verde-2);color:var(--ink);text-decoration:none}
.subtabs>[aria-current="page"],.subtabs>[aria-selected="true"]{border-color:var(--verde);color:var(--verde);background:var(--ok-soft);font-weight:600}
.subtabs>a:focus-visible{outline:2px solid var(--mango-dark);outline-offset:2px}
.subtabs .n{padding:1px 7px;border-radius:999px;background:var(--mango-soft);font-size:12px;font-weight:700;color:var(--mango-dark)}
.hoja-ficha{min-width:0}
/* Lo de una hoja, como .subtabs: en la página, cada bloque con su margen de siempre (32 px a los lados, el de la página: la ficha del
   envío pone sus hojas en la página); dentro de un .panel o de la ficha de la lista, la regla de .lf-derecha: sin margen (un .panel o
   un .notice no conserva sus 32 px) y apartados uno de otro, 20 px en la ficha (su hueco entre paneles) y 14 px en un .panel. */
.panel .hoja-ficha>*,.lf-derecha .hoja-ficha>*{margin:0;min-width:0}
.lf-derecha .hoja-ficha>*+*{margin-top:20px}
.panel .hoja-ficha>*+*{margin-top:14px}

/* selectorCampanias: un .ctl-marco que abre su panel de casillas debajo, como tarjeta. No crece como los demás details (styles.css › B):
   el panel flota y no tiene alto que crecer. En ≤ 880 px no flota (como el «⋯ Más», Ruling 22): abre debajo, en el flujo. */
.sel-camp{position:relative;display:inline-block;max-width:100%}
.sel-camp>summary{list-style:none;cursor:pointer;user-select:none}
.sel-camp>summary::-webkit-details-marker{display:none}
.sel-camp[open]>summary{border-color:var(--verde-2)}
.sel-camp-txt{max-width:22em;overflow:hidden;font-size:13.5px;white-space:nowrap;text-overflow:ellipsis}
html.anima-lista details.sel-camp::details-content{transition:none}
.sel-camp-panel{position:absolute;top:calc(100% + 6px);left:0;z-index:20;min-width:270px;max-width:360px;max-height:320px;overflow:auto;padding:10px 12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow)}
/* El último de su barra, con algo antes (un oculto no cuenta): su panel se alinea a la derecha del botón. Al borde derecho de una barra,
   alineado a la izquierda, se salía de la pantalla. Solo, o con nada a la vista antes, sigue a la izquierda: hacia allá también se saldría. */
:not(input[type="hidden"])~.sel-camp:last-child>.sel-camp-panel{left:auto;right:0}
.sel-camp-panel>p{margin:0 0 6px;font-size:12.5px;color:var(--ink-soft)}
.sel-camp-panel>.acc-check{display:flex;padding:4px 0;font-size:13.5px;color:var(--ink)}
.sel-camp-panel>.acc-check small{margin-left:auto;padding-left:10px;font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.sel-camp-pie{display:flex;gap:6px;margin-top:8px}

/* filaConFicha: la fila que abre su ficha debajo. La fila abierta y el fondo de su ficha, en verde suave (como la abierta de la lista);
   la ficha, una tarjeta. Su caja es sticky a la izquierda y app.js › filaFichaInit le pone de ancho máximo lo que se ve del marco que
   desplaza la tabla: en una tabla ancha no se va de lado. Sin JS la fila no se abre, así que solo con JS (html.js) dice que se toca. */
html.js table tr.fila-abre{cursor:pointer}
table.datos tbody tr.fila-abre.abierta-fila>td{background:var(--ok-soft)}
table.datos tbody tr.fila-ficha>td{padding:4px 8px 14px;background:var(--ok-soft);white-space:normal} /* la ficha no hereda el nowrap de table.datos td */
.fila-ficha-caja{position:sticky;left:8px;box-sizing:border-box;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m)} /* left: 8px compensa el relleno izquierdo de la celda: sin desplazar se queda donde estaba y al desplazar no se pega al borde */
.fila-ficha-caja>*{margin:0;min-width:0} /* la regla de .lf-derecha: un .panel o un .notice adentro no conserva sus 32 px de la página */
.fila-ficha-caja>*+*{margin-top:14px} /* lo que el módulo pone adentro (las casillas, el formulario) no queda pegado: el reinicio de styles.css quita todo margen */
.fila-abre-btn{display:inline-flex;align-items:baseline;gap:6px;padding:0;border:0;background:none;font:inherit;font-weight:600;color:var(--verde);text-align:left;cursor:pointer}
.fila-abre-btn::after{content:"▸";font-size:12px;color:var(--ink-soft)}
.fila-abre-btn[aria-expanded="true"]::after{content:"▾"}
.fila-abre-btn:hover{text-decoration:underline}
.fila-abre-btn:focus-visible{outline:2px solid var(--mango-dark);outline-offset:2px}

/* cuentaCalculada: los campos en fila con su signo entre ellos, a la altura del campo (debajo de su rótulo); el resultado con lo que dice
   («calculado», «escrito a mano») y «↺ volver al cálculo» debajo. El producto se ve como placeholder, en tinta suave. En ≤ 640 px, los
   campos de a dos y el resultado a todo el ancho. */
.cuenta-calc{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 10px}
.cuenta-calc>.fld{flex:1 1 120px;min-width:0;margin:0}
.cuenta-calc .cc-op{margin-top:34px;font-size:18px;font-weight:600;line-height:1;color:var(--ink-soft)}
.cuenta-calc .cc-res{display:flex;flex:1 1 140px;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.cuenta-calc .cc-res>.fld{flex:none;width:100%;min-width:0;margin:0} /* sin base de 120 px: en esta columna sería un alto, y «calculado» quedaba lejos de su campo */
.cuenta-calc .cc-res input::placeholder{color:var(--ink-soft);opacity:1}
.cuenta-calc .cc-dice{min-height:16px;font-size:12px;color:var(--ink-soft)}

/* La lista con su ficha al lado (listaConFicha, filaLista, fichaCabecera): Planilla «Cada persona» (.plf- de rrhh.css) con clases lf-.
   Dos columnas: la lista (aside.lf-lado), una tarjeta fija al desplazar justo bajo la cabecera, y la ficha (.lf-derecha#ficha). La lista
   es una columna flexible de alto máximo: su cabecera (la cuenta, el buscador, los controles y las pastillas) y su pie quedan quietos y
   las filas (.lf-filas) toman el alto que queda y se desplazan solas; así no hacen falta los altos a mano que Planilla tiene por corte.
   --cab-alto es el alto de la cabecera de la página: app.js › cabeceraAltoInit lo mide y lo pone en <html> (al cargar, al cambiar el
   tamaño y al plegar el menú). Sin JS valen los altos que midió Planilla por corte (81, 101, 140, 193, 130, 64 y 84 px), en :where(html)
   (peso 0: lo medido, en el style de <html>, siempre gana). Cualquier módulo lo puede usar para un sticky o un scroll-margin-top. */
:where(html){--cab-alto:81px}
.lf-split{display:grid;grid-template-columns:370px minmax(0,1fr);gap:20px;align-items:start;margin:0 32px 20px}
/* Sin overflow:hidden: recortaría lo que flota desde la cabecera de la lista (un «⋯ Más» en acciones, el panel de .sel-camp en controles)
   cuando la lista es corta. Las esquinas de adentro las redondean .lf-filas (la barra de desplazamiento) y .lf-pie.
   El alto deja 3 px arriba y 80 abajo: al final de la página la lista fija no baja de lo que la contiene (.lf-split), que termina 80 px
   antes del borde (sus 20 px de margen y los 60 de relleno de .contenido-int). Con menos, la cuenta y el buscador quedaban bajo la cabecera.
   Es un contenedor de su ancho (lf-lista), que pone la grilla (370 px, o la columna entera): ver «Una lista angosta», más abajo. Va una
   capa sobre la ficha (z-index 1, debajo de la cabecera): lo que flota desde su cabecera puede pasar sobre la ficha, que también es un
   contenedor, y en un navegador que haga de cada contenedor una capa propia quedaría debajo. */
.lf-lado{position:sticky;top:calc(var(--cab-alto) + 3px);z-index:1;display:flex;flex-direction:column;min-width:0;max-height:min(860px,calc(100dvh - var(--cab-alto) - 83px));background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);container:lf-lista/inline-size}
.lf-cab{flex:none;padding:14px 14px 10px;border-bottom:1px solid var(--line-soft)}
.lf-cuenta{margin:0 2px 12px;font-size:14px;color:var(--ink-soft)}
.lf-cuenta:last-child{margin-bottom:2px}
.lf-cuenta b{font-weight:700;color:var(--ink)}
.lf-busca{display:flex;flex-wrap:wrap;align-items:center;gap:8px} /* wrap: en el celular un «⋯ Más» abierto baja a su propia línea (Ruling 22) */
.lf-busca .ctl-buscar{display:flex;flex:1 1 auto;min-width:0}
.lf-busca .ctl-buscar>input{flex:1 1 auto;width:100%;min-width:0}
.lf-busca>:not(.ctl-buscar){flex:none}
.lf-controles{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.lf-controles:first-child{margin-top:0}
.lf-controles form{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.lf-cab>.chips-filtro{margin-top:10px}
.lf-cab>.chips-filtro:first-child{margin-top:0}
/* position:relative: listaFichaInit mide el offsetTop de la fila abierta desde aquí; sin ella, lo mediría desde la página. */
.lf-filas{position:relative;flex:1 1 auto;min-height:0;padding:6px;overflow-y:auto;border-radius:0 0 calc(var(--r) - 1px) calc(var(--r) - 1px);scrollbar-width:thin}
.lf-filas:first-child{border-top-left-radius:calc(var(--r) - 1px);border-top-right-radius:calc(var(--r) - 1px)}
.lf-filas:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0}
.lf-filas>ul,.lf-grupo>ul,ul.lf-lista{margin:0;padding:0;list-style:none}
.lf-filas>*+*{margin-top:6px}
.lf-grupo+.lf-grupo,.lf-grupo+ul,.lf-filas>ul+.lf-grupo{padding-top:6px;border-top:1px solid var(--line-soft)}
.lf-grupo-t{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:8px 10px 2px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.lf-grupo-c{flex-shrink:0;font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.lf-grupo-n{margin:0 10px 4px;font-size:12.5px;color:var(--ink-soft)}
.lf-filas>.fila-vacia,.lf-nadie{margin:0;padding:12px 10px;font-size:13.5px;color:var(--ink-soft)}
.lf-pie{flex:none;padding:10px 16px 14px;border-top:1px solid var(--line-soft);border-radius:0 0 calc(var(--r) - 1px) calc(var(--r) - 1px);font-size:12.5px;color:var(--ink-soft)}
.lf-pie>p{margin:0}
/* La ficha: sus paneles sin margen y a 20 px uno de otro. Ella y sus anclas se detienen justo bajo la cabecera. Es un contenedor de su
   ancho (lf-ficha), que pone la grilla y no lo que lleva adentro: lo que va en ella se acomoda a la ficha y no a la pantalla. */
.lf-derecha{display:flex;flex-direction:column;gap:20px;min-width:0;container:lf-ficha/inline-size}
.lf-split>.lf-derecha>*{margin:0;min-width:0}
.lf-derecha,.lf-derecha [id]{scroll-margin-top:calc(var(--cab-alto) + 3px)}
/* filaLista: la de a.plf-persona. El título en 14 px (con «…» si no cabe) y la cifra a la derecha; la segunda línea en tinta suave con
   la palabra del estado como pastilla; la barrita de 4 px. La abierta, en verde suave con su borde (un borde, no una sombra). */
.lf-fila{display:flex;align-items:center;gap:12px;padding:8.5px;border:1.5px solid transparent;border-radius:12px;color:inherit;text-decoration:none}
:where(a,summary).lf-fila:hover{background:var(--line-soft);text-decoration:none} /* solo lo que se toca; :where() no suma peso: la abierta sigue verde al pasar el ratón */
.lf-fila[aria-current]{background:color-mix(in srgb,var(--verde-suave) 25%,var(--card));border-color:color-mix(in srgb,var(--verde-suave) 55%,var(--card))}
.lf-fila:focus-visible{outline:2px solid var(--mango-dark);outline-offset:-2px} /* hacia adentro: la lista se desplaza y cortaría el anillo de afuera */
.lf-fila>.av{--av:36px;flex-shrink:0}
.lf-quien{flex:1;min-width:0}
.lf-l1{display:flex;align-items:baseline;gap:8px}
.lf-antes{flex:none;font-size:12px;font-weight:600;color:var(--ink-soft)}
.lf-l1>b{flex:1 1 auto;min-width:0;overflow:hidden;font-size:14px;font-weight:600;white-space:nowrap;text-overflow:ellipsis}
.lf-cifra{flex-shrink:0;margin-left:auto;font-size:13px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.lf-cifra.ok{color:var(--good)}
.lf-cifra.pend{color:var(--mango-dark)}
.lf-cifra.mal{color:var(--bad)}
.lf-cifra.info{color:var(--info-tinta)}
.lf-cifra.neutro{color:var(--ink-soft)}
.lf-cifra.suave{font-weight:400;color:var(--ink-tenue)}
.lf-l2{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:1px;font-size:12.5px;color:var(--ink-soft)}
.lf-sub{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lf-est{flex-shrink:0;margin-left:auto;font-weight:600;white-space:nowrap}
.lf-est:is(.ok,.pend,.mal,.info,.neutro){padding:1px 7px;border-radius:999px;font-size:12px}
.lf-est.ok{background:var(--ok-soft);color:var(--good)}
.lf-est.pend{background:var(--mango-soft);color:var(--mango-dark)}
.lf-est.mal{background:var(--mal-soft);color:var(--bad)}
.lf-est.info{background:var(--info-soft);color:var(--info-tinta)}
.lf-est.neutro{background:var(--line-soft);color:var(--ink-soft)}
.lf-est.suave{font-weight:400;color:var(--ink-tenue)}
.lf-barrita{display:block;height:4px;margin-top:7px;overflow:hidden;border-radius:999px;background:var(--line-soft)}
.lf-barrita>svg{display:block;height:100%;border-radius:999px;background:var(--verde-suave)}
.lf-fila[aria-current] .lf-barrita>svg{background:var(--verde-2)}
.lf-barrita>svg.lf-rayada{background:repeating-linear-gradient(135deg,var(--verde-suave) 0 3px,transparent 3px 6px)} /* lo provisional, como .plf-encurso */
.lf-fila[aria-current] .lf-barrita>svg.lf-rayada{background:repeating-linear-gradient(135deg,var(--verde-2) 0 3px,transparent 3px 6px)}
/* La fila que se abre en su lugar (filaLista con abre): su summary es la fila, con ▸ / ▾ a la derecha; abierta, la tarjeta suave. */
.lf-abre>summary.lf-fila{list-style:none;cursor:pointer}
.lf-abre>summary.lf-fila::-webkit-details-marker{display:none}
.lf-abre>summary.lf-fila::after{content:"▸";flex:none;font-size:12px;color:var(--ink-soft)}
.lf-abre[open]>summary.lf-fila::after{content:"▾"}
.lf-abre[open]{border-radius:12px;background:color-mix(in srgb,var(--line-soft) 35%,var(--card))}
.lf-abre-cuerpo{padding:4px 10px 12px;font-size:13.5px}
.lf-abre-acc{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.lf-abre-acc form{margin:0}
/* fichaCabecera: la de .plf-ficha-cab y .plf-dice. La insignia de 64 px, el título en Bricolage de 24 px y su línea de datos; a la
   derecha lo que resume al registro (la cifra en Bricolage de 22 px, su pastilla y su nota). La frase de 15 px con los botones al lado,
   o debajo si la frase quedaría de menos de 380 px. */
.lf-ficha-cab{display:flex;align-items:center;gap:16px}
.lf-ficha-cab>.av{--av:64px;flex-shrink:0}
.lf-ficha-t{flex:1 1 0;min-width:0} /* base 0: un título largo se parte junto a la insignia y no baja a su propia línea en el celular */
.lf-ficha-t h2{margin:0;font-family:"Bricolage Grotesque",sans-serif;font-size:24px;font-weight:600;line-height:1.2;overflow-wrap:anywhere}
.lf-ficha-t>p{margin:4px 0 0;font-size:13.5px;color:var(--ink-soft)}
.lf-ficha-res{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0;max-width:45%;text-align:right}
.lf-ficha-res>b{font-family:"Bricolage Grotesque",sans-serif;font-size:22px;font-weight:600;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums}
.lf-ficha-res>small{font-size:12.5px;color:var(--ink-soft)}
.lf-frase{max-width:66ch;margin:16px 0 0;font-size:15px;color:var(--ink)}
.lf-frase b{font-weight:600}
.lf-dice{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 20px;margin-top:16px}
.lf-dice>.lf-frase{flex:1 1 380px;margin:0}
.lf-acciones{display:flex;flex-wrap:wrap;flex-shrink:0;align-items:center;gap:8px}
.lf-acciones form{margin:0}

/* La cabecera de la página y la lista con ficha, por corte (de ancho a angosto). --cab-alto de fábrica: los altos de Planilla. En ≤ 1160 px
   una sola columna (en ≤ 912 px con el menú plegado, que deja 248 px más; en ≤ 880 px el menú no se pliega y las dos reglas dan una
   columna, guarde lo que guarde el navegador): la lista arriba, estática, con sus filas de 330 px como mucho, y la ficha debajo; tocar
   una fila baja a #ficha. Con lf-solo-derecha (Nueva y Editar), en una columna la lista no sale. */
@media (max-width: 1320px){
  :where(html){--cab-alto:101px}
}
@media (max-width: 1160px){
  :where(html){--cab-alto:140px}
  html:not(.lateral-plegado) .lf-split{grid-template-columns:minmax(0,1fr)}
  html:not(.lateral-plegado) .lf-lado{position:static;max-height:none}
  html:not(.lateral-plegado) .lf-filas{max-height:330px}
  html:not(.lateral-plegado) .lf-solo-derecha>.lf-lado{display:none}
}
@media (max-width: 1100px){
  :where(html){--cab-alto:193px}
}
@media (max-width: 912px){
  html.lateral-plegado .lf-split{grid-template-columns:minmax(0,1fr)}
  html.lateral-plegado .lf-lado{position:static;max-height:none}
  html.lateral-plegado .lf-filas{max-height:330px}
  html.lateral-plegado .lf-solo-derecha>.lf-lado{display:none}
}
/* Una lista angosta (la de 370 px, junto a la ficha): el «⋯ Más» de la cabecera baja a su propia línea, a la izquierda, y su lista, alineada
   a la derecha del botón, se salía por la izquierda y la cortaba el borde de .contenido. Ahí abre hacia la derecha, sobre la ficha si hace
   falta. En la lista a todo el ancho (una columna) el botón queda a la derecha y su lista abre como siempre. Lo mismo el panel del selector
   de campañas que es el último de su fila: en la lista angosta su fila se parte y el botón puede quedar solo a la izquierda. */
@container lf-lista (max-width: 520px){
  .lf-cab .acciones-mas-lista{right:auto;left:0}
  .lf-cab :not(input[type="hidden"])~.sel-camp:last-child>.sel-camp-panel{left:0;right:auto}
}
/* Una ficha angosta (760 px o menos: unos 720 a 1440 px con el menú abierto, 445 a 1161): cuatro cifras en rayas no caben a 24 px y el
   «$» se separaba de su número. Ahí van en 2 × 2, con el signo junto al rótulo, como en el celular. */
@container lf-ficha (max-width: 760px){
  .cifras-fila:not(.cajas){grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
  .cifras-fila:not(.cajas) .cf{padding:0;border-left:0}
  .cifras-fila:not(.cajas) .cf-op{position:static;transform:none;margin-right:6px;font-size:inherit}
}

/* Tablet y celular (≤ 880 px): las cifras en 2 × 2, el signo a la izquierda del rótulo. El «Más» no flota (Ruling 22): abierto, ocupa
   el ancho del bloque que lo contiene y su lista abre debajo del botón, en el flujo, como lo que se abre debajo; así nunca se sale de la
   pantalla, esté el botón a la izquierda o a la derecha. Las columnas por período bajan su pila (96 px; alto, 120) y la cifra de encima
   sale de la vista pero no del lector (queda en el title); el camino corto va en 2 × 2; la fecha de la línea de tiempo, en 62 px. Las
   pastillas y las pestañas se deslizan de lado en una sola fila (el relleno deja ver el anillo del foco), con los márgenes de .tabs-vista;
   el panel del selector de campañas abre debajo, en el flujo, como el «Más». La lista con ficha, con los márgenes de .tabs-vista y el
   buscador en 16 px (el celular no acerca la página al escribir); la frase de la ficha con sus botones debajo y el título de 20 px. */
@media (max-width: 880px){
  :where(html){--cab-alto:130px}
  .lf-split{margin:0 14px 20px}
  .lf-busca .ctl-buscar>input{font-size:16px}
  .lf-ficha-t h2{font-size:20px}
  .lf-dice{flex-direction:column;align-items:flex-start}
  .lf-dice>.lf-frase{flex:none} /* en columna, la base de 380 px sería alto: los botones, justo debajo */
  .chips-filtro{flex-wrap:nowrap;overflow-x:auto;padding:3px 2px;scrollbar-width:none}
  .subtabs{flex-wrap:nowrap;overflow-x:auto;margin:0 14px 14px;padding:3px 2px;scrollbar-width:none}
  .sel-camp[open]{display:block;flex:1 1 100%;width:100%} /* como el «⋯ Más» abierto: su propia línea en una fila que se parte */
  .sel-camp-panel{position:static;min-width:0;max-width:none;margin-top:6px;box-shadow:none}
  .cifras-fila:not(.cajas){grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
  .cifras-fila:not(.cajas) .cf{padding:0;border-left:0}
  .cifras-fila:not(.cajas) .cf-op{position:static;transform:none;margin-right:6px;font-size:inherit}
  .acciones-mas[open]{flex:1 1 100%;width:100%}
  details.acciones-mas[open]>summary.btn{width:fit-content} /* el botón sigue de su tamaño: en ≤ 640 px styles.css lo hace bloque */
  .acciones-mas-lista{position:static;min-width:0;max-width:none;margin-top:6px;box-shadow:none}
  .col-periodo{gap:3px}
  .col-periodo .cper-pila{height:96px}
  .col-periodo.alto .cper-pila{height:120px}
  .col-periodo .cper-col:is(.pend,.curso) .cper-pila::before{height:14px}
  .col-periodo .cper-txt{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  .col-periodo .cper-rot,.col-periodo .cper-col[aria-current] .cper-rot{padding:2px 1px;letter-spacing:-.02em}
  .camino:not(.largo){grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
  .linea-tiempo>li{grid-template-columns:66px 14px minmax(0,1fr)}
  .linea-tiempo>li::before{left:80px}
}
/* Celular (≤ 640 px): los botones del aviso bajan, a todo el ancho. El texto parte de 0 y crece: con su base de 260 px, dentro de un
   .panel angosto bajaba de línea y dejaba el ícono solo en la suya. Los dos llevan el peso de .notice.notice-acc porque styles.css,
   en este corte, da «flex: 1 1 auto» a todo .notice > div. La leyenda de una barra va en 2 columnas; en las barras con cifra, el rótulo
   arriba y la barra con su cifra debajo. La cuenta calculada, de a dos y el resultado a todo el ancho (los signos se van: el rótulo de
   cada campo ya dice qué es). Con t-cards, la fila que abre su ficha es una tarjeta y la ficha es otra, a todo el ancho, sin el rótulo
   de columna (styles.css › 12). En la cabecera de la ficha, la insignia de 48 px y lo que resume al registro baja bajo el título, en una
   línea. Con más de 16 columnas por período (cper-muchas: una columna mide unos 8 px y «10» se leía «1»), un rótulo de cada dos, con el
   ancho de dos columnas; la elegida siempre lleva el suyo, y entonces sus vecinas no (se encimarían). Lo entero sigue en el aria-label. */
@media (max-width: 640px){
  :where(html){--cab-alto:64px}
  .lf-ficha-cab{flex-wrap:wrap}
  .lf-ficha-cab>.av{--av:48px}
  .lf-ficha-res{flex-basis:100%;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 10px;max-width:none;text-align:left}
  .cuenta-calc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cuenta-calc .cc-op{display:none}
  .cuenta-calc .cc-res{grid-column:1/-1}
  table.datos.t-cards tbody tr.fila-abre.abierta-fila{border-color:var(--verde-2);background:var(--ok-soft)}
  table.datos.t-cards tbody tr.fila-abre.abierta-fila>td{background:transparent}
  table.datos.t-cards tbody tr.fila-ficha{padding:0;border:0;background:none;box-shadow:none}
  table.datos.t-cards tr.fila-ficha>td{display:block;padding:0;background:none}
  table.datos.t-cards tr.fila-ficha>td::before{content:none}
  .notice.notice-acc>div:not(.notice-acc-botones){flex-basis:0}
  .notice.notice-acc>.notice-acc-botones{flex:1 1 100%;margin-left:0;align-self:stretch}
  .partes-ley{grid-template-columns:repeat(2,minmax(0,1fr))}
  .barras-cifra{grid-template-columns:minmax(0,1fr) auto auto}
  .barras-cifra>li,.barras-cifra>li>a{grid-template-columns:minmax(0,1fr) 7.5rem 3rem;grid-template-columns:subgrid;row-gap:4px}
  .barras-cifra .bc-rot{grid-column:1/-1}
  .barras-cifra .bc-barra{grid-column:1}
  .barras-cifra .bc-v{grid-column:2}
  .barras-cifra .bc-pct{grid-column:3}
  .col-periodo.cper-muchas .cper-rot{max-width:calc(200% + 3px)}
  .col-periodo.cper-muchas .cper-col:nth-child(even):not([aria-current]) .cper-rot,.col-periodo.cper-muchas .cper-col:has(+.cper-col[aria-current]) .cper-rot,.col-periodo.cper-muchas .cper-col[aria-current]+.cper-col .cper-rot{visibility:hidden}
}
/* Celular angosto (≤ 520 px): las casillas apiladas, rótulo y valor en una línea; las cajas se envuelven y el signo pasa a su rótulo. Las
   pestañas y la lista con ficha, con el margen de .tabs-vista. */
@media (max-width: 520px){
  :where(html){--cab-alto:84px}
  .lf-split{margin:0 10px 20px}
  .subtabs{margin:0 10px 14px}
  .casillas{grid-template-columns:minmax(0,1fr);gap:8px}
  .casilla,.casilla>a{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
  .casilla>a{flex:1;min-width:0}
  .casilla b{text-align:right}
  .cifras-fila.cajas{flex-wrap:wrap;gap:8px}
  .cifras-fila.cajas .cf{flex:1 1 130px}
  .cifras-fila.cajas .cf-op{position:static;transform:none;margin-right:4px}
}
/* Al imprimir, la lista con ficha va en una columna. Con imprimir 'ficha' (de fábrica) la lista no sale y la ficha va a todo el ancho;
   con 'las-dos' (lf-imprime-lista) la lista sale entera, sin alto máximo ni desplazamiento, y la ficha debajo. Las reglas de la lista
   llevan html delante para ganarle a las de una columna (mismo peso, después). El buscador no sirve en papel. */
@media print{
  .lf-split{display:block;margin:0}
  .lf-split:not(.lf-imprime-lista)>.lf-lado{display:none}
  html .lf-imprime-lista>.lf-lado{position:static;display:block;max-height:none;margin:0 0 12px}
  html .lf-imprime-lista .lf-filas{max-height:none;overflow-y:visible}
  .lf-busca{display:none}
}

/* El menú verde que se pliega (render.js: los dos ☰, aside#menu-lateral y lateralPlegado en el <head>). De fábrica los dos botones no
   salen. Solo en la computadora (881 px o más) se ve el de plegar, al final de .marca, con la tinta del menú (currentColor: no es un
   token); con html.lateral-plegado el menú se va del todo, el contenido toma sus 248 px y en la cabecera aparece el de mostrar: el ☰ del
   celular en chico, centrado en su alto a 18 px del borde, y la cabecera le deja 70 px. En ≤ 880 px la clase no hace nada (el cajón de
   .nav-toggle, como siempre) y al imprimir los dos son no-print. El de mostrar, al pasar el ratón, como la campanita de al lado. El
   foco de teclado, un anillo de 2 px: mango en la barra; en la cabecera, --mango-dark, como el anillo global (el mango no llega a 3:1
   sobre el papel). Plegado, las pestañas de carpeta dejan 18 px a la izquierda, como el ☰ de la cabecera. */
.lateral-plegar,.lateral-mostrar{display:none}
@media (min-width: 881px){
  .lateral-plegar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;margin-left:auto;padding:0;border:1px solid color-mix(in srgb,currentColor 25%,transparent);border-radius:var(--r-m);background:transparent;color:inherit;font-size:17px;line-height:1;transition:background-color .14s}
  .lateral-plegar:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
  html.lateral-plegado .sidebar{display:none}
  html.lateral-plegado .topbar{padding-left:70px}
  html.lateral-plegado .lateral-mostrar{position:absolute;top:50%;left:18px;display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-top:-20px;padding:0;border:1px solid var(--line);border-radius:11px;background:var(--card);color:var(--ink);font-size:18px;line-height:1}
  html.lateral-plegado .lateral-mostrar:hover{border-color:var(--mango-dark);color:var(--mango-dark)} /* con html delante: si no, la de arriba (más peso) le gana */
  .lateral-plegar:focus-visible{outline:2px solid var(--mango);outline-offset:2px}
  html.lateral-plegado .lateral-mostrar:focus-visible{outline:2px solid var(--mango-dark);outline-offset:2px} /* sobre el papel el mango no llega a 3:1: el del anillo global */
  html.lateral-plegado .carpeta-tabs{padding-left:18px} /* sin el menú, la primera pestaña ya no toca el borde: queda en la línea del ☰ de arriba */
}
/* «← Volver al Balance» (app.js › volverAquiInit) regresa al ancla del bloque marcado: su título queda bajo la cabecera fija, no tapado. */
.panel[data-volver-aqui]{scroll-margin-top:calc(var(--cab-alto) + 10px)}
/* ==== fin común ==== */

/* ==== op-recepcion-07nov ==== */
/* La diferencia con la guía en la lista de Ingresos: la misma regla del formulario (hasta 1.5 % sin color, más de 1.5 ámbar, más de 3 rojo). */
.rmp-dif{display:inline-block;font-weight:600;white-space:nowrap}
.rmp-dif small{margin-left:4px;font-size:12px;font-weight:500;color:var(--ink-soft)}
.rmp-dif.pend,.rmp-dif.mal{padding:2px 9px;border-radius:999px}
.rmp-dif.pend{background:var(--mango-soft);color:var(--mango-dark)}
.rmp-dif.mal{background:var(--mal-soft);color:var(--bad)}
.rmp-dif.pend small,.rmp-dif.mal small{color:inherit}

/* La lista: una segunda línea bajo el dato (guía, envío, fecha) y lo que le falta a cada ingreso. */
.rmp-lista .rmp-sub{display:block;margin-top:1px;font-size:12px;font-weight:400;color:var(--ink-soft);white-space:nowrap}
.rmp-lista .rmp-falta{display:block;margin-top:3px;font-size:12px;font-weight:600;color:var(--mango-dark);white-space:normal}
.rmp-lista tbody.rmp-dia td{padding:16px 12px 7px;font-size:13px;font-weight:700;color:var(--ink);background:var(--paper);border-bottom:1px solid var(--line)}
.rmp-lista tbody.fila-nueva>tr.fila-abre td{animation:resaltarFila 3s ease-out}
.rmp-pie{margin:10px 0 0;font-size:12.5px;color:var(--ink-soft)}

/* La barra: los filtros a la izquierda (se pliegan en el celular), las columnas y el Excel a la derecha. */
.rmp-barra{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 10px;flex:1 1 520px;min-width:0}
.rmp-filtros-caja{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
details.rmp-filtros>summary{display:none}
.rmp-barra-der{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}

/* El detalle de un lote: la guía y el campo a la izquierda, sus papeles a la derecha. */
.rmp-det{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px}
.rmp-det-col{min-width:0}
.rmp-det-col>h4{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.rmp-datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;margin:0}
.rmp-datos>div{min-width:0}
.rmp-datos dt{font-size:12px;font-weight:600;color:var(--ink-soft)}
.rmp-datos dd{margin:0;font-size:14px;overflow-wrap:anywhere}
.rmp-registro{margin:12px 0 0;font-size:12.5px;color:var(--ink-soft)}
.rmp-pals{width:auto;margin-top:12px}
.rmp-sinpals{margin:12px 0 0;font-size:13px}
.rmp-det-pie{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)}
.rmp-der{margin-left:auto}
.rmp-borrar{display:inline}

/* Hoy: registrar un ingreso. El formulario abre de entrada para quien registra todo el día y plegado para quien corrige. */
details.rmp-nuevo>summary{display:flex;align-items:center;gap:8px;min-height:32px;font-size:15px;font-weight:600;cursor:pointer;list-style:none}
details.rmp-nuevo>summary::-webkit-details-marker{display:none}
details.rmp-nuevo>summary::after{content:"▸";margin-left:auto;font-size:13px;color:var(--ink-soft)}
details.rmp-nuevo[open]>summary::after{content:"▾"}
details.rmp-nuevo[open]>summary{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line-soft)}
details.rmp-nuevo>summary:focus-visible{outline:2px solid var(--mango-dark);outline-offset:4px;border-radius:var(--r-m)}
.rmp-nuevo .form-foot{flex-wrap:wrap}
.rmp-nota{margin:0;flex:1 1 240px;font-size:12.5px;color:var(--ink-soft)}
.rmp-mismo{margin-top:4px;font-size:12.5px;font-weight:600;color:var(--verde)}
.rmp-mismo[hidden]{display:none}
/* El aviso vivo es una frase: parte en líneas (la base .rmp-dif no parte, porque va en celdas) y no ensancha el formulario en un celular de 360 px. */
.rmp-dif-vivo{margin-top:6px;font-size:12.5px;white-space:normal;max-width:100%}
.rmp-dif-vivo.pend,.rmp-dif-vivo.mal{border-radius:10px}
.rmp-dif-vivo:not(.pend):not(.mal){color:var(--verde)}
.rmp-aviso-reparto{margin:0 0 10px}
.rmp-reparto-form{margin-top:6px}

/* Hoy › Por completar: el formulario de la consulta a SENASA que se abre bajo su fila. */
.por-mirar .abierta form.rmp-snf{display:block}
.rmp-snf>p{margin:0 0 12px;font-size:14px;line-height:1.5}
.rmp-snf .form-foot{margin-top:14px;padding-top:14px}
details.rmp-mas-datos{margin-top:12px}
details.rmp-mas-datos>summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--verde);list-style:none}
details.rmp-mas-datos>summary::-webkit-details-marker{display:none}
details.rmp-mas-datos>summary::before{content:"▸ "}
details.rmp-mas-datos[open]>summary::before{content:"▾ "}
details.rmp-mas-datos[open]>summary{margin-bottom:12px}

/* Hoy › Lo que entró hoy: un bloque por camión, con su hora, y debajo sus lotes. */
.rmp-cam-caja+.rmp-cam-caja{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft)}
.rmp-camion{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.rmp-cam-1,.rmp-cam-2{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;min-width:0}
.rmp-cam-2{flex:1 1 auto;justify-content:flex-end}
.rmp-hora{padding:2px 10px;border-radius:999px;background:var(--line-soft);font-size:14px;font-variant-numeric:tabular-nums}
.rmp-prov{font-weight:600;overflow-wrap:anywhere}
.rmp-meta{font-size:13px;color:var(--ink-soft)}
.rmp-cam-acc{display:flex;flex-wrap:wrap;gap:8px}
.rmp-lotes{list-style:none;margin:10px 0 0;padding:0}
.rmp-lote{display:grid;grid-template-columns:minmax(90px,1.1fr) minmax(70px,.8fr) minmax(0,2fr) minmax(100px,1fr);align-items:center;gap:12px;padding:9px 10px;border-radius:var(--r-m)}
.rmp-lote+.rmp-lote{border-top:1px dashed var(--line-soft)}
.rmp-lote-n{font-weight:600}
.rmp-jabas{font-size:13.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.rmp-pp,.rmp-falta-pesar{text-align:right;font-variant-numeric:tabular-nums}
.rmp-falta-pesar{font-size:13px;font-weight:600;color:var(--mango-dark)}
li.rmp-nuevo{background:var(--mango-soft);animation:resaltarFila 3s ease-out}

@media (max-width: 640px){
  .rmp-barra{flex-direction:column;align-items:stretch;flex-basis:100%}
  details.rmp-filtros{width:100%}
  details.rmp-filtros>summary{display:flex;align-items:center;min-height:40px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--card);font-size:13.5px;font-weight:600;cursor:pointer;list-style:none}
  details.rmp-filtros>summary::-webkit-details-marker{display:none}
  .rmp-filtros-caja{margin-top:8px}
  .rmp-filtros-caja>*{flex:1 1 100%}
  .rmp-barra-der{margin-left:0}
  .rmp-barra-der>*{flex:1 1 0;text-align:center}
  .rmp-lista .rmp-c{text-align:right}
  .rmp-lista tbody.rmp-dia tr{padding:0;border:0;background:none;box-shadow:none;margin:6px 0 0}
  .rmp-lista tbody.rmp-dia td{display:block;padding:10px 4px 4px;background:none}
  .rmp-lista tbody.rmp-dia td::before{content:none}
  .rmp-det{grid-template-columns:minmax(0,1fr);gap:18px}
  .rmp-der{margin-left:0}
  body:has(.rmp-hoy) .frase-estado h2{font-size:21px}
  .rmp-camion{flex-direction:column;align-items:stretch;gap:6px}
  .rmp-cam-2{justify-content:space-between}
  .rmp-lote{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n pp" "j pp" "d d";gap:2px 10px;padding:10px 4px}
  .rmp-lote-n{grid-area:n}
  .rmp-jabas{grid-area:j}
  .rmp-lote-dif{grid-area:d;margin-top:4px}
  .rmp-pp,.rmp-falta-pesar{grid-area:pp}
}
@media (max-width: 880px){
  :is(.rmp-nuevo,.rmp-snf) :is(input,select,textarea){font-size:16px}
}
@media (prefers-reduced-motion: reduce){
  .rmp-lista tbody.fila-nueva>tr.fila-abre td{animation:none}
  li.rmp-nuevo{animation:none}
}
/* Constancias y ⚙ Reglas: el selector y su botón en la fila de Documentos, y la tabla de proveedores */
form.rmp-doc-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
form.rmp-doc-form .ctl{min-width:0;max-width:100%}
.rmp-pie-docs{margin:12px 0 0;font-size:12.5px;color:var(--ink-soft)}
ul.rmp-solo{margin:0;padding-left:20px;display:grid;gap:4px}
table.rmp-provs td:first-child{font-weight:600}
@media (max-width: 880px){
  form.rmp-doc-form .ctl{flex:1 1 100%}
}
/* ==== fin op-recepcion-07nov ==== */

/* ==== op-calidad-07nov ==== */
/* Por envío: la lista de envíos, cada uno con sus tres formatos como casillas y su detalle debajo (maqueta A «Papel sereno»). */
.rc-barra-env{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.rc-barra-env .rc-cuenta{margin-left:auto}
.rc-lista>.fila-vacia,.rc-nadie{margin:0;padding:12px 10px;font-size:13.5px;color:var(--ink-soft)}
.rc-nadie[hidden]{display:none}
.rc-envios{list-style:none;margin:0;padding:0}
.rc-envios>li{position:relative;border-bottom:1px solid var(--line-soft)}
.rc-envios>li:last-child{border-bottom:0}
details.rc-envio>summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:16px;align-items:center;padding:14px 56px 14px 8px;border-radius:var(--r-m);cursor:pointer;list-style:none;transition:background .2s ease}
details.rc-envio>summary::-webkit-details-marker{display:none}
details.rc-envio>summary:hover{background:var(--paper)}
details.rc-envio>summary:focus-visible{outline:2px solid var(--mango);outline-offset:-2px}
details.rc-envio[open]>summary{background:color-mix(in srgb,var(--verde-suave) 30%,var(--card))}
.rc-imp{position:absolute;top:24px;right:8px}
.rc-quien{min-width:0}
.rc-quien b{font-size:14.5px;font-weight:600}
.rc-quien .pill{margin-left:8px}
.rc-quien small{display:block;margin-top:2px;font-size:12.5px;color:var(--ink-soft)}
.rc-envio .casillas{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.rc-envio .casilla{padding:7px 10px}
.rc-envio .casilla b{font-size:13px}
.rc-det{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:2px 8px 14px;padding:14px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m)}
.rc-fmt{min-width:0;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m)}
.rc-fmt h4{margin:0 0 6px;font-size:13.5px}
.rc-fmt h4 small{display:block;font-weight:400;font-size:12px;color:var(--ink-soft)}
.rc-fmt ul{list-style:none;margin:0;padding:0}
.rc-fmt li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 8px;padding:7px 0;border-top:1px dashed var(--line-soft);font-size:13px}
.rc-fmt li b{font-weight:600}
.rc-fmt li small{display:block;font-size:12px;color:var(--ink-soft)}
.rc-rep-acc{display:flex;align-items:center;gap:6px}
.rc-falta{margin:8px 0 10px;font-size:13px;color:var(--mango-dark)}
.rc-det-pie{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.rc-det-pie .rc-nota{margin-left:auto;font-size:12.5px;color:var(--ink-soft)}
@media (max-width: 880px){
  details.rc-envio>summary{grid-template-columns:minmax(0,1fr);gap:10px}
  .rc-imp{top:12px}
  .rc-det{grid-template-columns:minmax(0,1fr)}
  .rc-barra-env .rc-cuenta{margin-left:0;flex-basis:100%}
}
@media (max-width: 520px){
  .rc-envio .casillas{grid-template-columns:minmax(0,1fr)}
  .rc-det{margin:2px 0 14px;padding:10px}
}
/* Por mirar en el celular: los «＋ Maduración» y «＋ Producto terminado» van enteros; si no caben juntos, bajan de línea en vez de partirse. */
@media (max-width: 640px){
  .rc-mirar .por-mirar .acciones{flex-wrap:wrap}
  .rc-mirar .por-mirar .acciones .btn-mini{white-space:nowrap}
}
/* Todos los reportes: la barra (pastillas a la izquierda, controles a la derecha), la tabla y el pie. */
.rc-barra-todos{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.rc-barra-todos .rc-controles{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto}
.rc-scroll{overflow-x:auto}
.rc-todos td.rc-c-lote{min-width:120px;max-width:150px;white-space:normal}
.rc-todos th,.rc-todos td{padding-left:8px;padding-right:8px}
.rc-todos td.rc-c-envio{min-width:120px;max-width:150px;white-space:normal}
.rc-todos .rc-sub{display:block;font-size:12px;color:var(--ink-soft)}
.rc-todos td .pill{display:inline-block;max-width:118px;white-space:normal;border-radius:12px;line-height:1.3}
.rc-todos .col-acc{white-space:nowrap}
.rc-todos .col-acc form{display:inline}
.rc-pie{margin:0;padding:12px 10px 4px;font-size:13px;color:var(--ink-soft)}
@media (max-width: 880px){
  .rc-barra-todos .rc-controles{margin-left:0;flex-basis:100%}
  .rc-barra-todos .rc-controles .ctl,.rc-barra-todos .rc-controles .ctl-marco{flex:1 1 100%;width:100%;font-size:16px}
  .rc-barra-todos .rc-controles input{font-size:16px}
}
/* ==== fin op-calidad-07nov ==== */

/* ==== op-despachos-07nov ==== */
/* La barra: el buscador, las pastillas de exportadora, la campaña y a la derecha las columnas y el Excel, en una fila. */
.desp-barra{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 32px 14px}
.desp-barra .ctl-buscar{flex:0 1 280px;min-width:0}
.desp-barra-der{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}

/* La lista: lo que se ve cabe en 1440 px sin salirse de su panel; lo demás, detrás de «⊞ Más columnas». */
.desp-marco{overflow-x:auto;max-width:100%}
.desp-tabla td{vertical-align:top}
.desp-tabla td.num{text-align:right}
.desp-tabla td[data-label="Envío"]{min-width:190px}
.desp-tabla .desp-lotes{min-width:130px;max-width:230px}
.desp-tabla .desp-lotes .pill{margin:2px 0 0;white-space:normal}
.desp-tabla td.col-acc{white-space:nowrap}
.desp-sub{display:block;margin-top:1px;font-size:12px;font-weight:400;color:var(--ink-soft)}
.desp-suave{color:var(--ink-soft)}
.desp-falta{color:var(--mango-dark);font-weight:600}
.desp-falta{text-decoration:none}
.desp-falta:hover{text-decoration:underline}
.desp-tabla tbody.fila-nueva>tr.fila-abre td{animation:resaltarFila 3s ease-out}
.desp-nadie{margin:12px 0 0;color:var(--ink-soft)}
.desp-nadie[hidden]{display:none}
.desp-vacio{margin:0;color:var(--ink-soft)}

/* La ficha de lectura: lo del packing, sus papeles, sus paletas y el transporte. */
.desp-detalle{display:grid;gap:14px}
.desp-ro{padding:12px 14px;background:var(--paper);border:1px dashed var(--line);border-radius:var(--r-m)}
.desp-ro p{margin:0}
.desp-ro p+p{margin-top:4px;font-size:13px;color:var(--ink-soft)}
.desp-paletas{margin:0;font-size:13.5px;overflow-wrap:anywhere}
.desp-transporte>h4{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.desp-pie{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:12px;border-top:1px solid var(--line-soft)}
.desp-nota{margin:0;font-size:13px;color:var(--ink-soft)}

@media (max-width: 880px){
  .desp-barra{margin:0 14px 14px}
  .desp-detalle :is(input,select,textarea){font-size:16px}
}
/* Celular: cada despacho es una tarjeta de dos columnas (envío | cajas, lotes, salió | °C, transporte | constancia) y sus acciones abajo. */
@media (max-width: 640px){
  .desp-barra .ctl-buscar{flex:1 1 100%}
  .desp-barra .chips-filtro{flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto}
  .desp-barra [data-toggle-cols]{display:none}
  .desp-barra-der{margin-left:0;flex:1 1 100%}
  .desp-barra-der .btn{flex:1 1 auto;text-align:center}
  .desp-tabla.datos.t-cards tbody>tr.fila-abre{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"env caj" "lot lot" "sal tem" "tra con" "acc acc";gap:2px 8px}
  .desp-tabla.datos.t-cards tbody>tr.fila-abre>td{flex-direction:column;align-items:flex-start;gap:2px;min-width:0;max-width:none;overflow-wrap:anywhere}
  .desp-tabla.datos.t-cards tbody>tr.fila-abre>td:nth-child(1){grid-area:env}
  .desp-tabla.datos.t-cards tbody>tr.fila-abre>td:nth-child(2){grid-area:sal}
  .desp-tabla.datos.t-cards tbody>tr.fila-abre>td:nth-child(3){grid-area:lot}
  .desp-tabla.datos.t-cards tbody>tr.fila-abre>td:nth-child(4){grid-area:caj;align-items:flex-end;text-align:right}
  .desp-tabla.datos.t-cards tbody>tr.fila-abre>td:nth-child(5){grid-area:tra}
  .desp-tabla.datos.t-cards tbody>tr.fila-abre>td:nth-child(6){grid-area:tem;align-items:flex-end;text-align:right}
  .desp-tabla.datos.t-cards tbody>tr.fila-abre>td:nth-child(7){grid-area:con}
  .desp-tabla.datos.t-cards tbody>tr.fila-abre>td:nth-child(8){grid-area:acc;flex-direction:row;justify-content:flex-end;padding-top:8px}
  .desp-tabla .col-sec{display:none}
  .desp-marco{overflow-x:visible}
}
@media (max-width: 520px){
  .desp-barra{margin:0 10px 14px}
}
@media (prefers-reduced-motion: reduce){
  .desp-tabla tbody.fila-nueva>tr.fila-abre td{animation:none}
}
/* La ficha que se edita: a todo el ancho de la fila, en papel; el formulario del motor en rejilla de tres columnas. */
.desp-detalle .form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px}
.desp-detalle .form-foot{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.desp-detalle .desp-transporte form{margin:0}
.desp-sugiere{grid-column:1/-1;margin:0}
.desp-sugiere[hidden]{display:none}
.desp-sugiere .btn{margin-top:8px}
.desp-temp-nota{display:block;margin-top:4px;font-size:12px;color:var(--ink-soft)}
.desp-temp-nota:empty{display:none}
.desp-temp-nota.desp-temp-fuera{color:var(--mango-dark);font-weight:600}
.desp-pie form{margin:0}
.desp-no-borra{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.desp-no-borra small{font-size:12px;color:var(--ink-soft)}
@media (max-width: 880px){
  .desp-detalle .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 520px){
  .desp-detalle .form-grid{grid-template-columns:minmax(0,1fr)}
}
.desp-reglas{margin:0;padding-left:18px;display:grid;gap:8px;font-size:14px}
.desp-ya-hay{margin:12px 0 0}
.desp-ya-hay[hidden]{display:none}
/* Por mirar en el celular: los botones van enteros; si no caben juntos, bajan de línea en vez de partirse o salirse de la fila. */
@media (max-width: 640px){
  .desp-mirar .por-mirar .acciones{flex-wrap:wrap}
  .desp-mirar .por-mirar .acciones .btn-mini{white-space:nowrap}
}
/* ==== fin op-despachos-07nov ==== */

/* ==== op-costos-planta-07nov ==== */
/* Pagos de Mano de obra (_costo_mo_pagos.js). La barra va en una fila que se envuelve: «⬇ Excel» queda a la derecha. */
.cpl-barra form{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.cpl-barra .cpl-excel{margin-left:auto}
.cpl-en-linea{display:inline;margin:0}
.cpl-bloq{opacity:.45;cursor:not-allowed}
.cpl-suave{color:var(--ink-soft)}
/* position:relative: el .solo-lector de la columna «Quitar» (absoluto) se queda dentro del marco que desplaza y no ensancha la página en el celular. */
.cpl-tabla{position:relative;overflow-x:auto}
@media (min-width:641px){
  table.datos.cpl-pagos td{white-space:normal;vertical-align:top;padding-left:8px;padding-right:8px}
  table.datos.cpl-pagos td[data-label="Fecha"],table.datos.cpl-pagos td.num,table.datos.cpl-pagos td.col-acc{white-space:nowrap}
}
.cpl-pagos td small{display:block;margin-top:2px;font-size:12px;font-weight:400}
.cpl-pagos td.num{white-space:nowrap}
.cpl-flecha{color:var(--ink-soft)}
.cpl-pk{display:block;margin-top:2px;font-size:12px;color:var(--ink-soft)}
.cpl-pk a{color:inherit;text-decoration:underline;text-decoration-color:var(--line)}
.cpl-pla{margin-left:4px;cursor:help}
.cpl-sin{color:var(--terracota);font-weight:600}
/* El rótulo de cada semana: una franja de papel con el nombre en tinta y lo demás en suave. */
.cpl-pagos tbody.cpl-semana-fila th{background:var(--paper);font-size:13px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink);padding:9px 10px;border-bottom:1px solid var(--line);white-space:normal}
.cpl-pagos tbody.cpl-semana-fila th span{font-weight:400;color:var(--ink-soft)}
.cpl-pagos tbody.cpl-mas td{padding:12px 10px;text-align:center;border-bottom:0}
.cpl-pagos tbody.cpl-mas a{font-weight:600}
/* La ficha de una cuadrilla: su gente en una rejilla, lo que costó y sus botones. */
.cpl-pagos .fila-ficha-caja h4{margin:0;font-size:15px}
.cpl-gente{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px 18px;margin:0;padding:0;list-style:none}
.cpl-gente li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
.cpl-gente li b{white-space:nowrap}
.cpl-ficha-acc{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cpl-ficha-acc form{margin:0}
.cpl-fuera{padding:28px 16px;text-align:center}
.cpl-fuera p{margin:6px 0 14px;color:var(--ink-soft)}
.cpl-vacio{margin:0;padding:24px 16px;text-align:center;color:var(--ink-soft)}
.cpl-pie{display:flex;flex-direction:column;gap:4px;padding:12px 10px 2px;border-top:1px solid var(--line);font-size:13px}
.cpl-pie p{margin:0}
.cpl-pie:empty{display:none}
/* «＋ Pago fijo»: el total que se calcula al escribir va a la derecha del botón. */
.cpl-recuadro{margin:0 32px 16px}
.cpl-pago h3{margin:0 0 12px}
.cpl-total{margin-left:auto;font-weight:600;color:var(--ink-soft);font-variant-numeric:tabular-nums}
@media (min-width:881px){.cpl-pago .cpl-ancho{grid-column:span 2}}
@media (max-width:880px){
  .cpl-recuadro{margin:0 14px 16px}
  .cpl-barra input,.cpl-barra select,.cpl-pago input,.cpl-pago select{font-size:16px} /* 16 px: el celular no se acerca solo al escribir */
  .cpl-barra .cpl-excel{margin-left:0}
}
@media (max-width:640px){
  .cpl-gente{grid-template-columns:minmax(0,1fr)}
  table.datos.t-cards.cpl-pagos tbody.cpl-semana-fila tr{padding:0;margin:14px 0 6px;border:0;background:none;box-shadow:none}
  table.datos.t-cards.cpl-pagos tbody.cpl-semana-fila th{display:block;padding:0 4px;border:0;background:none}
  table.datos.t-cards.cpl-pagos tbody.cpl-mas tr{border:0;background:none;box-shadow:none}
  .cpl-pagos td small{margin-top:0}
}
/* Cuadrillas (_costo_mo_cuadrillas.js): el formulario, su pie, el reparto y la lista de la campaña. */
.cpl-cq h3{margin:0}
.cpl-sec{margin-top:20px}
.cpl-sec h4{margin:0 0 8px;font-size:14px;font-weight:600}
.cpl-ayuda{margin:0 0 8px;font-size:12.5px;color:var(--ink-soft)}
.cpl-acc{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.cpl-toda{grid-column:1/-1}
@media (min-width:881px){.cpl-cq .cpl-ancho{grid-column:span 2}}
.cpl-precios{display:flex;flex-wrap:wrap;gap:10px 18px}
.cpl-precios .fld{min-width:150px}
.cpl-pers{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(380px,100%),1fr));gap:8px}
.cpl-per{display:flex;gap:6px;align-items:center}
.cpl-per .n{min-width:20px;font-weight:700;color:var(--ink-soft);text-align:right}
.cpl-per .ctl{flex:1;min-width:0}
.cpl-per .ctl.cpl-dni{flex:0 0 120px;font-variant-numeric:tabular-nums}
.cpl-chips{display:flex;flex-wrap:wrap;gap:4px 12px}
.cpl-chips .acc-check{white-space:nowrap}
.cpl-tramos td{vertical-align:top}
.cpl-tramos input.ctl{width:90px;text-align:right}
.cpl-reparto{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px 18px;margin:0;padding:0;list-style:none}
.cpl-reparto li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
.cpl-reparto li b{white-space:nowrap;font-variant-numeric:tabular-nums}
.cpl-suma{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;margin:10px 0 0;padding-top:10px;border-top:2px solid var(--line);font-size:13px}
.cpl-suma b{font-size:15px;font-variant-numeric:tabular-nums}
.cpl-cq #cqAviso{margin:16px 0 0}
.cpl-pie-cq{flex-wrap:wrap;row-gap:10px}
.cpl-pie-cq .cpl-suave{font-size:12.5px}
.cpl-eliminar{margin:0 0 0 auto}
.cpl-eliminar .btn{color:var(--terracota)}
.cpl-proceso .cpl-tabla,.cpl-lectura .cpl-ficha-acc{margin-top:8px}
table.datos.cpl-cq-lista td.num{white-space:nowrap}
.cpl-cq-lista tr.cpl-abierta td{background:var(--line-soft)}
.cpl-cq-lista .cpl-pk{display:inline}
@media (max-width:880px){
  .cpl-cq .ctl,.cpl-cq-caja .ctl{font-size:16px} /* 16 px: el celular no se acerca solo al escribir */
}
@media (max-width:640px){
  .cpl-pers,.cpl-reparto{grid-template-columns:minmax(0,1fr)}
  .cpl-tramos input.ctl{width:64px}
  .cpl-per .ctl.cpl-dni{flex-basis:104px}
  .cpl-eliminar{margin-left:0}
}
/* Por persona, Cajas por semana y Costo por caja (_costo_mo_informes.js), y ⚙ Reglas. */
.cpl-semana{font-weight:600;white-space:nowrap}
.cpl-derecha{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto}
.cpl-rango{margin:0 32px 12px;font-size:13px;color:var(--ink-soft)}
.cpl-ver{font-size:12px;margin-left:6px}
.cpl-cel{color:inherit;text-decoration:underline dotted}
.cpl-kpis{margin-bottom:16px}
.cpl-kpi-total{border-color:var(--verde-2)}
.cpl-kpi-total .v{color:var(--verde)}
table.datos.cpl-cajas td.cpl-tot{min-width:150px}
.cpl-barrita{display:block;width:140px;max-width:100%;height:6px;margin:0 0 5px auto;background:var(--line-soft);border-radius:999px;overflow:hidden}
.cpl-barrita rect{fill:var(--mango)}
table.datos.cpl-costo td.cpl-pc{background:var(--mango-soft)}
table.datos.cpl-costo td small{display:block;margin-top:2px;font-size:12px;font-weight:400}
.cpl-resumen th:first-child,.cpl-resumen td:first-child{position:sticky;left:0;z-index:1;background:var(--card)}
table.datos.cpl-resumen tbody tr:nth-child(even) td:first-child{background:var(--cebra)}
table.datos.cpl-resumen tfoot .fila-totales td:first-child{background:var(--line-soft)}
.cpl-resumen td input.ctl{width:112px;height:32px;min-height:0;padding:4px 9px;font-variant-numeric:tabular-nums}
.cpl-resumen td.cpl-ruc{font-variant-numeric:tabular-nums}
.cpl-pie-dni{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:12px;font-size:12.5px}
.cpl-fijos-mas{margin-top:12px}
.cpl-fijos-mas>summary{cursor:pointer;padding:8px 0;font-weight:600;color:var(--verde)}
.cpl-formatos{display:flex;flex-wrap:wrap;gap:6px}
.cpl-fijos-panel{scroll-margin-top:96px}
@media (max-width:880px){
  .cpl-rango{margin:0 14px 12px}
  .cpl-resumen td input.ctl{font-size:16px}
}
@media (max-width:640px){
  .cpl-derecha{margin-left:0}
  .kpi-grid.cpl-kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .kpi-grid.cpl-kpis .kpi{padding:10px 11px;min-width:0}
  .kpi-grid.cpl-kpis .kpi .l{font-size:12px}
  .kpi-grid.cpl-kpis .kpi .v{font-size:19px}
  .kpi-grid.cpl-kpis .kpi .d{font-size:12px}
  .kpi-grid.cpl-kpis .kpi.cpl-kpi-total{grid-column:1/-1}
}
/* ==== fin op-costos-planta-07nov ==== */

/* ==== acopio-compras-07nov ==== */
/* Compras de fruta (_acopio_compras.js), «Papel sereno». Lo que comparte con Ventas a exportadoras dice «compartido con acopio-ventas».
   La frase con «＋ Compra a mano» a su derecha; en el celular el botón baja, a todo el ancho. */
.acp-cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin:4px 32px 22px}
.acp-cab>.frase-estado{flex:1 1 420px;min-width:0;margin:0}
.acp-cab>.btn{flex:none}

/* El envío (compartido con acopio-ventas): el punto de la exportadora y su nombre. Dos tokens de la sección, los de la maqueta: DPM en verde y
   San Lorenzo en azul. Sin exportadora conocida (por empacar, por vender), el punto hueco y la tinta suave. */
.acp-env{--acp-dpm:var(--verde-2);--acp-fsl:var(--info-tinta);display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink);white-space:nowrap}
.acp-env>i{flex:none;box-sizing:border-box;width:8px;height:8px;border-radius:50%;background:var(--ink-tenue)}
.acp-env[data-e="DPM"]>i{background:var(--acp-dpm)}
.acp-env[data-e="FSL"]>i{background:var(--acp-fsl)}
.acp-env.sin{font-weight:400;color:var(--ink-soft)}
.acp-env.sin>i{background:transparent;border:1.5px solid var(--ink-tenue)}

/* «Compra a mano»: el alta del motor en su recuadro, lo principal arriba. «Jalar» es un campo; sin recepciones pendientes, la línea punteada.
   La línea de cálculo, en papel suave; «Más datos», plegado. */
.acp-nuevo .form-grid~.form-grid{margin-top:16px} /* entre las dos rejillas van «Lo que se sabe del productor» (escondido) y su guion */
.acp-nuevo .form-grid+.notice{margin:16px 0 0}
.acp-jalar{display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:12px 14px;border:1.5px dashed var(--line-strong);border-radius:var(--r-m);background:var(--paper)}
.acp-jalar-ic{flex:none;font-size:20px;line-height:1}
.acp-jalar b{display:block;font-weight:600}
.acp-jalar small{display:block;margin-top:2px;font-size:12.5px;color:var(--ink-soft)}
.acp-jalar-sel{max-width:620px;margin:0 0 16px}
.acp-ayuda{display:block;margin-top:5px;font-size:12px;color:var(--ink-soft)}
.acp-calc{margin:16px 0 0;padding:12px 14px;border-radius:var(--r-m);background:var(--line-soft);font-size:13.5px;color:var(--ink)}
.acp-mas-datos{margin-top:14px}
.acp-mas-datos>summary{display:inline-flex;align-items:center;gap:6px;padding:6px 0;list-style:none;font-weight:600;color:var(--verde);cursor:pointer}
.acp-mas-datos>summary::-webkit-details-marker{display:none}
.acp-mas-datos>summary::before{content:"▸";font-size:12px;transition:transform .15s}
.acp-mas-datos[open]>summary::before{transform:rotate(90deg)}
.acp-mas-datos>.form-grid{margin-top:10px}

/* Las barras: el mes, el buscador y las pastillas; debajo «Más filtros» y «⊞ Más columnas» a la izquierda, el Excel y la liquidación a la
   derecha. «Más filtros» abierto toma su propia fila (los botones bajan): nunca tapa la lista. */
.acp-barras{margin:0 32px 16px}
.acp-barra{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.acp-barra+.acp-barra{margin-top:10px}
.acp-barra .ctl-buscar{flex:1 1 220px;max-width:320px}
.acp-barra .ctl-buscar>input{width:100%;min-width:0}
.acp-barra .chip.acp-vista{background:var(--card);border-color:var(--line);font-size:13px}
.acp-der{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto}
.acp-mas-filtros>summary{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border:1.5px solid var(--line);border-radius:var(--r-m);background:var(--card);
  font-size:13.5px;font-weight:600;color:var(--verde);list-style:none;cursor:pointer;user-select:none}
.acp-mas-filtros>summary::-webkit-details-marker{display:none}
.acp-mas-filtros>summary::after{content:"▾";font-size:12px;color:var(--ink-soft)}
.acp-mas-filtros>summary:hover,.acp-mas-filtros[open]>summary{border-color:var(--verde-2);background:var(--line-soft)}
.acp-mas-filtros[open]{flex:1 1 100%}
.acp-filtros{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px 14px;margin-top:10px;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.acp-filtros>.fld{min-width:0;margin:0}

/* La lista: toda la fila abre su compra (con JS); la abierta y su detalle, en verde suave, con la cuenta, Frunort y los gastos en una
   tarjeta que se queda a la vista aunque la tabla se desplace de lado. */
.acp-lista{padding-top:8px}
.acp-tabla{position:relative;overflow-x:auto} /* relative: el texto del lector del 🧾 (absoluto) se queda adentro y no ensancha la página */
html.js table.acp-compras tbody tr[data-href]{cursor:pointer}
table.acp-compras td[data-label="Lote"]{font-weight:600}
table.acp-compras td.acp-prod{max-width:230px;overflow:hidden;text-overflow:ellipsis}
/* El envío se parte en líneas: un reparto entre envíos, o el N° de un envío escrito largo («E248, E249 Y E250 -24/04»), no ensancha la tabla. */
table.acp-compras td[data-label="Envío"]{min-width:140px;max-width:240px;white-space:normal;line-height:1.5}
table.acp-compras td[data-label="Envío"] .acp-env{white-space:normal;align-items:baseline}
table.acp-compras .acp-hoja{width:1%;text-align:right}
table.acp-compras tr[id^="c"]{scroll-margin-top:150px}
table.acp-compras tbody tr.on>td,table.acp-compras tbody tr.on:hover>td{border-bottom-color:transparent;background:var(--ok-soft)}
table.acp-compras tbody tr.on>td[data-label="Fecha"] a{font-weight:700}
table.acp-compras tbody tr.acp-det>td,table.acp-compras tbody tr.acp-det:hover>td{padding:2px 10px 16px;white-space:normal;background:var(--ok-soft);border-bottom:1px solid var(--line)}
/* De ancho, lo que se ve del marco de la tabla: la ventana menos el menú (248 px), los márgenes y el relleno del panel, la barra de
   desplazamiento y los 10 px de cada lado de la celda. */
table.acp-compras tr.acp-det .acp-det-g,table.acp-compras tr.acp-det .acp-acc{position:sticky;left:10px;max-width:min(1180px,calc(100vw - 396px))}
html.lateral-plegado table.acp-compras tr.acp-det .acp-det-g,html.lateral-plegado table.acp-compras tr.acp-det .acp-acc{max-width:min(1180px,calc(100vw - 148px))}
table.acp-compras tbody tr.acp-vacio>td,table.acp-compras tbody tr.acp-vacio:hover>td{padding:28px 10px;white-space:normal;text-align:center;background:var(--card)}
.acp-vacio p{margin:0 0 6px;color:var(--ink-soft)}
.acp-vacio p b{color:var(--ink)}
.acp-vacio .btn{margin-top:6px}
.acp-det-g{box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr);gap:22px;padding:16px 18px;background:var(--card);
  border:1px solid var(--line);border-bottom:0;border-radius:var(--r-m) var(--r-m) 0 0}
.acp-acc{box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 18px;background:var(--card);border:1px solid var(--line);
  border-top-color:var(--line-soft);border-radius:0 0 var(--r-m) var(--r-m)}
.acp-acc form{margin:0}
.acp-parte{min-width:0}
.acp-parte p{margin:0 0 6px;font-size:13px;color:var(--ink-soft)}
.acp-rot{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-tenue)}
.acp-cuenta .cifras-fila.cajas{flex-wrap:wrap;gap:8px 22px;margin:0 0 10px}
.acp-cuenta .cifras-fila.cajas .cf-v{white-space:nowrap}
.acp-cuenta .cifras-fila.cajas .cf-n{font-size:12px;color:var(--mango-dark)}
.acp-gastos{margin:0 0 8px;padding:0;list-style:none;font-size:13px}
.acp-gastos>li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:5px 0;border-bottom:1px dashed var(--line);font-variant-numeric:tabular-nums}
.acp-gastos>li>span:last-child{flex:none;white-space:nowrap}
.acp-gastos small{font-size:12px;color:var(--ink-soft)}
.acp-parte .acp-gtot{color:var(--ink)}
.acp-gtot b,.acp-pie-cel b{white-space:nowrap}
.acp-falta{font-weight:600;color:var(--mango-dark)}
.acp-ok{font-weight:600;color:var(--good)}
.acp-nota{font-size:12.5px;color:var(--ink-soft)}
.acp-suma{font-weight:700}
.acp-pie>p{margin:12px 0 0;font-size:13px;color:var(--ink-soft)}
.acp-pie .acp-pie-cel{display:none}
.acp-tam a{color:inherit}

/* La lista del celular: solo hasta 880 px (la tabla, solo arriba de 880). Una compra por fila: el productor y su línea a la izquierda, el
   total y su pastilla a la derecha; la abierta, en verde suave con su detalle debajo, en una columna. */
.acp-cel{display:none}
.acp-cel>li{flex-wrap:wrap;gap:6px 12px;padding:12px 4px}
html.js .acp-cel>li[data-href]{cursor:pointer}
.acp-cel>li.on{margin:4px -8px;padding:12px 8px;border-bottom:0;border-radius:var(--r-m);background:var(--ok-soft)}
.acp-cel>li[data-compra]{scroll-margin-top:calc(var(--cab-alto) + 10px)}
.acp-cel-t{flex:1 1 0;min-width:0}
.acp-cel-t a{color:var(--ink);text-decoration:none}
.acp-cel-t b{font-size:15px;font-weight:600}
.acp-cel-t small{display:block;margin-top:2px;font-size:12.5px;color:var(--ink-soft)}
.acp-cel-r{display:flex;flex:none;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.acp-cel-r b{font-variant-numeric:tabular-nums}
.acp-cel-det{flex:1 1 100%;min-width:0;margin-top:6px;cursor:default}
.acp-cel>li.acp-vacio{display:block;padding:20px 4px;text-align:center}

/* Por mirar (_acopio_compras_mirar.js): las líneas que abren «Completar» y «＋ Tarifas de siempre», una por compra, con una raya suave entre
   ellas. Arriba de «Completar», la regla de la modalidad en papel suave (qué kilos se pagan); en cada línea, la compra y lo que le falta, su
   formulario corto (el de la edición, del motor, con la ayuda de cada campo: decide el pago) y la modalidad de la última vez. */
.acp-c-regla{margin:0;padding:10px 12px;border-radius:var(--r-m);background:var(--line-soft);font-size:13px;color:var(--ink)}
.acp-completar{display:grid;gap:6px;min-width:0}
.acp-completar+.acp-completar,.acp-tarifa+.acp-tarifa{padding-top:12px;border-top:1px dashed var(--line)}
.acp-completar p{margin:0}
/* El formulario corto, en rejilla: los tres campos alineados arriba (cada ayuda debajo del suyo, sin bajar el desplegable, que no trae) y
   «Guardar» en su propia fila. En el celular, una columna. */
.por-mirar .abierta .acp-completar form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:10px 14px}
.por-mirar .abierta .acp-completar form>.btn-primary{grid-column:1/-1;justify-self:start}
.acp-c-t{font-weight:600}
.acp-c-sub{font-size:12.5px;color:var(--ink-soft)}
.acp-c-mas{margin:0;font-size:13px;color:var(--ink-soft)}
.acp-tarifa{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;min-width:0}
.acp-tarifa>span{min-width:0;font-weight:600}

/* Por pagar, Productores y ⚙ Reglas (_acopio_compras_otras.js). Por pagar: un productor por fila, el monto y los días a la derecha, las
   acciones al final. Productores: la tabla con su barrita decorativa y el detalle que abre debajo. Reglas: la cifra grande a la izquierda.
   .acp-regla es compartido con acopio-ventas. */
.acp-deudas{padding-top:8px}
.acp-deuda>li{gap:6px 18px}
.acp-deuda .t>p{margin:3px 0 0}
.acp-deuda .t>p a{color:var(--verde-2);font-weight:600;text-decoration:none}
.acp-deuda .t>p a:hover{text-decoration:underline}
.acp-deuda-cta{color:var(--ink-tenue)}
.acp-deuda-m{display:flex;flex:none;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.acp-deuda-m b{font-size:16px;font-variant-numeric:tabular-nums}
.acp-deuda-m small{font-size:12.5px;color:var(--ink-soft)}
.acp-deuda-pie{margin:6px 4px 4px;padding-top:12px;border-top:2px solid var(--line);text-align:right;font-size:15px}
.acp-deuda-pie b{font-variant-numeric:tabular-nums}
table.acp-productores tbody tr.acp-prod>td{white-space:nowrap}
table.acp-productores .btn-mini{font-weight:600;text-align:left}
.acp-modalidad{display:block;margin-top:2px;font-size:12.5px;color:var(--ink-soft)}
.acp-total{display:inline-flex;align-items:center;justify-content:flex-end;gap:10px}
.acp-barrita{flex:none;height:6px;fill:var(--verde-2);opacity:.55}
table.acp-productores tbody tr.abierta>td{padding:4px 10px 16px;white-space:normal;background:var(--ok-soft)}
table.acp-productores tbody tr.abierta p{margin:6px 0 0;font-size:13px;color:var(--ink)}
table.acp-productores .acp-acc{margin-top:10px;padding:0;background:transparent;border:0}
.acp-regla{display:flex;align-items:baseline;gap:18px;padding:14px 4px;border-bottom:1px solid var(--line-soft)} /* compartido con acopio-ventas */
.acp-regla:last-child{border-bottom:0}
.acp-regla-c{flex:none;min-width:84px;font-family:"Bricolage Grotesque",sans-serif;font-size:20px;font-weight:700;color:var(--verde-2)}
.acp-regla-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.acp-regla-t span{font-size:13px;color:var(--ink-soft)}
.acp-tarifas-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px 28px}
.acp-tar p{margin:0 0 6px;font-size:13px;color:var(--ink-soft)}
.acp-tar .acp-rot{margin-bottom:8px}
.acp-nota-reglas{margin:16px 0 0;font-size:13px;color:var(--ink-soft)}
.acp-nota-reglas a{font-weight:600}

@media (max-width: 880px){
  .acp-cab{flex-direction:column;align-items:stretch;margin:4px 14px 18px}
  .acp-cab>.frase-estado{flex:none}
  .acp-cab .frase-estado h2{font-size:21px}
  .acp-cab>.btn{justify-content:center}
  .acp-barras{margin:0 14px 14px}
  .acp-barra .ctl-buscar{flex-basis:100%;max-width:none}
  .acp-barra .nav-periodo{flex:1 1 100%}
  .acp-barras .chips-filtro{flex-wrap:wrap;overflow:visible}
  .acp-barra-2>[data-toggle-cols]{display:none}
  .acp-der{margin-left:0}
  .acp-tabla{display:none}
  .acp-cel{display:block}
  .acp-pie .acp-pie-cel{display:block}
  .acp-det-g{grid-template-columns:minmax(0,1fr);gap:16px;padding:14px}
  .acp-acc{padding:12px 14px}
  .acp-nuevo input,.acp-nuevo select,.acp-nuevo textarea,.acp-barras input,.acp-barras select{font-size:16px}
  .por-mirar .abierta .acp-completar form{grid-template-columns:minmax(0,1fr)}
  .acp-deuda>li{flex-wrap:wrap}
  .acp-deuda .t{flex:1 1 100%}
  .acp-deuda-m{flex-direction:row;align-items:baseline;gap:10px}
  .acp-regla{flex-direction:column;gap:4px}
  .acp-cel>li[data-href] .acp-cel-r small{font-size:12px;color:var(--ink-soft)}
}
/* ==== fin acopio-compras-07nov ==== */

/* ==== op-envios-07nov ==== */
/* Cobranza (la pestaña de Envíos de exportación): lo que te deben por vencimiento, los clientes con su ficha y los correos de cobranza. La
   barra de +60 días lleva el rojo de «mal» más hondo (un 70 % con la tinta), para que el tramo más viejo se lea como el más grave. Las
   facturas de un cliente son una lista con roles de tabla y no una <table>: la ficha vive dentro de la tabla de clientes (t-cards). */
.env-t-mas60{fill:color-mix(in srgb,var(--bad) 70%,var(--ink));background-color:color-mix(in srgb,var(--bad) 70%,var(--ink))}
.env-rojo{color:var(--bad)}
.env-nowrap{white-space:nowrap}
.env-ancho{grid-column:1/-1}
.env-afavor{margin:14px 0 0;font-size:13px;color:var(--ink-soft)}
.env-barra{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px 16px;margin-bottom:14px}
.env-barra h3{margin:0}
.env-barra p{margin:2px 0 0;font-size:13px}
.env-barra form{margin:0}
.env-barra-acc{display:flex;flex-wrap:wrap;gap:8px}
.env-clientes-panel .abierta.recuadro{margin:0 0 14px}
.env-clientes-panel form.form-grid>.form-foot{grid-column:1/-1}
.env-clientes-panel small,.env-correos small{font-size:12px}
.env-facturas{display:flex;flex-direction:column;font-size:13.5px}
.env-fac{display:grid;grid-template-columns:minmax(90px,1.1fr) minmax(70px,.8fr) 64px minmax(100px,1fr) repeat(3,minmax(88px,.9fr));gap:4px 12px;align-items:baseline;padding:8px 6px;border-bottom:1px solid var(--line-soft)}
.env-fac-cab{border-bottom-color:var(--line);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
.env-fac-c{min-width:0;overflow-wrap:anywhere}
.env-fac-c.num{text-align:right;font-variant-numeric:tabular-nums}
.env-venc{font-size:12px;white-space:nowrap;color:var(--bad)}
.env-fac-pie{margin:8px 6px 0;text-align:right}
.env-cli-acc{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.env-cli-acc form{margin:0}
.env-dias{max-width:520px}
.env-sub{margin:18px 0 8px;font-size:14px;font-weight:600}
.env-vacio{margin:0 0 6px;color:var(--ink-soft)}
table.datos td.env-corr-cli{min-width:150px;white-space:normal}
table.datos td.env-corr-para{min-width:170px;max-width:300px;font-size:13px;white-space:normal;overflow-wrap:anywhere}
/* «¿Cuándo paga?» de Clientes baja de línea: en una línea la tabla pasaba 136 px su panel. */
table.datos td.env-cli-paga{min-width:130px;white-space:normal}
.env-corr-nota{max-width:260px;font-size:12px;white-space:normal;overflow-wrap:anywhere}
.env-lineas{overflow-x:auto;container-type:inline-size}
.env-dec{font-size:13px;white-space:normal}
.env-prueba>.panel{margin:0;padding:0 4px 12px;border:0;background:none;box-shadow:none}
.env-prueba>.panel>h3{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:640px){
  .env-barra-acc{width:100%}
  .env-barra-acc>*{flex:1 1 auto}
  .env-fac-cab{display:none}
  .env-fac{grid-template-columns:repeat(2,minmax(0,1fr))}
  .env-fac-c::before{content:attr(data-label);display:block;font-size:12px;color:var(--ink-soft)}
  .env-fac-c.num{text-align:left}
  .env-fac-pie{text-align:left}
  .env-cli-acc>*,.env-cli-acc .btn{flex:1 1 100%;width:100%;text-align:center}
}
/* Envíos (la lista): la barra de un renglón con «Más columnas» a la derecha, los chips de estado, las notas de lo que falta en tinta suave y lo de debajo
   (notas, perdidos y cómo sale la utilidad) en una fila. La pérdida se pinta con el rojo de «mal» mezclado con la tinta, sin un color suelto. */
.env-chico{font-size:12px}
.env-suave{color:var(--ink-soft)}
.env-mal,.env-mal small{color:var(--bad)}
.env-perdida{background:color-mix(in srgb,var(--bad) 14%,var(--card));color:color-mix(in srgb,var(--bad) 70%,var(--ink))}
.env-sin-raya,.env-sin-raya:hover{text-decoration:none}
.env-ayuda{cursor:help}
.env-lista{margin-top:14px}
.env-barra-lista{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px}
.env-barra-der{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.env-sem{gap:8px}
.env-sem>input{width:64px}
.env-chips{margin:0 0 12px}
.env-dup{margin:0 0 12px;font-size:13.5px}
.env-pag{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding-top:12px;font-size:12px}
.env-pag-acc{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.env-debajo{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px;margin-top:14px}
.env-debajo>.env-pleg,.env-debajo>.notice{flex:1 1 320px;margin:0;min-width:0}
.env-debajo .tabla-scroll{overflow-x:auto}
.env-debajo>.env-pleg[open]{flex-basis:100%}
.env-debajo>.env-precios{flex:0 0 auto;margin:0}
.env-pleg{padding:6px 16px}
@media (max-width:640px){
  .env-barra-lista>.ctl-marco,.env-barra-lista>.btn,.env-barra-lista>a.btn,.env-barra-lista>details{flex:1 1 100%}
  .env-barra-der{width:100%}
  .env-barra-der>.btn{flex:1 1 auto}
  .env-chips .chips-filtro{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
  .env-debajo>.env-precios{flex:1 1 100%}
}
/* La ficha de un envío: la cabecera (datos, pastillas y acciones), «Para cerrar», las cuatro cifras con el resumen plegado y las cuatro hojas. La tabla de
   liquidación va dentro de un marco que se desplaza de lado (no es table.liq: esa es de Vacaciones). Lo que no cabe en 390 px baja a una columna. */
.env-ficha{display:flex;flex-direction:column;gap:14px;min-width:0}
.env-ficha>.env-cab,.env-ficha>.env-avisos,.env-ficha>.env-cerrar{margin-left:32px;margin-right:32px}
@media (max-width: 880px){.env-ficha>.env-cab,.env-ficha>.env-avisos,.env-ficha>.env-cerrar{margin-left:14px;margin-right:14px}}
@media (max-width: 520px){.env-ficha>.env-cab,.env-ficha>.env-avisos,.env-ficha>.env-cerrar{margin-left:10px;margin-right:10px}}
.env-cab{display:flex;flex-direction:column;gap:6px}
.env-volver{width:fit-content;font-size:13px}
.env-cab h2{margin:0;font-size:22px;overflow-wrap:anywhere}
.env-linea,.env-filas{margin:0;font-size:13.5px;color:var(--ink-soft)}
.env-pastillas{display:flex;flex-wrap:wrap;gap:8px}
.env-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px}
.env-acciones form{margin:0}
.env-acciones .btn-zip-todo.ocupado,.env-subir .btn-zip-todo.ocupado{pointer-events:none;opacity:.75}
.env-avisos{display:flex;flex-direction:column;gap:10px}
.env-avisos:empty{display:none}
.env-avisos>.notice,.env-cerrar,.env-aviso-cab{margin:0}
.env-cerrar ol{margin:6px 0 0;padding-left:20px;font-size:13px}
.env-cerrar li{margin:0 0 6px;line-height:1.5}
.env-cerrar .form-otra-empresa,.env-en-linea{display:inline-block;margin:0;vertical-align:middle}
.env-cifras{padding:16px 20px}
.env-cifras .cf-v{overflow-wrap:anywhere}
.env-cifras .env-pleg{margin:14px 0 0;padding:0}
.env-barra-liq{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 14px;padding:10px 12px;background:var(--line-soft);border-radius:var(--r-s)}
.env-barra-liq form{margin:0}
.env-barra-liq>button[data-abre]{margin-left:auto}
.env-copiar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)}
.env-copiar-tit{font-size:13px;font-weight:600}
.env-rotulo{display:block;margin:0 0 8px;font-size:13px;font-weight:600}
.env-liq-marco{margin:0 0 14px;overflow-x:auto}
.env-liq{min-width:720px}
.env-liq-grupo td{border-top:1px solid var(--line);background:var(--line-soft);font-size:13px}
.env-liq-aviso td,.env-liq-info td{padding:6px 12px}
.env-liq-aviso .notice{margin:0}
.env-liq-aviso .form-otra-empresa{margin:8px 0 0}
.env-liq-aviso .form-otra-empresa button{white-space:nowrap}
.env-apagado{opacity:.45;cursor:not-allowed}
.env-acc-celda{white-space:nowrap}
.env-acc-celda form{display:inline;margin:0}
.env-acc-form{--n:4}
.env-venta-cobro{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:20px;align-items:start}
.env-venta-form{margin:0}
.env-grupo{min-width:0;margin:0 0 16px;padding:0;border:0}
.env-grupo>legend{margin:0 0 8px;padding:0;font-size:13px;font-weight:600;color:var(--ink-soft)}
.env-precio{width:110px;text-align:right}
/* Precio por calibre en Venta y cobro: la casilla bajo el rótulo; los calibres, sangrados bajo su formato, y el que lleva otro precio, en ámbar. */
.env-pc-casilla{display:flex;margin:0 0 8px;font-size:13.5px;font-weight:600;color:var(--ink)}
.env-pc-aviso{margin:0 0 8px;color:var(--mango-dark)}
table.env-pc-abierta tr.env-pc-grupo td{background:var(--paper)}
table.datos td.env-pc-calibre{padding-left:28px;color:var(--ink-soft)}
.env-precio.env-pc-otro{background:var(--mango-soft);border-color:var(--mango)}
/* En el celular la tabla se aprieta: el precio no baja de lo que pide «18.4286» y la tabla se desliza (table.datos es su propio marco ahí). */
table.env-precio-fmt input.env-precio{min-width:88px}
.env-dl,.env-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 20px;margin:0}
.env-datos{grid-template-columns:repeat(3,minmax(0,1fr))}
.env-campo dt{font-size:12px;font-weight:600;color:var(--ink-soft)}
.env-campo dd{margin:2px 0 0;overflow-wrap:anywhere}
.env-falta{color:var(--mango-dark);font-weight:600}
.env-barra-datos{margin:14px 0}
.env-cobro{min-width:0;margin:0}
.env-cobro-linea{margin:0 0 8px}
.env-estado{margin:10px 0}
.env-cobros{margin:0 0 12px;padding:0;list-style:none}
.env-cobros li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
.env-pleg-caja{margin:10px 0 0;padding:6px 12px;border:1px dashed var(--line);border-radius:var(--r-m)}
.env-pleg-caja>p{margin:6px 0 10px;font-size:13px}
.env-form-linea{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0 0}
.env-nota{margin:10px 0 0;font-size:13px;color:var(--ink-soft)}
.env-cobro .notice{margin:12px 0 0}
.env-ficha .casillas{margin:0 0 14px}
.env-docs form{display:inline;margin:0}
.env-subir{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin:14px 0 0}
.env-subir .fld{margin:0}
.env-subir .btn-zip-todo{margin-left:auto}
.env-retraso{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.env-retraso .acc-check{font-size:13.5px;font-weight:600}
.env-retraso-campos{margin-top:10px}
.env-retraso-det{grid-column:span 3}
@media (max-width:900px){
  .env-venta-cobro{grid-template-columns:minmax(0,1fr)}
  .env-datos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .env-datos{grid-template-columns:minmax(0,1fr)}
  .env-retraso-det{grid-column:auto}
  .env-cifras .cifras-fila{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 0}
  .env-cifras .cf:nth-child(odd){padding-left:0;border-left:0}
  .env-acciones>.btn,.env-acciones>.btn-primary,.env-acciones>.acciones-mas{flex:1 1 auto}
  .env-barra-liq>button[data-abre]{margin-left:0}
}
/* Plantilla de costos: la barra de «Regenerar los N», el selector de envío y la tabla de líneas (lo que antes iban en <style> en línea). La tabla
   es de 8 columnas: por debajo de 800 px el marco se desplaza de lado y nada se recorta. */
.env-plantilla .env-pl-barra{display:flex;justify-content:flex-end;margin:0 0 8px}
.env-plantilla .env-pl-barra form{margin:0}
.env-plantilla .env-pl-agregar{margin-left:auto}
.env-plantilla .env-pl-barra-sel{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:2px 0 12px;font-size:13px}
.env-plantilla .env-pl-selector{display:flex;margin:0}
.env-plantilla .env-pl-selector .ctl-marco{max-width:100%;min-width:0}
.env-plantilla .env-pl-selector .ctl-marco>select{min-width:0;max-width:100%;text-overflow:ellipsis}
.env-plantilla .abierta.recuadro>.panel{margin:0;padding:0;border:0;box-shadow:none;background:none}
.env-plantilla .rec-envios tr.rec-env-sel td{background:var(--mango-soft)}
.env-plantilla .rec-tabla{table-layout:fixed;min-width:800px}
/* En el celular la tabla de las líneas se desliza dentro de su marco (.tabla-scroll solo lo hace en escritorio). */
.env-plantilla .env-pl-scroll{overflow-x:auto}
.env-plantilla .rec-tabla th,.env-plantilla .rec-tabla td{padding-left:8px;padding-right:8px}
.env-plantilla .rec-tabla td:not(.col-acc){white-space:normal}
.env-plantilla .rec-tabla .pill{display:inline-block;white-space:normal;line-height:1.3}
.env-plantilla .rec-tabla td.col-acc{white-space:nowrap}
.env-plantilla .rec-tabla .rec-sub-t{font-size:12px;color:var(--ink-soft);font-weight:400;line-height:1.4;margin-top:2px}
.env-plantilla .rec-tabla tr.rec-fuera td{background:var(--line-soft)}
.env-plantilla .rec-tabla th.num{white-space:normal}
.env-plantilla .rec-tabla tr.rec-bloque-tit th{padding:20px 10px 8px;font-size:13px;letter-spacing:.04em;color:var(--ink);border-bottom:1px solid var(--line);background:none}
.env-plantilla .rec-tabla tr.rec-bloque-tit th span{font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-soft)}
.env-plantilla .rec-tabla tbody:first-of-type tr.rec-bloque-tit th{padding-top:10px}
.env-plantilla table.datos.rec-tabla tbody tr.rec-subtotal td{background:var(--line-soft);font-weight:600;border-bottom:0}
.env-plantilla table.datos.rec-tabla tbody tr.rec-bloque-tit th{background:none}
.env-plantilla .rec-tabla tr.rec-subtotal td .muted{font-weight:400;font-size:12px}
/* Facturas de logística: el envío de cada fila no se parte a mitad de su número. */
.env-logistica .env-lf-envio{white-space:nowrap}
@media (max-width:880px){
  .env-plantilla .rec-tabla{min-width:860px}
}
@media (max-width:520px){
  .env-plantilla .env-pl-selector{flex:1 1 100%}
  .env-plantilla .env-pl-selector .ctl-marco{flex:1 1 100%}
  .env-plantilla .env-pl-selector .ctl-marco .ctl-lab{display:none}
  .env-plantilla .env-pl-selector .ctl-marco>select{flex:1 1 auto}
  .env-plantilla .env-pl-agregar,.env-plantilla .env-pl-agregar>.btn-primary{width:100%;margin-left:0}
  .env-plantilla .env-pl-barra,.env-plantilla .env-pl-barra .btn{width:100%}
}
/* ==== fin op-envios-07nov ==== */

/* ==== op-costos-export-07nov ==== */
/* Costos de exportación (Por envío y Por concepto, _costos_vistas.js). Las pestañas van sobre una barra GET que se envuelve, con «⊞ Más
   columnas» a la derecha; la tabla, en un marco de tarjeta que se desplaza de lado (sin style= en el HTML), y debajo el paginador. Los
   márgenes siguen a .tabs-vista y .panel: 32, 14 y 10 px. La segunda línea de una celda (la semana; destino, vía e incoterm) va en 12 px
   y tinta suave, y el por caja de un envío al que le falta la fruta o la maquila, en tinta suave: es provisional. */
.cex-pagina{min-width:0}
.cex-filtros{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 32px 14px}
.cex-filtros .cex-mas-col{margin-left:auto}
.cex-sem input{width:56px}
.cex-nota{font-size:13px;color:var(--ink-soft)}
.cex-marco{position:relative;margin:0 32px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.cex-envios td small{display:block;margin-top:2px;font-size:12px;font-weight:400;color:var(--ink-soft)}
.cex-suave{color:var(--ink-soft);cursor:help}
.cex-pagina>.paginacion{margin:0 32px 14px;padding-top:0;border-top:0}
.cex-pag-acc{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
/* Las pastillas (ver=) van entre la frase y la tabla, con el margen de la barra. */
.cex-pagina .chips-filtro{margin:0 32px 14px}
/* Por concepto. «A dónde se va cada dólar»: la barra de 30 px con un tramo por bloque. Cada bloque tiene su color (el tramo con fill y la
   muestra de la leyenda con background-color, la regla de barraPartes), todos de los tokens y distintos entre sí; la fruta y la maquila,
   que es el tramo más grande, en verde, y el mango solo en las comisiones, un tramo chico. */
.cex-reparto .tbl-tools{margin-bottom:12px}
.cex-reparto .pb-barra{height:30px;border-radius:6px}
.cex-b-mat{fill:color-mix(in srgb,var(--info-tinta) 40%,var(--card));background-color:color-mix(in srgb,var(--info-tinta) 40%,var(--card))}
.cex-b-fru{fill:var(--verde-vivo);background-color:var(--verde-vivo)}
.cex-b-tra{fill:color-mix(in srgb,var(--mango-dark) 30%,var(--line));background-color:color-mix(in srgb,var(--mango-dark) 30%,var(--line))}
.cex-b-doc{fill:color-mix(in srgb,color-mix(in srgb,var(--terracota) 40%,var(--info-tinta)) 50%,var(--card));background-color:color-mix(in srgb,color-mix(in srgb,var(--terracota) 40%,var(--info-tinta)) 50%,var(--card))}
.cex-b-loc{fill:color-mix(in srgb,var(--terracota) 50%,var(--card));background-color:color-mix(in srgb,var(--terracota) 50%,var(--card))}
.cex-b-ban{fill:color-mix(in srgb,var(--ink-tenue) 45%,var(--card));background-color:color-mix(in srgb,var(--ink-tenue) 45%,var(--card))}
.cex-b-log{fill:color-mix(in srgb,var(--info-tinta) 75%,var(--card));background-color:color-mix(in srgb,var(--info-tinta) 75%,var(--card))}
.cex-b-com{fill:var(--mango);background-color:var(--mango)}
.cex-b-otros{fill:color-mix(in srgb,var(--bosque) 55%,var(--card));background-color:color-mix(in srgb,var(--bosque) 55%,var(--card))}
/* La tabla por concepto: la fila de grupo en papel (el bloque, a qué suma y su %), el subtotal en raya suave y cada concepto con su flecha,
   que gira al abrir (la de la pieza común no sale: la flecha va delante del nombre). El detalle, en rejilla de 240 px como mínimo, con
   raya punteada entre envíos; el monto a la derecha y, debajo del N°, la campaña y de dónde salió en 12 px. */
table.datos.cex-conceptos tbody.cex-grupo th{padding:14px 10px 8px;background:var(--paper);border-bottom:1px solid var(--line);font-size:13px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink);white-space:normal}
table.datos.cex-conceptos tbody.cex-subt th,table.datos.cex-conceptos tbody.cex-subt td{background:var(--line-soft);font-weight:600;color:var(--ink)}
table.datos.cex-conceptos tbody.cex-subt th{font-size:13px;letter-spacing:0;text-transform:none}
.cex-conceptos td.cex-cc-nom{white-space:normal}
.cex-conceptos .fila-abre-btn::after{content:none}
.cex-flecha{display:inline-block;color:var(--ink-soft);transition:transform .15s}
.cex-conceptos [aria-expanded="true"] .cex-flecha{transform:rotate(90deg)}
.cex-conceptos .fila-ficha-caja h4{margin:0;font-size:14px;font-weight:600}
ul.cex-det{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0 22px;margin:0;padding:0;list-style:none}
ul.cex-det>li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line-strong);font-size:13px}
ul.cex-det>li>span{min-width:0}
ul.cex-det small{display:block;margin-top:1px;font-size:12px;color:var(--ink-soft);overflow-wrap:anywhere}
ul.cex-det b{white-space:nowrap;font-variant-numeric:tabular-nums}
.cex-mas{font-size:13px;color:var(--ink-soft)}
@media (prefers-reduced-motion:reduce){.cex-flecha{transition:none}}
@media (max-width:880px){
  .cex-filtros,.cex-marco,.cex-pagina>.paginacion,.cex-pagina .chips-filtro{margin-left:14px;margin-right:14px}
}
/* En el celular cada fila es una tarjeta (t-cards): arriba el N° con su semana y el cliente con su destino, sin rótulo; debajo el costo
   sin IGV, el por caja y la pastilla. Cajas, facturado neto e IGV se esconden (siguen en la computadora). La barra
   pone el buscador y las campañas en su línea, sin «Más columnas»; los campos van en 16 px para que el teléfono no se acerque solo. La
   frase baja a 21 px y las pastillas se deslizan en una sola fila. */
@media (max-width:640px){
  .cex-pagina .frase-estado h2{font-size:21px}
  .cex-pagina .chips-filtro{flex-wrap:nowrap;overflow-x:auto;padding:3px 2px;scrollbar-width:none}
  .cex-marco{background:none;border:0;border-radius:0}
  .cex-filtros>.ctl-buscar,.cex-filtros>.sel-camp{flex:1 1 100%}
  .cex-filtros .cex-mas-col{display:none}
  .cex-filtros .ctl-marco>input{font-size:16px}
  table.datos.t-cards.cex-envios td.cex-sin-movil{display:none}
  table.datos.t-cards.cex-envios td.cex-id,table.datos.t-cards.cex-envios td.cex-cli{justify-content:flex-start;align-items:baseline}
  table.datos.t-cards.cex-envios td.cex-id::before,table.datos.t-cards.cex-envios td.cex-cli::before{content:none}
  table.datos.t-cards.cex-envios td.cex-id small,table.datos.t-cards.cex-envios td.cex-cli small{display:inline;margin:0}
  /* Por concepto: la fila de grupo es un separador a todo el ancho; cada concepto, una tarjeta con su nombre y su Sin IGV arriba y lo demás
     debajo, con su rótulo; el subtotal, otra tarjeta en raya suave, y el detalle abierto, en una columna. */
  table.datos.t-cards.cex-conceptos tbody.cex-grupo tr{margin:18px 0 6px;padding:0;border:0;background:none;box-shadow:none}
  table.datos.t-cards.cex-conceptos tbody.cex-grupo th{display:block;padding:0 4px;border:0;background:none}
  table.datos.t-cards.cex-conceptos tbody>tr.fila-abre{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px}
  table.datos.t-cards.cex-conceptos tr.fila-abre>td{grid-column:1/-1}
  table.datos.t-cards.cex-conceptos tr.fila-abre>td.cex-cc-nom{grid-column:1;grid-row:1;justify-content:flex-start}
  table.datos.t-cards.cex-conceptos tr.fila-abre>td.cex-cc-sin{grid-column:2;grid-row:1;font-weight:600}
  table.datos.t-cards.cex-conceptos tr.fila-abre>td.cex-cc-nom::before,table.datos.t-cards.cex-conceptos tr.fila-abre>td.cex-cc-sin::before{content:none}
  table.datos.t-cards.cex-conceptos tbody.cex-subt tr{background:var(--line-soft);box-shadow:none}
  table.datos.t-cards.cex-conceptos tbody.cex-subt th{display:block;padding:5px 13px;background:none}
  table.datos.t-cards.cex-conceptos tbody.cex-subt td{background:none}
  ul.cex-det{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .cex-filtros,.cex-marco,.cex-pagina>.paginacion,.cex-pagina .chips-filtro{margin-left:10px;margin-right:10px}
}
/* En papel no van las pestañas, la barra ni las pastillas; la tabla sale con las columnas que se ven. En Por concepto salen la barra con su
   leyenda, la tabla y la ficha que esté abierta (las cerradas siguen escondidas). */
@media print{
  .cex-pagina .tabs-vista,.cex-filtros,.cex-pagina .chips-filtro{display:none}
  .cex-marco{margin:0 0 12px}
  .cex-reparto{break-inside:avoid}
  .cex-conceptos tbody.cex-grupo{break-after:avoid}
}
/* ==== fin op-costos-export-07nov ==== */

/* ==== op-proforma-07nov ==== */
/* La barra: el mes y el buscador a la izquierda, «＋ Nueva» empujado a la derecha. En ≤ 880 px se envuelve: el buscador en su línea y
   «＋» a todo el ancho. */
.prof-barra>form{display:flex;margin:0}
.prof-barra .ctl-buscar{flex:0 1 300px;min-width:0}
.prof-barra>.btn-primary{margin-left:auto}

/* La lista, a todo el ancho del contenido (con el menú plegado gana sus 248 px). El marco desplaza de lado si la tabla no cabe: es el
   que mide app.js › filaFichaInit para que la ficha abierta no se vaya de lado. relative: el texto del lector del ⋯ se queda adentro. */
.prof-marco{position:relative;overflow-x:auto;max-width:100%}
.prof-lista td{vertical-align:top}
.prof-lista td.prof-cli{min-width:220px;white-space:normal}
.prof-lista td.prof-cli>b{display:block;font-weight:600;overflow-wrap:anywhere}
.prof-donde{display:block;margin-top:1px;font-size:12.5px;color:var(--ink-soft)}
.prof-lista td[data-monto]{font-weight:600;font-variant-numeric:tabular-nums}
.prof-lista td.prof-os>small{display:block;margin-top:1px;font-size:12.5px}
.prof-suave{color:var(--ink-soft)}
.prof-lista td.col-acc>.btn-mini{margin-right:6px}
/* El separador de cada mes: el nombre en mango, en mayúsculas espaciadas, y cuántas con sus montos en tinta suave. */
.prof-lista tbody.prof-mes td{padding:9px 12px;background:var(--cebra);border-bottom:1px solid var(--line)}
.prof-lista tbody.prof-mes b{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mango-dark)}
.prof-lista tbody.prof-mes span{margin-left:10px;font-size:12.5px;color:var(--ink-soft)}
/* La que se edita: marcada en verde suave y con su ficha cerrada (el formulario va arriba). */
.prof-lista tbody.prof-editando>tr.fila-abre>td{background:var(--ok-soft)}
.prof-nadie{margin:12px 4px 0;color:var(--ink-soft)}

/* La ficha: la frase, el embarque, las líneas, las cuentas, las acciones y quién la preparó, de arriba abajo. */
.prof-det{display:grid;gap:12px;min-width:0}
.prof-det>*{margin:0}
.prof-res{max-width:70ch;font-size:14.5px;line-height:1.5}
.prof-res b{font-weight:600}
.prof-emb{font-size:13px;color:var(--ink-soft);overflow-wrap:anywhere}
ul.prof-lineas{max-width:760px;padding:0;list-style:none;font-size:13.5px}
.prof-lineas>li{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,auto) 110px;gap:12px;align-items:baseline;padding:8px 0;border-bottom:1px dashed var(--line)}
.prof-lineas>li>span{min-width:0;overflow-wrap:anywhere}
.prof-lineas>li>small{font-size:12.5px;color:var(--ink-soft);text-align:right;white-space:nowrap}
.prof-lineas>li>b{font-weight:600;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.prof-lineas>li.prof-grupo{display:block;padding:12px 0 4px;border-bottom:0;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--verde)}
.prof-lineas>li.prof-grupo:first-child{padding-top:0}
.prof-lineas>li.prof-sub{grid-template-columns:minmax(0,1fr) 110px;color:var(--ink-soft)}
.prof-lineas>li.prof-sub>span{text-align:right}
.prof-acc{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.prof-acc form{display:inline;margin:0}
.prof-acc-der{margin-left:auto}
.prof-pie{font-size:12.5px;color:var(--ink-soft)}

/* Nueva y Editar: el formulario abierto entre la barra y la lista, en un ancho de lectura (960 px como mucho). De arriba abajo: el
   cliente, el embarque y las condiciones, lo que se ofrece (una línea por bloque) y los impuestos; el pie con «Guardar» a la izquierda y
   las cuentas en vivo a la derecha. Los márgenes de lado son los de los demás bloques de la página (.panel, .barra-acciones). */
.abierta.recuadro.prof-recuadro{max-width:960px;margin:0 32px 20px}
.prof-tit{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin-bottom:14px}
.prof-tit h3{margin:0;font-family:"Bricolage Grotesque",sans-serif;font-size:17px;font-weight:600;color:var(--ink)}
.prof-tit>span{font-size:12.5px}
.prof-form>.form-grid+.form-grid{margin-top:22px}
.prof-form .form-sec{margin-top:0}
.prof-form>.prof-sec{margin:24px 0 12px}
.prof-form .prof-doble{grid-column:span 2}
.prof-form .fld textarea{resize:vertical}
.prof-ayuda{display:block;margin-top:5px;font-size:12px;color:var(--ink-soft)}
/* Cada línea: (el grupo en Frunort), la descripción ancha, cantidad, unidad, valor y, al final, su total con ✕. */
.prof-linea{display:grid;grid-template-columns:minmax(0,1fr) 96px 110px 120px 150px;gap:10px;align-items:start;padding:10px 0;border-bottom:1px dashed var(--line)}
.prof-linea.prof-con-grupo{grid-template-columns:150px minmax(0,1fr) 96px 110px 120px 150px}
.prof-linea:first-child{padding-top:0}
.prof-linea .fld{min-width:0}
.prof-linea .fld label{white-space:nowrap}
.prof-linea textarea{min-height:44px}
/* 25 px arriba: el alto del rótulo con su margen; 69 en total: el rótulo y el campo. Así el total y ✕ quedan a la altura de los campos. */
.prof-l-fin{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-height:69px;padding-top:25px}
.prof-linea-total{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
/* La línea va en una fila solo si a la descripción le quedan 225 px o más: las pistas fijas suman 516 px con sus espacios (676 con el
   grupo de Frunort). Entre 881 y unos 1,150 px de ventana con el menú abierto no alcanzaba: la descripción se aplastaba y en Frunort la
   línea se salía del recuadro. Se mide el bloque de las líneas y no la ventana, porque con el menú plegado la misma ventana deja 248 px
   más. Más angosto, la descripción va arriba (en Frunort, con el grupo a su izquierda) y cantidad, unidad, valor y total en la fila de
   abajo. El bloque de 900 va después del de 740 (en Frunort manda el suyo) y los dos antes del de 880 px, que deja el celular de a dos. */
.prof-lineas-form{container:prof-lineas-form/inline-size}
@container prof-lineas-form (max-width: 740px){
  .prof-linea{grid-template-columns:repeat(3,minmax(0,1fr)) 150px}
  .prof-linea>.prof-l-desc{grid-column:1/-1}
}
@container prof-lineas-form (max-width: 900px){
  .prof-linea.prof-con-grupo{grid-template-columns:minmax(130px,1fr) minmax(0,1fr) minmax(0,1fr) 150px}
  .prof-con-grupo>.prof-l-desc{grid-column:2/-1}
}
.prof-agregar{margin-top:12px}
.prof-impuestos{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 30px}
.prof-impuestos .acc-check{align-items:flex-start;gap:9px;font-size:13.5px;color:var(--ink)}
.prof-impuestos .acc-check input{flex-shrink:0;margin-top:2px}
.prof-impuestos .acc-check small{display:block;font-size:12.5px;color:var(--ink-soft)}
.prof-pct{display:inline-flex;align-items:center;gap:8px}
.prof-pct>input{width:76px}
.prof-pct>label{font-size:13px;color:var(--ink-soft)}
.prof-form .prof-notas{margin-top:16px}
.prof-notas label>span{font-weight:400}
.prof-pie-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-top:20px;padding-top:14px;border-top:1px solid var(--line-soft)}
.prof-totales{margin-left:auto;text-align:right;font-size:13px;line-height:1.7;color:var(--ink-soft)}
.prof-totales>p{margin:0}
.prof-totales b{margin-left:10px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
/* La cifra grande es la última que cuenta: el total con IGV o, sin IGV, el subtotal. */
.prof-totales .prof-tot-total b,.prof-totales:has(.prof-tot-total[hidden]) .prof-tot-sub b{font-family:"Bricolage Grotesque",sans-serif;font-size:20px}
.prof-tot-detr{max-width:36ch;margin-left:auto;font-size:12.5px;line-height:1.45}

/* ⚙ Datos fijos: los avisos y el formulario en un ancho de lectura (960 px como mucho), con los márgenes de lado de los demás bloques;
   los cuatro paneles uno debajo del otro, cada uno con su .form-grid (a lo ancho, cuatro columnas: la razón social, la dirección, el
   beneficiario, el banco, el N° de cuenta y la cuenta de detracción ocupan dos). El logo en fila: su cuadro de 84 px y, al lado, el
   botón con su ayuda. */
.prof-df{max-width:960px;margin:0 32px 20px}
.prof-df>.notice,.prof-datos>.panel{margin:0 0 16px}
.prof-datos .panel>h3{margin-bottom:14px}
.prof-datos .panel>h3:has(+.ph-sub){margin-bottom:0}
.prof-datos .prof-doble{grid-column:span 2}
.prof-df-nota{margin-top:14px;font-size:12.5px;line-height:1.5}
.prof-logo{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.prof-logo>img,.prof-logo>.av{flex:none;width:84px;height:84px;border-radius:var(--r-m)}
.prof-logo>img{object-fit:contain;padding:6px;border:1px dashed var(--line);background:var(--cebra)}
.prof-logo>.av{--av:84px;font-size:24px}
.prof-logo p{margin-top:6px;font-size:12.5px}
.prof-df-pie{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.prof-df-pie>span{font-size:12.5px}

@media (max-width: 880px){
  .prof-barra .ctl-buscar{flex:1 1 100%}
  .prof-barra .ctl-buscar>input{font-size:16px}
  .prof-barra>.btn-primary{flex:1 1 100%;margin-left:0;justify-content:center;text-align:center}
  /* El formulario en una columna (la regla de .form-grid); cada línea con la descripción arriba y cantidad, unidad, valor y total de a
     dos; las cuentas en su propia línea, a la izquierda. Los campos en 16 px: iOS no acerca la pantalla. */
  .abierta.recuadro.prof-recuadro{margin-left:14px;margin-right:14px}
  .prof-form :is(input,select,textarea){font-size:16px}
  .prof-linea,.prof-linea.prof-con-grupo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .prof-linea>:is(.prof-l-grupo,.prof-l-desc){grid-column:1/-1}
  .prof-l-fin{justify-content:space-between}
  .prof-totales{width:100%;margin-left:0;text-align:left}
  .prof-tot-detr{margin-left:0}
  .prof-pie-form>:is(.btn,.btn-primary){flex:1 1 auto;justify-content:center;text-align:center}
  /* ⚙ Datos fijos en una columna (la regla de .form-grid), con los campos en 16 px y «Guardar» a todo el ancho. */
  .prof-df{margin-left:14px;margin-right:14px}
  .prof-datos :is(input,select){font-size:16px}
  .prof-df-pie>.btn-primary{flex:1 1 100%;justify-content:center;text-align:center}
}
@media (max-width: 520px){
  .abierta.recuadro.prof-recuadro{margin-left:10px;margin-right:10px}
  .prof-df{margin-left:10px;margin-right:10px}
}
/* Celular: la lista en tarjetas, como la maqueta. «N° · monto» arriba, el cliente con su línea, la vigencia y, abajo, la orden a la
   izquierda con 🖨 y ⋯ a la derecha; la fecha no sale (el mes ya la agrupa). El mes es un separador a todo el ancho y la ficha va a todo
   el ancho debajo de su tarjeta (la común). En la ficha, cada línea con la descripción arriba, «cantidad × precio» abajo a la izquierda
   y el total a la derecha; las acciones, a todo el ancho. */
@media (max-width: 640px){
  .prof-panel{padding:0;border:0;background:none;box-shadow:none}
  .prof-marco{overflow-x:visible}
  .prof-lista.datos.t-cards tbody>tr.fila-abre{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n monto" "cli cli" "vig vig" "os acc";gap:3px 12px;padding:12px 14px}
  .prof-lista.datos.t-cards tbody>tr.fila-abre>td{display:block;min-width:0;padding:0}
  .prof-lista.datos.t-cards tbody>tr.fila-abre>td::before{content:none}
  .prof-lista.datos.t-cards tbody>tr.fila-abre>td:empty{display:none}
  .prof-lista.datos.t-cards tbody>tr.fila-abre>td:first-child{grid-area:n;font-size:13px}
  .prof-lista.datos.t-cards tbody>tr.fila-abre>td.prof-fecha{display:none}
  .prof-lista.datos.t-cards tbody>tr.fila-abre>td.prof-cli{grid-area:cli;min-width:0}
  .prof-lista.datos.t-cards tbody>tr.fila-abre>td[data-monto]{grid-area:monto;text-align:right}
  .prof-lista.datos.t-cards tbody>tr.fila-abre>td.prof-vig{grid-area:vig}
  .prof-lista.datos.t-cards tbody>tr.fila-abre>td.prof-os{grid-area:os;align-self:center;padding-top:6px}
  .prof-lista.datos.t-cards tbody>tr.fila-abre>td.col-acc{grid-area:acc;display:flex;align-items:center;justify-content:flex-end;gap:6px;padding-top:6px}
  .prof-lista.datos.t-cards tbody>tr.fila-abre>td.col-acc>.btn-mini{margin-right:0}
  .prof-lista.datos.t-cards tbody.prof-mes>tr{margin:0;padding:14px 2px 6px;border:0;background:none;box-shadow:none}
  .prof-lista.datos.t-cards tbody.prof-mes td{display:block;padding:0;border:0;background:none}
  .prof-lista.datos.t-cards tbody.prof-mes td::before{content:none}
  /* la que se edita: en tarjeta se pinta la tarjeta, no cada celda (como la regla común de .abierta-fila) */
  .prof-lista.datos.t-cards tbody.prof-editando>tr.fila-abre{border-color:var(--verde-2);background:var(--ok-soft)}
  .prof-lista.datos.t-cards tbody.prof-editando>tr.fila-abre>td{background:transparent}
  .prof-lineas>li{grid-template-columns:minmax(0,1fr) auto;gap:2px 12px}
  .prof-lineas>li>span{grid-column:1/-1}
  .prof-lineas>li>small{grid-column:1;text-align:left;white-space:normal}
  .prof-lineas>li>b{grid-column:2}
  .prof-lineas>li.prof-sub{grid-template-columns:minmax(0,1fr) auto}
  .prof-lineas>li.prof-sub>span{grid-column:1;text-align:left}
  .prof-acc>:is(a,form,.prof-acc-der){flex:1 1 auto}
  .prof-acc :is(.btn,.btn-primary){width:100%;justify-content:center;text-align:center}
  .prof-acc-der{margin-left:0}
}
/* ==== fin op-proforma-07nov ==== */

/* ==== op-ordenes-servicio-07nov ==== */
/* La ficha de arriba: cabecera, riel y «Lo que toca ahora» en un solo panel. Los botones y el riel son piezas comunes; aquí solo el
   espacio entre ellos y el recuadro papel. */
.osv-cab .camino-marco{margin-top:20px}
.osv-cab .lf-acciones form{display:inline-flex}
.osv-ahora{margin-top:18px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper)}
.osv-ahora>small{display:block;font-size:12px;font-weight:600;color:var(--ink-soft)}
.osv-ahora>b{display:block;margin-top:2px;font-size:15px;font-weight:700;color:var(--ink)}
.osv-ahora>p{margin:4px 0 0;font-size:14px;color:var(--ink-soft)}
.osv-ahora form{margin:0}
.osv-ahora>form,.osv-ahora>.osv-enlace{margin-top:12px}
.osv-ahora>form+form{margin-top:10px}
.osv-ahora .osv-enlace{margin-bottom:0;font-size:14px}
.osv-ahora .osv-grupo-cal{margin-top:10px}
.osv-ahora .osv-grupo-cal>small{display:block;font-size:12px;font-weight:600;color:var(--ink-soft)}
.osv-calibres{margin:10px 0 0}
.osv-grupo-cal .osv-calibres{margin-top:4px}
.osv-empaque{margin-top:14px}
.osv-empaque-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:12px}
.osv-cambiada{color:var(--mango-dark);font-weight:600}
.osv-pie{margin:0 0 10px;font-size:12px;color:var(--ink-soft)}
/* Lo que pide, su historia y el cliente: tarjetas por formato, pares rótulo y valor, y las dos columnas de abajo. */
.osv-pide .ph-sub{margin-bottom:12px}
.osv-formatos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.osv-formato{min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper)}
.osv-formato h4{margin:0;font-size:15px;font-weight:700;color:var(--ink)}
.osv-cal{margin:2px 0 0;font-size:13px;color:var(--ink-soft)}
.osv-tarifa{margin:10px 0 0;font-size:13px;color:var(--ink)}
.osv-real{margin-top:10px}
.osv-real>small{display:block;margin-bottom:4px;font-size:12px;font-weight:600;color:var(--ink-soft)}
.osv-pares{display:grid;grid-template-columns:minmax(96px,max-content) minmax(0,1fr);gap:6px 14px;margin:10px 0 0;font-size:14px}
.osv-pares dt{color:var(--ink-soft);font-size:13px}
.osv-pares dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.osv-linea{margin:12px 0 0;font-size:14px;color:var(--ink-soft)}
.osv-linea+.osv-linea{margin-top:6px}
.osv-linea.osv-falta{color:var(--mango-dark)}
.osv-vacio{margin:0;font-size:14px;color:var(--ink-soft)}
.osv-dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.osv-dos>.panel{margin:0;min-width:0}
.osv-dos h3{margin-top:0}
@media (max-width: 640px){
  .osv-cab .lf-acciones,.osv-ahora form{width:100%}
  .osv-cab .lf-acciones>*,.osv-ahora form .btn,.osv-ahora form .btn-primary{flex:1 1 100%;justify-content:center;text-align:center}
  .osv-cab .lf-acciones form .btn{width:100%}
  .osv-empaque-campos{grid-template-columns:1fr 1fr}
}
@media (max-width: 1100px){
  .osv-dos{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 640px){
  .osv-formatos{grid-template-columns:minmax(0,1fr)}
}
/* Nueva y Editar: el formulario en un panel y cada formato de caja en su tarjeta (rejilla .fld de 3 columnas; 2 en el celular). */
.osv-form{max-width:1100px}
.osv-form>h3{margin:20px 0 8px}
.osv-form>.ph-sub{margin:0 0 12px}
.osv-form .osv-ancho{grid-column:span 2}
.osv-aviso{margin-top:4px;font-size:12px;color:var(--ink-soft)}
.osv-aviso:empty{display:none}
.osv-formato-campos{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px;min-width:0;margin:0 0 12px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper)}
.osv-formato-campos legend{padding:0 6px;font-size:14px;font-weight:700;color:var(--ink)}
.osv-quitar{position:absolute;top:-14px;right:12px}
.osv-agregar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:4px}
.osv-nota{font-size:12px;color:var(--ink-soft)}
@media (max-width: 880px){
  .osv-form .osv-ancho{grid-column:auto}
}
@media (max-width: 640px){
  .osv-formato-campos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .osv-formato-campos input{font-size:16px}
}
/* La campaña y ⚙ Datos de la etiqueta: la frase con las campañas a la derecha, una tabla por emisora que se desplaza de lado con su primera
   columna fija, y los datos de la etiqueta con su lista plegada. */
.osv-campania-cab{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px 16px;margin-bottom:6px}
.osv-campania-frase{flex:1 1 360px;min-width:0}
.osv-campania-chips{margin-left:auto;max-width:100%}
.osv-campania-panel{margin-bottom:16px}
.osv-campania-panel h3{margin:0 0 10px}
.osv-campania-marco{overflow-x:auto;-webkit-overflow-scrolling:touch}
.osv-campania-marco:focus-visible{outline:2px solid var(--mango-dark);outline-offset:2px}
table.datos.osv-campania{min-width:560px}
table.datos.osv-campania th[scope="row"]{position:sticky;left:0;z-index:1;padding:11px 10px;background:var(--card);border-bottom:1px solid var(--line-soft);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);text-align:left;white-space:nowrap}
table.datos.osv-campania .osv-no-cuentan{color:var(--ink-soft);font-style:italic}
table.datos.osv-campania .num{white-space:nowrap}
.osv-etiqueta .osv-corregir{margin-top:14px}
.osv-etiqueta .osv-ancho{grid-column:1/-1}
.osv-codigos{margin-top:14px}
.osv-codigos summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--ink)}
.osv-codigos ul{margin:8px 0 0;padding:0;list-style:none;max-height:320px;overflow-y:auto;font-size:13px;color:var(--ink-soft)}
.osv-codigos li{padding:3px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.osv-codigos li b{color:var(--ink)}
@media (max-width: 640px){
  .osv-campania-chips{margin-left:0}
}
/* ==== fin op-ordenes-servicio-07nov ==== */

/* ==== adm-movilidad-07nov ==== */
/* Planillas: la lista (el mes en un GET) y la ficha de cada una. Todo con tokens; letra de 12 px o más. */
.mov-mes{display:flex;margin:0}
.mov-ficha .mov-t{margin:22px 0 10px;font-family:"Bricolage Grotesque",sans-serif;font-size:16px;font-weight:600}
.mov-nada{margin:0;font-size:13.5px;color:var(--ink-soft)}
.mov-vacia{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.mov-vacia p{margin:0;color:var(--ink-soft)}
.mov-ficha .camino .paso.falta>span:not(.solo-lector){color:var(--mango-dark)}
/* El día frente al tope: una barra por día; esta planilla en el color fuerte, las otras en el mismo, más claro. */
.mov-dia{margin:0 0 14px}
.mov-dia-txt{margin:6px 0 0;font-size:13.5px;color:var(--ink-soft)}
.mov-dia-txt b{font-weight:600;color:var(--mango-dark)}
.mov-esta-ok{fill:var(--verde-2);background-color:var(--verde-2)}
.mov-esta-pasa{fill:var(--mango);background-color:var(--mango)}
.mov-otra-ok{fill:color-mix(in srgb,var(--verde-2) 45%,var(--card));background-color:color-mix(in srgb,var(--verde-2) 45%,var(--card))}
.mov-otra-pasa{fill:color-mix(in srgb,var(--mango) 45%,var(--card));background-color:color-mix(in srgb,var(--mango) 45%,var(--card))}
.mov-falta{font-weight:600;color:var(--mango-dark)}
/* Ponerle fecha: el aviso con un campo de fecha por viaje sin ella. */
.mov-pon{margin-top:18px}
.mov-ponfecha{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px}
.mov-pf{display:flex;flex-direction:column;gap:2px}
.mov-pf small{font-size:12px;color:var(--ink-soft)}
/* Así sale para firmar: la hoja en miniatura y, a su lado, los botones en columna con Su historia. */
.mov-doc-g{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:20px;align-items:start}
.mov-hoja{max-width:560px;padding:16px 18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow);font-size:12px}
.mov-hoja p{margin:0}
.mov-hoja-t{font-weight:700;text-align:center;text-transform:uppercase}
.mov-hoja-e{margin-top:2px;text-align:center;color:var(--ink-soft)}
.mov-hoja-d{display:grid;gap:2px;margin:12px 0 8px}
.mov-hoja-d>div{display:flex;gap:8px}
.mov-hoja-d dt{flex:0 0 76px;font-weight:600}
.mov-hoja-d dd{margin:0;min-width:0;overflow-wrap:anywhere}
.mov-hoja-tb{width:100%;border-collapse:collapse}
.mov-hoja-tb th,.mov-hoja-tb td{padding:3px 5px;border:1px solid var(--line);text-align:left;font-size:12px;overflow-wrap:anywhere}
.mov-hoja-tb th{background:var(--paper);font-weight:600}
.mov-hoja-tb .num{text-align:right;white-space:nowrap}
.mov-hoja-tb tfoot td{font-weight:700;background:var(--paper)}
.mov-hoja .mov-hoja-firma{margin-top:26px;padding-top:4px;border-top:1px solid var(--ink-soft);text-align:center;color:var(--ink-soft)}
.mov-botones{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.mov-botones form{margin:0;display:flex}
.mov-botones form>button{flex:1}
.mov-historia{margin-top:12px}
.mov-historia h4{margin:0 0 8px;font-size:13.5px;font-weight:600}
@media (max-width:1100px){
  .mov-doc-g{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .mov-col-motivo{display:none}
  .mov-hoja-d>div{flex-direction:column;gap:0}
  .mov-botones{width:100%}
}
/* Nueva y Editar: el formulario en el lugar de la ficha. */
.mov-form{margin:0}
.mov-form-cab{margin:0 0 14px}
.mov-form-cab h2{margin:0;font-family:"Bricolage Grotesque",sans-serif;font-size:20px;font-weight:600}
.mov-form-cab p{margin:2px 0 0;font-size:13.5px;color:var(--ink-soft)}
.mov-form .mov-trab{grid-column:span 2}
.mov-form .mov-glosa{margin-top:14px}
.mov-dni-nota{display:block;margin-top:4px;font-size:12px;color:var(--ink-soft)}
.mov-form h3{margin:18px 0 8px}
.mov-form .mov-frec{margin-top:14px}
.mov-frec-lista{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.mov-tabla{overflow-x:auto}
.mov-form #mvItems input[name=ifecha]{min-width:140px}
.mov-form #mvItems input[name=motivo]{width:100%;min-width:170px}
.mov-form #mvItems input[name=ruta]{width:100%;min-width:190px}
.mov-form #mvItems input[name=monto]{width:92px}
.mov-agregar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.mov-total{margin:0;font-size:15px}
.mov-pasa{color:var(--mango-dark)}
.mov-pasa b{color:var(--mango-dark)}
@media (max-width:640px){
  .mov-form .mov-trab{grid-column:1 / -1}
  .mov-form input{font-size:16px}
  .mov-form #mvItems,.mov-form #mvItems tbody{display:block}
  .mov-form #mvItems thead{display:none}
  .mov-form #mvItems tr{display:grid;grid-template-columns:minmax(0,1fr) 110px auto;gap:8px;padding:12px 0;border-bottom:1px solid var(--line)}
  .mov-form #mvItems td{display:block;padding:0;border:0}
  .mov-form #mvItems td:nth-child(1){grid-column:1;grid-row:1}
  .mov-form #mvItems td:nth-child(4){grid-column:2;grid-row:1}
  .mov-form #mvItems td:nth-child(5){grid-column:3;grid-row:1}
  .mov-form #mvItems td:nth-child(2){grid-column:1 / -1;grid-row:2}
  .mov-form #mvItems td:nth-child(3){grid-column:1 / -1;grid-row:3}
  .mov-form #mvItems input[name=ifecha],.mov-form #mvItems input[name=motivo],.mov-form #mvItems input[name=ruta],.mov-form #mvItems input[name=monto]{width:100%;min-width:0}
}
/* Trabajadores: el mes de la persona en un calendario (7 columnas, 3 px entre días) y sus viajes de siempre. ⚙ Reglas: botones de los paneles. */
.mov-acc{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
.mov-acc .reglas-nota{margin:0}
.mov-cal{max-width:520px}
.mov-cal-sem,.mov-cal-dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;margin:0;padding:0;list-style:none}
.mov-cal-sem{margin-bottom:3px}
.mov-cal-sem span{text-align:center;font-size:12px;font-weight:600;color:var(--ink-soft)}
.mov-cal-d{min-height:54px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--card)}
.mov-cal-d.dom{background:var(--paper)}
.mov-cal-d.si{background:var(--verde-suave)}
.mov-cal-d.pasa{background:var(--mango)}
.mov-cal-d.hoy{border:2px solid var(--ink)}
.mov-cal-d>a,.mov-cal-d>span{display:flex;flex-direction:column;justify-content:space-between;gap:2px;height:100%;padding:4px 5px;color:inherit;text-decoration:none}
.mov-cal-d b{font-size:12px;font-weight:600;color:var(--ink-soft)}
/* Sobre el verde del día con viajes y el mango del que pasa el tope, el número va en tinta plena: en tinta suave no llega a 4.5 de contraste. */
.mov-cal-d.si b,.mov-cal-d.pasa b{color:var(--ink)}
.mov-cal-d>a span,.mov-cal-d>span span{font-size:12px;font-weight:600;text-align:right}
.mov-cal-d>a:hover{text-decoration:underline}
.mov-cal-vacio{min-height:54px}
.mov-siempre{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.mov-siempre li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.mov-siempre li>div{display:flex;flex-direction:column;min-width:0}
.mov-siempre b{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.mov-siempre span{font-size:12.5px;color:var(--ink-soft)}
.mov-siempre em{font-style:normal;font-weight:600;white-space:nowrap}
@media (max-width:880px){
  .mov-cal-d{min-height:0;aspect-ratio:1/1}
  .mov-cal-vacio{min-height:0;aspect-ratio:1/1}
}
/* ==== fin adm-movilidad-07nov ==== */

/* ==== adm-clientes-07nov ==== */
/* Clientes, «Papel sereno» (Cuentas y deuda: _clientes_cuentas.js). La frase con el Año a su derecha; en el celular el Año baja debajo de
   la frase y la frase va en 21 px. */
.cli-cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin:4px 32px 22px}
.cli-cab>.frase-estado{flex:1 1 420px;min-width:0;margin:0}
.cli-anio{display:flex;align-items:center;gap:8px;flex:none;margin:0}
.cli-anio label{font-size:13px;font-weight:600;color:var(--ink-soft)}

/* La lista: el nombre con sus otras formas debajo; las cifras a la derecha y, en Por cobrar, la deuda con su barra (vencido y por vencer, a
   la escala del mayor saldo). La leyenda de la barra va a la derecha del título del panel. */
.cli-marco{overflow-x:auto}
.cli-tabla .cli-sub{display:block;margin-top:2px;font-size:12.5px;font-weight:400;color:var(--ink-soft)}
.cli-tabla .cli-mal{color:var(--terracota)}
.cli-tabla .cli-cobrar{min-width:170px}
.cli-tabla .cli-barra{margin-top:6px}
.cli-tabla .cli-c-parte{width:170px}
.cli-tabla .cli-parte-v{display:flex;align-items:center;gap:8px}
.cli-tabla .cli-parte-v>svg{flex:1 1 auto;min-width:60px}
.cli-tabla .cli-parte-v>.cli-sub{flex:none;min-width:48px;margin:0}
.cli-parte{fill:var(--verde-2);background-color:var(--verde-2)}
.cli-tabla.datos tbody tr.cli-subtotal td{background:var(--line-soft)}
.cli-tabla .cli-grupo{margin-left:6px;vertical-align:middle;background:var(--info-soft);color:var(--info-tinta)}
.cli-ley{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--ink-soft)}
.cli-ley>span{display:inline-flex;align-items:center;gap:6px}
.cli-ley .muestra{display:inline-block;width:10px;height:10px;border-radius:3px}

/* Debajo de la lista: lo que queda por cobrar fuera del periodo y los plegados de quien no está en ella (la cuenta, en tinta suave). */
.cli-fuera{margin:-8px 32px 20px;font-size:14px;color:var(--ink-soft)}
.cli-fuera b{color:var(--ink)}
.cli-fuera a{margin-left:4px;font-weight:600}
details.cli-pleg>summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--ink)}
details.cli-pleg>summary .cli-n{font-weight:400;color:var(--ink-soft)}
.cli-lista{display:grid;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.cli-lista>li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-size:14px;overflow-wrap:anywhere}
.cli-lista>li>small{font-size:13px;color:var(--ink-soft)}
.cli-pie{margin:12px 0 0}

/* El Directorio (importadores.js): «＋ Nuevo cliente» a la derecha de la frase y su alta en un recuadro debajo; el buscador filtra en el
   navegador. Cada ficha se abre en su fila (filaConFicha), en columnas que se acomodan solas (una en el celular); al final de la misma
   tabla, los clientes con envíos sin ficha bajo su título. */
.cli-cab>.btn-primary{flex:none}
.abierta.recuadro.cli-alta{margin:0 32px 20px}
.cli-nota{font-size:12.5px;color:var(--ink-soft)}
.cli-ancho{grid-column:1/-1}
.cli-subtit{margin:16px 0 8px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mango-dark)}
.cli-editar>.cli-subtit:first-child{margin-top:0}
.cli-dir-barra>.cli-excel{margin-left:auto}
.cli-nadie{margin:-12px 32px 18px;font-size:14px;color:var(--ink-soft)}
.cli-dir .cli-sub{display:block;margin-top:2px;font-size:12.5px;font-weight:400;color:var(--ink-soft)}
.cli-dir td.cli-c-cli{min-width:220px;white-space:normal}
.cli-dir td.cli-c-dest,.cli-dir td.cli-c-acc{white-space:normal}
.cli-dir td.cli-c-acc>a+a{margin-left:6px}
.cli-dir.datos tbody.cli-sinficha-tit td{padding-top:14px;background:var(--line-soft);font-weight:600;color:var(--ink)}
.cli-ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px 22px;align-items:start}
.cli-ficha h4{margin:0 0 10px;font-size:14px;font-weight:700;color:var(--ink)}
.cli-datos{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px 18px;margin:0}
.cli-datos>div{min-width:0}
.cli-datos dt,.cli-rotulo{margin:0 0 3px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.cli-datos dd{margin:0;font-size:14px;color:var(--ink);overflow-wrap:anywhere;white-space:pre-line}
.cli-bloque{margin:0 0 14px}
.cli-bloque:last-child{margin-bottom:0}
.cli-bloque-tit{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px}
.cli-valor{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere;white-space:pre-line}
.btn.cli-copiar{padding:4px 10px;font-size:12px;white-space:nowrap}
.cli-ficha-pie{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding-top:12px;border-top:1px solid var(--line-soft)}
.cli-ficha-pie>form{margin:0}

/* Por cobrar de Frunort y su historial (_por_cobrar_vista.js): «🕘 Historial de cobros» a la derecha de la frase; los tramos en su panel;
   la lista agrupada por contraparte (cada grupo con su fila de título) y, en la celda de cada factura, «✓ Cobrado» y el ✎, que abre su
   fila propia. El historial lleva la vuelta arriba y Contraparte y Mes a la derecha de la frase. */
.cli-cab>a.btn{flex:none}
.cli-tramos .pb-barra{margin-top:4px}
.cli-cobrar .cli-sub,.cli-hist .cli-sub{display:block;margin-top:2px;font-size:12.5px;font-weight:400;color:var(--ink-soft)}
.cli-cobrar .cli-mal{color:var(--terracota)}
.cli-cobrar.datos tbody tr.cli-grupo-fila td{padding-top:14px;background:var(--line-soft);color:var(--ink)}
.cli-cobrar .cli-grupo-fila .cli-n{font-weight:400;color:var(--ink-soft)}
.cli-cobrar td.col-acc{white-space:nowrap;text-align:right}
.cli-cobrar td.col-acc>form.cli-cobro{display:inline-block;margin:0 4px 0 0}
.cli-cobrar .acc-form{--n:2}
.cli-adel{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0}
.cli-adel .muted{font-size:12.5px}
.cli-hist td.col-acc>form{margin:0}
.cli-volver{display:inline-flex;align-items:center;gap:6px;margin:0 32px 12px;font-size:13.5px;color:var(--ink-soft);text-decoration:none}
.cli-volver:hover{color:var(--verde)}
.cli-hist-filtros{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;flex:none;margin:0}
.cli-hist-filtros label{font-size:13px;font-weight:600;color:var(--ink-soft)}
.cli-filtro .pill{gap:6px}
.cli-filtro .pill a{color:inherit;font-weight:700;text-decoration:none}

/* Estado de cuenta de Frunort (estado_cuenta.js): las contrapartes en pastillas arriba, Desde y Hasta a la derecha de la frase y la tabla;
   cada nota de crédito o débito en su fila, sobre el papel de la página (la fila no hereda la letra chica de .cli-nota del Directorio).
   Debajo, la numeración por serie: lo que falta en mango oscuro y una pastilla por tramo. */
.cli-rango{flex:none;margin:0}
.cli-estado .cli-sub{display:block;margin-top:2px;font-size:12.5px;font-weight:400;color:var(--ink-soft)}
.cli-estado.datos tbody tr.cli-nota{font-size:inherit;color:inherit}
.cli-estado.datos tbody tr.cli-nota td{background:var(--paper)}
.cli-ajuste{font-size:12.5px;color:var(--ink-soft)}
.cli-numer>li>small{flex:1 1 100%}
.cli-falta{color:var(--mango-dark)}
.cli-tramos-f{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.cli-tramos-f>.cli-n{font-size:13px;color:var(--ink-soft)}
.cli-nada{margin:12px 0 0;font-size:14px;color:var(--ink-soft)}

@media (max-width:880px){
  .cli-cab{flex-direction:column;align-items:stretch;margin:4px 14px 18px}
  .cli-cab>.frase-estado{flex:none}
  .cli-cab .frase-estado h2{font-size:21px}
  .cli-anio .ctl{font-size:16px}
  .cli-fuera{margin:-8px 14px 18px}
  .cli-cab>.btn-primary{align-self:flex-start}
  .abierta.recuadro.cli-alta{margin:0 14px 18px}
  .cli-nadie{margin:-12px 14px 16px}
  .cli-ficha{grid-template-columns:minmax(0,1fr)}
  .cli-cab>a.btn{align-self:flex-start}
  .cli-volver{margin:0 14px 10px}
  .cli-hist-filtros .ctl{font-size:16px}
  .cli-rango{align-self:flex-start;max-width:100%}
  .cli-rango .ctl-marco>input{font-size:16px}
}
/* En tarjetas (t-cards): la cifra a la derecha de su rótulo, y la barra y lo que va debajo, a todo el ancho. */
@media (max-width:640px){
  .cli-tabla td.cli-cobrar{flex-wrap:wrap}
  .cli-tabla .cli-cobrar>.cli-barra,.cli-tabla .cli-cobrar>.cli-mas{flex:1 1 100%;text-align:right}
  .cli-tabla .cli-cifra{text-align:right}
  .cli-tabla .cli-c-parte{width:auto}
  .cli-tabla .cli-parte-v{flex:0 1 200px}
  .cli-dir .cli-v{text-align:right}
  .cli-dir td.cli-c-acc{justify-content:flex-start;gap:6px}
  .cli-dir td.cli-c-acc>a+a{margin-left:0}
  table.datos.t-cards.cli-dir tbody.cli-sinficha-tit tr{padding:12px 0 2px;border:0;background:none;box-shadow:none}
  table.datos.t-cards.cli-dir tbody.cli-sinficha-tit td{background:none}
  .cli-cobrar .cli-v,.cli-hist .cli-v{text-align:right}
  table.datos.t-cards.cli-cobrar tbody tr.cli-grupo-fila{margin:14px 0 6px;padding:0;border:0;background:none;box-shadow:none}
  table.datos.t-cards.cli-cobrar tbody tr.cli-grupo-fila td{padding:2px 4px;background:none}
  table.datos.t-cards.cli-cobrar td.col-acc{flex-wrap:wrap;gap:6px}
  .cli-cobrar td.col-acc>form.cli-cobro{margin:0}
  .cli-estado .cli-v{text-align:right}
  table.datos.t-cards.cli-estado tbody tr.cli-nota{background:var(--paper)}
  table.datos.t-cards.cli-estado tbody tr.cli-nota td{background:none}
}
/* ==== fin adm-clientes-07nov ==== */

/* ==== adm-facturas-07nov ==== */
/* Facturas (Administración), «Papel sereno»: la frase con el mes a su lado, Por mirar con sus campos en línea, la barra, una fila por
   factura agrupada por mes y la ficha que se abre debajo. Lo que falta va en terracota y lo provisional en tinta suave. */
.fac-cabeza{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;margin:4px 32px 22px}
.fac-cabeza .frase-estado{flex:1 1 420px;min-width:0;margin:0}
.fac-mes-form{display:flex;align-items:center;gap:8px;margin:0}
.fac-sub{display:block;margin-top:1px;font-size:12px;font-weight:400}
.fac-suave{color:var(--ink-soft)}
.fac-falta{color:var(--terracota);font-weight:600}

/* Por mirar: el campo y su «Guardar» en la misma línea; con varias líneas, una por formato. */
.fac-mirar .por-mirar .t a{font-weight:600}
.fac-linea{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:0}
.fac-linea .fld{display:flex;align-items:center;gap:6px;margin:0;min-width:0}
.fac-linea .fld>label{margin:0;font-size:12px;font-weight:600;color:var(--ink-soft);white-space:nowrap}
.fac-linea .fld>input{width:150px}
.fac-linea-fila{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 14px;padding-bottom:12px;border-bottom:1px dashed var(--line)}
.fac-linea-fila:last-child{padding-bottom:0;border-bottom:0}
.fac-linea-fila>span{font-size:13.5px}

/* La barra: las pastillas de estado y de cliente, el buscador y, a la derecha, las columnas y el Excel. */
.fac-barra{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 32px 14px}
.fac-buscar{display:flex;flex:0 1 300px;min-width:0;margin:0}
.fac-buscar .ctl-buscar{flex:1 1 auto;min-width:0}
.fac-buscar .ctl-buscar input{width:100%}
.fac-barra-der{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}

/* La lista: el mes en una franja de papel; lo demás de cada celda, debajo y en suave. */
.fac-marco{overflow-x:auto;max-width:100%}
.fac-tabla td{vertical-align:top}
.fac-tabla td.num{text-align:right}
.fac-tabla td[data-label="Factura"]{min-width:140px}
.fac-tabla tbody.fac-mes th{padding:9px 10px;background:var(--paper);border-bottom:1px solid var(--line);font-size:13px;font-weight:700;letter-spacing:0;text-transform:none;text-align:left;color:var(--ink);white-space:normal}
.fac-mes-n{font-weight:400;color:var(--ink-soft)}
.fac-recorte{margin:12px 0 0;font-size:13.5px;color:var(--ink-soft)}
.fac-vacio{white-space:normal}
.fac-vacio p{margin:0 0 10px}

/* La ficha: lo que se cobró y de dónde viene a la izquierda, los montos a la derecha y las acciones abajo. */
.fac-ficha{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px 26px}
.fac-h{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
ul.fac-lineas{list-style:none;margin:0;padding:0}
ul.fac-lineas>li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
ul.fac-lineas>li:last-child{border-bottom:0}
.fac-linea-txt{flex:1 1 220px;min-width:0}
.fac-linea-acc{display:inline-flex;align-items:center;gap:4px}
.fac-linea-acc form{margin:0}
.fac-ficha-izq>p{margin:10px 0 0;font-size:13px}
.fac-viene{color:var(--ink-soft);overflow-wrap:anywhere}
.fac-sunat{display:block;padding:8px 10px;background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--r-s);font-size:12.5px;overflow-wrap:anywhere}
.fac-linea-txt .fac-sunat{margin-top:6px}
.fac-ficha-der .recibo{max-width:none}
.fac-acc{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:12px;border-top:1px solid var(--line-soft)}
.fac-acc form{margin:0}
.fac-acc-der{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto}
.fac-candado,.fac-no-borra{font-size:12.5px;color:var(--ink-soft)}

/* Venta de materiales: «＋ Registrar» al lado del mes, su recuadro con el total del alta, el selector de material y una línea por material
   (en la celda y en la ficha), con dónde quedó en la liquidación de su envío. */
.fac-cabeza-der{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px}
.fac-nuevo{margin:0 32px 18px}
.fac-nuevo-t{margin:0 0 2px;font-size:18px;font-weight:600;color:var(--ink)}
.fac-nuevo>p.fac-suave{margin:0 0 14px;font-size:13px}
.fac-total-alta{margin:10px 0 0;font-size:13.5px;font-weight:600;color:var(--ink)}
.fac-tipom{margin:0}
.fac-material{display:block}
.fac-tabla td[data-label="Material"]{min-width:180px}
.fac-tabla td[data-label="Material"] .fac-material+.fac-material{margin-top:6px}
.fac-ok{color:var(--verde)}
.fac-cobro-banco{font-size:13px;color:var(--ink-soft)}

/* Notas de crédito y débito: una fila por nota con sus acciones al final, el panel de cómo quedó cada factura y, en el alta, lo que se
   encontró bajo «Factura que corrige» (verde) o el aviso de que no está (mango oscuro). */
.fac-notas td,.fac-saldos td{vertical-align:top}
.fac-notas td.num,.fac-saldos td.num{text-align:right}
.fac-notas td[data-label="Corrige a"]{min-width:120px}
.fac-nota-ref{margin:4px 0 0;font-size:12.5px;font-weight:600}
.fac-aviso{color:var(--mango-dark)}

@media (max-width:880px){
  .fac-cabeza{flex-direction:column;align-items:stretch;margin:4px 14px 18px}
  /* en columna, la base de 420 px de la frase se volvía su alto y dejaba un hueco antes de la barra (captura del cierre, 390 px) */
  .fac-cabeza .frase-estado{flex:0 0 auto}
  .fac-barra{margin:0 14px 14px}
  .fac-ficha{grid-template-columns:minmax(0,1fr)}
  .fac-nuevo{margin:0 14px 16px}
}
@container lf-ficha (max-width:760px){
  .fac-ficha{grid-template-columns:minmax(0,1fr)}
}
/* Celular: las pastillas se deslizan de lado, el buscador va en su línea y «⊞ Más columnas» no sale; el mes, a todo el ancho de la lista. */
@media (max-width:640px){
  .fac-barra .chips-filtro{flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto}
  .fac-barra .chips-filtro .chip{flex-shrink:0}
  .fac-buscar{flex:1 1 100%}
  .fac-barra [data-toggle-cols]{display:none}
  .fac-barra-der{margin-left:0}
  .fac-marco{overflow-x:visible}
  .fac-tabla .col-sec{display:none}
  table.datos.t-cards.fac-tabla tbody.fac-mes tr{margin:14px 0 6px;padding:0;border:0;background:none;box-shadow:none}
  table.datos.t-cards.fac-tabla tbody.fac-mes th{display:block;padding:0 4px;border:0;background:none}
  .fac-acc>.btn{flex:1 1 calc(50% - 4px);text-align:center}
  .fac-acc-der{flex:1 1 100%;margin-left:0}
  .fac-mirar .por-mirar .acciones{flex-wrap:wrap}
  .fac-cabeza .frase-estado h2{font-size:21px}
  .fac-tipom{flex:1 1 100%}
  .fac-tipom .ctl{width:100%}
  .fac-tabla td[data-label="Material"]{min-width:0}
}
/* Por mirar en el celular: el campo y su botón debajo del texto, a todo el ancho, con el campo en 16 px (el teléfono no se acerca). */
@media (max-width:520px){
  .fac-cabeza{margin:4px 10px 18px}
  .fac-barra{margin:0 10px 14px}
  .fac-linea{width:100%}
  .fac-linea .fld{flex:1 1 100%;flex-direction:column;align-items:stretch}
  .fac-linea .fld>input{width:100%;font-size:16px}
  .fac-linea .btn-primary{flex:1 1 100%}
  /* «＋ Registrar una factura» a todo el ancho, debajo del mes. */
  .fac-cabeza-der>.fac-registrar{flex:1 1 100%;text-align:center}
  .fac-nuevo{margin-left:10px;margin-right:10px}
}
/* ==== fin adm-facturas-07nov ==== */

/* ==== adm-marcas-07nov ==== */
.mr-mirar{color:var(--mango-dark);font-weight:600}
.mr-vig{margin-top:18px}
.mr-vig-fechas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 16px;margin:6px 0 0;font-size:12.5px;color:var(--ink-soft)}
.mr-vencio{color:var(--bad)}
.mr-vig-va{fill:var(--verde-suave);background-color:var(--verde-suave)}
.mr-vig-falta{fill:transparent;background-color:transparent}
.mr-vig-aviso{fill:var(--mango-soft);background-color:var(--mango-soft)}
.mr-vig-vencida{fill:var(--mal-soft);background-color:var(--mal-soft)}
.mr-acciones{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mr-acciones form{margin:0}
.mr-nota{margin:10px 0 0;font-size:12.5px;color:var(--ink-soft)}
.mr-ayuda{display:block;margin-top:4px;font-size:12.5px;color:var(--ink-soft)}
.mr-cab .abierta.recuadro{margin-top:16px}
.mr-t{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--ink-soft)}
.mr-papeles{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px}
.mr-cert{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.mr-cert>.btn,.mr-cert .mr-subir .btn{align-self:flex-start}
.mr-cert>form{margin:0}
.mr-cert .btn-archivo{max-width:100%}
.mr-resto{min-width:0}
.mr-papel{width:100%;max-width:200px;height:150px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);box-shadow:var(--shadow);
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 13px,var(--line-soft) 13px,var(--line-soft) 14px);background-size:calc(100% - 24px) calc(100% - 36px);
  background-repeat:no-repeat;background-position:12px 18px}
.mr-sin-pdf{width:100%;padding:12px;border:1.5px dashed var(--line);border-radius:var(--r-m);display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.mr-sin-pdf p{margin:0;font-size:13.5px}
.mr-sin-pdf .mr-nota{margin:0}
.mr-subir{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
dl.mr-datos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px;margin:0 0 18px}
dl.mr-datos>div{min-width:0}
dl.mr-datos dt{font-size:12px;font-weight:600;color:var(--ink-tenue);margin:0 0 2px}
dl.mr-datos dd{margin:0;font-size:14px;overflow-wrap:anywhere}
.mr-familia{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px;font-size:13px;color:var(--ink-soft)}
.mr-ancho{grid-column:1/-1}
.mr-ancho>.fld{margin:0}
.mr-pdf-actual{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:8px}
@media (max-width:880px){
  .mr-form .ctl,.mr-cab .abierta.recuadro .ctl{font-size:16px}
}
@media (max-width:520px){
  .mr-papeles{grid-template-columns:minmax(0,1fr)}
  .mr-papel{max-width:120px;height:150px}
  dl.mr-datos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mr-acciones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .mr-acciones>.btn,.mr-acciones>.btn-primary,.mr-acciones form .btn-peligro{width:100%;white-space:normal;justify-content:center;text-align:center;padding-left:10px;padding-right:10px} /* a 360 px el rótulo baja a dos líneas en vez de salirse */
  .mr-acciones form{display:contents}
  .mr-acciones form .btn-peligro{width:100%}
}
/* Calendario de renovación: la línea de años es decorativa (svg hecho en el servidor) y se esconde en el celular; «Año por año» es lo que se toca. */
.mr-cal-linea{margin-bottom:16px;padding:12px 16px}
.mr-cal-svg{display:block;overflow:visible}
.mr-franja{fill:var(--mango-soft);stroke:var(--mango-soft)}
.mr-hoy{fill:var(--ink);stroke:var(--ink);stroke-width:2}
.mr-tick{fill:var(--line);stroke:var(--line);stroke-width:1}
.mr-anio-t{font-size:12px;fill:var(--ink-soft)}
.mr-pt{stroke-width:2}
.mr-pt-vencida{fill:var(--bad);stroke:var(--bad)}
.mr-pt-renovar{fill:var(--mango-dark);stroke:var(--mango-dark)}
.mr-pt-vigente{fill:var(--card);stroke:var(--verde-2)}
.mr-pt-apelacion{fill:var(--mango-soft);stroke:var(--mango-dark)}
.mr-pt-tramite{fill:var(--info-soft);stroke:var(--info-tinta)}
.mr-pt-sinfecha{fill:var(--card);stroke:var(--ink-tenue)}
ul.mr-anios{list-style:none;margin:0;padding:0}
ul.mr-anios>li{display:grid;grid-template-columns:80px minmax(0,1fr);gap:4px 16px;padding:12px 0;border-top:1px solid var(--line-soft)}
ul.mr-anios>li:first-child{border-top:0;padding-top:4px}
.mr-anio{font-family:"Bricolage Grotesque",sans-serif;font-size:17px;font-weight:600;line-height:1.3;color:var(--ink)}
.mr-anios .chip{margin:0 6px 6px 0;background:var(--card);border-color:var(--line)}
.mr-anios .chip:hover{border-color:var(--verde-2);text-decoration:none}
.mr-anios .chip.mr-chip-mal{border-color:var(--bad)}
.mr-anios .chip.mr-chip-pend{border-color:var(--mango-dark)}
.mr-anio-linea{margin:2px 0 0;font-size:12.5px;color:var(--ink-soft)}
@media (max-width:880px){
  .mr-cal-linea{display:none}
  ul.mr-anios>li{grid-template-columns:54px minmax(0,1fr)}
}
/* ==== fin adm-marcas-07nov ==== */

/* ==== acopio-ventas-07nov ==== */
/* Ventas a exportadoras (_acopio_ventas*.js), «Papel sereno». El envío (.acp-env) y la regla con su cifra (.acp-regla) son de la sección
   de Compras de fruta, compartidos: aquí no se redefinen.
   La barra de Ventas: el buscador y los filtros en un GET a la izquierda; el Excel, la prefactura y la venta a un cliente de fuera a la
   derecha, fuera del formulario. Debajo, los chips de cliente y la «Ver campaña» de gerencia. */
.acv-barra-g{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 32px 12px}
.acv-barra{display:flex;flex:1 1 520px;flex-wrap:wrap;align-items:center;gap:8px 10px;min-width:0;margin:0}
.acv-barra .ctl-buscar{flex:1 1 200px;max-width:300px}
.acv-barra .ctl-buscar>input{width:100%;min-width:0}
.acv-barra>select.ctl{max-width:230px}
.acv-barra-der{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto}
.acv-barra-der>form{margin:0}
.acv-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 32px 16px}
.acv-chips .chip.acv-vista{background:var(--card);border-color:var(--line);font-size:13px}

/* La lista: toda la fila abre su venta (con JS); la abierta y su detalle, en verde suave, con la cuenta, «Con los datos de hoy», su fruta y
   su día en una tarjeta que se queda a la vista aunque la tabla se desplace de lado. */
.acv-panel{padding-top:8px}
.acv-tabla{position:relative;overflow-x:auto}
html.js table.acv-ventas tbody tr[data-href]{cursor:pointer}
table.acv-ventas tr[id^="v"]{scroll-margin-top:150px}
table.acv-ventas td[data-label="Envío"]{min-width:120px;max-width:220px;white-space:normal;line-height:1.5}
table.acv-ventas td[data-label="Envío"] .acp-env{white-space:normal;align-items:baseline}
table.acv-ventas td[data-label="Se vendió"]{min-width:130px;max-width:230px;white-space:normal;font-size:13px;color:var(--ink-soft)}
table.acv-ventas tbody tr.on>td,table.acv-ventas tbody tr.on:hover>td{border-bottom-color:transparent;background:var(--ok-soft)}
table.acv-ventas tbody tr.on>td[data-label="Fecha"] a{font-weight:700}
table.acv-ventas tbody tr.acv-det>td,table.acv-ventas tbody tr.acv-det:hover>td{padding:2px 10px 16px;white-space:normal;background:var(--ok-soft);border-bottom:1px solid var(--line)}
/* De ancho, lo que se ve del marco de la tabla: la ventana menos el menú (248 px), los márgenes y el relleno del panel, la barra de
   desplazamiento y los 10 px de cada lado de la celda. */
table.acv-ventas tr.acv-det .acv-det-g,table.acv-ventas tr.acv-det .acv-acc{position:sticky;left:10px;max-width:min(1180px,calc(100vw - 396px))}
html.lateral-plegado table.acv-ventas tr.acv-det .acv-det-g,html.lateral-plegado table.acv-ventas tr.acv-det .acv-acc{max-width:min(1180px,calc(100vw - 148px))}
table.acv-ventas tbody tr.acv-vacio>td,table.acv-ventas tbody tr.acv-vacio:hover>td{padding:28px 10px;white-space:normal;text-align:center;background:var(--card)}
.acv-vacio p{margin:0 0 6px;color:var(--ink-soft)}
.acv-vacio p b{color:var(--ink)}
.acv-vacio .btn{margin-top:6px}

/* La venta abierta: la cuenta (su recibo) en la primera columna (de alto, lo que ocupan las otras tres), «Con los datos de hoy», su fruta
   y su día en la segunda; las acciones al pie. */
.acv-det-g{box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px 28px;padding:16px 18px;background:var(--card);
  border:1px solid var(--line);border-bottom:0;border-radius:var(--r-m) var(--r-m) 0 0}
.acv-det-g>.acv-cuenta{grid-column:1;grid-row:1 / span 3}
.acv-cuenta,.acv-parte{min-width:0}
.acv-cuenta p,.acv-parte p{margin:0 0 6px;font-size:13px;color:var(--ink-soft)}
.acv-rot{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-tenue)}
/* Con los datos de hoy: lo que ya no da lo registrado, en mango suave (solo para señalar). */
.acv-ojo{min-width:0;padding:10px 12px;border-radius:var(--r-m);background:var(--mango-soft)}
.acv-ojo p{margin:0 0 6px;font-size:13px;color:var(--mango-dark)}
.acv-ojo p:last-child{margin-bottom:0}
.acv-ok{font-weight:600;color:var(--good)}
.acv-falta{font-weight:600;color:var(--mango-dark)}
.acv-botones{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:4px}
.acv-botones>form{margin:0}
.acv-hermanas{margin:0 0 8px;padding:0;list-style:none;font-size:13px}
.acv-hermanas>li{padding:3px 0;border-bottom:1px dashed var(--line)}
.acv-hermanas>li:last-child{border-bottom:0}
.acv-acc{box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 18px;background:var(--card);border:1px solid var(--line);
  border-top-color:var(--line-soft);border-radius:0 0 var(--r-m) var(--r-m)}
.acv-acc>form{margin:0}
.acv-nota{font-size:12.5px;color:var(--ink-soft)}
.acv-pie>p{margin:12px 0 0;font-size:13px;color:var(--ink-soft)}
.acv-tam a{color:inherit}

/* La lista del celular: solo hasta 880 px (la tabla, solo arriba de 880). Una venta por fila: el envío y su línea a la izquierda, la venta
   y su pastilla a la derecha; la abierta, en verde suave con su detalle debajo, en una columna. */
.acv-cel{display:none}
.acv-cel>li{flex-wrap:wrap;gap:6px 12px;padding:12px 4px}
html.js .acv-cel>li[data-href]{cursor:pointer}
.acv-cel>li.on{margin:4px -8px;padding:12px 8px;border-bottom:0;border-radius:var(--r-m);background:var(--ok-soft)}
.acv-cel>li[data-venta]{scroll-margin-top:calc(var(--cab-alto) + 10px)}
.acv-cel-t{flex:1 1 0;min-width:0}
.acv-cel-t a{color:var(--ink);text-decoration:none}
.acv-cel-t b{font-size:15px}
.acv-cel-t small{display:block;margin-top:2px;font-size:12.5px;color:var(--ink-soft)}
.acv-cel-r{display:flex;flex:none;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.acv-cel-r b{font-variant-numeric:tabular-nums}
.acv-cel-det{flex:1 1 100%;min-width:0;margin-top:6px;cursor:default}
.acv-cel>li.acv-vacio{display:block;padding:20px 4px;text-align:center}

/* Por vender: los chips de los días por vender (dos líneas, borde verde; el abierto, relleno verde suave) y de los envíos con compras enteras
   (borde punteado), las compras que esperan su día, la propuesta del día abierto bajo una raya, la línea 🔁 sobre gris suave, Registrar,
   los plegables («Cómo se calculó el precio», las compras del día) y «＋ Otra venta» con sus tres pasos y «✎ Ajustar a mano». */
.acv-vender #bolsa,.acv-vender #por-mirar,.acv-vender #clientes-fuera,.acv-vender #calc,.acv-vender #nuevo{scroll-margin-top:150px}
.acv-dias{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin:0 0 6px}
.acv-dia{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;padding:8px 14px;border:1.5px solid var(--verde);border-radius:12px;
  background:var(--card);color:var(--ink);text-decoration:none}
.acv-dia b{font-size:14px;color:var(--verde)}
.acv-dia small{font-size:12.5px;color:var(--ink-soft)}
.acv-dia:hover{background:var(--hover-suave)}
.acv-dia.sel,.acv-dia.sel:hover{background:var(--ok-soft)}
.acv-dia:focus-visible{outline:2px solid var(--verde);outline-offset:2px}
.acv-dia.acv-entera{border-style:dashed}
.acv-espera{margin:10px 0 0;padding:8px 14px;border:1.5px dashed var(--line);border-radius:12px;font-size:13px;color:var(--ink-soft)}
.acv-nota-suave{margin:8px 0 0;font-size:12.5px;color:var(--ink-soft)}
.acv-suave{font-size:12px;font-weight:400;color:var(--ink-soft)}
.acv-prop{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft)}
.acv-prop>.tbl-tools{margin-bottom:10px}
.acv-tabla-p{overflow-x:auto}
.acv-prop-t>caption{caption-side:top;padding:0 0 6px;text-align:left;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-tenue)}
.acv-prop-t td[data-label="Envío"]{min-width:150px;white-space:normal;line-height:1.5}
.acv-linea{margin:12px 0 0;padding:9px 14px;border-radius:10px;background:var(--line-soft);font-size:13.5px;color:var(--ink-soft)}
.acv-linea b{color:var(--ink)}
.acv-prop>.notice{margin:12px 0 0}
.acv-registrar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin:18px 0 0}
.acv-registrar>.fld{width:170px;margin:0}
.acv-como{margin-top:12px}
.acv-como>summary{cursor:pointer;list-style:none;font-size:13.5px;font-weight:600;color:var(--verde)}
.acv-como>summary::-webkit-details-marker{display:none}
.acv-como>summary::before{content:"▸ "}
.acv-como[open]>summary::before{content:"▾ "}
.acv-como[open]>summary{margin-bottom:10px}
.acv-como .notice{margin:10px 0 0}
.acv-otra>summary{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;cursor:pointer;list-style:none}
.acv-otra>summary::-webkit-details-marker{display:none}
.acv-otra>summary>.ph-sub{margin:0}
.acv-otra[open]>summary{margin-bottom:14px}
.acv-otra #calc{margin:0 0 14px}
.acv-pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 14px;padding:0;list-style:none}
.acv-pasos>li{padding:12px 14px;border:1px solid var(--line-soft);border-radius:12px;font-size:13px;color:var(--ink-soft)}
.acv-pasos>li>b{display:block;font-size:13.5px;color:var(--ink)}
.acv-ajustar{margin:6px 0 0}
.acv-ajustar>summary{display:inline-flex;align-items:center;gap:6px;padding:6px 0;cursor:pointer;list-style:none;font-weight:600;color:var(--verde)}
.acv-ajustar>summary::-webkit-details-marker{display:none}
.acv-ajustar>summary::before{content:"▸";font-size:12px;transition:transform .15s}
.acv-ajustar[open]>summary::before{transform:rotate(90deg)}
.acv-otra .form-foot>.acv-nota-suave{margin:0}

/* «Cómo se calculó el precio» en forma de recibo (_acopio_ventas_cuenta.js, Ruling 68), con los valores de la maqueta elegida: como la
   hoja de costo, el signo a la izquierda, el rótulo con su nota y el importe en una sola columna a la derecha; el subtotal con raya simple
   y el precio cerrando abajo con doble raya, en Bricolage verde (sus cifras proporcionales, como en la maqueta). Al costado, las notas.
   En la propuesta va uno por envío y variedad, con su envío encima; en la venta abierta, en una columna con las notas debajo. */
.acv-rec-cab{margin:22px 0 8px;font-size:14px;font-weight:600;line-height:1.5;color:var(--ink)}
.acv-rec-g{display:grid;grid-template-columns:minmax(0,470px) minmax(0,1fr);gap:44px;align-items:start}
.acv-rec{min-width:0}
.acv-rec-r{display:grid;grid-template-columns:16px minmax(0,1fr) auto;column-gap:12px;align-items:baseline;padding:6px 0}
.acv-rec-o{font-size:15px;color:var(--ink-soft);text-align:center}
.acv-rec-l{min-width:0;font-size:14px;color:var(--ink)}
.acv-rec-l small{display:block;margin-top:1px;font-size:12.5px;color:var(--ink-soft)}
.acv-rec-v{font-size:14.5px;font-weight:600;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.acv-rec-u{font-weight:500;color:var(--ink-soft)}
.acv-rec-sub{margin:4px 0 6px;padding-top:9px;border-top:1px solid var(--line)}
.acv-rec-sub .acv-rec-l,.acv-rec-sub .acv-rec-v{font-weight:700}
.acv-rec-tot{margin-top:8px;padding-top:14px;border-top:3px double var(--line-strong)}
.acv-rec-tot .acv-rec-l{font-size:15px;font-weight:700}
.acv-rec-tot .acv-rec-l small{font-weight:400}
.acv-rec-precio{font-family:"Bricolage Grotesque",sans-serif;font-size:34px;font-weight:700;line-height:1;letter-spacing:-.01em;color:var(--verde);white-space:nowrap;
  font-variant-numeric:normal}
.acv-rec-notas{margin:0;padding-top:6px;font-size:13px;color:var(--ink-soft)}
.acv-rec-notas dt{font-weight:600;color:var(--ink)}
.acv-rec-notas dd{max-width:48ch;margin:2px 0 14px}
.acv-rec-notas dd:last-child{margin-bottom:0}
.acv-det .acv-rec-g,.acv-cel-det .acv-rec-g{grid-template-columns:minmax(0,1fr);gap:12px}
.acv-det .acv-rec-precio,.acv-cel-det .acv-rec-precio{font-size:24px}
.acv-det .acv-rec-notas,.acv-cel-det .acv-rec-notas{padding-top:12px;border-top:1px solid var(--line-soft)}
.acv-cuenta>.acv-rec-g+p{margin:12px 0 0}

/* Prefacturas (_acopio_ventas_otras.js): una hoja por fila (su fecha de envío, su factura, los kilos y las ventas; a la derecha el total y
   «Abrir la hoja ›») y, al final, los envíos que todavía esperan la suya. ⚙ Reglas va en .cols: dos paneles, uno debajo del otro en ≤ 880 px. */
.acv-pref-p .acv-pref>li{gap:8px 18px;padding:12px 4px}
.acv-pref .acciones{align-items:center}
.acv-pref-tot{min-width:120px;font-size:15px;text-align:right;font-variant-numeric:tabular-nums}
.acv-pref-espera .t{font-size:13.5px;color:var(--ink-soft)}
.acv-pref .acv-pref-espera .t>b{font-size:14px}
.acv-pref-vacio{margin:2px 0 10px;font-size:14px;color:var(--ink-soft)}
.acv-pref-p>.acv-nota-suave{margin-top:12px}

@media (max-width: 880px){
  .acv-pref .acciones{justify-content:space-between}
  .acv-pref-tot{min-width:0;text-align:left}
  .acv-dias{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .acv-registrar>.fld{width:100%}
  .acv-registrar>.btn,.acv-registrar>.btn-primary{width:100%;justify-content:center}
  .acv-pasos{grid-template-columns:minmax(0,1fr)}
  .acv-registrar input,.acv-otra input,.acv-otra select{font-size:16px}
  .acv-barra-g{margin:0 14px 12px}
  .acv-barra{flex-basis:100%}
  .acv-barra .ctl-buscar{flex-basis:100%;max-width:none}
  .acv-barra>select.ctl{flex:1 1 140px;max-width:none}
  .acv-barra>[data-toggle-cols]{display:none}
  .acv-barra-der{margin-left:0}
  .acv-chips{margin:0 14px 14px}
  .acv-chips .chips-filtro{flex-wrap:wrap;overflow:visible}
  .acv-tabla{display:none}
  .acv-cel{display:block}
  .acv-det-g{grid-template-columns:minmax(0,1fr);gap:16px;padding:14px}
  .acv-det-g>.acv-cuenta{grid-column:auto;grid-row:auto}
  .acv-acc{padding:12px 14px}
  .acv-barra input,.acv-barra select{font-size:16px}
  .acv-rec-g{grid-template-columns:minmax(0,1fr);gap:16px}
  .acv-rec-notas{padding-top:14px;border-top:1px solid var(--line-soft)}
}
/* ==== fin acopio-ventas-07nov ==== */

/* ==== fundo-ventas-07nov ==== */
.fnd-frase{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:4px 32px 22px}
.fnd-frase .frase-estado{flex:1;min-width:0;margin:0}
.fnd-frase .btn-primary{flex-shrink:0}
@media (max-width:880px){
  .fnd-frase{flex-direction:column;align-items:stretch;gap:12px;margin:4px 14px 18px}
  .fnd-frase .frase-estado h2{font-size:21px}
  .fnd-frase .btn-primary{width:100%}
}
@media (max-width:520px){.fnd-frase{margin:4px 10px 18px}}
/* La lista: barras, meses, la venta abierta */
.fnd-filtros{display:grid;gap:10px;margin:0 32px 14px}
.fnd-fila{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.fnd-rotulo{font-size:12.5px;color:var(--ink-tenue);font-weight:600}
.fnd-der{margin-left:auto}
.fnd-rango{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.fnd-rango b{font-size:16px;font-weight:600;color:var(--ink)}
.fnd-marco{margin:0 32px;overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m)}
table.fnd-ventas{min-width:0}
table.fnd-ventas td small{display:block;margin-top:2px;font-size:12px;color:var(--ink-tenue);white-space:normal}
table.fnd-ventas td.num,table.fnd-ventas th.num{text-align:right}
table.fnd-ventas th a{color:inherit;text-decoration:none}
table.fnd-ventas th[aria-sort] a{color:var(--ink)}
table.fnd-ventas tbody tr[data-href]{cursor:pointer}
table.fnd-ventas tbody tr[data-href]:not(.on):hover td{background:var(--cebra)}
table.fnd-ventas tbody tr.on td{background:var(--verde-suave)}
table.fnd-ventas tr[id^="v"]{scroll-margin-top:150px}
table.fnd-ventas tr[hidden]{display:none}
table.fnd-ventas tr.fnd-mes td{padding:9px 10px;background:var(--line-soft);border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink-soft)}
table.fnd-ventas tr.fnd-mes b{color:var(--ink);font-weight:600}
table.fnd-ventas tr.fnd-mes[aria-expanded]{cursor:pointer}
table.fnd-ventas tr.fnd-mes[aria-expanded]:hover td{background:var(--cebra)}
.fnd-ver{margin-left:6px;color:var(--ink-tenue);font-weight:600}
.fnd-sin{color:var(--mango-dark);font-weight:600;font-size:12.5px}
.fnd-suave{color:var(--ink-tenue)}
table.fnd-ventas .solo-cel{display:none}
table.fnd-ventas tr.fnd-det td{padding:14px 14px 16px;background:var(--cebra);white-space:normal}
.fnd-dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 18px;margin:0 0 12px}
.fnd-dl dt{font-size:12px;color:var(--ink-tenue);font-weight:600}
.fnd-dl dd{margin:2px 0 0;color:var(--ink)}
.fnd-nota{display:flex;align-items:flex-start;gap:10px;margin:0 0 10px;padding:10px 12px;background:var(--info-soft);border-radius:var(--r-m);font-size:13px}
.fnd-nota.ambar{background:var(--mango-soft)}
.fnd-nota p{margin:2px 0 0}
.fnd-nota > div{flex:1;min-width:0}
.fnd-acc{display:flex;flex-wrap:wrap;gap:8px}
.fnd-acc .btn-mini{width:auto;padding:0 10px}
.fnd-apagado{opacity:.55}
td.fnd-vacia{padding:28px 14px;text-align:center;white-space:normal}
td.fnd-vacia p{margin:4px 0 12px;color:var(--ink-soft)}
.fnd-pie{margin:8px 32px 0;font-size:12.5px;color:var(--ink-soft)}
@media (max-width:880px){
  .fnd-filtros{margin:0 14px 12px}
  .fnd-fila > *{max-width:100%}
  .fnd-fila .ctl,.fnd-fila .ctl-marco{flex:1 1 100%}
  .fnd-der{margin-left:0;flex:1 1 100%}
  .fnd-der .btn{width:100%;justify-content:center}
  .fnd-marco{margin:0 14px}
  .fnd-pie{margin:8px 14px 0}
  table.fnd-ventas .pc{display:none}
  table.fnd-ventas .solo-cel{display:block}
  .fnd-dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fnd-acc .btn-mini,.fnd-acc form{flex:1 1 auto}
}
@media (max-width:520px){.fnd-filtros,.fnd-marco,.fnd-pie{margin-left:10px;margin-right:10px}}
/* Registrar una venta: el recuadro con sus campos en una rejilla de 4 (2 en el celular) y la cuenta que arma cuentaCalculada */
.fnd-registrar{margin:0 32px 18px}
.fnd-reg-t{margin:0 0 2px;font-size:18px;font-weight:600;color:var(--ink)}
.fnd-registrar .ph-sub{margin:0 0 14px}
.fnd-campos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 14px;align-items:start}
.fnd-campos>.fld{margin:0}
.fnd-registrar .cuenta-calc{margin-top:16px}
.cuenta-calc>.fnd-calc,.cuenta-calc>.fnd-precio{flex:1 1 140px;min-width:0}
.fnd-calc>.fld,.fnd-precio>.fld{margin:0}
.fnd-precio{display:grid;gap:8px}
.fnd-dice{display:block;min-height:16px;margin-top:4px;font-size:12px;color:var(--ink-soft)}
.fnd-volver{width:auto;padding:0 10px}
.fnd-pista,.fnd-soles{margin:6px 0 0;font-size:12.5px;color:var(--ink-soft)}
.fnd-pista-var{display:block;margin-top:4px;font-size:12px;color:var(--mango-dark)}
.fnd-soles{margin:8px 0 0}
.fnd-registrar>form>.eleccion{margin-top:14px}
.fnd-pie-txt{flex:1 1 220px;font-size:12.5px}
@media (max-width:880px){
  .fnd-registrar{margin:0 14px 16px}
  .fnd-campos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){.fnd-registrar{margin-left:10px;margin-right:10px}}
/* Por fruta y variedad y ⚙ Reglas */
.fnd-con-filtros{margin:0;font-size:13px;color:var(--ink-soft)}
.fnd-con-filtros b{color:var(--ink);font-weight:600}
.fnd-panel-cuadro{margin:0 32px}
table.fnd-cuadro td small{display:block;margin-top:2px;font-size:12px;color:var(--ink-tenue)}
table.fnd-cuadro th.num,table.fnd-cuadro td.num{text-align:right}
table.fnd-cuadro tr.fnd-fruta td{background:var(--line-soft);border-bottom:1px solid var(--line)}
table.fnd-cuadro tr.fnd-var td:first-child{padding-left:28px}
table.fnd-cuadro td.fnd-bc,table.fnd-cuadro th.fnd-bc{width:22%;min-width:90px}
svg.fnd-barra{display:block;flex:none;height:8px;max-width:100%;border-radius:4px;background:var(--verde-2)}
svg.fnd-barra.ara{background:var(--verde-2)}
svg.fnd-barra.pal{background:var(--verde-suave)}
.fnd-notas{margin:12px 32px 0}
.fnd-nota-sin{margin:0 0 6px;font-size:13px;color:var(--ink-soft)}
.fnd-reglas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0 32px 20px}
.fnd-reglas>.panel{margin:0}
.fnd-reglas>#clientes{grid-column:1/-1}
.fnd-reglas p{margin:10px 0 0;font-size:13px;color:var(--ink-soft)}
.fnd-marco-reglas{margin:12px 0 0;max-height:420px;overflow:auto}
table.fnd-clientes td{white-space:normal}
table.fnd-clientes td small{display:block;margin-top:2px;font-size:12px;color:var(--ink-tenue)}
table.fnd-clientes th.num,table.fnd-clientes td.num{text-align:right}
.fnd-pastillas{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
@media (max-width:880px){
  .fnd-panel-cuadro,.fnd-notas,.fnd-reglas{margin-left:14px;margin-right:14px}
  .fnd-reglas{grid-template-columns:minmax(0,1fr)}
  svg.fnd-barra,table.fnd-cuadro .fnd-bc{display:none}
  table.fnd-cuadro td,table.fnd-cuadro th{padding-left:6px;padding-right:6px;white-space:normal}
  table.fnd-cuadro tr.fnd-var td:first-child{padding-left:16px}
}
@media (max-width:520px){.fnd-panel-cuadro,.fnd-notas,.fnd-reglas{margin-left:10px;margin-right:10px}}
/* ==== fin fundo-ventas-07nov ==== */

/* ==== fundo-gastos-07nov ==== */
/* La línea del atraso de los gastos a mano (sin líneas por pasar): como .tc-linea, una línea mango encima de la lista. */
.fga-atraso{margin:0 32px 14px;padding:7px 12px;background:var(--mango-soft);border:1px solid var(--mango);border-radius:var(--r-s);color:var(--mango-dark);font-size:12.5px;line-height:1.45}
.fga-atraso b{font-weight:700}
@media (max-width:880px){.fga-atraso{margin:0 14px 12px}}
@media (max-width:520px){.fga-atraso{margin:0 10px 12px}}
/* La fruta de la lista: el select y su «Ver» en una fila (el guion esconde el «Ver» y envía al cambiar). Con form delante: así le gana
   a .lf-controles form, de la sección común, que parte la fila. */
form.fga-fruta{display:flex;flex:1 1 auto;flex-wrap:nowrap;align-items:center;gap:8px;margin:0}
.fga-fruta .ctl{flex:1 1 auto;min-width:0}
.fga-fruta .btn{flex:none}
/* Los dos colores de fruta: fill para el dibujo (barra, columnas) y background-color para la muestra de la leyenda. */
.fga-ara{fill:var(--info-tinta);background-color:var(--info-tinta)}
.fga-pal{fill:var(--verde-2);background-color:var(--verde-2)}
/* La ficha de una semana. Las líneas por pasar: una fila por línea con su descripción y su orden debajo, el monto y «→ Pasar» a la vista
   (son muchas y van en primer plano: no se esconden en una fila que se abre); en la ficha angosta, el monto y el botón bajan bajo el texto.
   El aviso del libro va dentro del panel, sin los 32 px de la página; la nota de las líneas ocultas por su factura, debajo. */
.fga-ordenes>.notice{margin:0 0 14px}
.fga-lineas{margin:0;padding:0;list-style:none}
.fga-lineas>li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:10px 0;border-top:1px solid var(--line-soft)}
.fga-lineas>li:first-child{padding-top:0;border-top:0}
.fga-lineas form{margin:0}
.fga-linea-t{flex:1 1 260px;min-width:0}
.fga-linea-t>b{display:block;font-size:14px;font-weight:600;overflow-wrap:anywhere}
.fga-linea-t>small{display:block;margin-top:2px;font-size:12.5px;color:var(--ink-soft)}
.fga-linea-m{margin-left:auto;font-size:13px;font-weight:600;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.fga-linea-m>small{display:block;font-size:12px;font-weight:400;color:var(--ink-soft)}
.fga-nota{font-size:12.5px;color:var(--ink-soft)}
.fga-lineas+.fga-nota{margin-top:12px}
/* Un gasto sin categoría, en mango; el 🔒 de la fila que se corrige en otro módulo, sin borde y del tamaño de un btn-mini. */
.fga-sincat{font-weight:600;color:var(--mango-dark)}
.fga-candado{display:inline-grid;place-items:center;width:30px;height:30px;font-size:14px;color:var(--ink-soft);cursor:help}
@media (max-width:880px){.fga-candado{width:36px;height:36px}}
/* El formulario de un gasto, en el lugar de la ficha: fecha y fruta en una fila, lo demás a lo ancho. La pista de la última vez, debajo
   de la descripción (vacía no ocupa nada). Las categorías en pastillas que se parten en filas: en el formulario son botones que escriben
   en el campo (la marcada, verde llena, como la elegida de chipsFiltro); en la fila sin categoría de la ficha, un botonPost cada una. */
.fga-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;margin:0}
.fga-form>*{grid-column:1/-1;min-width:0;margin:0}
.fga-form>.fld:first-child,.fga-form>.eleccion{grid-column:auto}
.fga-form>.form-foot{margin-top:4px}
.fga-pista{margin:6px 0 0;font-size:13px;line-height:1.4;color:var(--ink-soft)}
.fga-pista:empty{margin:0}
.fga-cats{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.fga-cats form{margin:0}
.fga-cats .chip{font:inherit;font-size:13px;line-height:1.3;background:var(--card);border-color:var(--line);color:var(--ink);cursor:pointer}
.fga-cats .chip:hover{border-color:var(--verde-2)}
.fga-cats .chip[aria-pressed="true"]{background:var(--verde);border-color:var(--verde);color:var(--card)}
.fga-cats .chip:focus-visible{outline:2px solid var(--mango-dark);outline-offset:2px}
.fga-cats .btn-mini{border-radius:999px}
/* La cuenta: la unidad y la cuenta calculada (cantidad × precio = costo real) en una fila; en el celular, en dos (unidad y cantidad;
   precio y costo real): la cuenta suelta sus campos en la rejilla de la fila (display: contents) y sus signos ya se fueron (la común). */
.fga-cuenta{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 10px}
.fga-cuenta>.fld{flex:0 1 150px;min-width:0;margin:0}
.fga-cuenta>.cuenta-calc{flex:1 1 360px;min-width:0}
@media (max-width:520px){
  .fga-cuenta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .fga-cuenta>.cuenta-calc{display:contents}
  .fga-cuenta .cuenta-calc .cc-res{grid-column:auto}
  .fga-form .fld input,.fga-form .fld select{font-size:16px}
}
/* El año: el año y la fruta en una fila, encima de la frase; el Excel por rango, su marco de fechas y su botón en una fila que se parte.
   Las columnas de mes a mes y su leyenda se pintan con .fga-ara y .fga-pal (arriba): le ganan al color de fábrica de la sección común,
   que va en :where(). ⚙ Categorías: lo que lleva cada una, a la derecha de su nombre (en la fila angosta baja, como los botones de
   ul.lista); en la tabla de palabras, la celda de las palabras se parte (table.datos no parte sus celdas) para no salirse en el celular. */
.fga-barra{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:0 32px 16px}
.fga-excel{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0}
.fga-cat-n{flex:none;font-size:13px;font-weight:600;color:var(--ink);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.fga-palabras{margin-top:12px}
.fga-palabras td{white-space:normal;overflow-wrap:anywhere}
.fga-palabras td:first-child{white-space:nowrap;font-weight:600}
@media (max-width:880px){.fga-barra{margin:0 14px 14px}}
@media (max-width:520px){.fga-barra{margin:0 10px 12px}}
/* ==== fin fundo-gastos-07nov ==== */

/* ==== fundo-resumen-07nov ==== */
/* La barra, sobre las tres pestañas: la fruta en pastillas, con la nota de los soles al lado; el periodo en pastillas de año y el rango
   «del … al …» con su «Ver» (un GET). Las pastillas se envuelven. En el celular el rango no cabe en una línea: cada fecha en su fila y «Ver»
   debajo, como el rango de Menú del día (la raya entre las dos fechas queda delante de la segunda). */
.fres-barra{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0 32px 18px}
.fres-fila{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;min-width:0}
.fres-fila>*{min-width:0;max-width:100%}
.fres-soles{margin-left:auto;font-size:12.5px;color:var(--ink-soft)}
form.fres-rango{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
@media (max-width:880px){.fres-barra{margin:0 14px 16px}.fres-soles{margin-left:0}}
@media (max-width:520px){
  .fres-barra{margin:0 10px 14px}
  form.fres-rango{display:grid;grid-template-columns:minmax(0,1fr);flex:1 1 100%}
  form.fres-rango .ctl-marco{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;column-gap:6px;row-gap:4px;width:100%;padding:4px 10px}
  form.fres-rango .ctl-marco>input~.ctl-lab{grid-column:2;text-align:center}
  form.fres-rango .ctl-marco>input{width:100%}
  form.fres-rango .btn{justify-self:start}
}
/* Las tablas de Año a año y de Por variedad: se desplazan dentro de su panel, con el año o la variedad fijos a la izquierda (la raya de la
   columna fija es un borde: ninguna sombra). La fila par repite la cebra de table.datos y el pie, su fondo. Lo vacío es un «·» suave. */
.fres-marco{overflow-x:auto}
table.fres-tabla .fija{position:sticky;left:0;z-index:1;background:var(--card);border-right:1px solid var(--line)}
table.fres-tabla tbody tr:nth-child(even) td.fija{background:var(--cebra)}
table.fres-tabla tfoot td.fija{background:var(--line-soft)}
table.fres-tabla td.fija small{display:block;margin-top:2px;font-size:12px;font-weight:400;color:var(--ink-soft)}
/* «Sin variedad» va aparte, después de las variedades: una raya punteada encima (de 2 px: en una tabla de bordes juntos, una raya lisa de
   1 px le gana a una punteada del mismo ancho), tinta suave y sin negrita, para que no compita con las variedades. Debajo del rótulo, de
   dónde vienen y el enlace a Ventas del fundo, que pueden partirse en dos líneas. */
table.fres-tabla tbody.fres-sin-variedad td{border-top:2px dashed var(--line-strong);color:var(--ink-soft);font-weight:400}
table.fres-tabla tbody.fres-sin-variedad td.fija{min-width:220px;max-width:300px;white-space:normal}
table.fres-tabla tbody.fres-sin-variedad td.fija small{font-size:12.5px}
table.fres-tabla tbody.fres-sin-variedad .pill{margin-left:4px}
@media (max-width:520px){table.fres-tabla tbody.fres-sin-variedad td.fija{min-width:150px}}
/* El resultado: lo que dejó en verde y lo que perdió en terracota. */
.fres-pos{color:var(--good)}
.fres-neg{color:var(--bad)}
/* Las notas al pie de una tabla y la línea tranquila de una vista sin nada que mostrar. */
.fres-notas{margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--ink-soft)}
.fres-notas p{margin:4px 0 0}
.fres-vacio p{margin:0;color:var(--ink-soft)}
.fres-vacio p+p{margin-top:6px}
/* La resta del año (cifrasEnFila con sus signos): el resultado en positivo va en verde (la pieza solo le pone la negrita; en negativo ya va
   en terracota). En el celular angosto, los términos uno debajo del otro, con el signo delante del rótulo. */
.fres-resta .cf.fin .cf-v{color:var(--good)}
@media (max-width:520px){.fres-resta .cifras-fila:not(.cajas){grid-template-columns:minmax(0,1fr);gap:12px}}
/* Los dos paneles: «De cada S/ 100 puestos» (la barra, su leyenda y lo puesto) y «Por fruta» o «Kilos y precio». Van lado a lado, cada uno
   con media fila: sus cifras en 20 px, para que un monto de millones no se parta en dos líneas (la resta, a todo el ancho, sigue en 24). */
.fres-cien .pb-barra{margin-top:4px}
.fres-cien .cf-v,.fres-lado .cf-v{font-size:20px}
.fres-cien .cifras-fila,.fres-lado .cifras-fila{margin-top:16px}
.fres-lado .tbl-tools+.cifras-fila{margin-top:0}
.fres-linea{margin:0;font-size:13.5px;color:var(--ink-soft)}
/* El año a año dibujado: el año, las dos barras (lo vendido; lo gastado con la instalación apilada encima) con su cifra al lado, a una
   escala común, y lo que dejó. En la tablet el año y el resultado van en una línea y las barras debajo, a todo el ancho; en el celular
   angosto, la cifra de cada barra baja debajo de ella. Los colores ponen fill (el rect) y background-color (la muestra de la leyenda). */
.fres-dibujo .partes-ley{grid-template-columns:repeat(auto-fill,minmax(110px,max-content));margin:0 0 10px}
.fres-anios{margin:0;padding:0;list-style:none}
.fres-anios>li{display:grid;grid-template-columns:56px minmax(0,1fr) 150px;column-gap:16px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px}
.fres-anios>li:last-child{border-bottom:0}
.fres-y b{font-weight:700}
.fres-y small,.fres-r small{display:block;font-size:12px;font-weight:400;color:var(--ink-soft)}
.fres-bs{display:grid;gap:4px;min-width:0}
.fres-b{display:grid;grid-template-columns:minmax(0,1fr) 15rem;align-items:center;column-gap:10px}
.fres-b>span{font-size:12.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.fres-r{text-align:right;white-space:nowrap}
.fres-c-venta{fill:var(--verde-2);background-color:var(--verde-2)}
.fres-c-gasto{fill:color-mix(in srgb,var(--bad) 45%,var(--card));background-color:color-mix(in srgb,var(--bad) 45%,var(--card))}
.fres-c-inst{fill:color-mix(in srgb,var(--info-tinta) 40%,var(--card));background-color:color-mix(in srgb,var(--info-tinta) 40%,var(--card))}
@media (max-width:880px){
  .fres-anios>li{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}
  .fres-y small,.fres-r small{display:inline;margin-left:6px}
  .fres-bs{grid-column:1/-1;grid-row:2}
}
@media (max-width:520px){.fres-b{grid-template-columns:minmax(0,1fr);row-gap:2px}}
/* ==== fin fundo-resumen-07nov ==== */

/* ==== fundo-planilla-07nov ==== */
/* Las tres hojas: Emerald en verde, Biloxi en verde suave y Palto en arena (de los grises cálidos: el palto no es mango, que es lo que
   espera). Cada clase pone fill (las barras de svg) y background-color (la pila de las columnas, la muestra de la leyenda y el cuadrito). */
.cam-h-emerald{fill:var(--verde-2);background-color:var(--verde-2)}
.cam-h-biloxi{fill:var(--verde-suave);background-color:var(--verde-suave)}
.cam-h-palto{fill:color-mix(in srgb,var(--line-strong) 80%,var(--ink-tenue));background-color:color-mix(in srgb,var(--line-strong) 80%,var(--ink-tenue))}
/* La fila de una semana: las fechas y la pastilla en la segunda línea y, debajo, a lo ancho, la barra de lo que costó cada hoja (dibujo: la
   cifra va arriba). La segunda línea se parte en dos: su texto suelta sus piezas en la fila (display: contents) y la barra baja sola. */
.lf-l2:has(>.lf-sub>.cam-barra){flex-wrap:wrap}
.lf-sub:has(>.cam-barra){display:contents}
.cam-fechas{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cam-barra{display:block;flex:1 0 100%;order:1;margin-top:5px}
/* El pie de la lista: los colores de las hojas en una fila, ir a otra semana y el Excel. */
.cam-pie{display:grid;gap:10px}
.cam-ley .partes-ley{grid-template-columns:repeat(3,max-content);gap:6px 16px;margin:0}
form.cam-ir{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.cam-ir-t{font-size:12.5px;color:var(--ink-soft)}
.cam-pie>.btn{justify-self:start}
/* Los botones de la ficha: «Semana completa» es un rótulo con un botón por hoja, juntos; «Pagar junto con otra semana», dentro del «⋯ Más». */
.cam-completa{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.cam-completa-t{font-size:13px;font-weight:600;color:var(--ink-soft)}
/* .lf-acciones (común) no se encoge: con «Semana completa» y sus hojas medía 1027 px dentro de 552 y la página se desplazaba de lado
   (captura del cierre, 1440 px). Aquí se deja encoger para que los botones bajen de línea. */
.lf-acciones:has(> .cam-completa){flex-shrink:1;min-width:0;max-width:100%}
form.cam-junto{display:grid;gap:6px;margin:0;padding:4px 6px}
.cam-junto-t{font-size:13.5px;color:var(--ink)}
.cam-junto .btn{justify-self:start}
/* Quiénes cobran: la persona (avatar de 32 px, nombre y su Yape o lo que falta), sus siete días y lo que cobra; arriba, los días. Cada cuadrito
   lleva el color de la hoja y «1» o «½»; vacío si no vino y en raya si el día no llega. En el celular, el nombre y el monto arriba y los
   siete días a todo el ancho debajo. */
.cam-cobran{margin:0;padding:0;list-style:none}
.cam-cobra{display:grid;grid-template-columns:minmax(0,1fr) auto 96px;gap:14px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.cam-cobran>.cam-cobra:last-child{border-bottom:0}
.cam-cobra-cab{padding:0 0 6px;border-bottom-color:var(--line)}
.cam-quien{display:flex;align-items:center;gap:10px;min-width:0;color:inherit;text-decoration:none}
a.cam-quien:hover{text-decoration:none}
a.cam-quien:hover .cam-quien-t>b{color:var(--verde)}
.cam-quien>.av{--av:32px;flex-shrink:0}
.cam-quien-t{min-width:0}
.cam-quien-t>b{display:block;overflow:hidden;font-weight:600;white-space:nowrap;text-overflow:ellipsis}
.cam-quien-t>small{display:block;overflow:hidden;font-size:12px;color:var(--ink-soft);white-space:nowrap;text-overflow:ellipsis}
.cam-falta{font-weight:600;color:var(--terracota)}
.cam-dias{display:grid;grid-template-columns:repeat(7,30px);gap:4px}
:where(.cam-dia){background-color:var(--card)}
.cam-dia{display:grid;place-items:center;box-sizing:border-box;width:30px;height:30px;border:1.5px solid var(--line);border-radius:8px;font-size:12.5px;font-weight:700;color:var(--ink);text-decoration:none}
.cam-dia:is(.cam-h-emerald,.cam-h-biloxi,.cam-h-palto){border-color:transparent}
.cam-dia.cam-h-emerald{color:var(--card)}
a.cam-dia:hover{border-color:var(--verde);text-decoration:none}
a.cam-dia:focus-visible,a.cam-quien:focus-visible{outline:2px solid var(--mango-dark);outline-offset:2px}
.cam-raya{border-style:dashed;background-color:var(--cebra)}
.cam-dia-t{font-size:12px;font-weight:700;color:var(--ink-soft);text-align:center}
.cam-monto{text-align:right;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.cam-nota{margin:12px 0 0;font-size:12.5px;color:var(--ink-soft)}
@media (max-width:640px){
  .cam-cobra{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px}
  .cam-cobra>.cam-dias{grid-column:1/-1;grid-row:2;grid-template-columns:repeat(7,minmax(0,1fr))}
  .cam-dia{width:100%;height:34px}
  .cam-cobra-cab{grid-template-columns:minmax(0,1fr)}
  .cam-cobra-cab>span:not(.cam-dias){display:none}
  .cam-cobra-cab>.cam-dias{grid-row:auto}
}
/* Su historia y las labores de la semana, lado a lado; una debajo de la otra en ≤ 1100 px o en una ficha angosta (la tabla de labores
   no cabría). La tabla se desplaza en su marco; las notas, plegadas debajo. */
.cam-dos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:20px;align-items:start}
.cam-dos>.panel{min-width:0;margin:0}
@media (max-width:1100px){.cam-dos{grid-template-columns:minmax(0,1fr)}}
@container lf-ficha (max-width: 760px){.cam-dos{grid-template-columns:minmax(0,1fr)}}
.cam-subio{margin:0 0 12px;font-size:13.5px;line-height:1.5}
.cam-marco{overflow-x:auto}
.cam-notas{margin-top:14px}
.cam-notas>summary{cursor:pointer;font-size:13.5px;font-weight:600}
.cam-notas>.cam-marco{margin-top:10px}
.cam-vacio{margin:0;font-size:13.5px;color:var(--ink-soft)}
/* La zona de importar (/planilla-campo/importar), abierta arriba de la lista: su frase, el botón de archivo y «Leer y revisar» en una fila,
   lo que pasa antes de guardar y, plegado, cómo lee el PDF. */
.cam-importar{margin-bottom:16px}
.cam-importar>h3{margin:0 0 4px;font-size:15px}
.cam-importar p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
form.cam-subir{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:12px 0 10px}
.cam-como{margin-top:10px}
.cam-como>summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink)}
.cam-como>p{margin-top:6px}
/* La semana completa: el día que la persona ya tiene en otra hoja no lleva campos; dice en cuál está, con su enlace. */
.cam-ocupada{font-size:12.5px;color:var(--ink-soft)}
/* Trabajadores, la lista: debajo del nombre, dónde suele estar, su Yape abreviado y sus pastillas («sin Yape», «inactivo», «sin jornales
   desde…»), que bajan a otra línea si no caben (esa segunda línea deja de cortarse con «…»). «＋ Nuevo» abre su recuadro a todo el ancho
   de la cabecera de la lista. */
.lf-sub:has(>.cam-tsub){overflow:visible;white-space:normal}
.cam-tsub{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
.cam-pas{padding:0 7px;border-radius:999px;background:var(--mango-soft);color:var(--mango-dark);font-size:12px;font-weight:600;white-space:nowrap}
.cam-pas.cam-pas-neutro{background:var(--line-soft);color:var(--ink-soft)}
.lf-busca>.cam-nuevo{flex:1 1 100%;min-width:0;margin-top:2px}
.lf-busca>form.cam-inact{margin:0}
.cam-pie>p{margin:0}
/* La ficha del trabajador. Su semana: siete cuadros de sábado a viernes (el día, la hoja con su color, la labor, el jornal y la nota); el
   que trabajó, en verde suave; el que no llega, en raya; el abierto, con su anillo. En el celular, de dos en dos. */
.cam-semnav{display:inline-flex;align-items:center;gap:8px;font-size:13.5px}
.cam-semnav-fl{display:inline-grid;place-items:center;box-sizing:border-box;width:30px;height:30px;border:1px solid var(--line);border-radius:8px;color:var(--ink);text-decoration:none}
a.cam-semnav-fl:hover{border-color:var(--verde-2);text-decoration:none}
span.cam-semnav-fl{color:var(--ink-tenue)}
a.cam-semnav-fl:focus-visible,a.cam-sdia:focus-visible{outline:2px solid var(--mango-dark);outline-offset:2px}
.cam-semana{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.cam-semana>li{display:flex;min-width:0}
.cam-sdia{display:flex;flex:1;flex-direction:column;gap:2px;box-sizing:border-box;min-width:0;min-height:92px;padding:9px 10px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font-size:13px;text-decoration:none}
a.cam-sdia:hover{border-color:var(--verde-2);text-decoration:none}
.cam-sdia.cam-sdia-con{background:color-mix(in srgb,var(--verde-suave) 18%,var(--card));border-color:color-mix(in srgb,var(--verde-suave) 50%,var(--card))}
.cam-sdia.cam-sdia-luego{border-style:dashed;background:var(--cebra);color:var(--ink-tenue)}
.cam-sdia[aria-current]{outline:2px solid var(--verde-2);outline-offset:1px}
.cam-sdia>small{font-size:12px;font-weight:600;color:var(--ink-soft)}
.cam-sdia>b{font-size:13px;font-weight:600;line-height:1.25;overflow-wrap:anywhere}
.cam-sdia>span{font-size:12.5px;color:var(--ink-soft);overflow-wrap:anywhere}
.cam-sdia>.cam-falta{color:var(--terracota)}
.cam-sdia>em{margin-top:auto;font-size:12px;font-style:normal;color:var(--ink-soft)}
.cam-sdia-nota{font-style:italic}
.cam-punto{display:inline-block;width:9px;height:9px;margin-right:5px;border-radius:50%}
/* El día abierto: el jornal en pastillas, la hoja, la labor y la nota; en el celular, una columna con controles de 16 px. */
.cam-dia-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px 16px;align-items:start;margin:0}
.cam-dia-form>.fld{margin:0}
.cam-dia-rot{display:block;margin-bottom:6px;font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.cam-dia-hoja{margin:0;font-size:14px}
.cam-dia-hoja>span{display:block;margin-top:2px;font-size:12.5px;color:var(--ink-soft)}
.cam-dia-pie{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.cam-dia-pie>.cam-nota{margin:0}
.cam-dia-ir{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
/* Sus datos, de dos en dos, y debajo lo que se hace con la ficha: editar (abierto, a todo el ancho), pasar a inactivo, eliminar. El Yape
   que falta se escribe en la línea del aviso. */
.cam-datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;margin:0}
.cam-datos dt{font-size:12px;color:var(--ink-soft)}
.cam-datos dd{margin:1px 0 0;font-weight:600;overflow-wrap:anywhere}
.cam-tenue{font-weight:400;color:var(--ink-tenue)}
.cam-tacc{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}
.cam-tacc>form{margin:0}
.cam-editar>summary{list-style:none}
.cam-editar>summary::-webkit-details-marker{display:none}
.cam-editar[open]{flex:1 1 100%}
.cam-editar>form{margin-top:12px}
.cam-candado{font-size:12.5px;color:var(--ink-soft)}
form.cam-yape{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;margin:0}
form.cam-yape>.fld{margin:0}
@media (max-width:640px){
  .cam-semana{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cam-sdia{min-height:0}
  .cam-dia-form{grid-template-columns:minmax(0,1fr)}
  .cam-dia-form .ctl{font-size:16px}
  .cam-datos{grid-template-columns:minmax(0,1fr)}
  /* Lo que cobró: en diez columnas angostas no cabe «Sem 10»; se rotula una de cada dos (y la que se mira), como hace la pieza con más de 16. */
  .cam-cobro .cper-rot{max-width:calc(200% + 3px)}
  .cam-cobro .cper-col:nth-child(even):not([aria-current]) .cper-rot,.cam-cobro .cper-col:has(+.cper-col[aria-current]) .cper-rot,.cam-cobro .cper-col[aria-current]+.cper-col .cper-rot{visibility:hidden}
}
/* La ficha de la labor. Quiénes la hicieron: la persona (avatar de 32 px y nombre, a su ficha) y sus jornales, en una fila. */
.cam-hicieron{margin:0;padding:0;list-style:none}
.cam-hizo{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line-soft)}
.cam-hicieron>.cam-hizo:last-child{border-bottom:0}
.cam-hizo-j{flex-shrink:0;font-size:13px;color:var(--ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums}
/* Por revisar: unir con la parecida (un botón) o con la que se elija (rótulo, lista y botón en una fila que se parte); «Agregarla a la lista»
   abre su recuadro debajo del aviso. */
form.cam-unir{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.cam-unir-t{font-size:13px;font-weight:600;color:var(--ink-soft)}
form.cam-unir .ctl{flex:1 1 180px;min-width:0;max-width:100%}
.cam-agregar{margin-bottom:16px}
/* Desde que hay planilla: los rótulos de la semana a semana y del lote por lote, la tabla de lotes que en el celular se desplaza en su marco
   y, debajo, el aviso de la suma de los lotes marcados. */
.cam-tit{margin:18px 0 8px;font-size:13.5px;font-weight:700;color:var(--ink)}
.cam-lotes{overflow-x:auto;margin-top:10px}
.cam-lotes .cam-lote{width:18px;height:18px;margin:0;accent-color:var(--verde-2)}
.notice.cam-suma{margin:12px 0 0}
/* ==== fin fundo-planilla-07nov ==== */

/* ==== cfg-catalogos-11nov ==== */
/* Catálogos «Papel sereno». Las listas es un libro: el índice de las 9 listas a la izquierda (en papel, la elegida en verde suave) y la
   hoja de la elegida a la derecha: su cabecera (el título con sus nombres, el buscador, ⇄ Unir dos nombres y ＋ Agregar, que abren sus
   recuadros) y la tabla, donde cada nombre abre su fila con el formulario, dónde se usa y «🗑 Quitar de la lista» a la derecha. En
   ≤ 880 px el índice se esconde y sale la lista «Lista» (form.ctg-lista-cel); lo de .ctg-pc se va y aparece lo de .ctg-cel (el RUC y
   «Oculto» bajo el nombre). */
.ctg-libro{display:grid;grid-template-columns:228px minmax(0,1fr);padding:0;overflow:hidden}
.ctg-indice{padding:14px 10px;background:var(--hover-suave);border-right:1px solid var(--line-soft)}
.ctg-rotulo{margin:0 0 6px;padding:0 10px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-tenue)}
.ctg-indice a{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:8px 10px;border-radius:var(--r-m);font-size:14px;color:var(--ink-soft);text-decoration:none}
.ctg-indice a:hover{background:var(--line-soft);color:var(--ink)}
.ctg-indice a[aria-current]{background:var(--verde-suave);color:var(--verde);font-weight:700}
.ctg-indice a:focus-visible{outline:2px solid var(--mango-dark);outline-offset:2px}
.ctg-n{font-size:12px;font-weight:600;color:var(--ink-tenue);font-variant-numeric:tabular-nums}
.ctg-indice a[aria-current] .ctg-n{color:var(--verde)} /* sobre el verde suave, la tinta tenue no se lee */
.ctg-hoja{min-width:0;padding:18px 20px 20px}
.ctg-hoja-cab{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.ctg-hoja-cab h3{margin:0 auto 0 0;font-size:18px}
.ctg-n-hoja{margin-left:4px;font-family:"Hanken Grotesk",sans-serif;font-size:13px;font-weight:500;color:var(--ink-soft)}
.ctg-hoja-cab .ctl-buscar{flex:0 1 260px;min-width:0}
.ctg-hoja>.abierta.recuadro,.ctg-hoja>.notice{margin:0 0 14px}
.ctg-ancho{grid-column:span 2}
.ctg-nota{margin:10px 0 0;font-size:12.5px;color:var(--ink-soft)}
form.ctg-lista-cel{display:none}

/* La tabla: se desplaza en su marco; el nombre es el botón de la fila, con «¿Repetido?» al lado. */
.ctg-marco{overflow-x:auto;max-width:100%}
.ctg-tabla td{vertical-align:top}
.ctg-tabla td.ctg-nombre{min-width:220px;white-space:normal;overflow-wrap:anywhere} /* un nombre largo sin espacios se parte: no desborda la tarjeta */
.ctg-tabla td.ctg-nombre>.pill{margin-left:8px}
.ctg-tabla td.ctg-uso{white-space:nowrap}
.ctg-cel{display:none}
.ctg-tabla tbody.fila-nueva>tr.fila-abre>td{animation:resaltarFila 3s ease-out}
.ctg-vacio{margin:0;color:var(--ink-soft)}
.ctg-marco+.ctg-vacio{margin-top:12px}

/* La fila abierta: el formulario (el nombre a lo ancho, el RUC al lado) y, a la derecha de su pie, «🗑 Quitar de la lista», que es otro
   formulario. Quien solo mira: el nombre, el autocompletado y dónde se usa, en texto. */
.ctg-ficha-cuerpo{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px}
.ctg-ficha-form{flex:1 1 440px;min-width:0;margin:0}
.ctg-ficha-form>*+*{margin-top:12px}
.ctg-ficha-form .form-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.ctg-ficha-form .ctg-ancho{grid-column:auto}
.ctg-ficha-pie{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ctg-quitar{margin:0 0 0 auto}
.ctg-rot{display:block;margin-bottom:6px;font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.ctg-lote{margin:0;padding:10px 0;font-size:14px;overflow-wrap:anywhere}
.ctg-lote a{margin-left:8px;font-weight:600}
.ctg-usos{font-size:13px;color:var(--ink-soft);overflow-wrap:anywhere}
.ctg-usos b{font-weight:600;color:var(--ink)}
.ctg-ver{font-size:14px;overflow-wrap:anywhere}
.ctg-tabla .fila-ficha-caja>.ctg-ver+.ctg-ver,.ctg-tabla .fila-ficha-caja>.ctg-ver+.ctg-usos{margin-top:4px}

/* Por unir: una pareja por fila, con su lista en mayúsculas chicas y lo que dice la regla. «Cuál se queda» (eleccionEnFila) va apilado y a
   todo el ancho, y a su derecha los dos botones en fila: el formulario de unir no hace caja (display:contents), así su elección y su
   «⇄ Unir» se alinean con el formulario de «No son el mismo». La pareja a la que lleva «¿Repetido?» se resalta un momento. */
.ctg-pares{margin:0;padding:0;list-style:none}
.ctg-par{padding:16px 4px;scroll-margin-top:calc(var(--cab-alto) + 10px)}
.ctg-par:first-child{padding-top:4px}
.ctg-par:last-child{padding-bottom:4px}
.ctg-par+.ctg-par{border-top:1px solid var(--line-soft)}
.ctg-par:target{animation:resaltarFila 3s ease-out}
.ctg-par-lista{margin:0;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-tenue)}
.ctg-par-que{margin:2px 0 10px;font-size:14px;color:var(--ink-soft)}
.ctg-par-acc{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ctg-par-acc>.ctg-par-unir{display:contents}
.ctg-par .eleccion{flex:1 1 320px;min-width:0;margin-right:8px}
.ctg-par .eleccion-ops{flex-direction:column;flex-wrap:nowrap;gap:6px}
.ctg-par .eleccion-ops>label{display:flex}
.ctg-par .eleccion-ops input+span{flex:1 1 auto;min-width:0;border-radius:var(--r-m);overflow-wrap:anywhere}
.ctg-par-distintos{margin:0}
.ctg-par-nombre{margin:0;font-size:14px;overflow-wrap:anywhere}
.ctg-par-nombre b{font-weight:600}
.ctg-par-nombre+.ctg-par-nombre{margin-top:4px}
.ctg-par-prop{margin:6px 0 0;font-size:13px;color:var(--ink-soft);overflow-wrap:anywhere}
.ctg-pie{margin:-8px 32px 20px;font-size:13px;color:var(--ink-soft)}
/* Lo que cambió: la línea de tiempo común; «y N más en la bitácora» al pie. */
.ctg-mas{margin:4px 0 0;font-size:13px;color:var(--ink-soft)}

@media (prefers-reduced-motion: reduce){
  .ctg-tabla tbody.fila-nueva>tr.fila-abre>td{animation:none}
  .ctg-par:target{animation:none}
}
/* Celular y tableta: una columna, sin el índice; el buscador en su línea y los dos botones en la siguiente; la fila abierta en una
   columna, con «🗑» debajo; los campos en 16 px (el teléfono no acerca la página al escribir). */
@media (max-width: 880px){
  body:has(.ctg-libro) .frase-estado h2{font-size:21px}
  .ctg-libro{grid-template-columns:minmax(0,1fr)}
  .ctg-indice{display:none}
  .ctg-hoja{padding:14px}
  form.ctg-lista-cel{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
  form.ctg-lista-cel label{font-size:12.5px;font-weight:600;color:var(--ink-soft)}
  form.ctg-lista-cel select{flex:1 1 180px;min-width:0}
  .ctg-hoja-cab h3{flex:1 1 100%}
  .ctg-hoja-cab .ctl-buscar{flex:1 1 100%}
  .ctg-hoja-cab>.btn,.ctg-hoja-cab>.btn-primary{flex:1 1 0;justify-content:center}
  table.datos.ctg-tabla .ctg-pc{display:none}
  .ctg-cel{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:4px;font-size:13px;color:var(--ink-soft)}
  .ctg-tabla td.ctg-nombre{min-width:0}
  .ctg-ficha-form{flex-basis:100%}
  .ctg-ficha-form .form-grid{grid-template-columns:minmax(0,1fr)}
  .ctg-quitar{margin-left:0}
  .ctg-hoja :is(input,select){font-size:16px}
  .ctg-pie{margin-left:14px;margin-right:14px}
}
/* Tarjetas: el nombre es el título de su tarjeta, sin el rótulo de columna. En Por unir, las dos opciones a todo el ancho y los dos
   botones debajo, a lo ancho, uno al lado del otro. */
@media (max-width: 640px){
  table.datos.ctg-tabla td.ctg-nombre{display:block}
  table.datos.ctg-tabla td.ctg-nombre::before{content:none}
  .ctg-par .eleccion{flex-basis:100%;margin-right:0}
  .ctg-par-unir>button,.ctg-par-distintos{flex:1 1 0;min-width:0}
  .ctg-par-unir>button,.ctg-par-distintos>button{justify-content:center}
  .ctg-par-distintos>button{width:100%}
}
@media (max-width: 520px){
  .ctg-pie{margin-left:10px;margin-right:10px}
}
/* ==== fin cfg-catalogos-11nov ==== */
/* ==== cfg-campanias-11nov ==== */
/* Campañas (Configuración, «Papel sereno»): la lista de campañas (ul.lista.cpn-lista de rrhh.css, una fila por campaña con sus recuadros
   de alta, edición y cierre como li hermanos, que abreDebajoInit abre de a uno), el cuadro de la fruta, la línea de cada fila, el cierre
   (⏳ en ul.por-mirar y ✓ en .cpn-hechos) y las cerradas viejas plegadas. */
ul.cpn-lista>li.cpn-fila{gap:14px}
.cpn-fruta{display:grid;place-items:center;width:42px;height:42px;flex-shrink:0;border-radius:12px;background:var(--line-soft);font-size:20px;line-height:1}
.cpn-lista li[data-estado="cerrada"]>.cpn-fruta{opacity:.55}
ul.cpn-lista .t>b{font-family:"Bricolage Grotesque",sans-serif;font-size:16px;font-weight:600}
ul.cpn-lista .t>.pill{margin-left:8px;vertical-align:2px}
ul.cpn-lista .t>p.cpn-linea{font-size:13.5px}
.cpn-solo-ger{font-size:13px;color:var(--ink-soft)}
/* Los recuadros son li del mismo ul que las filas: sin el flex de la fila, debajo del texto (42 px del cuadro y 14 de hueco). */
ul.cpn-lista>li.recuadro{display:block;margin:0 4px 14px 60px}
.cpn-ayuda{display:block;margin-top:4px;font-size:12.5px;color:var(--ink-soft)}
.cpn-nota{margin:12px 0 0;max-width:74ch;font-size:13px;color:var(--ink-soft)}
.cpn-activa{margin-top:12px}
.cpn-cab{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0 0 4px}
.cpn-cab h4{margin:0;font-family:"Bricolage Grotesque",sans-serif;font-size:15px;font-weight:600}
.cpn-cab small{font-size:13px;color:var(--ink-soft)}
.cpn-lista .por-mirar li{padding:10px 0}
.cpn-hechos{list-style:none;margin:6px 0 0;padding:0;font-size:13.5px;color:var(--ink-soft)}
.cpn-hechos li{padding:4px 0}
ul.cpn-lista>li.cpn-viejas{display:block;padding:12px 4px}
.cpn-viejas>details>summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink-soft)}
.cpn-viejas>details>.cpn-lista{margin-top:6px}
ul.cpn-lista>li.fila-vacia{display:block;font-size:14px;color:var(--ink-soft)}
/* La fila recién creada se resalta 3 s, como las de las tablas (resaltarFila de styles.css). */
ul.cpn-lista>li.fila-nueva{animation:resaltarFila 3s ease-out}
/* El ancla (#camp-<id>, #nueva) deja la fila bajo la cabecera fija, no tapada por ella. */
.cpn-lista li[id^="camp-"],.cpn-lista>li#nueva{scroll-margin-top:calc(var(--cab-alto) + 8px)}
/* La revisión antes de guardar, debajo del formulario de su recuadro: la respuesta del POST llega con su ancla (#rev<id>) y la cabecera
   fija no la tapa. El aviso, las tres tablas en su marco (se desplaza de lado si no caben) y la confirmación; la diferencia en verde o
   en rojo, la cuenta de registros en tinta suave y «· antes» en mango oscuro, por clase. */
.cpn-revision{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);scroll-margin-top:calc(var(--cab-alto) + 8px)}
.cpn-revision>.notice{margin:0}
.cpn-revision>*+.notice{margin-top:16px}
.cpn-revision>h4{margin:18px 0 8px;font-family:"Bricolage Grotesque",sans-serif;font-size:15px;font-weight:600}
.cpn-revision>h4+.cpn-nota{margin:0 0 10px}
.cpn-revision>.cpn-marco+.cpn-nota{margin:10px 0 0}
.cpn-marco{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m)}
.cpn-mas{color:var(--good)}
.cpn-menos{color:var(--bad)}
.cpn-cuenta{margin-left:2px;font-size:13px;font-weight:400;color:var(--ink-soft)}
.cpn-antes{margin-left:2px;font-size:12.5px;font-weight:600;color:var(--mango-dark)}
/* «Una tras otra»: las campañas mes a mes. El marco se desplaza de lado (data-al-final lo abre en el mes de hoy) y adentro va una rejilla
   de 18 meses iguales, sin hueco ni relleno de lado: así la raya de hoy (un svg que cubre la rejilla) cae en su porcentaje exacto. En la
   primera fila, cada mes (año, nombre, cifra y barra); debajo, un carril por fila, con cada banda en su columna (.cpn-c), su ancho (.cpn-s)
   y su carril (.cpn-r). La banda pinta un tramo por mes: cerrada en tinta suave sobre línea, abierta en verde sobre verde suave y la activa
   con borde verde 2; el mes sin fruta va rayado y los que vienen, punteados y sin relleno. */
.cpn-uto>.tbl-tools{margin-bottom:10px}
.cpn-marco-uto{overflow-x:auto;padding-bottom:2px}
.cpn-rejilla{position:relative;display:grid;grid-template-columns:repeat(18,minmax(40px,1fr));row-gap:6px;padding-bottom:20px}
.cpn-mes{grid-row:1;display:flex;flex-direction:column;align-items:center;min-width:0;border-left:1px solid var(--line-soft)}
.cpn-mes:first-child{border-left:0}
.cpn-anio{align-self:flex-start;height:16px;padding-left:4px;font-size:12px;font-weight:700;line-height:16px;color:var(--ink-soft)}
.cpn-mes-n{margin-bottom:auto;font-size:12px;line-height:16px;color:var(--ink-soft)}
.cpn-mes-hoy>.cpn-mes-n{font-weight:700;color:var(--ink)}
.cpn-cifra{margin-top:6px;font-size:12px;line-height:14px;color:var(--ink-soft);white-space:nowrap}
.cpn-cifra.cpn-nada{font-weight:600;color:var(--mango-dark);white-space:normal;text-align:center}
.cpn-col{display:flex;align-items:flex-end;justify-content:center;width:100%;height:46px;margin-top:3px;border-bottom:1px solid var(--line)}
.cpn-barra{display:block;width:62%;max-width:26px;height:100%;fill:var(--verde-suave)}
.cpn-c1{grid-column-start:1}.cpn-c2{grid-column-start:2}.cpn-c3{grid-column-start:3}.cpn-c4{grid-column-start:4}.cpn-c5{grid-column-start:5}.cpn-c6{grid-column-start:6}
.cpn-c7{grid-column-start:7}.cpn-c8{grid-column-start:8}.cpn-c9{grid-column-start:9}.cpn-c10{grid-column-start:10}.cpn-c11{grid-column-start:11}.cpn-c12{grid-column-start:12}
.cpn-c13{grid-column-start:13}.cpn-c14{grid-column-start:14}.cpn-c15{grid-column-start:15}.cpn-c16{grid-column-start:16}.cpn-c17{grid-column-start:17}.cpn-c18{grid-column-start:18}
.cpn-s1{grid-column-end:span 1}.cpn-s2{grid-column-end:span 2}.cpn-s3{grid-column-end:span 3}.cpn-s4{grid-column-end:span 4}.cpn-s5{grid-column-end:span 5}.cpn-s6{grid-column-end:span 6}
.cpn-s7{grid-column-end:span 7}.cpn-s8{grid-column-end:span 8}.cpn-s9{grid-column-end:span 9}.cpn-s10{grid-column-end:span 10}.cpn-s11{grid-column-end:span 11}.cpn-s12{grid-column-end:span 12}
.cpn-s13{grid-column-end:span 13}.cpn-s14{grid-column-end:span 14}.cpn-s15{grid-column-end:span 15}.cpn-s16{grid-column-end:span 16}.cpn-s17{grid-column-end:span 17}.cpn-s18{grid-column-end:span 18}
.cpn-r1{grid-row:2}.cpn-r2{grid-row:3}.cpn-r3{grid-row:4}.cpn-r4{grid-row:5}.cpn-r5{grid-row:6}.cpn-r6{grid-row:7}
.cpn-banda{position:relative;display:flex;align-items:center;min-width:0;height:36px;margin:0 2px;padding:0 9px;font-size:13px;font-weight:700;color:var(--verde)}
.cpn-tramos{position:absolute;inset:0;display:flex}
.cpn-tramo{flex:1 1 0;min-width:0;border:2px solid transparent;border-left-width:0;border-right-width:0;background:var(--ok-soft)}
.cpn-tramo:first-child{border-left-width:2px;border-radius:9px 0 0 9px}
.cpn-tramo:last-child{border-right-width:2px;border-radius:0 9px 9px 0}
.cpn-tramo:only-child{border-radius:9px}
/* La que empieza antes de la ventana sigue a la izquierda: su primer tramo no cierra la banda. */
.cpn-de-antes .cpn-tramo:first-child{border-left-width:0;border-top-left-radius:0;border-bottom-left-radius:0}
.cpn-banda-t{position:relative;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cpn-banda-t small{margin-left:4px;font-size:12px;font-weight:500;opacity:.85}
.cpn-b-cerrada{color:var(--ink-soft)}
.cpn-b-cerrada .cpn-tramo{background:var(--line)}
.cpn-b-activa{color:var(--bosque)}
.cpn-b-activa .cpn-tramo{background:var(--verde-suave);border-color:var(--verde-2)}
.cpn-tramo.cpn-sin{background:repeating-linear-gradient(135deg,var(--ok-soft) 0 6px,var(--card) 6px 12px)}
.cpn-b-cerrada .cpn-tramo.cpn-sin{background:repeating-linear-gradient(135deg,var(--line) 0 6px,var(--line-soft) 6px 12px)}
.cpn-b-activa .cpn-tramo.cpn-sin{background:repeating-linear-gradient(135deg,var(--verde-suave) 0 6px,var(--ok-soft) 6px 12px)}
.cpn-tramo.cpn-viene{background:none;border-style:dashed;border-color:var(--verde-vivo)}
.cpn-b-cerrada .cpn-tramo.cpn-viene{border-color:var(--line-strong)}
.cpn-b-activa .cpn-tramo.cpn-viene{border-color:var(--verde-2)}
.cpn-hoy{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.cpn-hoy line{stroke:var(--ink);stroke-width:2}
.cpn-hoy text{font-size:12px;font-weight:700;fill:var(--ink);text-anchor:middle;paint-order:stroke;stroke:var(--card);stroke-width:4px;stroke-linejoin:round}
.cpn-leyenda{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--ink-soft)}
.cpn-muestra{display:inline-block;width:14px;height:10px;margin-right:6px;border-radius:3px;vertical-align:-1px}
.cpn-muestra-barra{background:var(--verde-suave)}
.cpn-muestra-sin{background:repeating-linear-gradient(135deg,var(--ok-soft) 0 3px,var(--card) 3px 6px);border:1px solid var(--verde-suave)}
.cpn-muestra-liso{background:var(--ok-soft)}
.cpn-uto-frase{margin:14px 0 0;max-width:78ch;font-size:14.5px}
/* Lo que cambió: una fila por línea de la bitácora, con la fecha, quién (la insignia de 34 px, o ⚙ del sistema) y lo que dice; debajo, en
   chico, los campos que cambiaron. El texto arranca a la altura del centro de la insignia. En el celular la fecha va arriba del texto. */
ul.cpn-cambios>li{align-items:flex-start;gap:12px;padding:12px 4px}
.cpn-cambios .cpn-cuando{width:76px;flex-shrink:0;padding-top:8px;font-size:12.5px;color:var(--ink-soft)}
.cpn-cambios>li>.av{--av:34px}
ul.cpn-cambios .t>p.cpn-que{margin:0;padding-top:6px;font-size:14px;color:var(--ink)}
ul.cpn-cambios .t>p.cpn-campos{margin:2px 0 0;font-size:12.5px;color:var(--ink-soft)}
ul.cpn-cambios>li.fila-vacia{display:block;font-size:14px;color:var(--ink-soft)}
.cpn-pie{margin:14px 0 0;font-size:13px;color:var(--ink-soft)}
@media (prefers-reduced-motion:reduce){ul.cpn-lista>li.fila-nueva{animation:none}}
@media (max-width:880px){
  ul.cpn-lista>li.cpn-fila{gap:10px 12px}
  ul.cpn-lista>li.cpn-fila>.acciones{padding-left:54px}
  ul.cpn-lista>li.recuadro{margin-left:0;margin-right:0}
}
/* En el celular los botones bajan a todo el ancho, debajo del texto, y los campos van en 16 px (iOS no acerca la página al enfocarlos). */
@media (max-width:640px){
  ul.cpn-lista>li.cpn-fila>.acciones{padding-left:0}
  ul.cpn-lista>li.cpn-fila>.acciones>*{flex:1 1 0;min-width:0}
  ul.cpn-lista>li.cpn-fila>.acciones :is(a,button){width:100%}
  ul.cpn-lista>li.recuadro{padding:12px}
  ul.cpn-lista .fld input{font-size:16px}
  /* Las tablas de la revisión van como tarjetas (t-cards de styles.css): cada fila ya trae su borde, así que el marco se quita. */
  .cpn-marco{overflow-x:visible;background:none;border:0;border-radius:0}
  /* «Una tras otra» se desplaza dentro de su marco, 40 px por mes: sin el texto chico de las bandas ni la cifra de cada mes (quedan en el
     title y en el texto para el lector). */
  .cpn-banda-t small,.cpn-cifra{display:none}
  .cpn-banda{height:32px;padding:0 6px;font-size:12px}
  /* Lo que cambió: la insignia a la izquierda y, a su lado, la fecha arriba del texto. */
  ul.cpn-cambios>li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:2px 12px}
  .cpn-cambios .cpn-cuando{grid-column:2;grid-row:1;width:auto;padding-top:0}
  .cpn-cambios>li>.av{grid-column:1;grid-row:1/span 2}
  .cpn-cambios>li>.t{grid-column:2;grid-row:2}
  ul.cpn-cambios .t>p.cpn-que{padding-top:0}
}
/* ==== fin cfg-campanias-11nov ==== */
/* ==== cfg-parametros-11nov ==== */
/* Parámetros «Papel sereno» (_parametros_vistas.js, prefijo prm-). Una columna angosta, como la maqueta: las pestañas, la frase y cada
   sección caben en 1,120 px. Las pestañas son las de subPestanas en la página, subrayadas aquí: sin la pastilla, una raya fina debajo
   de todas y la elegida con su raya de 2 px; se deslizan de lado en cualquier ancho (hojasInit deja la elegida a la vista). */
.prm-hojas{max-width:1120px}
.prm-hojas>.subtabs{flex-wrap:nowrap;gap:2px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);margin-bottom:18px}
.prm-hojas>.subtabs>a{padding:10px 14px 9px;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;font-size:14px;color:var(--ink-soft)}
.prm-hojas>.subtabs>a:not([aria-selected="true"]):hover{border-bottom-color:var(--line);color:var(--ink)}
.prm-hojas>.subtabs>[aria-selected="true"]{border-bottom-color:var(--verde-2);background:none;color:var(--verde);font-weight:700}
.prm-hojas>.subtabs>a:focus-visible{outline-offset:-2px}
/* Cada sección: la cabecera con quién la cambió a la derecha (abajo en el celular) y, al llegar por su ancla, deja sitio a la cabecera
   de la página. */
.prm-seccion{scroll-margin-top:var(--cab-alto,84px)}
.prm-seccion>.notice{margin:0 0 16px}
.prm-cab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin-bottom:14px}
.prm-cab>h3{margin:0}
.prm-cambio{font-size:12.5px;color:var(--ink-soft)}
/* El campo con su unidad dentro del mismo borde: el marco lleva el borde, el foco y el anillo del teclado; el campo, ninguno. La de soles
   va delante (S/ 113.00). En ámbar mientras el valor está por revisar. */
.prm-unidad{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-m);background:var(--card);overflow:hidden}
.prm-unidad:focus-within{border-color:var(--verde-2)}
.prm-unidad:has(:focus-visible){outline:2px solid var(--mango-dark);outline-offset:2px}
.prm-unidad>.ctl{flex:1 1 auto;min-width:0;border:0;border-radius:0;background:transparent}
.prm-unidad>.ctl:focus-visible{outline:none}
.prm-unidad>span{padding:0 12px;font-size:13px;color:var(--ink-soft);white-space:nowrap}
.prm-antes>span{order:-1;padding-right:0}
.prm-ojo{border-color:var(--mango);background:var(--mango-soft)}
.prm-ojo>.ctl{font-weight:700;color:var(--mango-dark)}
/* El sueldo mínimo que se lee, los montos por fecha y la subida, plegada en su recuadro de papel. */
.prm-lee{margin:0 0 14px;font-size:14px;color:var(--ink-soft)}
.prm-lee b{color:var(--ink)}
.prm-subt{margin:18px 0 8px;font-size:13px;font-weight:700}
.prm-origen form{display:inline-block;margin-left:8px;vertical-align:middle}
.prm-subida{margin-top:14px}
.prm-subida>summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--verde-2)}
.prm-subida>form{margin-top:12px;padding:14px 16px;border:1px dashed var(--line-strong);border-radius:var(--r-m);background:var(--paper)}
.prm-nota{margin:10px 0 0;font-size:12.5px;color:var(--ink-soft)}
/* El pie: lo que la usa a la izquierda y el «Guardar» de la sección a la derecha; en el celular, uno debajo del otro y el botón a todo
   el ancho. */
.prm-pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line-soft)}
.prm-usan{margin:0;font-size:12.5px;color:var(--ink-soft)}
.prm-guardar{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
.prm-sin{font-size:12.5px;color:var(--ink-soft)}
@media (max-width: 640px){
  .prm-cab{flex-direction:column;align-items:flex-start}
  .prm-pie{flex-direction:column;align-items:stretch}
  .prm-guardar{margin-left:0}
  .prm-guardar>.btn-primary{flex:1;justify-content:center}
}
/* La frase corta de qué es cada sección, debajo de su cabecera. */
.prm-para{margin:0 0 14px;max-width:70ch;font-size:13.5px;color:var(--ink-soft)}
.prm-cab+.prm-subt{margin-top:0}
/* 🏭 La temperatura al despachar: desde y hasta, cada uno con su °C, en un solo campo que ocupa dos columnas. */
.prm-doble{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px;align-content:start;grid-column:span 2}
.prm-doble>label,.prm-doble>.ayuda{grid-column:1/-1}
/* 🥭 La tabla de fruta en planta: los campos a la derecha, con su ancho; en el celular va como tarjetas. */
.prm-fruta .ctl{width:140px;max-width:100%;text-align:right}
.prm-fruta+.form-grid{margin-top:14px}
/* 📦 🧺 El ejemplo de cada margen, en su recuadro de papel. */
.prm-ejemplo{margin:12px 0 0;padding:8px 12px;border-radius:var(--r-s);background:var(--paper);font-size:12.5px;color:var(--ink-soft)}
/* 🗓️ Un año por fila: el año, el campo de los meses (o sus 12 casillas, con el JS) y «Campaña II desde»; la nota, debajo. */
.prm-anio{display:grid;grid-template-columns:64px minmax(0,1fr) 250px;gap:8px 12px;align-items:center;padding:10px 0;border-bottom:1px dashed var(--line-soft)}
.prm-anio:last-of-type{border-bottom:0}
.prm-anio>b{grid-column:1;font-family:"Bricolage Grotesque",sans-serif;font-size:16px}
.prm-anio>.prm-texto,.prm-anio>.prm-meses{grid-column:2}
.fld.prm-ii{grid-column:3;display:flex;align-items:center;gap:8px}
.fld.prm-ii>label{margin:0;white-space:nowrap}
.fld.prm-ii>.ctl{flex:1 1 auto;min-width:0}
.prm-anio-nota{grid-column:2/-1;margin-top:-4px;font-size:12.5px;color:var(--ink-soft)}
.prm-meses{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px}
.prm-mes{position:relative;display:flex;align-items:center;justify-content:center;height:34px;border:1.5px solid var(--line);border-radius:var(--r-s);background:var(--card);font-size:12.5px;color:var(--ink-soft);cursor:pointer;user-select:none}
.prm-mes:hover{border-color:var(--verde-2)}
.prm-mes:has(:checked){border-color:var(--verde);background:var(--verde);color:var(--card);font-weight:700}
.prm-mes:has(:focus-visible){outline:2px solid var(--mango-dark);outline-offset:2px}
.prm-mes:has(:disabled){cursor:default}
.prm-mes>.prm-mes-ck{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* ✅ Quién da el visto bueno: casillas para gerencia, pastillas y el candado para los demás. */
.prm-lo-da{grid-column:span 2}
.prm-vb{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;min-height:42px}
.prm-candado{margin:6px 0 2px;font-size:12.5px;color:var(--ink-soft)}
/* 🛠️ 🚚 Las filas de las letras y de los vehículos: nombre o tipo, la letra (70 px) o la placa (110 px) y el ✕. */
.prm-filas{display:grid;gap:6px;max-width:560px}
.prm-fila{display:grid;grid-template-columns:minmax(0,1fr) 70px 34px;gap:8px;align-items:center}
.prm-filas[data-prm-filas="vehiculos"]>.prm-fila{grid-template-columns:minmax(0,1fr) 110px 34px}
.prm-fila>.ctl{width:100%;min-width:0}
.prm-fila>.prm-letra{text-align:center;font-weight:700}
.prm-fila>.prm-placa{font-weight:600}
.prm-fila>.prm-quitar{width:34px;height:34px}
.prm-filas>[data-prm-agregar]{justify-self:start;margin-top:4px}
.prm-aviso-letra{margin:8px 0 0;font-size:13px;font-weight:600;color:var(--mango-dark)}
/* Con el menú al lado, por debajo de 1,100 px las 12 casillas no caben junto a «Campaña II desde»: ese campo baja debajo de los meses. */
@media (max-width: 1100px){
  .prm-anio{grid-template-columns:64px minmax(0,1fr)}
  .fld.prm-ii,.prm-anio-nota{grid-column:2}
  .prm-anio-nota{margin-top:0}
}
@media (max-width: 880px){
  .prm-doble,.prm-lo-da{grid-column:1/-1}
  .prm-anio{grid-template-columns:minmax(0,1fr)}
  /* los meses y el texto llevan columna 2 con más peso que .prm-anio>*: sin nombrarlos aquí abren una segunda columna y la lista
     de «Campaña II desde» y la nota quedan en la primera, angosta (captura del cierre, 390 px) */
  .prm-anio>*,.prm-anio>.prm-texto,.prm-anio>.prm-meses,.fld.prm-ii{grid-column:1/-1}
  .prm-anio-nota{margin-top:0}
  .prm-meses{grid-template-columns:repeat(6,minmax(0,1fr))}
}
/* ==== fin cfg-parametros-11nov ==== */
/* ==== cfg-tipo-cambio-11nov ==== */
/* Tipo de cambio diario «Papel sereno» (_tipo_cambio_vistas.js). «Escribir otro» y «Escribir el de hoy» abren su li.abierta.tcd-esc,
   pegado debajo de su fila de «Por mirar». Escondido de verdad: el display:grid de .por-mirar .abierta (rrhh.css) taparía el hidden.
   Con su borde entero aunque sea el último de la lista. Su fila no lleva raya mientras está abierto (el recuadro va justo debajo), ni
   cuando es la última a la vista y su recuadro está cerrado. */
.por-mirar li.tcd-esc[hidden]{display:none}
.por-mirar li.tcd-esc.abierta{border:1px solid var(--line)}
.por-mirar li:has(+ li.tcd-esc[hidden]:last-child),.por-mirar li:has(+ li.tcd-esc:not([hidden])){border-bottom:0}
/* Lo que se dice de paso (el error de la carga automática de hoy), en tinta suave. */
.tcd-suave{color:var(--ink-soft)}
/* En el celular los botones de «Por mirar» bajan debajo del texto (rrhh.css) y aquí pasan a la línea de abajo cuando no caben (el raro
   lleva tres), cada uno en una sola línea. El recuadro ya va a todo el ancho (rrhh.css); su campo también, en 16 px para que el teléfono
   no acerque la pantalla al escribir. */
@media (max-width:880px){
  .tcd-vista .por-mirar .acciones{flex-wrap:wrap}
  .tcd-vista .por-mirar .acciones .btn-mini{white-space:nowrap}
  .por-mirar li.tcd-esc .fld{flex:1 1 100%}
  .por-mirar li.tcd-esc .ctl{font-size:16px}
}
/* La barra del calendario: el mes a la izquierda y, para quien edita, «Completar» y «Cargar un día» a la derecha. «Cargar un día» abre
   su recuadro entre la barra y el calendario. */
.tcd-cal-barra{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;margin-bottom:14px}
.tcd-cal-acc{display:flex;flex-wrap:wrap;gap:8px}
.tcd-cal-acc form{margin:0}
.abierta.recuadro.tcd-cargar{margin:0 0 14px}
.tcd-cargar form,.tcd-dia>form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px;margin:0}
.tcd-cargar .fld,.tcd-dia>form .fld{flex:0 1 240px;min-width:0;margin:0}
.tcd-botones{display:flex;flex-wrap:wrap;gap:8px}
.tcd-nota{flex-basis:100%;margin:0;font-size:12.5px;color:var(--ink-soft)}
/* El calendario del mes (calendarioTc): 7 columnas de lunes a domingo, con los huecos antes del día 1. La celda entera es el enlace al
   día. El fin de semana va en papel, hoy con el borde verde y el día abierto con su contorno de tinta. «falta» (registros esperando) en
   mango suave; el raro con el borde mango y el valor en mango oscuro; un día sin nada que hacer, con una raya corta. */
.tcd-cal{max-width:760px}
.tcd-cal-sem,.tcd-cal-dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.tcd-cal-sem{margin-bottom:4px}
.tcd-cal-sem span{font-size:12px;font-weight:700;color:var(--ink-soft);text-align:center}
.tcd-cal-d{min-width:0;min-height:62px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--card)}
.tcd-cal-vacio{min-height:62px}
.tcd-cal-d.finde{background:var(--paper)}
.tcd-cal-d.pend{background:var(--mango-soft)}
.tcd-cal-d.raro{border-color:var(--mango)}
.tcd-cal-d.hoy{border-color:var(--verde-2);outline:1px solid var(--verde-2);outline-offset:-2px}
.tcd-cal-d.abierto{outline:2px solid var(--ink);outline-offset:1px}
.tcd-cal-d>a,.tcd-cal-d>span{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr;gap:2px 4px;height:100%;padding:6px 8px;color:inherit;text-decoration:none}
.tcd-cal-d>a:hover{text-decoration:none}
.tcd-cal-d:has(>a:hover){border-color:var(--verde-2)}
.tcd-cal-d b{font-size:12px;font-weight:600;color:var(--ink-soft)}
.tcd-cal-marca{justify-self:end;min-width:0;overflow:hidden;font-size:12px;color:var(--ink-soft);white-space:nowrap;text-overflow:ellipsis}
.tcd-cal-v,.tcd-raya{grid-column:1/-1;align-self:end}
.tcd-cal-v{font-family:"Bricolage Grotesque",sans-serif;font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.tcd-cal-d.pend .tcd-cal-v,.tcd-cal-d.raro .tcd-cal-v{color:var(--mango-dark)}
.tcd-cal-d.pend .tcd-cal-v{font-family:inherit;font-size:13px}
.tcd-raya{width:14px;height:2px;border-radius:1px;background:var(--line)}
/* El día abierto: un recuadro papel bajo el calendario, dentro de su panel (sin la sombra ni los márgenes de un panel suelto). Las
   anclas #dia y #cargar dejan arriba el alto de la cabecera fija. */
.panel.tcd-dia{margin:14px 0 0;padding:14px 16px;background:var(--paper);border-radius:var(--r-m);box-shadow:none;scroll-margin-top:calc(var(--cab-alto) + 10px)}
.tcd-vista #cargar{display:block;scroll-margin-top:calc(var(--cab-alto) + 10px)}
.tcd-dia>p{margin:6px 0 0;font-size:13.5px}
.tcd-dia>p.tcd-dia-origen{margin-top:2px;color:var(--ink-soft)}
.tcd-dia>form{margin-top:12px}
.tcd-dia-pie{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tcd-dia-pie form{margin:0}
/* El resumen del mes en una línea y la línea del mes: segmentos y puntos por clase (verde la línea, mango lo raro y lo que falta). */
.tcd-res{margin:14px 0 0;font-size:13px;color:var(--ink-soft)}
.tcd-res b{font-weight:600;color:var(--ink)}
.tcd-linea-fig{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--line-soft)}
.tcd-linea-fig figcaption{font-size:12.5px;color:var(--ink-soft)}
.tcd-linea{display:block}
.tcd-l{stroke:var(--verde-2);stroke-width:2;stroke-linecap:round}
.tcd-l-pt{fill:var(--verde)}
.tcd-l-t{font-size:12px;font-weight:600;fill:var(--ink)}
.tcd-l-raro{fill:var(--mango)}
.tcd-l-rt{font-size:12px;fill:var(--mango-dark)}
.tcd-l-falta{stroke:var(--mango);stroke-width:1.5;stroke-dasharray:3 3}
/* En el celular: el calendario sigue en 7 columnas, con celdas más bajas, el valor en 12.5 px y sin «a mano» (lo dice el lector de
   pantalla); la barra en dos líneas (el mes arriba, los botones abajo a todo el ancho); el día abierto a todo el ancho con sus botones
   abajo; los campos en 16 px. */
@media (max-width:880px){
  .tcd-vista #tcd-cal{padding-left:12px;padding-right:12px}
  .tcd-cal-sem,.tcd-cal-dias{gap:4px}
  .tcd-cal-d,.tcd-cal-vacio{min-height:48px}
  .tcd-cal-d>a,.tcd-cal-d>span{padding:4px 5px}
  .tcd-cal-v{font-size:12.5px}
  .tcd-cal-d.pend .tcd-cal-v{font-size:12px}
  .tcd-cal-marca{display:none}
  .tcd-cal-acc{width:100%}
  .tcd-cal-acc>*{flex:1 1 auto}
  .tcd-cal-acc .btn,.tcd-cal-acc .btn-primary{width:100%;justify-content:center}
  .panel.tcd-dia{padding:12px}
  .tcd-cargar .fld,.tcd-dia>form .fld{flex:1 1 100%}
  .tcd-cargar .ctl,.tcd-dia .ctl{font-size:16px}
  .tcd-botones,.tcd-dia-pie{width:100%}
}
/* Todos los días: la línea de arriba y el pie de quien solo mira, alineados con los paneles; un details.panel.tcd-mes por mes, más
   juntos que un panel suelto, con el mes y su cuenta en una fila (la cuenta a la derecha) y ▸ / ▾ delante. La tabla se desplaza dentro de
   su marco (position:relative: el rótulo .solo-lector de las acciones se queda dentro). El valor en tinta y en cifras parejas; el día,
   el cambio y el origen en tinta suave; lo que pasa del 2 %, «falta» y lo escrito a mano, en mango oscuro. */
.tcd-todos-dice{margin:4px 32px 14px;font-size:13.5px;color:var(--ink-soft)}
.tcd-todos-pie{margin:4px 32px 0;font-size:13px}
.panel.tcd-mes{margin-bottom:12px;padding-top:14px;padding-bottom:14px}
.tcd-mes>summary{display:flex;align-items:baseline;gap:6px 12px;cursor:pointer;list-style:none;font-size:13.5px;color:var(--ink-soft)}
.tcd-mes>summary::-webkit-details-marker{display:none}
.tcd-mes>summary::before{content:"▸";flex:none;font-size:12px;color:var(--ink-soft)}
.tcd-mes[open]>summary::before{content:"▾"}
.tcd-mes>summary:focus-visible{outline:2px solid var(--mango-dark);outline-offset:4px;border-radius:var(--r-s)}
.tcd-mes[open]>summary{margin-bottom:12px}
.tcd-mes-t{flex:1;min-width:0}
.tcd-mes-t b{font-family:"Bricolage Grotesque",sans-serif;font-size:16px;font-weight:600;color:var(--ink)}
.tcd-mes>summary>span:last-child{flex:none;font-size:13px}
.tcd-marco{position:relative;overflow-x:auto}
.tcd-mes td.tcd-t-fecha{font-weight:600}
.tcd-mes td.tcd-t-dia,.tcd-mes td.tcd-t-dif{color:var(--ink-soft)}
.tcd-mes td.tcd-t-v{font-weight:600;font-variant-numeric:tabular-nums}
.tcd-mes td.tcd-t-dif{font-variant-numeric:tabular-nums}
.tcd-mes td.tcd-t-orig{font-size:12.5px;color:var(--ink-soft)}
.tcd-mes td.col-acc{text-align:right}
.tcd-mes td.col-acc>a,.tcd-mes td.col-acc form{vertical-align:middle} /* el 🗑 va en su formulario: sin esto queda 3.6 px más abajo que el ✎ */
.tcd-mes td.col-acc form{display:inline-block;margin:0 0 0 6px}
.tcd-dif-alta{color:var(--mango-dark);font-weight:600}
.tcd-falta{color:var(--mango-dark);font-weight:600}
.tcd-mano{color:var(--mango-dark);font-weight:600}
.tcd-t-v .tcd-suave{font-weight:400}
@media (max-width:880px){
  .tcd-todos-dice,.tcd-todos-pie{margin-left:14px;margin-right:14px}
  .panel.tcd-mes{padding-left:12px;padding-right:12px}
}
@media (max-width:520px){
  .tcd-todos-dice,.tcd-todos-pie{margin-left:10px;margin-right:10px}
}
/* En el celular cada día es una tarjeta (t-cards): la fecha, el día, el valor y el cambio en una línea; el origen debajo, con ✎ y 🗑 a
   la derecha. Sin rótulos: la línea se lee sola, como en la maqueta. Cada celda va en su lugar aunque la del cambio salga vacía. */
@media (max-width:640px){
  .tcd-mes table.t-cards tbody tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:baseline;gap:4px 10px;padding:10px 12px}
  .tcd-mes table.t-cards td{display:block;padding:0}
  .tcd-mes table.t-cards td::before{content:none}
  .tcd-mes table.t-cards td.tcd-t-fecha{grid-column:1;grid-row:1}
  .tcd-mes table.t-cards td.tcd-t-dia{grid-column:2;grid-row:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .tcd-mes table.t-cards td.tcd-t-v{grid-column:3;grid-row:1}
  .tcd-mes table.t-cards td.tcd-t-dif{grid-column:4;grid-row:1;text-align:right}
  .tcd-mes table.t-cards td.tcd-t-orig{grid-column:1/4;grid-row:2;min-width:0}
  .tcd-mes table.t-cards td.col-acc{display:flex;grid-column:4;grid-row:2;align-items:center;justify-content:flex-end;gap:6px}
  .tcd-mes table.t-cards td.col-acc form{margin:0}
}
/* En un teléfono de 360 px la casilla deja unos 30 px: «3.467» a 12.5 px no cabe y toca el borde. Se gana el ancho con menos
   separación y relleno, sin bajar la letra de 12 px (el mínimo de areas.css). */
@media (max-width:400px){.tcd-cal-sem,.tcd-cal-dias{gap:2px}.tcd-cal-d>a,.tcd-cal-d>span{padding:4px 2px}.tcd-cal-v,.tcd-cal-d.pend .tcd-cal-v{font-size:12px}}
/* ==== fin cfg-tipo-cambio-11nov ==== */