/* ============================================================
   Vistas de RR. HH. (Asistencia, Vacaciones y liquidaciones, Tarjetas, Menú del día, Colaboradores): lo que antes iba al final de styles.css. Se enlaza en todas
   las páginas justo después de styles.css (render.js › page), así que la cascada es la misma; los tokens (--verde, --line…) son de
   styles.css. Lo nuevo de un módulo de RR. HH. va aquí, en su bloque.
   ============================================================ */
/* ---------- Vistas de RR. HH. (rediseño de Asistencia, 03/11): pestañas, frase de estado, «Por mirar» y «Quién está hoy» ---------- */
.tabs-vista{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:0 32px 18px;overflow-x:auto;scrollbar-width:none}
.tabs-vista a,.tabs-vista span{padding:10px 14px 11px;font-size:14px;color:var(--ink-soft);white-space:nowrap;position:relative;border-radius:8px 8px 0 0;text-decoration:none}
.tabs-vista a:hover{color:var(--ink);background:var(--line-soft)}
.tabs-vista span[aria-current="page"]{color:var(--verde);font-weight:700}
.tabs-vista span[aria-current="page"]::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2.5px;border-radius:2px;background:var(--verde)}
.tabs-vista .der{margin-left:auto}
.tabs-vista .n{font-size:12px;font-weight:700;background:var(--mango-soft);color:var(--mango-dark);border-radius:999px;padding:1px 7px;margin-left:6px}
.frase-estado{margin:4px 32px 22px}
.frase-estado h2{margin:0;font-family:"Bricolage Grotesque",sans-serif;font-size:26px;font-weight:600;line-height:1.25}
.frase-estado h2 :is(em,b){font-style:normal;font-weight:inherit;color:var(--verde)}
.frase-estado p{margin:6px 0 0;color:var(--ink-soft);font-size:15px}
.por-mirar{list-style:none;margin:0;padding:0}
.por-mirar li{display:flex;align-items:center;gap:14px;padding:14px 4px;border-bottom:1px solid var(--line-soft)}
.por-mirar li:last-child{border-bottom:0}
.por-mirar .ic{width:34px;height:34px;border-radius:var(--r-m);display:grid;place-items:center;background:var(--line-soft);font-size:16px;flex-shrink:0}
.por-mirar .t{flex:1;min-width:0;font-size:14.5px}
.por-mirar .t q{color:var(--ink-soft);font-style:italic;quotes:"«" "»"}
.por-mirar .acciones{display:flex;gap:8px;flex-shrink:0}
.por-mirar .sub{display:block;margin-top:2px;font-size:12.5px;color:var(--ink-soft)}
.por-mirar form{margin:0}
.por-mirar li.con-desp{display:block;padding:0}
.por-mirar li.con-desp>details>summary{display:flex;align-items:center;gap:14px;padding:14px 4px;list-style:none;cursor:pointer}
.por-mirar li.con-desp>details>summary::-webkit-details-marker{display:none}
.por-mirar .abierta{display:grid;gap:12px;margin:0 4px 14px 52px;padding:14px 16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m)}
.por-mirar .abierta form{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.por-mirar .abierta .fld{margin:0;flex:0 1 300px;min-width:0}
.por-mirar-vacio{margin:2px 0;color:var(--ink-soft)}
/* Una persona (_rrhh_vistas.js › avatar): su foto o sus iniciales en un círculo de --av (44px de fábrica; 64 en la cabecera de la
   ficha). Sin foto, uno de seis fondos de los tokens con su tinta, fijo por persona (data-t = 1 + id % 6). */
.av{display:inline-grid;place-items:center;flex:none;box-sizing:border-box;width:var(--av,44px);height:var(--av,44px);border-radius:50%;font-size:max(12px,calc(var(--av,44px) * .38));font-weight:700;line-height:1;vertical-align:middle;user-select:none}
img.av{object-fit:cover;border:1px solid var(--line);background:var(--line-soft)}
.av[data-t="1"]{background:var(--verde);color:#fff}
.av[data-t="2"]{background:var(--mango-soft);color:var(--mango-dark)}
.av[data-t="3"]{background:var(--mal-soft);color:var(--terracota)}
.av[data-t="4"]{background:var(--info-soft);color:var(--info-tinta)}
.av[data-t="5"]{background:var(--line-soft);color:var(--ink-soft)}
.av[data-t="6"]{background:var(--ok-soft);color:var(--verde)}
.tbl-tools>.ph-sub{margin:0}
.quien-hoy{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:6px}
.quien-hoy h4{margin:0 0 10px;font-size:13px;font-weight:700;display:flex;justify-content:space-between;color:var(--ink)}
.quien-hoy h4 span{color:var(--ink-soft);font-weight:600}
.quien-hoy ul{list-style:none;margin:0;padding:0}
.quien-hoy li{display:flex;justify-content:space-between;gap:8px;padding:6px 0;font-size:13.5px;border-bottom:1px dashed var(--line-soft)}
.quien-hoy li:last-child{border-bottom:0}
/* La hora («08:34 · 4 min») nunca se parte: si falta espacio, se parte el nombre (.n), por palabras. Solo si al nombre le quedarían
   menos de 11 letras al lado (columnas de unos 150 px: el celular y las pantallas de 1,024), la hora baja entera a la línea de abajo
   en vez de dejar el nombre en cinco líneas. */
.quien-hoy li:has(.n){flex-wrap:wrap;row-gap:2px}
.quien-hoy .n{flex:1 1 11ch;min-width:0;overflow-wrap:break-word}
.quien-hoy .h{color:var(--ink-soft);font-size:13px;white-space:nowrap;flex:none}
.quien-hoy .h.tarde{color:var(--mango-dark);font-weight:600}
.quien-hoy ul+h4{margin-top:18px}
.quien-hoy li.nadie{color:var(--ink-soft)}
/* El mes: la barra (mes, buscador, ✍ Anotar a mano y la leyenda corta), el cuadro con el nombre fijo, el día de una persona en su
   fila propia (sticky; el guion de la vista lo deja del ancho que se ve del marco) y lo plegado debajo. Sin container-type en el
   marco: con una tabla adentro, Chromium se caía al medir la página (armonizar). */
.mes-barra .mes-nav{display:inline-flex;margin:0}
.mes-anotar{position:relative}
.mes-anotar>summary{list-style:none}
.mes-anotar>summary::-webkit-details-marker{display:none}
.mes-anotar .abierta{position:absolute;top:calc(100% + 6px);left:0;z-index:20;width:min(460px,calc(100vw - 48px));display:grid;gap:10px;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow)}
.mes-anotar .anotar-form{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin:0}
.mes-anotar .fld{margin:0;flex:1 1 160px;min-width:0}
.mes-anotar p{margin:0;font-size:12.5px}
.leyenda-mes{margin-left:auto;display:flex;gap:6px 14px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-soft)}
.leyenda-mes b{font-weight:700}
.leyenda-mes .t{color:var(--mango-dark)}
.leyenda-mes .x{color:var(--bad)}
.leyenda-mes .l{color:#255e93}
table.datos.cuadro-mes{font-size:12.5px}
table.cuadro-mes .fija{position:sticky;left:0;z-index:2;background:var(--card);box-shadow:inset -1px 0 0 var(--line)}
table.cuadro-mes td.fija b{font-weight:600}
table.cuadro-mes .c{text-align:center}
table.cuadro-mes td.c{position:relative;padding:8px 4px}
table.cuadro-mes td.aj{color:#255e93}
table.cuadro-mes a.dia{position:absolute;inset:0}
table.cuadro-mes a.dia:hover{background:rgba(47,125,91,.08)}
table.cuadro-mes a.dia.abierto{background:rgba(47,125,91,.10);box-shadow:inset 0 0 0 2px var(--verde)}
table.cuadro-mes a.dia:focus-visible{outline:2px solid var(--mango-dark);outline-offset:-2px}
table.cuadro-mes tr.fila-dia>td{padding:0;white-space:normal;background:var(--line-soft)}
table.datos.cuadro-mes tbody tr.fila-dia:hover>td{background:var(--line-soft)}
#dia{scroll-margin-top:150px} /* deja a la vista la barra de arriba y la fila de la persona, encima de su día */
.dia-panel{position:sticky;left:8px;box-sizing:border-box;margin:8px;max-width:min(964px,calc(100vw - 48px));padding:16px 18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m)}
.dia-cab{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap}
.dia-cab h4{margin:0;font-size:15px;font-weight:700}
.dia-cerrar{margin-left:auto;font-size:13px}
/* Las tres partes del día se reacomodan solas cuando no caben (a 1,024 px «¿Fue algo especial?» quedaba angosto). Sin container-type:
   colgaba Chromium junto con armonizar. */
.dia-partes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:18px 24px;margin-top:14px}
.dia-parte h5{margin:0 0 8px;font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.dia-parte p{margin:0 0 8px;font-size:13px}
.dia-marcas{list-style:none;margin:0 0 10px;padding:0}
.dia-marcas li{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px dashed var(--line);font-size:13px}
.dia-marcas li:last-child{border-bottom:0}
.dia-marcas .h{min-width:44px}
.dia-marcas form{margin:0 0 0 auto}
.dia-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0}
.dia-form .ctl{min-width:0;flex:1 1 120px}
.dia-form input[type=time].ctl{flex:0 1 120px}
/* «hasta» en «¿Fue algo especial?»: el mismo ajuste para varios días (vacaciones, licencia); vacío, solo ese día. */
.dia-hasta{display:flex;align-items:center;gap:6px;flex:0 1 200px;min-width:0;margin:0;font-size:13px;color:var(--ink-soft)}
.dia-hasta .ctl{flex:1 1 auto;min-width:0}
.dia-marcas .origen{white-space:nowrap}
/* En las tres columnas del día, cada parte lleva sus campos en una fila y su botón debajo, a la izquierda: los tres botones quedan
   parejos (en una columna angosta el de la marca saltaba solo a otra línea y el de la observación no). */
@media (min-width:881px){
  .dia-form{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:center}
  .dia-form>.btn{grid-column:1;justify-self:start}
  .dia-form .dia-obs{grid-column:1/-1}
  /* «¿Fue algo especial?»: la lista y la nota lado a lado solo si su columna da para las dos; si no, una debajo de la otra. */
  .dia-form.dia-aj{grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr))}
}
.dia-nota{display:flex;gap:6px 10px;align-items:center;flex-wrap:wrap;margin-top:6px;font-size:12.5px}
.dia-nota form{margin:0}
.mes-ayuda{margin:10px 0 0;font-size:12.5px;color:var(--ink-soft)}
.mes-leyenda{margin-top:6px;font-size:12.5px;color:var(--ink-soft)}
.mes-leyenda>summary{cursor:pointer;font-weight:600}
.mes-leyenda p{margin:6px 0 0}
details.mes-plegado>summary{cursor:pointer;font-family:"Bricolage Grotesque",sans-serif;font-size:16px;font-weight:600}
details.mes-plegado[open]>summary{margin-bottom:12px}
.mes-lista{list-style:none;margin:0;padding:0}
.mes-lista li{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line-soft);font-size:13.5px}
.mes-lista li:last-child{border-bottom:0}
.mes-lista .t{flex:1;min-width:0}
.mes-lista form{margin:0}
table.datos td.lejos-dias,table.datos td.obs-txt{white-space:normal}
details.mes-plegado table.t-cards td{vertical-align:top} /* el nombre arriba, junto a su primera entrada lejos, no a media lista */
details.mes-plegado .form-grid>.form-foot{grid-column:1/-1} /* «Guardar» de «＋ Registrar un ajuste»: su raya a todo el ancho */
td.lejos-dias span{display:block}
@media (max-width:880px){
  .dia-partes{grid-template-columns:1fr}
  .leyenda-mes{margin-left:0}
}
@media (max-width:640px){
  .mes-anotar{flex:1 1 100%}
  .mes-anotar .abierta{position:static;width:auto;margin-top:8px;box-shadow:none}
  .dia-form .ctl:not([type=time]){flex:1 1 100%}
  /* El nombre fijo en dos líneas: a lo ancho, en el celular dejaba poco más de dos días a la vista. */
  table.cuadro-mes .fija{min-width:150px;max-width:150px;white-space:normal}
}
@media (max-width:880px){
  .tabs-vista{margin:0 14px 16px}
  .frase-estado{margin:4px 14px 18px}
  .frase-estado h2{font-size:21px}
  .por-mirar li,.por-mirar li.con-desp>details>summary{flex-wrap:wrap;align-items:flex-start}
  .por-mirar .acciones{width:100%;padding-left:48px}
  .por-mirar .abierta{margin-left:4px}
  .quien-hoy{grid-template-columns:1fr 1fr;gap:18px}
}
@media (max-width:520px){.tabs-vista{margin:0 10px 16px}.frase-estado{margin:4px 10px 18px}}
/* Documentos (_asistencia_reglas.js): una lista tranquila, una fila por documento con su nombre (enlace), una frase y sus botones. */
ul.lista{list-style:none;margin:0;padding:0}
ul.lista>li{display:flex;align-items:center;gap:14px;padding:16px 4px;border-bottom:1px solid var(--line-soft)}
ul.lista>li:last-child{border-bottom:0}
ul.lista .t{flex:1;min-width:0}
ul.lista .t>a,ul.lista .t>b{font-size:15px;font-weight:600;color:var(--ink)}
ul.lista .t>a:hover{color:var(--verde)}
ul.lista .t p{margin:3px 0 0;font-size:13px;color:var(--ink-soft)}
ul.lista .acciones{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0}
/* ⚙ Reglas: paneles con ancla; adentro, bloques .regla-sub separados por una raya (el primero, sin ella), valores en texto para quien
   solo mira (.reglas-valores), pastillas con ✕ (.chip.con-x › .chip-x) y la fila «¿Y si…?» (.reglas-si). */
.reglas-panel{scroll-margin-top:96px} /* al volver a su ancla después de guardar, el título queda bajo la cabecera, no tapado */
.regla-sub{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)}
.reglas-panel>.tbl-tools+.regla-sub{margin-top:0;padding-top:0;border-top:0}
.regla-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0 0}
.regla-form .ctl{flex:0 1 280px;min-width:0}
.regla-vacio{margin:6px 0 0;font-size:12.5px}
.reglas-valores{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px 24px;margin:0}
.reglas-valores dt{font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.reglas-valores dd{margin:2px 0 0;font-size:15px;font-weight:600}
.reglas-nota{margin:10px 0 0;font-size:12.5px;color:var(--ink-soft)}
.reglas-panel>.tbl-tools+.reglas-nota{margin:0 0 12px}
.reglas-panel .notice{margin:12px 0 0}
.reglas-form .form-foot{flex-wrap:wrap;margin-top:16px;padding-top:14px}
.ubic-aviso{font-size:12.5px;color:var(--ink-soft)}
.ubic-aviso.mal{color:var(--bad)}
.reglas-si{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line-soft);font-size:13.5px}
.reglas-si .ctl{flex:0 0 130px}
.reglas-si input[type=month].ctl{flex-basis:180px}
.reglas-si .muted{font-size:12.5px}
.chips-lista{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips-lista .chip{max-width:100%}
.chip.con-x{display:inline-flex;align-items:center;gap:4px;padding:3px 4px 3px 12px}
.chip.con-x form{margin:0;display:inline-flex}
.chip.pasado{color:var(--ink-soft)}
.chip-x{display:inline-grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--ink-soft);font-size:12px;cursor:pointer}
.chip-x:hover{background:#F7E3DE;color:var(--bad)}
.reglas-nota+.chips-lista{margin-top:0}
.form-grid.reglas-tres{grid-template-columns:repeat(3,minmax(0,1fr))}
.feriado-nuevo{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
.feriado-nuevo input[type=date]{flex:0 1 170px}
.feriado-nuevo input[name=nombre]{flex:1 1 220px;max-width:340px;min-width:0}
@media (max-width:880px){
  ul.lista>li{flex-wrap:wrap}
  ul.lista .acciones{width:100%}
  .regla-form .ctl{flex:1 1 100%}
  .form-grid.reglas-tres{grid-template-columns:minmax(0,1fr)}
  .reglas-si input[type=month].ctl{flex:1 1 200px}
}
/* La hora de lactancia (_lactancia.js): persona, cuándo, desde y hasta en la fila de .regla-form; en el celular, una por línea. */
.lact-form select[name=momento].ctl{flex:0 1 150px}
.lact-fecha{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-soft)}
.lact-fecha .ctl{flex:0 1 170px}
@media (max-width:880px){
  .lact-form select[name=momento].ctl{flex:1 1 100%}
  .lact-fecha{flex:1 1 100%}
  .lact-fecha .ctl{flex:1 1 auto}
}
/* Vacaciones › Por programar (_vacaciones_programar.js): la barra, la fila de una persona con sus días a la derecha (li.vac-persona),
   lo que se abre debajo ([data-abre] → .abierta), los cuadritos .dias (los colores de las pastillas), «Quién sale» (.salen), los
   plegados (details.pleg) y las dos explicaciones del pie, lado a lado. */
.vac-barra .filtro-emp{margin:0}
.vac-barra .ctl-buscar{flex:0 1 280px}
.vac-barra .vac-excel{margin-left:auto}
:is(.vac-lista,.vac-lista-pleg)>li[id],:is(table.saldos,table.liq) :is(tbody,tr)[id],:is(#nuevo,#lista,#quien-sale,#registradas,#otra,details.pleg[id]){scroll-margin-top:150px} /* al volver a su fila después de guardar, queda bajo la cabecera y el aviso, como #dia */
.vac-grupo+.vac-grupo{margin-top:18px}
.grupo-r{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:2px 0}
.grupo-r h4{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.grupo-r span{font-size:12.5px;color:var(--ink-soft)}
ul.lista.vac-lista>li,ul.lista.vac-lista-pleg>li{display:block;padding:0}
.vac-fila{display:flex;align-items:flex-start;gap:14px;padding:14px 4px}
.vac-quien{flex:1;min-width:0}
.vac-quien .quien{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap}
.vac-quien .nm{font-size:15px;font-weight:600;color:var(--ink)}
.vac-quien a.nm:hover{color:var(--verde)}
.vac-quien .det,.vac-quien .plazo{margin-top:2px;font-size:13px;color:var(--ink-soft)}
.vac-quien .det .muted,.vac-quien .det a{white-space:nowrap}
.vac-persona.urg .plazo{color:var(--bad);font-weight:600}
.vac-quien .asis{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;margin-top:8px;padding:7px 10px 7px 12px;border-radius:var(--r-s);background:var(--info-soft);color:var(--info-tinta);font-size:13px}
.vac-quien .asis a{margin-left:auto;font-weight:700;color:var(--info-tinta);text-decoration:underline}
.vac-fila .cuanto{width:150px;flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px;padding-top:1px}
.cuanto>b{font-family:"Bricolage Grotesque",sans-serif;font-size:20px;font-weight:600;line-height:1;white-space:nowrap}
.cuanto>b small{font-family:"Hanken Grotesk",sans-serif;font-size:13px;font-weight:500;color:var(--ink-soft)}
.vac-barras{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
ul.lista .vac-fila .acciones{display:flex;gap:8px;flex-shrink:0;align-items:center;width:auto}
.dias{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;gap:2px;max-width:133px;vertical-align:middle}
.dias i{width:7px;height:14px}
.dias i,.leyenda-dias i{border-radius:2px;background:var(--mango-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mango) 45%,var(--card))}
.dias i.g,.leyenda-dias i.g{background:var(--ok-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--good) 40%,var(--card))}
.dias i.p,.leyenda-dias i.p{background:var(--info-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--info-tinta) 35%,var(--card))}
.dias i.v,.leyenda-dias i.v{background:var(--line-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink-soft) 30%,var(--card))}
.dias i.u,.leyenda-dias i.u{background:var(--mal-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bad) 45%,var(--card))}
.vac-lista .abierta,.vac-lista-pleg .abierta{margin:0 4px 14px;padding:14px 16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m)}
:is(.vac-prog,.vac-nuevo,.liq-revisar) .ab-tit{display:flex;align-items:baseline;justify-content:space-between;gap:4px 12px;flex-wrap:wrap;margin-bottom:12px}
:is(.vac-prog,.vac-nuevo,.liq-revisar) .ab-tit b{font-size:15px;font-weight:600}
:is(.vac-prog,.vac-nuevo,.liq-revisar) .ab-tit .muted{font-size:12.5px}
.vac-g4{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:end}
.vac-prog .fld,.vac-mas .fld,.vac-nuevo .fld,.liq-revisar .fld,.liq-otra .fld{margin:0}
.vac-g4 .fld :is(input,select),.vac-cese .fld input,.vac-editar .fld input{height:44px} /* la fecha del navegador mide 2 px más que un texto: así las etiquetas y los campos quedan parejos */
:is(.vac-prog,.vac-nuevo,.vac-editar) .cuenta{min-height:44px;display:flex;align-items:center;flex-wrap:wrap;gap:0 4px;font-size:13px;color:var(--ink-soft)}
:is(.vac-prog,.vac-nuevo,.vac-editar) .cuenta b{font-family:"Bricolage Grotesque",sans-serif;font-size:18px;font-weight:600;color:var(--verde)}
:is(.vac-prog,.vac-nuevo,.vac-editar) .cuenta.mal{color:var(--bad);font-weight:600}
.vac-prog .notice{margin:14px 0 0}
:is(.vac-prog,.vac-nuevo) .vac-nota{margin-top:14px}
details.mas{margin-top:12px}
details.mas>summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--verde);list-style:none}
details.mas>summary::-webkit-details-marker{display:none}
details.mas>summary::before{content:"▸ "}
details.mas[open]>summary::before{content:"▾ "}
details.mas[open]>summary{margin-bottom:12px}
.vac-prog .mas-nota{margin:12px 0 0;font-size:13px}
:is(.vac-prog,.vac-nuevo) .form-foot{margin-top:14px;padding-top:12px}
.vac-mas{display:grid;gap:12px}
.vac-mas>.mas-parte+.mas-parte{padding-top:12px;border-top:1px solid var(--line)}
.vac-mas .mas-parte>p{margin:6px 0 0;font-size:12.5px}
.vac-mas form{margin:0}
.vac-cese{display:flex;align-items:flex-end;gap:10px 14px;flex-wrap:wrap}
.vac-cese .fld{flex:0 1 200px;min-width:0}
.vac-cese .fld+.fld{flex:1 1 260px}
.vac-cese-pie{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex-basis:100%;font-size:12.5px}
.vac-mas .mas-ficha{font-size:13.5px}
.vac-nadie{margin:2px 0;color:var(--ink-soft)}
ul.lista.salen>li{padding:12px 4px}
.salen .mesx{width:96px;flex-shrink:0;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
ul.lista.salen .t>b{font-size:14.5px}
.salen .t .muted{font-size:13px}
.salen .rango{font-size:13.5px;white-space:nowrap;text-align:right}
.salen .rango small{display:block;font-size:12.5px;color:var(--ink-soft)}
.vac-plegados{padding-top:6px;padding-bottom:6px}
details.pleg:not([hidden])~details.pleg{border-top:1px solid var(--line-soft)} /* la raya, solo si arriba hay otro a la vista (el buscador esconde los que no tienen a nadie) */
details.pleg>summary{display:flex;align-items:center;gap:10px;padding:12px 4px;list-style:none;cursor:pointer;font-weight:600}
details.pleg>summary::-webkit-details-marker{display:none}
details.pleg>summary::before{content:"▸";width:12px;color:var(--ink-soft)}
details.pleg[open]>summary::before{content:"▾"}
details.pleg>summary .c{font-size:12px;color:var(--ink-soft);background:var(--line-soft);border-radius:999px;padding:1px 8px}
details.pleg>summary .muted{margin-left:auto;font-size:13px;font-weight:400}
details.pleg .vac-lista-pleg{padding:0 0 8px 22px}
.vac-lista-pleg .vac-fila{padding:10px 4px}
.vac-lista-pleg .vac-quien .nm{font-size:14px}
.vac-comos{display:flex;flex-wrap:wrap;gap:8px;margin:0 32px 18px}
.vac-comos>details.notice-det{margin:0}
.vac-comos>details.notice-det[open]{flex-basis:100%}
@media (max-width:880px){
  .vac-fila{flex-wrap:wrap;gap:8px 14px}
  .vac-fila .vac-quien{flex-basis:100%}
  /* Los días bajan bajo el nombre: la cifra encima de sus cuadritos y, a la derecha, las acciones (en una línea a 390 px). */
  .vac-fila .cuanto{width:auto;align-items:flex-start;gap:6px}
  .vac-barras{align-items:flex-start}
  .dias{justify-content:flex-start}
  ul.lista .vac-fila .acciones{margin-left:auto;align-self:center}
  .vac-lista-pleg .vac-fila{flex-wrap:nowrap} /* en lo plegado no hay días: el «⋯» se queda a la derecha del nombre */
  .vac-lista-pleg .vac-fila .vac-quien{flex:1 1 0}
  ul.lista.vac-lista-pleg .vac-fila .acciones{align-self:flex-start}
  .vac-g4{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .vac-g4>.fld:first-child,.vac-g4>.cuenta{grid-column:1/-1}
  .vac-lista .abierta,.vac-lista-pleg .abierta{margin:0 0 14px;padding:12px}
  ul.lista.salen>li{flex-wrap:wrap;gap:2px 14px}
  .salen .mesx{width:100%}
  .salen .mesx:empty{display:none}
  ul.lista.salen .t>b,.salen .t .muted{display:block;line-height:1.35} /* el cargo bajo el nombre; las fechas, a la derecha */
  .salen .rango{text-align:left}
  details.pleg>summary{flex-wrap:wrap;row-gap:2px}
  details.pleg>summary .muted{flex-basis:100%;margin-left:22px}
  details.pleg .vac-lista-pleg{padding-left:0}
  .vac-barra .ctl-marco>:is(input,select){font-size:16px}
  .vac-comos{margin:0 14px 16px}
}
@media (max-width:520px){.vac-comos{margin:0 10px 16px}}
/* Vacaciones › Saldos por periodo (_vacaciones_saldos.js): «＋ Registrar vacaciones» abre arriba su recuadro (#nuevo); la tabla table.saldos
   se desplaza en su marco con el nombre fijo (td.fija, solo en la primera fila de la persona: tr.prim lleva la raya de arriba); un
   periodo sin registro va en tinta suave (.sr), el saldo negativo en rojo (.neg) y el registro abierto con el contorno verde
   (tr.abierto); el ✎ abre su fila propia (data-en-fila). Debajo, el pie, la leyenda de los cuadritos y lo plegado. Sin container-type. */
.vac-barra>.btn-primary{white-space:nowrap} .vac-nuevo form{margin:0} .vac-nuevo .vac-colab{max-width:520px;margin-bottom:14px} .vac-editar .vac-nota{grid-column:span 2}
.vac-nuevo{margin:-6px 32px 20px;padding:16px 18px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m)}
.acc-panel .acc-borrar{margin:0;padding-top:12px;border-top:1px solid var(--line-soft)}
table.saldos th,table.saldos td{padding-left:10px;padding-right:10px} table.saldos tbody td{border-bottom:0;vertical-align:top} table.saldos tbody tr.prim>td{border-top:1px solid var(--line)}
table.datos.saldos tbody tr:nth-child(even) td{background:var(--card)} table.datos.saldos tbody tr:hover td{background:var(--paper)}
table.saldos .fija{position:sticky;left:0;z-index:2;min-width:220px;max-width:220px;white-space:normal;background:var(--card);box-shadow:inset -1px 0 0 var(--line-soft)}
table.saldos td.fija b{display:block;font-weight:600} table.saldos td:is(.fija,.num,.sal) small{display:block;font-size:12.5px;color:var(--ink-soft)} table.saldos td.num small{font-size:12px}
table.saldos .neg{color:var(--bad)} table.saldos tr.sr>td:not(.fija):not(.col-acc){color:var(--ink-soft)} table.saldos tr.abierto{outline:2px solid var(--verde-2);outline-offset:-2px}
table.saldos td.sal{white-space:normal;min-width:180px} table.saldos .dias{justify-content:flex-start;width:133px;max-width:none;margin-top:2px} table.saldos td.col-acc form{display:inline;margin:0}
table.saldos .saldos-nadie{color:var(--ink-soft);white-space:normal} .saldos-pie{margin:14px 0 0;font-size:13.5px;color:var(--ink-soft)} .saldos-pie b{color:var(--ink);font-weight:700}
.leyenda-dias{display:flex;gap:6px 16px;flex-wrap:wrap;margin-top:8px;font-size:12.5px;color:var(--ink-soft)} .leyenda-dias span{display:inline-flex;align-items:center;gap:6px} .leyenda-dias i{width:10px;height:10px}
details.pleg .saldos-marco{margin:0 0 10px} .saldos-aun{list-style:none;margin:0 0 8px;padding:0 0 0 22px;font-size:13.5px} .saldos-aun li{padding:5px 0;border-bottom:1px solid var(--line-soft)} .saldos-aun li:last-child{border-bottom:0}
.reglas-subir{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px} /* ⚙ Reglas › el Excel de control: el botón del archivo y «Ver qué entra» en una fila */
@media (max-width:880px){.vac-nuevo{margin:-6px 14px 16px;padding:12px}.vac-nuevo .vac-colab{max-width:none}.vac-nuevo .fld :is(input,select){font-size:16px}.saldos-aun{padding-left:0}}
@media (max-width:640px){table.saldos .fija{min-width:150px;max-width:150px}.acc-form.vac-editar{grid-template-columns:minmax(0,1fr)}.vac-editar .vac-nota{grid-column:auto}.liq-editar>div.fld:nth-of-type(-n+3){grid-column:1/-1}table.liq td:first-child{min-width:150px;white-space:normal}}
@media (max-width:520px){.vac-nuevo{margin:-6px 10px 16px}.liq-al-pie{margin:0 10px 16px}}
/* Vacaciones › Liquidaciones (_liquidaciones_vista.js): Por liquidar es la lista de Por programar, con el total propuesto en .cuanto; «Revisar y guardar» abre lo
   de su ficha en solo lectura (.de-ficha), los montos con su ayuda y el total que se suma al escribir (.total); Registradas es table.liq. En el celular, 2 columnas. */
.cuanto>span{font-size:12.5px;color:var(--ink-soft)} .liq-revisar form{margin:0} form.liq-otra{margin:0;padding:2px 4px 12px} .liq-al-pie{margin:0 32px 18px;font-size:13px;color:var(--ink-soft)}
.de-ficha{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-bottom:14px;padding:10px 14px;border:1px dashed var(--line);border-radius:var(--r-m);background:var(--card);font-size:13.5px} .de-ficha>b{font-weight:600} .de-ficha .par{white-space:nowrap} .de-ficha .par i{margin-right:6px;font-style:normal;color:var(--ink-soft)} .de-ficha>:last-child{margin-left:auto;font-size:13px}
.liq-montos,.liq-otra{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:start} .liq-otra .liq-colab{grid-column:span 2} .liq-otra>:is(.liq-nota,.liq-pie){grid-column:1/-1} .liq-revisar .liq-nota{margin-top:14px} .liq-editar .liq-nota-ed{grid-column:span 2}
.fld .ayuda{display:block;margin-top:4px;font-size:12px;color:var(--ink-soft)} .liq-revisar .reglas-nota{margin:12px 0 0} .liq-pie{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px} .liq-pie>.muted{font-size:12.5px} .liq-otra>.liq-pie{margin-top:0}
form[data-suma] .total{margin-left:auto;text-align:right} form[data-suma] .total small{display:block;font-size:12.5px;color:var(--ink-soft)} form[data-suma] .total b{font-family:"Bricolage Grotesque",sans-serif;font-size:22px;font-weight:600;white-space:nowrap}
table.liq td>b{display:block;font-weight:600} table.liq td>small{display:block;font-size:12.5px;color:var(--ink-soft)} table.liq td.motivo{min-width:180px;white-space:normal;font-size:13px;color:var(--ink-soft)} table.liq tr.abierto{outline:2px solid var(--verde-2);outline-offset:-2px} table.liq td.col-acc form{display:inline;margin:0}
@media (max-width:880px){.liq-montos,.liq-otra{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.liq-otra .liq-colab{grid-column:1/-1}.de-ficha{gap:6px 16px}.de-ficha>:last-child{margin-left:0}form[data-suma] .total{flex-basis:100%;margin-left:0;text-align:left}.liq-al-pie{margin:0 14px 16px}}
/* Tarjetas corporativas (_tarjetas_vistas.js): el color de cada empresa ([data-e] en el punto .dot y en la tarjeta dibujada), «Por mirar»
   con los paneles de la vencida en la fila de abajo (li.tj-mirar-sub), el alta (#nuevo), la barra con las pastillas, la lista agrupada
   por empresa (section.tj-grupo; una tarjeta es details.tj-fila con su fila de 4 columnas) y el detalle (.tj-det: la tarjeta dibujada,
   los datos y la tira de 12 meses). Sin container-type. */
:root{--tj-sayser:var(--bosque);--tj-dpm:#2F5470;--tj-jireth:#5A4A26;--tj-frunort:var(--verde-2);--tj-fsl:var(--ink-soft)}
[data-e]{--tj-e:var(--ink-soft)} [data-e="SAYSER"]{--tj-e:var(--tj-sayser)} [data-e="DPM"]{--tj-e:var(--tj-dpm)} [data-e="JIRETH"]{--tj-e:var(--tj-jireth)} [data-e="FRUNORT"]{--tj-e:var(--tj-frunort)} [data-e="FSL"]{--tj-e:var(--tj-fsl)}
.dot[data-e]{display:inline-block;flex-shrink:0;margin-right:7px;vertical-align:1px;background:var(--tj-e)}
.por-mirar li.tj-mirar-sub.abierta{border:1px solid var(--line)}
.por-mirar li:has(+ li.tj-mirar-sub[hidden]:last-child),.por-mirar li:has(+ li.tj-mirar-sub[hidden] + li.tj-mirar-sub[hidden]:last-child){border-bottom:0}
.abierta form.tj-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 14px;align-items:start;margin:0}
.tj-form .fld{margin:0}
.tj-form-tit,.tj-form-pie,.tj-form .tj-todo,.form-grid>.tj-todo{grid-column:1/-1}
.tj-form-tit{display:flex;flex-direction:column;gap:2px}
.tj-form-tit b{font-size:15px;font-weight:600;color:var(--ink)}
.tj-form-tit span{font-size:12.5px;color:var(--ink-soft)}
.tj-form-pie{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tj-ayuda{display:block;margin-top:5px;font-size:12px;color:var(--ink-soft)}
.tj-cab-acc{display:flex;gap:8px;flex-wrap:wrap}
.tj-nueva{margin:0 0 16px;padding:16px 18px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m)}
.tj-nueva .tj-form-tit{margin-bottom:14px}
.tj-nueva .form-foot{margin-top:16px;padding-top:14px}
.tj-barra{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin:0 0 6px}
.tj-barra .ctl-buscar{flex:0 1 330px}
.tj-barra .ctl-buscar>input{flex:1 1 auto;width:100%}
.tj-chips{display:flex;gap:6px;flex-wrap:wrap}
.tj-chips .chip{cursor:pointer;font:inherit;font-size:13px;color:var(--ink)}
.tj-chips .chip .c{margin-left:2px;font-weight:600;color:var(--ink-soft)}
.tj-chips .chip[aria-pressed="true"]{background:var(--verde);border-color:var(--verde);color:#fff}
.tj-chips .chip[aria-pressed="true"] .c{color:#fff}
.tj-fuera{display:none}
.tj-cab,.tj-fila>summary{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1.05fr) minmax(0,1.25fr) minmax(0,1fr) 18px;gap:16px;align-items:center}
.tj-cab{padding:12px 12px 9px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);border-bottom:1px solid var(--line)}
.tj-grupo-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:18px 12px 7px}
.tj-grupo-h b{display:inline-flex;align-items:center;font-family:"Bricolage Grotesque",sans-serif;font-size:15px;font-weight:600}
.tj-grupo-h span{font-size:12.5px;color:var(--ink-soft);text-align:right}
.tj-fila{border-bottom:1px solid var(--line-soft)}
.tj-fila:last-child{border-bottom:0}
.tj-fila>summary{list-style:none;padding:11px 12px;cursor:pointer;border-radius:var(--r-m);transition:background .2s}
.tj-fila>summary::-webkit-details-marker{display:none}
.tj-fila>summary:hover{background:var(--hover-suave)}
.tj-fila[open]>summary{background:var(--ok-soft)}
.tj-fila>summary small{display:block;font-size:12px;font-weight:400;color:var(--ink-soft)}
.tj-persona{display:flex;align-items:center;gap:10px;min-width:0}
.tj-persona>span{min-width:0}
.tj-persona b{font-weight:600}
.tj-tarjeta{white-space:nowrap}
.tj-vence .pill{margin-left:8px}
.tj-hecha{color:var(--good);font-weight:600}
.tj-falta{color:var(--mango-dark);font-weight:600}
.tj-x{font-size:18px;text-align:right;color:var(--ink-soft);transition:transform .2s}
.tj-fila[open] .tj-x{transform:rotate(90deg)}
.tj-de-baja .tj-persona b,.tj-de-baja .tj-tarjeta,.tj-de-baja .tj-vence{color:var(--ink-soft)}
.tj-fila.fila-nueva>summary{animation:resaltarFila 3s ease-out}
.tj-det{display:grid;grid-template-columns:260px minmax(0,1fr);gap:24px;align-items:start;margin:4px 0 14px;padding:16px 18px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m)}
.tj-dibujo{position:relative;isolation:isolate;overflow:hidden;width:100%;max-width:260px;aspect-ratio:1.586;display:grid;grid-template-rows:auto 1fr auto auto;gap:4px;padding:13px 15px;border-radius:14px;background:var(--tj-e);color:#fff}
.tj-dibujo::before,.tj-dibujo::after{content:"";position:absolute;z-index:-1;border-radius:50%;background:rgba(255,255,255,.07)}
.tj-dibujo::before{width:230px;height:230px;right:-80px;top:-110px}
.tj-dibujo::after{width:170px;height:170px;right:40px;bottom:-130px;background:rgba(255,255,255,.05)}
.tj-dib-a{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tj-dib-a b{font-family:"Bricolage Grotesque",sans-serif;font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.tj-chip{display:block;width:36px;height:27px;align-self:center;border-radius:6px;background:var(--mango-soft);border:1px solid rgba(0,0,0,.12);opacity:.92}
.tj-dib-num{font-size:15px;font-weight:600;letter-spacing:.1em;white-space:nowrap}
.tj-dib-pie{display:flex;justify-content:space-between;align-items:end;gap:10px;font-size:13px}
.tj-dib-pie>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tj-dib-v{flex-shrink:0;text-align:right;font-weight:600}
.tj-dib-v small{display:block;font-size:12px;font-weight:400;line-height:1.1;opacity:.78}
.tj-sello{padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;background:rgba(255,255,255,.92);color:var(--ink)}
.tj-sello.pend{background:var(--mango-soft);color:var(--mango-dark)}
.tj-sello.mal{background:var(--mal-soft);color:var(--bad)}
.tj-sello.tj-prepago{padding:0;background:none;color:inherit;font-weight:400;opacity:.78}
.tj-dibujo[data-est="vencida"] .tj-dib-num,.tj-dibujo[data-est="vencida"] .tj-dib-pie{opacity:.62}
.tj-dibujo[data-est="baja"]{background:var(--line-soft);color:var(--ink-soft);border:1.5px dashed var(--line)}
.tj-dibujo[data-est="baja"]::before,.tj-dibujo[data-est="baja"]::after{background:rgba(0,0,0,.025)}
.tj-dibujo[data-est="baja"] .tj-sello{background:var(--card);color:var(--ink-soft)}
.tj-datos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 18px;margin:0}
.tj-datos dt{font-size:12px;color:var(--ink-soft)}
.tj-datos dd{margin:1px 0 0;font-weight:600;overflow-wrap:anywhere}
.tj-datos .tj-ancho{grid-column:1/-1}
.tj-datos .tj-ancho dd{font-weight:400}
.tj-tira-fila{display:flex;align-items:flex-end;gap:8px 16px;flex-wrap:wrap;margin-top:16px}
.tj-tira{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px;flex:1 1 280px;max-width:440px}
.tj-tira i{height:16px;border-radius:4px;background:var(--line-soft)}
.tj-tira i.ok{background:var(--verde-suave)}
.tj-tira i.f{background:var(--mango)}
.tj-tira span{font-size:12px;text-align:center;color:var(--ink-soft)}
.tj-tira-fila a{font-size:13px;font-weight:600;color:var(--verde)}
.tj-acc{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px}
.tj-acc form{display:inline-flex;margin:0}
.tj-nota{font-size:13px;color:var(--ink-soft)} /* la nota de las acciones del detalle y la de Por empresa y mes */
.tj-numero{padding:3px 10px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.06em;background:var(--mango-soft);color:var(--ink)}
.tj-numero.mal{letter-spacing:0;background:var(--mal-soft);color:var(--bad)}
.tj-det-baja{margin-top:14px;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m)}
.tj-vacio{margin:14px 0 4px;text-align:center;color:var(--ink-soft)}
.tj-vacio-lista{margin:4px 0;color:var(--ink-soft)}
.tj-reglas{list-style:none;margin:0;padding:0}
.tj-reglas li{display:flex;align-items:flex-start;gap:14px;padding:14px 4px;border-bottom:1px solid var(--line-soft)}
.tj-reglas li:last-child{border-bottom:0}
.tj-reglas .ic{width:30px;height:30px;flex-shrink:0;display:grid;place-items:center;border-radius:9px;background:var(--line-soft)}
.tj-reglas b{font-weight:600}
.tj-reglas p{margin:2px 0 0;font-size:13px;color:var(--ink-soft)}
/* Recargas (_tarjetas_recargas.js): el medidor por empresa (.tj-medidor, una barra <progress> por empresa: lo hecho de lo previsto), las
   pastillas de las que faltan (.tj-faltan: a.chip para quien edita, span.chip para quien solo mira), la barra con el mes (.tj-mes-nav),
   el aviso «Antes de guardar» del formulario y la tabla del mes (table.tj-recargas, t-cards en el celular con el nombre arriba). */
.tj-medidor{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;margin:-6px 32px 22px}
.tj-medidor b{display:flex;align-items:center;font-size:13.5px;font-weight:600}
.tj-medidor progress{display:block;width:100%;height:6px;margin:7px 0 5px;border:0;border-radius:999px;background:var(--line);color:var(--verde-2);overflow:hidden;-webkit-appearance:none;appearance:none}
.tj-medidor progress::-webkit-progress-bar{background:var(--line);border-radius:999px}
.tj-medidor progress::-webkit-progress-value{background:var(--verde-2);border-radius:999px}
.tj-medidor progress::-moz-progress-bar{background:var(--verde-2);border-radius:999px}
.tj-medidor small{font-size:12.5px;color:var(--ink-soft)}
.tj-faltan{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tj-faltan>b{font-weight:600;margin-right:2px}
.tj-faltan .chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;color:var(--ink)}
.tj-faltan .chip .dot{margin-right:0}
.tj-faltan .chip .c{font-weight:600;color:var(--ink-soft)}
.tj-faltan .tj-vencio{font-size:12px;font-weight:600;color:var(--bad)}
.tj-faltan-nota{margin:10px 0 0;font-size:12.5px;color:var(--ink-soft)}
.tj-mes-nav{display:flex;margin:0}
.tj-rec-barra{margin:0 0 14px}
.tj-rec-barra .tj-cab-acc{margin-left:auto}
.tj-nueva .notice{margin:16px 0 0}
.tj-marco{overflow-x:auto}
table.tj-recargas td.fija{min-width:160px}
table.tj-recargas td.fija b{font-weight:600}
.tj-emp{display:inline-flex;align-items:center;white-space:nowrap}
table.tj-recargas td.col-acc{white-space:nowrap;text-align:right}
table.tj-recargas td.col-acc form{display:inline-flex;margin:0}
.tj-todas{margin:12px 0 0;font-size:13px}
.tj-todas a{font-weight:600;color:var(--verde)}
/* ⚡ Recarga masiva (_tarjetas_recargas.js › masivaHTML): el panel #masiva es el recuadro del alta (.tj-nueva) con la cabecera .tj-m-cab,
   la fecha (.tj-m-fecha), la tabla table.tj-masiva (✓ .tj-ck, persona y tarjeta, su última recarga, el monto en un .ctl-marco .tj-monto
   y el aviso), las que no entran (details.tj-no-entran) y el pie .tj-m-pie. Una fila sin ✓ se apaga (.tj-m-apagada) y una con el monto
   corregido lleva el marco mango (.tj-m-cambia) y «antes S/ …» (.tj-antes). En ≤ 640px cada fila es una tarjeta de dos líneas. */
.tj-m-cab{margin-bottom:4px}
.tj-m-cab h3{margin:0}
.tj-m-cab .ph-sub{margin:0}
.tj-m-lead{margin:0 0 14px;max-width:78ch;font-size:13.5px;color:var(--ink-soft)}
.tj-m-fecha{display:flex;align-items:flex-end;gap:8px 14px;flex-wrap:wrap;margin:0 0 14px}
.tj-m-fecha .fld{flex:0 0 190px;margin:0}
.tj-m-fecha p{margin:0 0 11px;font-size:12.5px;color:var(--ink-soft)}
.tj-masiva .notice{margin:0 0 14px}
.tj-masiva .tj-marco{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m)}
table.tj-masiva tbody tr:last-child td{border-bottom:0}
table.tj-masiva .tj-m-ck{width:36px;padding-right:0}
.tj-ck{width:17px;height:17px;margin:0;vertical-align:middle;accent-color:var(--verde);cursor:pointer}
table.tj-masiva td{vertical-align:middle}
.tj-m-persona{display:flex;align-items:center;gap:10px;min-width:0}
.tj-m-persona .av,.tj-m-sin-av{--av:34px}
.tj-m-sin-av{flex:none;width:34px;height:34px}
.tj-m-persona>span{min-width:0}
.tj-m-persona b{display:block;font-weight:600}
.tj-m-persona small{display:block;font-size:12px;color:var(--ink-soft)}
.tj-m-ult{white-space:nowrap}
.tj-m-el{color:var(--ink-soft)}
.tj-monto{width:130px;min-height:36px;flex-wrap:nowrap}
.tj-monto>input.tj-monto-in{flex:1 1 auto;width:auto;min-width:0;text-align:right}
.tj-antes{display:block;margin-top:3px;font-size:12px;color:var(--mango-dark);white-space:nowrap}
tr.tj-m-cambia .tj-monto{border-color:var(--mango);background:var(--mango-soft)}
tr.tj-m-apagada td,tr.tj-m-apagada .tj-m-persona small{color:var(--ink-soft)}
tr.tj-m-apagada .tj-m-persona b{font-weight:500;color:var(--ink-soft)}
tr.tj-m-apagada .tj-monto{background:var(--line-soft)}
.tj-llega{font-size:12.5px;font-weight:600;color:var(--good);white-space:nowrap}
.tj-sin-usuario{font-size:12.5px;color:var(--ink-soft);white-space:nowrap}
.tj-no-entran{margin:14px 0 0}
.tj-no-entran summary{cursor:pointer;font-size:13px;color:var(--ink-soft)}
.tj-no-entran ul{margin:8px 0 0;padding-left:18px;font-size:13px;color:var(--ink-soft)}
.tj-no-entran li{margin:4px 0}
.tj-no-entran li b{font-weight:600;color:var(--ink)}
.tj-m-vacio{margin:4px 0 0;color:var(--ink-soft)}
.tj-m-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}
.tj-m-suma{margin:0;font-size:14px}
.tj-m-suma b{font-family:"Bricolage Grotesque",sans-serif;font-size:18px}
.tj-m-btns{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.tj-m-btns>:is(.btn,.btn-primary){white-space:nowrap}
@media (max-width:880px){.tj-m-fecha .fld{flex:1 1 100%}.tj-m-fecha p{margin:0}}
@media (max-width:640px){
  table.tj-masiva,table.tj-masiva tbody{display:block}
  table.tj-masiva thead{display:none}
  table.tj-masiva tr{display:grid;grid-template-columns:24px minmax(0,1fr) auto;grid-template-areas:"ck n a" "ck u m";gap:8px 10px;align-items:center;padding:12px 10px;border-bottom:1px solid var(--line-soft)}
  table.tj-masiva tr:last-child{border-bottom:0}
  table.tj-masiva td,table.tj-masiva tbody tr:nth-child(even) td,table.tj-masiva tbody tr:hover td{display:block;padding:0;border:0;white-space:normal;background:none}
  table.tj-masiva td.tj-m-ck{grid-area:ck;align-self:start;width:auto;padding-top:2px}
  table.tj-masiva td.tj-m-per{grid-area:n;min-width:0}
  table.tj-masiva td.tj-m-aviso{grid-area:a;text-align:right}
  table.tj-masiva td.tj-m-ult{grid-area:u;font-size:12.5px}
  table.tj-masiva td.tj-m-monto{grid-area:m;text-align:right}
  .tj-m-persona .av,.tj-m-sin-av{display:none}
  .tj-monto{width:118px}
  .tj-m-pie{flex-direction:column;align-items:stretch}
  .tj-m-btns{flex-direction:column;margin-left:0}
  .tj-m-btns>:is(.btn,.btn-primary){width:100%;justify-content:center}
}
/* Por empresa y mes (_tarjetas_recargas.js): table.tj-cuadro dentro de .tj-marco; la empresa (th.fija) queda fija, el mes en curso (.tj-va)
   va en tinta suave y cada monto es un enlace a las recargas de ese mes y esa empresa. La empresa es un th (encabezado de su fila) con el
   relleno de un td, para quedar a la altura de sus montos; la de Total lleva el fondo de su fila. */
.tj-cuadro-barra{margin:0 0 10px}
.tj-cuadro-barra .tj-cab-acc{margin-left:auto}
table.tj-cuadro th.num{text-align:right}
table.tj-cuadro thead small{display:block;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none}
table.tj-cuadro .fija{position:sticky;left:0;z-index:2;min-width:150px;background:var(--card);box-shadow:inset -1px 0 0 var(--line-soft)}
table.tj-cuadro tbody th.fija,table.tj-cuadro tfoot th.fija{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);text-align:left;white-space:nowrap;border-bottom:1px solid var(--line-soft);padding-top:11px;padding-bottom:11px}
table.tj-cuadro tfoot th.fija{border-top:2px solid var(--line);border-bottom:0;background:var(--line-soft)}
table.tj-cuadro tbody tr:nth-child(even) th.fija{background:var(--cebra)}
table.tj-cuadro .tj-va,table.tj-cuadro td.tj-va a{color:var(--ink-soft)}
table.tj-cuadro thead th.tj-va{background:var(--cebra)}
table.tj-cuadro td a{color:inherit;text-decoration:none}
table.tj-cuadro td a:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){table.tj-cuadro .fija{min-width:120px}}
@media (max-width:640px){
  table.tj-recargas td.fija{min-width:0;font-size:15px}
  table.tj-recargas td.fija::before,table.tj-recargas tfoot td::before{content:none}
}
@media (prefers-reduced-motion:reduce){.tj-fila.fila-nueva>summary{animation:none}.tj-fila>summary,.tj-x{transition:none}}
@media (max-width:880px){
  .tj-cab,.tj-x{display:none}
  /* La fila en dos líneas: el nombre y lo del mes arriba; ····1234 y el vencimiento abajo. */
  .tj-fila>summary{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n m" "t v";gap:6px 12px;padding:12px 6px}
  .tj-persona{grid-area:n}
  .tj-mes{grid-area:m;text-align:right}
  .tj-tarjeta{grid-area:t}
  .tj-vence{grid-area:v;text-align:right}
  .tj-fila .tj-tarjeta small,.tj-fila .tj-vence small{display:none}
  .tj-vence .pill{margin-left:6px}
  .tj-grupo-h{flex-direction:column;gap:2px;padding:16px 6px 6px}
  .tj-grupo-h span{text-align:left}
  .tj-det{grid-template-columns:minmax(0,1fr);gap:16px;padding:14px}
  .tj-datos{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .abierta form.tj-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .abierta form.tj-form>.fld:nth-child(2){grid-column:1/-1}
  .tj-barra .ctl-buscar{flex:1 1 100%}
  .tj-barra .ctl-marco>input{font-size:16px}
  .tj-cab-acc{width:100%}
  .tj-cab-acc>:is(.btn,.btn-primary){flex:1;justify-content:center}
  .tj-nueva{padding:12px}
  .tj-medidor{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 18px;margin:-4px 14px 18px}
  .tj-rec-barra .tj-cab-acc{margin-left:0}
  .tj-rec-barra .tj-cab-acc>.btn{flex:0 0 auto}
}
@media (max-width:520px){.abierta form.tj-form{grid-template-columns:minmax(0,1fr)}.tj-medidor{margin:-4px 10px 18px}}
@media print{.tabs-vista{display:none}}
/* ---------- Menú del día (RR. HH.): Hoy, La semana, Consumo, Documentos y ⚙ Reglas. Su token --line-strong es de styles.css. ---------- */
/* Menú del día › Hoy (_menu_hoy.js): la barra del día con las pastillas de la semana (.menu-dias-semana, la del día que se mira con
   borde verde, un día sin menú en tinta suave), los pedidos del día con su conteo (.menu-conteo: cada plato con una línea de puntos
   hasta sus números; con varias empresas, la de esta en tinta suave y «Todas» grande; debajo, quiénes, y plegados los de las otras
   empresas), lo de debajo (.menu-conteo-notas, con «Fuera ese día» en .menu-conteo-fuera), las hojas del día (.menu-pedidos-pie) y
   «🔔 Avisar» (form.menu-avisar), que en el celular queda fijo abajo, a todo el ancho, con los avisos emergentes encima. «Lo que
   cierra pronto» (#cierra) es un ul.por-mirar; sus formularios y el de «＋ Anotar» son form.menu-form-pedido (la persona, una lista
   por grupo y «No pide», que se acomodan por filas). «✎ Anotar o corregir pedidos» es details.menu-corregir, un panel plegado, con su
   tabla en .menu-corregir-x. .mn-emp (la empresa junto al título) solo sale al imprimir. Las clases llevan el prefijo menu-, como las
   de La semana y Consumo: «conteo», «avisar» o «corregir» son nombres que otro módulo puede usar. Sin container-type. */
#pedidos,#cierra,#corregir,#cierre{scroll-margin-top:96px} /* la cabecera queda fija arriba: que no tape el título al llegar por un ancla */
.mn-emp{display:none}
.menu-barra-hoy{gap:10px 14px}
.menu-barra-dia{margin:0}
.menu-dias-semana,.menu-quincenas{display:flex;gap:6px;flex-wrap:wrap;align-items:center} /* .menu-quincenas: las pastillas de quincena de Consumo, iguales */
:is(.menu-dias-semana,.menu-quincenas) .chip{background:var(--card);border-color:var(--line);font-size:13px;white-space:nowrap}
.menu-dias-semana .chip b{font-weight:700;font-variant-numeric:tabular-nums}
:is(.menu-dias-semana,.menu-quincenas) .chip.sel{border-color:var(--verde);box-shadow:inset 0 0 0 1px var(--verde);font-weight:600}
.menu-dias-semana .chip.sin{color:var(--ink-soft);background:transparent}
.menu-pedidos-cab{align-items:flex-start}
.menu-pedidos-tit h3{margin:0}
.menu-pedidos-estado{margin-top:6px}
.menu-pedidos-estado .pill{white-space:nowrap} /* «Abierto hasta mañana a las 4:00 pm» no se parte */
form.menu-avisar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end;margin:0}
.menu-conteo-cab,.menu-conteo-fila,.menu-conteo-pie{display:flex;align-items:flex-start;gap:16px}
.menu-conteo-cab{padding:0 0 6px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--ink-soft)}
.menu-conteo-cab>span:first-child,.menu-conteo-plato,.menu-conteo-pie>b{flex:1;min-width:0}
.menu-conteo .n{flex:0 0 72px;text-align:right}
.menu-conteo-fila .n,.menu-conteo-pie .n{font-family:"Bricolage Grotesque",sans-serif;font-size:22px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.menu-conteo-fila .n:not(:last-child),.menu-conteo-pie .n:not(:last-child){color:var(--ink-soft);font-size:17px;font-weight:500;padding-top:3px}
.menu-conteo-g{margin:0;padding:18px 0 4px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--mango-dark)}
.menu-conteo>.menu-conteo-g:first-child,.menu-conteo-cab+.menu-conteo-g{padding-top:4px}
.menu-conteo-fila{padding:11px 0;border-bottom:1px solid var(--line-soft)}
.menu-conteo-plato>b{display:flex;align-items:baseline;gap:8px;font-size:15.5px;font-weight:600}
.menu-conteo-plato>b::after{content:"";flex:1;min-width:24px;border-bottom:1.5px dotted var(--line-strong);transform:translateY(-4px)} /* el punteado de la maqueta: con --line casi no se veía */
.menu-conteo-quien{margin:3px 0 0;font-size:13px;color:var(--ink-soft)}
.menu-conteo-otras{margin-top:4px;font-size:13px}
.menu-conteo-otras>summary{cursor:pointer;color:var(--verde);width:fit-content;list-style:none}
.menu-conteo-otras>summary::-webkit-details-marker{display:none}
.menu-conteo-otras>summary:hover{text-decoration:underline;text-underline-offset:3px}
.menu-conteo-otras>p{margin:6px 0 0;font-size:12.5px;color:var(--ink-soft)}
.menu-conteo-pie{padding-top:12px;border-top:2px solid var(--line);font-weight:700}
.menu-conteo-fila+.menu-conteo-pie{margin-top:-1px}
.menu-conteo-vacio{margin:6px 0 0}
.menu-conteo-notas p{margin:12px 0 0;font-size:13px;color:var(--ink-soft)}
.menu-conteo-notas p+p{margin-top:6px}
.menu-pedidos-pie{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:16px;padding-top:16px;border-top:1px solid var(--line-soft)}
.menu-pedidos-pie .muted{font-size:12.5px}
form.menu-form-pedido{display:flex;align-items:flex-end;gap:10px 12px;flex-wrap:wrap;margin:0}
form.menu-form-pedido .fld,.por-mirar .abierta form.menu-form-pedido .fld{margin:0;flex:1 1 130px;min-width:0} /* 130: en el celular caben dos listas por fila */
form.menu-form-pedido .fld.persona{flex:2 1 240px}
form.menu-form-pedido .acc-check{padding-bottom:12px;white-space:nowrap}
form.menu-form-pedido .quien{flex:1 1 100%;font-weight:600}
details.menu-corregir>summary{cursor:pointer;font-family:"Bricolage Grotesque",sans-serif;font-size:16px;font-weight:600}
details.menu-corregir[open]>summary{margin-bottom:14px}
details.menu-corregir .menu-nota-cierre{margin:0 0 12px;font-size:13px;color:var(--ink-soft)}
.menu-corregir-x{overflow-x:auto}
details.menu-corregir table.datos{margin-top:18px}
details.menu-corregir td.como{white-space:nowrap;color:var(--ink-soft);font-size:12.5px}
details.menu-corregir td.pidio{white-space:normal;min-width:200px} /* lo pedido se parte en renglones: la tabla no se estira por un menú largo */
@media (max-width:880px){
  #pedidos,#cierra,#corregir,#cierre{scroll-margin-top:140px}
  form.menu-avisar{position:fixed;left:0;right:0;bottom:0;z-index:44;padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:1px solid var(--line);justify-content:center}
  form.menu-avisar .btn-primary{flex:1 1 100%;justify-content:center;padding:13px 15px;font-size:15px}
  body:has(form.menu-avisar) .emergentes{bottom:84px}
  body:has(form.menu-avisar) .contenido-int{padding-bottom:84px}
  .menu-conteo .n{flex-basis:58px}
  .menu-conteo-cab,.menu-conteo-fila,.menu-conteo-pie{gap:8px}
  /* Los campos de las vistas del menú en 16 px, como los .fld: con menos, el celular acerca la pantalla al tocarlos. */
  body:has(.tabs-vista[data-vistas="menu"]) .contenido-int .ctl{font-size:16px}
}
@media print{.mn-emp{display:inline}}
/* Menú del día › La semana (_menu_semana.js): la barra de la semana (.menu-semana-barra, con «✎ Editar la semana» a la derecha), el
   aviso de las empresas sin menú (.menu-aviso-empresas, arriba de la carta y del editor), la carta para leer (.menu-carta: la cabecera
   centrada con doble raya, los seis días en tres columnas, el de hoy con su pastilla y los pasados en tinta suave, y al pie de cada uno
   cuántos pidieron) con lo de debajo (.menu-carta-siguiente), y el editor (.menu-editor-semana: las seis cajas .fld.menu-caja en tres
   columnas, todas del mismo alto mínimo, que crecen con lo escrito; la de un día que ya pasó y tiene pedidos, readonly, en tinta suave).
   En ≤ 880 px la carta y el editor van en una columna. Todas sus clases llevan el prefijo menu-: «carta» y «caja» ya son de otros
   módulos (Envíos, Depósitos). Sin container-type. */
.menu-semana-barra{gap:10px 14px}
.menu-semana-nav{margin:0}
.menu-semana-barra>a.btn{margin-left:auto}
.menu-aviso-empresas form{margin-top:8px}
.menu-carta{padding:30px 36px 24px}
.menu-carta-cab{position:relative;text-align:center;padding-bottom:16px;border-bottom:1px solid var(--ink)}
.menu-carta-cab::after{content:"";position:absolute;left:0;right:0;bottom:-5px;border-bottom:1px solid var(--ink)} /* la doble raya de una carta impresa */
.menu-carta-rango{margin:0 0 6px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--ink-soft)}
.menu-carta-cab h3{margin:0;font-family:"Bricolage Grotesque",sans-serif;font-size:30px;font-weight:700;line-height:1.15}
.menu-carta-tambien{margin:6px 0 0;font-size:14px;color:var(--ink-soft)}
.menu-carta-dias{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:26px}
.menu-carta-dia{padding:2px 24px 22px;border-left:1px solid var(--line);min-width:0}
.menu-carta-dia:nth-child(3n+1){border-left:0;padding-left:0}
.menu-carta-dia:nth-child(3n){padding-right:0}
.menu-carta-dia:nth-child(n+4){border-top:1px dashed var(--line);padding-top:20px}
.menu-carta-dia h4{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin:0 0 8px;font-family:"Bricolage Grotesque",sans-serif;font-size:20px;font-weight:600}
.menu-carta-dia h4 small{font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:13px;font-weight:500;color:var(--ink-soft)}
.menu-carta-dia h4 .pill{align-self:center}
.menu-carta-g{margin:10px 0 2px;font-size:13px;font-style:italic;color:var(--ink-soft)}
.menu-carta-dia ul{list-style:none;margin:0;padding:0}
.menu-carta-dia li{font-size:15px;line-height:1.6;overflow-wrap:anywhere}
.menu-carta-sin{margin:4px 0 0;font-size:15px;font-style:italic;color:var(--ink-soft)}
.menu-carta-pie-dia{margin:10px 0 0;font-size:12.5px;color:var(--ink-soft)}
.menu-carta-dia.pasado h4,.menu-carta-dia.pasado li{color:var(--ink-soft)}
.menu-carta-pie{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);text-align:center;font-size:13px;color:var(--ink-soft)}
.menu-carta-siguiente{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:-6px 32px 20px;font-size:13.5px;color:var(--ink-soft)}
.menu-carta-siguiente p{margin:0;flex:1 1 320px}
.menu-carta-siguiente a{margin-left:auto;white-space:nowrap}
details.menu-como-se-escribe{margin:0 0 16px;font-size:13px}
details.menu-como-se-escribe>summary{cursor:pointer;width:fit-content;color:var(--verde);font-weight:600}
.menu-como-se-escribe-c{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 22px;margin-top:10px}
.menu-como-se-escribe-c p{margin:0;max-width:46ch;font-size:12.5px;color:var(--ink-soft)}
.menu-como-se-escribe-c pre{margin:0;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--paper);font:inherit;font-size:13px;line-height:1.5}
.menu-editor-semana{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 18px}
.menu-caja{margin:0;min-width:0}
.menu-caja label{display:flex;justify-content:space-between;gap:8px;color:var(--ink);font-size:13.5px}
.menu-caja .menu-caja-cuando{color:var(--ink-soft);font-weight:500}
.menu-caja textarea{display:block;min-height:196px;line-height:1.55;resize:vertical;field-sizing:content} /* 8 renglones como mínimo, también el sábado; crece con lo escrito donde el navegador lo sabe hacer */
.menu-caja textarea[readonly]{background:var(--line-soft);color:var(--ink-soft);cursor:default}
.menu-caja-leido,.menu-caja-fija{margin:6px 0 0;font-size:12.5px;color:var(--ink-soft)}
.menu-caja-fija{color:var(--mango-dark)}
.menu-casilla-todas{margin-top:18px}
.menu-casilla-todas .acc-check{align-items:flex-start;font-size:13px}
.menu-casilla-todas .acc-check input{margin-top:1px}
.menu-casilla-todas small{display:block;margin-top:2px;font-size:12px}
#semana .form-foot{flex-wrap:wrap}
#semana .form-foot .muted{flex:1 1 240px;font-size:13px}
@media (max-width:880px){
  .menu-carta{padding:22px 16px 16px}
  .menu-carta-cab h3{font-size:24px}
  .menu-carta-dias{grid-template-columns:minmax(0,1fr);margin-top:16px}
  .menu-carta-dia,.menu-carta-dia:nth-child(3n+1),.menu-carta-dia:nth-child(3n),.menu-carta-dia:nth-child(n+4){border-left:0;padding:16px 0}
  .menu-carta-dia+.menu-carta-dia{border-top:1px dashed var(--line)}
  .menu-carta-siguiente{margin:-6px 14px 18px}
  .menu-editor-semana{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){.menu-carta-siguiente{margin-left:10px;margin-right:10px}}
@media print{.menu-aviso-empresas,.menu-carta-siguiente{display:none}}
/* Menú del día › Consumo, Documentos y ⚙ Reglas (_menu_consumo.js). Consumo: la barra (.menu-consumo-barra) con las pastillas de
   quincena (.menu-quincenas, un nav con las reglas de .menu-dias-semana) y el rango «del … al …» con «Ver» (form.menu-rango); las
   tablas van en su marco (.menu-consumo-x), que se desplaza, y en ≤ 880 px su primera columna (la persona o el día) queda fija. En Por persona, la
   barrita de cada cifra contra los días con pedidos (svg.menu-barrita: el ancho va en su rect, sin style=; --good al 40 % sobre la
   tarjeta, la mezcla del borde de los cuadritos .dias i.g de Vacaciones). Documentos: ul.lista.docs.menu-docs, cada fila con su
   selector y «Abrir» en un GET (form.menu-doc-abrir). ⚙ Reglas: la muestra de cómo cada persona ve su pedido (.menu-muestra:
   recuadro papel con borde punteado, los controles bloqueados, sin formulario). Sin container-type. */
.menu-consumo-barra{gap:10px 14px}
form.menu-rango{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;font-size:13.5px;color:var(--ink-soft)}
form.menu-rango .ctl{flex:0 1 160px;width:160px;min-width:0} /* el ancho, además de la base: sin él, Chrome mide el formulario con el ancho propio del campo de fecha (más angosto) y «Ver» baja a otra línea */
.menu-consumo-x{overflow-x:auto}
@media print{.menu-consumo-x{overflow:visible}} /* las tablas de Consumo se imprimen enteras, sin el corte del marco */
table.datos.menu-por-persona .menu-barrita-celda{width:40%;min-width:110px}
.menu-barrita{display:block;width:100%;height:8px}
.menu-barrita rect{fill:color-mix(in srgb,var(--good) 40%,var(--card))}
.menu-docs form.menu-doc-abrir{display:flex;gap:8px;align-items:center;margin:0}
.menu-docs form.menu-doc-abrir .ctl{min-width:150px}
.menu-muestra{border:1px dashed var(--line);border-radius:var(--r);padding:14px 16px;background:var(--paper)}
.menu-muestra-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;font-size:13.5px}
.menu-muestra-cab small{display:block;font-size:12px;color:var(--ink-soft)}
.menu-muestra-campos{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px 14px;align-items:end}
.menu-muestra-campos .fld{margin:0;min-width:0}
.menu-muestra-campos .acc-check{grid-column:1/-1;font-size:13px;cursor:default}
@media (max-width:880px){
  .menu-consumo-x :where(th,td):first-child{position:sticky;left:0;z-index:1;background:var(--card);box-shadow:inset -1px 0 0 var(--line-soft)} /* :where: la fila par y el hover conservan su fondo */
  .menu-consumo-x .fila-vacia td{position:static;box-shadow:none}
  table.datos.menu-por-persona :is(th,td):first-child{min-width:150px;max-width:150px;white-space:normal}
  .menu-docs form.menu-doc-abrir{flex:1 1 auto}
  .menu-docs form.menu-doc-abrir .ctl{flex:1 1 auto}
}
@media (max-width:520px){form.menu-rango{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;flex:1 1 100%}form.menu-rango .ctl{width:100%}form.menu-rango button{grid-column:2;justify-self:start}} /* en el celular el rango no cabe en una línea: cada fecha en su fila con su etiqueta («del» y «al» no se separan de su campo) y «Ver» debajo */
/* Menú del día › 💰 Costo (_menu_costo.js): cocinar en casa o pedir afuera. La barra del mes reusa el selector común (.sel-anio de
   areas.css) con el Excel a la derecha. «Casa o afuera» (.menu-costo-vs): dos lados en una tarjeta, la casa en verde suave y afuera en
   blanco, con una «o» al medio; en ≤ 880 px uno debajo del otro. Las tres partes del plato van con su color en la barra y en la leyenda
   (menu-p-*: fill para el rect y background-color para la muestra, como pide barraPartes). El estándar dice en palabras si está por
   debajo o por encima (el color no es lo único). Las cifras van en su panel; la tabla por empresa esconde «Afuera le habría costado» en el
   celular. Sin container-type. */
.menu-costo-barra{gap:10px 14px}
.menu-costo-barra>.btn{margin-left:auto}
.menu-costo-vs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);margin:0 32px 20px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.menu-costo-vs>section{min-width:0;padding:18px 20px}
.menu-costo-casa{background:var(--ok-soft)}
.menu-costo-vs h3{margin:0;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.menu-costo-precio{margin:4px 0 12px;font-family:"Bricolage Grotesque",sans-serif;font-size:34px;font-weight:600;line-height:1.15;font-variant-numeric:tabular-nums}
.menu-costo-precio small{font-family:"Hanken Grotesk",sans-serif;font-size:15px;font-weight:500;color:var(--ink-soft)}
.menu-costo-casa .menu-costo-precio{color:var(--verde)}
.menu-costo-afuera .menu-costo-precio{color:var(--terracota)}
.menu-costo-afuera p:not(.menu-costo-precio){margin:8px 0 0;font-size:14px}
.menu-costo-o{display:grid;place-items:center;padding:0 8px;border-left:1px solid var(--line);border-right:1px solid var(--line);font-size:13px;font-weight:700;color:var(--ink-soft)}
.menu-costo-casa .partes-ley{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.menu-costo-estandar{margin:14px 0 0;font-size:13.5px;font-weight:600}
.menu-costo-estandar.ok{color:var(--good)}
.menu-costo-estandar.pend{color:var(--mango-dark)}
.menu-p-insumos{fill:var(--verde-2);background-color:var(--verde-2)}
.menu-p-cocina{fill:var(--verde-suave);background-color:var(--verde-suave)}
.menu-p-otros{fill:var(--mango);background-color:var(--mango)}
.menu-costo-cifras .cf-v{font-variant-numeric:tabular-nums}
.menu-costo-como summary{cursor:pointer;font-weight:600;color:var(--verde)}
.menu-costo-como p{margin:10px 0 0;font-size:13.5px;max-width:80ch}
/* Gastos del mes: la lista va en el marco que se desplaza de Consumo; debajo, los tres plegados para registrar, uno al lado del otro en la
   PC y uno debajo del otro en el celular. Cada empresa tiene su caja de monto. */
.menu-gasto-forms{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.menu-gasto-nuevo{flex:1 1 100%}
.menu-gasto-forms .menu-gasto-nuevo:not([open]){flex:0 0 auto}
.menu-gasto-nuevo>summary{list-style:none;cursor:pointer;width:max-content;max-width:100%}
.menu-gasto-nuevo>summary::-webkit-details-marker{display:none}
.menu-gasto-nuevo[open]>summary{margin-bottom:10px}
.menu-gasto-form{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;background:var(--paper)}
.menu-gasto-form .reglas-nota{margin:0 0 10px}
.menu-gasto-form .form-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.menu-gasto-montos{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px 14px;margin-top:10px}
.menu-gasto-montos .fld{margin:0;min-width:0}
.menu-gasto-montos .ctl{text-align:right}
table.datos.menu-costo-gastos td.col-acc{white-space:nowrap}
table.datos.menu-costo-gastos td.col-acc form{display:inline}
@media (max-width:880px){
  .menu-costo-vs{grid-template-columns:minmax(0,1fr);margin:0 14px 18px}
  .menu-costo-o{padding:6px;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .menu-costo-precio{font-size:28px}
  table.datos :is(th,td).menu-costo-pc{display:none}
  .menu-gasto-form .ctl{font-size:16px} /* sin el zoom del celular al tocar una caja */
}
@media (max-width:520px){.menu-costo-vs{margin:0 10px 18px}}
/* ---------- Colaboradores (RR. HH.): la ficha, Equipo, Este mes, Ceses y ⚙ Reglas. El avatar (.av) va arriba, con las piezas comunes; su token --ink-tenue es de styles.css. ---------- */
/* Colaboradores › la ficha (_colaboradores_ficha.js): todo va dentro de div.ficha y cada regla de este bloque empieza con .ficha, porque
   varios nombres son comunes (.dato y .resumen ya los usan la carta de plásticos de Envíos y la orden de servicio). Lo que hay: la vuelta a
   la lista (.volver), la cabecera con la foto o las iniciales (.ficha-cab), el resumen, los atajos (a.chip), los avisos de la persona
   (.avisos-ficha, cada uno con su formulario corto), los datos en dos columnas (.datos-dos de .dato), «✎ Corregir» que abre en su lugar y
   esconde la lectura (details.corregir; el «＋ Registrar» del historial es details.registrar), la barra del costo y las tablas cuya
   explicación baja a una segunda línea en el celular (.tabla-expl, .historial). */
.ficha .volver{display:inline-flex;align-items:center;gap:6px;margin:0 32px 12px;font-size:13.5px;color:var(--ink-soft);text-decoration:none}
.ficha .volver:hover{color:var(--verde)}
.ficha .ficha-cab{display:flex;align-items:center;gap:16px;margin:0 32px}
.ficha .ficha-cab>div{min-width:0}
.ficha .ficha-cab h2{margin:0;font-family:"Bricolage Grotesque",sans-serif;font-size:26px;font-weight:600;line-height:1.2;overflow-wrap:anywhere}
.ficha .ficha-cab p{margin:2px 0 0;font-size:14px;color:var(--ink-soft)}
.ficha .resumen{margin:14px 32px 0;max-width:70ch;font-size:15.5px}
.ficha .atajos{display:flex;gap:8px;flex-wrap:wrap;margin:14px 32px 18px}
.ficha .atajos .chip{white-space:nowrap}
.ficha .atajos .chip:hover{text-decoration:none}
.ficha .avisos-ficha{display:grid;gap:10px;margin:0 32px 18px}
.ficha .avisos-ficha .notice{margin:0}
.ficha .aviso-form{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin:10px 0 0}
.ficha .aviso-form .fld{margin:0;flex:1 1 150px;max-width:240px;min-width:0}
.ficha .liq-aviso{margin:8px 0 0;font-size:12.5px;color:var(--bad)}
.ficha .ficha-panel{position:relative}
.ficha .datos-dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px}
.ficha .datos-dos h4,.ficha .corregir-form h4{margin:0 0 4px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.ficha .dato{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px dashed var(--line-soft);font-size:14px}
.ficha .dato .e{flex-shrink:0;max-width:55%;color:var(--ink-soft)}
.ficha .dato .e small{display:block;font-size:12px}
.ficha .dato .v{min-width:0;text-align:right;overflow-wrap:anywhere}
.ficha .dato .v.sin{color:var(--ink-tenue);font-style:italic}
.ficha .dato .ojo{color:var(--mango-dark);font-weight:600}
.ficha .dato.total{margin-top:4px;padding-top:10px;border-top:2px solid var(--line);border-bottom:0;font-weight:700}
.ficha :is(details.corregir,details.registrar)>summary{position:absolute;top:14px;right:16px;list-style:none;cursor:pointer;padding:6px 12px;font-size:13px}
.ficha :is(details.corregir,details.registrar)>summary::-webkit-details-marker{display:none}
.ficha details.corregir[open]>summary{border-color:var(--verde-2);background:var(--line-soft)}
.ficha .panel:has(>details.corregir[open]) .datos-dos{display:none}
.ficha .corregir-form{margin:4px 0 16px}
.ficha .corregir-form .form-grid+h4{margin-top:16px}
.ficha .corregir-casilla{margin:12px 0 16px}
.ficha .fld-foto label.btn-archivo{display:inline-flex;margin:0;font-size:13.5px;font-weight:600;color:var(--verde)}
.ficha details.info{margin-top:14px}
.ficha details.info>summary{display:inline-block;cursor:pointer;list-style:none;font-size:13px;font-weight:600;color:var(--ink-soft)}
.ficha details.info>summary::-webkit-details-marker{display:none}
.ficha details.info>summary:hover{color:var(--verde)}
.ficha details.info p{margin:8px 0 0;max-width:80ch;font-size:13px;color:var(--ink-soft)}
.ficha .costo-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:8px 16px;flex-wrap:wrap;margin-bottom:12px}
.ficha .costo-cab .muted{font-size:14px}
.ficha .costo-cab b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:24px;font-weight:600;color:var(--ink)}
.ficha .costo-barra,.plf-ficha .costo-barra{display:flex;gap:2px;height:8px;margin:0 0 14px;border-radius:999px;overflow:hidden;background:var(--line-soft)}
.ficha .costo-barra svg,.plf-ficha .costo-barra svg{display:block;height:100%;min-width:0} /* un tramo por concepto, su ancho en el atributo width (sin style=); min-width:0 lo deja encoger como al <i> de antes */
.ficha .costo-nota,.ficha .costo-nada{margin:0 0 12px;font-size:13px;color:var(--ink-soft)}
.ficha .costo-nada{margin:0}
.ficha .muestra,.plf-ficha .muestra{display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:2px;background:var(--line);vertical-align:0}
.ficha .c-sueldo,.plf-ficha .c-sueldo{background:var(--verde)} .ficha .c-asig,.plf-ficha .c-asig{background:var(--verde-vivo)} .ficha .c-grati,.plf-ficha .c-grati{background:var(--mango)} .ficha .c-cts,.plf-ficha .c-cts{background:var(--mango-dark)} .ficha .c-essalud,.plf-ficha .c-essalud{background:var(--ink-soft)}
.ficha table.tabla-expl td:first-child{white-space:normal}
.ficha table.tabla-expl td.col-expl{max-width:46ch;white-space:normal;font-size:12.5px;color:var(--ink-soft)}
.ficha table.datos td.col-det{white-space:normal}
.ficha .del-archivo{font-size:12px;color:var(--ink-soft)}
.ficha ul.lista.tiene>li{gap:12px;padding:10px 2px}
.ficha ul.lista.tiene .ic{font-size:18px;flex-shrink:0}
.ficha ul.lista.tiene .t{font-size:14px}
.ficha ul.lista.tiene .t p{font-size:12.5px}
.ficha .ficha-vacio{margin:0;font-size:13.5px}
.ficha .doc-mes{display:flex;align-items:center;gap:8px;margin:0}
.ficha .liq-tit{margin:4px 0 10px;font-size:14px;font-weight:600}
.ficha #liq-estimada+.liq-aviso+.liq-tit,.ficha #liq-estimada+.liq-tit{margin-top:20px}
.ficha .liq-nota{margin:8px 0 0;max-width:90ch;font-size:12.5px;color:var(--ink-soft)}
.ficha .cese-campos{display:flex;align-items:flex-end;gap:10px 14px;flex-wrap:wrap;margin:0 0 18px}
.ficha .cese-campos .fld{flex:0 1 220px;min-width:0;margin:0}
.ficha .cese-campos .fld-otro{display:none}
.ficha .cese-campos:has(option[value="Otro"]:checked) .fld-otro{display:block}
.ficha ul.pasa{list-style:none;margin:0;padding:0}
.ficha ul.pasa li{display:flex;gap:10px;padding:7px 2px;font-size:14px}
.ficha ul.pasa .ic{width:22px;flex-shrink:0;text-align:center}
.ficha .cese-liq{margin:14px 0 0}
.ficha #cese-corregir{margin-top:16px}
.ficha .cese-quitar{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line-soft)}
.ficha .cese-quitar p{margin:0;font-size:12.5px;color:var(--ink-soft)}
.ficha details.info#salidas{margin:0 32px 20px}
.ficha details.info#salidas .salida{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin-top:10px}
.ficha details.info#salidas .salida p{margin:0;flex:1 1 320px}
.ficha details.info#salidas form{margin:0}
.ficha :is(#cese,#quien,#puesto,#pago,#salidas,#historial){scroll-margin-top:96px}
@media (max-width:880px){
  .ficha .volver{margin:0 14px 10px}
  .ficha .ficha-cab{margin:0 14px;align-items:flex-start}
  .ficha .ficha-cab h2{font-size:21px}
  .ficha .resumen{margin:12px 14px 0}
  .ficha .atajos{margin:12px 14px 16px}
  .ficha .avisos-ficha{margin:0 14px 16px}
  .ficha .datos-dos{grid-template-columns:minmax(0,1fr)}
  .ficha .datos-dos>div+div h4{margin-top:18px}
  .ficha details.info#salidas{margin:0 14px 16px}
}
@media (max-width:640px){
  .ficha .atajos .chip{white-space:normal}
  .ficha :is(details.corregir,details.registrar)>summary{position:static;display:inline-flex;width:fit-content;margin:0 0 12px}
  .ficha table.datos:is(.tabla-expl,.historial){display:block;overflow:visible}
  .ficha table:is(.tabla-expl,.historial) thead,.ficha table.tabla-expl .col-meses{display:none}
  .ficha table:is(.tabla-expl,.historial) :is(tbody,tfoot){display:block}
  .ficha table:is(.tabla-expl,.historial) tr{display:grid;grid-template-columns:minmax(0,1fr) auto}
  .ficha table:is(.tabla-expl,.historial) td{border-bottom:0;white-space:normal}
  .ficha table:is(.tabla-expl,.historial) td:empty{display:none}
  .ficha table.tabla-expl td.col-expl{grid-column:1/-1;order:3;max-width:none;padding-top:0;border-bottom:1px solid var(--line-soft)}
  /* «incluidas en el sueldo» (Vacaciones, en Lo que cuesta) parte línea: así el concepto no se corta a la mitad. */
  .ficha table.tabla-expl tbody td.num.muted{max-width:8.5em;text-align:right}
  /* El historial, una fila compacta por pago: qué es y el monto arriba; la fecha (y «del archivo» o 🗑) y el detalle debajo. El 🗑 va al
     borde derecho, bajo el monto (el width:1% de .col-acc lo dejaba donde empezaba la columna, que cambia con el largo del monto). */
  .ficha table.historial tbody tr{border-bottom:1px solid var(--line-soft)}
  .ficha table.historial tbody td{padding:3px 10px}
  .ficha table.historial tbody td:nth-child(2){order:1;padding-top:10px;font-weight:600}
  .ficha table.historial tbody td.num{order:2;padding-top:10px}
  .ficha table.historial tbody td:nth-child(1){order:3;font-size:12.5px;color:var(--ink-soft)}
  .ficha table.historial tbody td.col-acc{order:4;width:auto;white-space:nowrap}
  .ficha table.historial tbody td.col-det{order:5;grid-column:1/-1;padding-bottom:10px;font-size:12.5px;color:var(--ink-soft)}
  .ficha table.historial tbody tr.fila-vacia td{grid-column:1/-1}
  .ficha .dato .e{max-width:50%}
}
@media (max-width:520px){
  .ficha .volver{margin:0 10px 10px} .ficha .ficha-cab{margin:0 10px} .ficha .resumen{margin:12px 10px 0} .ficha .atajos{margin:12px 10px 16px} .ficha .avisos-ficha{margin:0 10px 16px}
  .ficha details.info#salidas{margin:0 10px 16px}
}
/* Colaboradores › Equipo (_colaboradores_lista.js): cada regla de este bloque cuelga de una pieza propia de Equipo, porque varios nombres
   son comunes. La barra (.equipo-barra: buscar, área, «⬆ Importar del Excel» y «＋ Nuevo colaborador»); los dos recuadros que abren debajo
   de la barra, uno a la vez (details.equipo-abre; en ≤ 640px se abren en su lugar); la lista (table.equipo: toda la fila abre la ficha con
   el ::after de a.fila-enlace, y .cel-no se esconde en las tarjetas del celular); las filas por persona de «No vino en la planilla»
   (.equipo-mirar .persona); el marco que desplaza una tabla ancha (.equipo-marco) y la revisión de la importación (.equipo-revision). */
.equipo-barra{position:relative}
.equipo-barra .ctl-buscar{flex:1 1 240px}
.equipo-barra .ctl-buscar>input{flex:1 1 auto;min-width:0}
.equipo-barra form{margin:0}
details.equipo-abre>summary{list-style:none;cursor:pointer}
details.equipo-abre>summary::-webkit-details-marker{display:none}
details.equipo-abre[open]>summary.btn{border-color:var(--verde-2);background:var(--line-soft)}
details.equipo-abre .abierta{position:absolute;top:calc(100% + 6px);right:0;z-index:20;width:min(680px,100%);padding:16px 18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow)}
details.equipo-abre .abierta>p{margin:0 0 12px;font-size:13px;color:var(--ink-soft)}
details.equipo-abre .subir{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
details.equipo-abre .fld{margin:0;min-width:0}
details.equipo-abre .fld-foto label.btn-archivo{display:inline-flex;margin:0;font-size:13.5px;font-weight:600;color:var(--verde)}
details.equipo-abre .form-foot{margin-top:16px;padding-top:14px}
.equipo-mirar .persona{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.equipo-mirar .persona>b{flex:1 1 200px;min-width:0;font-size:13.5px;font-weight:600}
.equipo-mirar .abierta>p{margin:0;font-size:13px}
.equipo-marco{overflow-x:auto}
table.equipo,table.equipo#lista{scroll-margin-top:96px} /* las dos tablas (la lista y la de inactivas); la lista también con su id: la de Vacaciones, :is(#nuevo,#lista,…) a 150px, también toma #lista y pesa más que una clase */
table.equipo tbody tr{position:relative}
table.equipo td{vertical-align:middle}
table.equipo .persona{display:flex;align-items:center;gap:12px;min-width:200px;white-space:normal}
table.equipo .persona>div{min-width:0}
table.equipo a.fila-enlace{font-weight:600;color:var(--ink);text-decoration:none}
table.equipo a.fila-enlace::after{content:"";position:absolute;inset:0}
table.equipo a.fila-enlace:hover{color:var(--verde)}
table.equipo :is(.persona,.ant) small{display:block;font-size:12.5px;color:var(--ink-soft)}
table.equipo td.pills{white-space:normal}
table.equipo td.pills .pill{display:inline-block;margin:2px 0;white-space:nowrap}
table.equipo td.ir{width:28px;padding-left:0;text-align:right;font-size:18px;color:var(--ink-soft)}
.equipo-revision>.volver{display:inline-flex;align-items:center;gap:6px;margin:0 32px 12px;font-size:13.5px;color:var(--ink-soft);text-decoration:none}
.equipo-revision>.volver:hover{color:var(--verde)}
.equipo-revision .panel>form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0}
.equipo-revision .panel>p{margin:0 0 12px}
.equipo-revision details.pleg .equipo-marco{margin:0 0 10px}
@media (max-width:880px){
  .equipo-revision>.volver{margin:0 14px 10px}
}
@media (max-width:640px){
  details.equipo-abre[open]{flex:1 1 100%}
  details.equipo-abre .abierta{position:static;width:auto;margin-top:8px;box-shadow:none}
  table.datos.t-cards.equipo tbody tr{padding:10px 34px 10px 2px}
  table.datos.t-cards.equipo td{display:block;padding:3px 14px}
  table.datos.t-cards.equipo td::before{content:none}
  table.datos.t-cards.equipo td.cel-no{display:none}
  table.datos.t-cards.equipo td.ir{position:absolute;top:50%;right:12px;padding:0;transform:translateY(-50%)}
  table.datos.t-cards.equipo td.ant{padding-left:70px}
  table.datos.t-cards.equipo td.pills{padding-left:70px}
  /* La tabla del paso 2 de la revisión (hoja · empresa · nuevas · se actualizan) cabe en el celular partiendo línea; las de las personas
     siguen desplazándose en su marco. */
  .equipo-revision .panel>.equipo-marco>table.datos :is(th,td){white-space:normal}
}
@media (max-width:520px){
  .equipo-revision>.volver{margin:0 10px 10px}
}
@media print{.equipo-marco{overflow:visible}}
/* Colaboradores › Este mes y Ceses (_colaboradores_lista.js): cada regla cuelga de una pieza propia, porque .agenda, .hoja y .pasado son
   nombres comunes. El mes se elige en un GET (.colab-mes-nav). La agenda (ul.agenda.colab-agenda): una fila por día y suceso, con su hoja de
   calendario (.hoja: el día de la semana en mayúsculas y el número; .hoja.hoy en verde), el ícono, el texto y «Ver ficha»; lo que ya pasó
   va en tinta suave (li.pasado) y en ≤ 640px «Ver ficha» baja debajo del texto. Ceses (table.colab-ceses) es una tabla de trabajo: el cargo
   y «en N días» en small, las celdas parten línea y, en ≤ 640px, cada dato va bajo su rótulo. */
.colab-mes-nav{display:inline-flex;margin:0}
ul.agenda.colab-agenda{list-style:none;margin:0;padding:0}
ul.agenda.colab-agenda>li{display:flex;align-items:center;gap:14px;padding:12px 4px;border-bottom:1px solid var(--line-soft)}
ul.agenda.colab-agenda>li:last-child{border-bottom:0}
ul.agenda.colab-agenda .hoja{width:44px;flex-shrink:0;overflow:hidden;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:10px}
ul.agenda.colab-agenda .hoja small{display:block;padding:2px 0;font-size:12px;font-weight:700;text-transform:uppercase;color:var(--ink-soft);background:var(--line-soft)}
ul.agenda.colab-agenda .hoja b{display:block;padding:3px 0 4px;font-family:"Bricolage Grotesque",sans-serif;font-size:18px;font-weight:600}
ul.agenda.colab-agenda .hoja.hoy{border-color:var(--verde-2)}
ul.agenda.colab-agenda .hoja.hoy small{color:#fff;background:var(--verde)}
ul.agenda.colab-agenda .ic{flex-shrink:0;font-size:18px}
ul.agenda.colab-agenda .t{flex:1;min-width:0;font-size:14.5px}
ul.agenda.colab-agenda>li>a{flex-shrink:0}
ul.agenda.colab-agenda>li.pasado{color:var(--ink-soft)}
ul.agenda.colab-agenda>li.pasado .hoja b{color:var(--ink-soft)}
table.colab-ceses td{vertical-align:top;white-space:normal}
table.colab-ceses td small{display:block;margin-top:3px;font-size:12.5px;color:var(--ink-soft)}
table.colab-ceses a.colab-persona{font-weight:600}
table.colab-ceses td.colab-usuario{min-width:220px;max-width:340px}
@media (max-width:640px){
  ul.agenda.colab-agenda>li{display:grid;grid-template-columns:44px auto minmax(0,1fr);gap:4px 12px}
  ul.agenda.colab-agenda .hoja{grid-row:span 2}
  ul.agenda.colab-agenda>li>a{grid-column:3;justify-self:start}
  table.datos.t-cards.colab-ceses td{display:block}
  table.datos.t-cards.colab-ceses td::before{display:block;margin-bottom:2px}
  table.datos.t-cards.colab-ceses td.colab-usuario{min-width:0;max-width:none}
}
/* ---------- Planilla fija (RR. HH.): Personas, la lista y la ficha de cada persona. Cada regla empieza con una clase plf- (pl- ya es del Balance); la barra del costo de la ficha es la de Colaboradores (.costo-barra, .muestra, .c-*), con .plf-ficha en sus selectores. ---------- */
/* Personas (_planilla_personas.js › vistaPersonas): dos columnas, la lista (aside.plf-lado, fija al desplazar, por debajo de la cabecera
   de la página) y la ficha (section.plf-ficha#ficha). Cada fila es un enlace a su ficha (a.plf-persona) con su barrita (svg.plf-barrita:
   el ancho va en el atributo de su rect, sin style=) contra el mayor costo del filtro; la abierta, en verde suave. En ≤ 1160px una sola
   columna: la lista arriba, más baja y sin fijar, y al tocar a alguien la página baja a su ficha por el #ficha.
   La cabecera de la página (.topbar) queda fija arriba y su alto cambia con el ancho: el título se parte cuando no cabe junto al usuario.
   Medida con cada rol que entra a Planilla en las seis empresas: 81px desde 1321px, hasta 101px entre 1161 y 1320, hasta 140px entre 1101
   y 1160, hasta 193px entre 881 y 1100 (el título en dos líneas), 130px entre 641 y 880, 64px entre 521 y 640 y 84px en el celular. Por
   eso, en cada corte, la lista fija (top) y los anclas (#ficha, #anio y los dos #mes, scroll-margin-top) quedan un poco más abajo que ese
   alto; con dos columnas, la lista baja lo mismo que sube su top, para que su pie siga a la vista. */
.plf-split{display:grid;grid-template-columns:370px minmax(0,1fr);gap:20px;align-items:start;margin:0 32px 20px}
.plf-split>.plf-ficha{margin:0}
.plf-lado{position:sticky;top:84px;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.plf-lado-cab{padding:14px 14px 10px;border-bottom:1px solid var(--line-soft)}
.plf-lado-cab .ctl-buscar{display:flex;width:100%}
.plf-lado-cab .ctl-buscar>input{flex:1 1 auto;width:100%;min-width:0}
.plf-cuenta{margin:0 2px 12px;font-size:14px;color:var(--ink-soft)}
.plf-cuenta b{font-weight:700;color:var(--ink)}
.plf-filtros{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.plf-filtros .chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:var(--card);border-color:var(--line);font-size:13px;color:var(--ink);white-space:nowrap}
.plf-filtros .chip:hover{text-decoration:none}
.plf-filtros .chip b{font-size:12px;font-weight:700;color:var(--ink-soft)}
.plf-filtros .chip.sel{background:var(--verde);border-color:var(--verde);color:var(--card)}
.plf-filtros .chip.sel b{color:var(--card)}
/* position:relative: el guion de la lista (GUION_LISTA) mide li.offsetTop desde aquí; sin ella, lo mediría desde la página. */
.plf-gente{position:relative;max-height:min(660px,calc(100dvh - 310px));margin:0;padding:6px;overflow:auto;list-style:none;scrollbar-width:thin}
.plf-persona{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;color:inherit;text-decoration:none}
.plf-persona:hover{background:var(--line-soft);text-decoration:none}
.plf-persona[aria-current]{background:color-mix(in srgb,var(--verde-suave) 25%,var(--card));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--verde-suave) 55%,var(--card))}
.plf-quien{flex:1;min-width:0}
.plf-nm{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.plf-nm b{min-width:0;overflow:hidden;font-size:14px;font-weight:600;white-space:nowrap;text-overflow:ellipsis}
.plf-cifra{flex-shrink:0;font-size:13px;font-weight:600;white-space:nowrap}
.plf-cifra.plf-sin{font-weight:400;color:var(--ink-tenue)}
.plf-sub{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:1px;font-size:12.5px;color:var(--ink-soft)}
.plf-sub>span:first-child{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.plf-sub .pill{flex-shrink:0;padding:1px 7px;white-space:nowrap}
.plf-barrita{display:block;width:100%;height:4px;margin-top:7px;overflow:hidden;border-radius:999px;background:var(--line-soft)}
.plf-barrita rect{fill:var(--verde-suave)}
.plf-persona[aria-current] .plf-barrita rect{fill:var(--verde-2)}
.plf-vacio,.plf-nadie{margin:0;padding:12px 16px;font-size:13.5px;color:var(--ink-soft)}
.plf-pie{margin:0;padding:10px 16px 14px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--ink-soft)}
/* La ficha de arriba: la cabecera (avatar de 64px, nombre y sus datos en una línea), la frase con sus botones al lado y lo que cuesta al
   mes: la barra de Colaboradores y la leyenda en 4 columnas, cada parte con su muestra, su cifra y una nota corta. */
.plf-ficha,.plf-bloque,.plf-mes-abierto,.plf-elegido{scroll-margin-top:84px}
.plf-ficha-cab{display:flex;align-items:center;gap:16px}
.plf-ficha-cab>div{min-width:0}
.plf-ficha-cab h2{margin:0;font-family:"Bricolage Grotesque",sans-serif;font-size:24px;font-weight:600;line-height:1.2;overflow-wrap:anywhere}
.plf-ficha-cab p{margin:4px 0 0;font-size:13.5px;color:var(--ink-soft)}
.plf-resumen{max-width:66ch;margin:16px 0 0;font-size:15px;color:var(--ink)}
.plf-resumen b{font-weight:600}
.plf-dice{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 20px;margin-top:16px}
.plf-dice>.plf-resumen{flex:1 1 380px;margin:0} /* si la frase quedaría de menos de 380px, los botones bajan a su propia línea */
.plf-acciones{display:flex;flex-shrink:0;align-items:center;gap:8px}
.plf-acciones form{margin:0}
.plf-rotulo{margin:22px 0 10px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mango-dark)}
.plf-leyenda{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.plf-leyenda li{display:grid;grid-template-columns:12px minmax(0,1fr);align-content:start;column-gap:8px}
.plf-leyenda .muestra{width:12px;height:12px;margin:3px 0 0;border-radius:4px}
.plf-leyenda span{font-size:12.5px;color:var(--ink-soft)}
.plf-leyenda b{grid-column:2;font-family:"Bricolage Grotesque",sans-serif;font-size:16px;font-weight:600}
.plf-leyenda small{grid-column:2;font-size:12px;color:var(--ink-tenue)}
.plf-veces{margin:14px 0 0;font-size:13px;color:var(--ink-soft)}
.plf-ficha-vacia{margin:0;color:var(--ink-soft)}
/* La parte de abajo de la ficha (_planilla_personas.js › fichaDeAbajo): su año con el mes abierto, lo que cambió y lo que viene, y las
   acciones, cada parte separada por una raya suave. Su año (div.plf-anio) son 12 columnas iguales, de enero a hoy (las que faltan quedan
   vacías: el mes de hoy no estira a los demás). Cada mes es un enlace (a.plf-mes) con su pila de alto fijo (.plf-pila): la base (sueldo,
   EsSalud y lo demás) en verde suave y la extra (gratificación, CTS y liquidación) en --verde-2, cada una un svg con su alto en el
   atributo; encima, sin monto, la marca: mango con borde si le falta una quincena o no tiene nada, rayada si está en curso. Un mes que no
   le toca es una raya fina, sin enlace. El mes abierto lleva su rótulo en verde. */
.plf-bloque{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft)}
.plf-anio-cab{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px;margin-bottom:14px}
.plf-anio-cab h3{margin:0;font-size:16px;font-weight:600}
.plf-anio-cab h3 b{font-weight:700}
.plf-anios{display:flex;gap:14px;font-size:13px;font-weight:600}
.plf-anios a{color:var(--verde)}
.plf-anio-nada{margin:0;font-size:14px;color:var(--ink-soft)}
.plf-anio-nada a{font-weight:600;color:var(--verde);white-space:nowrap}
.plf-anio{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;align-items:end} /* relative: el texto oculto de la raya (.plf-oculto, absoluto) se desplaza con el año */
.plf-mes{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;color:inherit;text-decoration:none}
.plf-mes:hover{text-decoration:none}
.plf-pila{display:flex;flex-direction:column;justify-content:flex-end;gap:2px;width:100%;max-width:40px;height:128px}
.plf-pila>svg,.plf-pila>i{display:block;flex:none;width:100%;border-radius:5px}
.plf-base{background:var(--verde-suave)}
.plf-extra{background:var(--verde-2)}
.plf-hueco{background:var(--mango-soft);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--mango) 40%,var(--card))}
.plf-encurso{background-color:var(--card);background-image:repeating-linear-gradient(135deg,transparent 0 5px,color-mix(in srgb,var(--verde-suave) 20%,var(--card)) 5px 7px);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--verde-suave) 60%,var(--card))}
.plf-marca{height:18px}
.plf-raya{height:3px;background:var(--line)}
.plf-mes:hover .plf-base{background:color-mix(in srgb,var(--verde-suave) 80%,var(--verde-2))}
.plf-mes small{padding:2px 6px;border-radius:6px;font-size:12px;font-weight:600;color:var(--ink-soft)}
.plf-mes:hover small{color:var(--ink)}
.plf-mes[aria-current] small{background:var(--verde);color:var(--card)}
.plf-mes.plf-fuera small{font-weight:400;color:var(--ink-tenue)}
.plf-anio-ley{display:flex;flex-wrap:wrap;gap:6px 16px;margin:12px 0 0;padding:0;list-style:none;font-size:12.5px;color:var(--ink-soft)}
.plf-anio-ley li{display:inline-flex;align-items:center;gap:6px}
.plf-anio-ley i{display:inline-block;width:10px;height:10px;border-radius:3px}
.plf-anio-ley .plf-encurso{box-shadow:inset 0 0 0 1.5px var(--verde-suave)} /* tan chica, la raya de la pila no se vería */
/* El mes abierto (.plf-mes-abierto#mes): lo registrado con la pastilla de su estado y sus registros en filas (fecha · quincena o
   categoría, con el detalle que escribió alguien · monto). */
.plf-mes-abierto{margin-top:16px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);background:color-mix(in srgb,var(--line-soft) 35%,var(--card))}
.plf-mes-cab{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 12px;margin-bottom:6px}
.plf-mes-cab h4{margin:0;font-family:"Bricolage Grotesque",sans-serif;font-size:16px;font-weight:600}
.plf-regs{margin:0;padding:0;list-style:none}
.plf-regs li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:6px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.plf-regs li:last-child{border-bottom:0}
.plf-regs .plf-f{font-size:12.5px;color:var(--ink-soft)}
.plf-regs small{margin-left:8px;font-size:12.5px;color:var(--ink-soft);overflow-wrap:anywhere}
.plf-regs b{font-weight:600;white-space:nowrap}
.plf-regs-nada{margin:4px 0 0;font-size:13.5px;color:var(--ink-soft)}
/* Lo que cambió (ol.plf-tl, la línea de tiempo: fecha corta, punto y texto; el punto dice qué fue: un pago, una entrada, algo por
   revisar o un cese) y lo que viene (ul.plf-viene, una tarjeta por beneficio), lado a lado; al pie, las acciones. */
.plf-dos{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft)}
.plf-dos .plf-rotulo{margin-top:0}
.plf-tl{margin:0;padding:0;list-style:none}
.plf-tl li{position:relative;display:grid;grid-template-columns:74px 14px minmax(0,1fr);gap:10px;padding:0 0 14px}
.plf-tl li::before{content:"";position:absolute;left:88px;top:14px;bottom:-2px;width:2px;background:var(--line)}
.plf-tl li:last-child::before{display:none}
.plf-cu{padding-top:1px;font-size:12.5px;color:var(--ink-soft)}
.plf-pt{position:relative;z-index:1;width:10px;height:10px;margin-top:5px;border-radius:50%;background:var(--verde-suave)}
.plf-pt-pago{background:var(--verde-2)}
.plf-pt-entra{background:var(--info-tinta)}
.plf-pt-pend{background:var(--mango)}
.plf-pt-cese{background:var(--ink-tenue)}
.plf-tx{font-size:14px;overflow-wrap:anywhere}
.plf-tl-nada,.plf-viene-nada{margin:0;font-size:14px;color:var(--ink-soft)}
.plf-viene-nada a{font-weight:600;color:var(--verde)}
.plf-viene{margin:0;padding:0;list-style:none}
.plf-viene li{margin-bottom:10px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-m)}
.plf-viene li:last-child{margin-bottom:0}
.plf-viene small{display:block;font-size:12.5px;color:var(--ink-soft)}
.plf-viene b{font-family:"Bricolage Grotesque",sans-serif;font-size:18px;font-weight:600}
.plf-acciones-pie{flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid var(--line-soft)}
/* El año (_planilla_anio.js › vistaAnio), lo de toda la empresa. «Cada mes» (div.plf-anio.plf-anio-emp) reutiliza el año de una persona
   (.plf-anio, .plf-mes, .plf-pila, .plf-base, .plf-marca, .plf-raya): la pila más alta y el monto encima de su barra (.plf-v, en dos
   líneas en ≤ 1100px y fuera en ≤ 880px); la barra del mes elegido, en --verde-2. Arriba, a la derecha, los otros años y el CSV (.plf-cab-acc). El mes elegido
   (section.plf-elegido#mes) trae a cada persona de mayor a menor (ul.plf-quienes: el avatar de 28px, el nombre con lo que tuvo ese mes,
   la barrita de la lista de Personas, de 8px, y su cifra) y, plegados, sus registros (details.plf-registros). */
.plf-cab-acc{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.plf-anio-emp{margin-top:4px}
.plf-anio-emp .plf-pila{max-width:54px;height:170px}
.plf-v{align-self:center;margin-bottom:3px;font-size:12px;color:var(--ink-soft);white-space:nowrap}
.plf-anio-emp .plf-mes[aria-current] .plf-base{background:var(--verde-2)}
.plf-anio-emp .plf-mes[aria-current] .plf-v{font-weight:700;color:var(--ink)}
.plf-quienes{margin:0;padding:0;list-style:none}
.plf-quienes>li{display:grid;grid-template-columns:28px minmax(140px,260px) minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 4px;border-bottom:1px solid var(--line-soft)}
.plf-quienes>li:last-child{border-bottom:0}
.plf-quienes .av{--av:28px}
.plf-qn{min-width:0}
.plf-qn>a,.plf-qn>span{display:block;overflow:hidden;font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
.plf-qn>a:hover{color:var(--verde)}
.plf-qn small{display:block;font-size:12px;color:var(--ink-soft)}
.plf-qn .plf-falta{font-weight:600;color:var(--mango-dark)}
.plf-quienes .plf-barrita{height:8px;margin:0}
.plf-quienes>li>b{font-weight:600;text-align:right;white-space:nowrap}
.plf-registros{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)}
.plf-registros>summary{cursor:pointer;font-size:14px;font-weight:600}
.plf-registros[open]>summary{margin-bottom:10px}
.plf-marco{position:relative;overflow-x:auto} /* relative: el texto oculto del radar (.plf-oculto, absoluto) se desplaza con el marco; sin ella ensanchaba la página en el celular */
.plf-marco td.plf-det{min-width:200px;white-space:normal}
.plf-nota{margin:0 0 12px;font-size:12.5px;color:var(--ink-soft)}
/* El radar (radarHTML): table.datos.plf-radar dentro de div.plf-marco[data-al-final], que se desplaza de lado y app.js › marcoAlFinalInit
   corre al final (el mes de hoy a la vista). El que se desplaza es el marco, también en el celular, donde table.datos sería su propio
   marco. El nombre (.plf-fija) queda fijo a la izquierda; en las filas pares y al pasar el ratón toma el fondo opaco de table.datos. Cada
   celda es una marca: ● completo en --verde-2 (4.99:1 sobre --card, 4.78:1 sobre --cebra), ◐ en curso gris, ◐ le falta en mango, la raya
   roja .plf-nada (CSS, no un carácter) y «·» fuera; el glifo va con aria-hidden y lo que dice, en .plf-oculto (fuera de la vista, para el
   lector de pantalla). El nombre es el encabezado de su fila (th scope="row"): sin la letra de los encabezados de table.datos. La leyenda
   corta (ul.plf-radar-ley) va arriba, con los mismos glifos. */
.plf-marco>table.datos.plf-radar{display:table;width:auto;min-width:100%;max-width:none;overflow:visible}
.plf-radar th.plf-c,.plf-radar td.plf-c{min-width:46px;padding-left:4px;padding-right:4px;text-align:center}
.plf-radar .plf-fija{position:sticky;left:0;z-index:1;min-width:210px;max-width:280px;background:var(--card);box-shadow:inset -1px 0 0 var(--line);white-space:normal}
.plf-radar thead th.plf-fija{z-index:2}
.plf-radar tbody th.plf-fija{padding:11px 10px;border-bottom:1px solid var(--line-soft);font-size:13px;font-weight:400;line-height:1.4;letter-spacing:0;text-transform:none;color:var(--ink);text-align:left}
.plf-radar tbody tr:nth-child(even) th.plf-fija{background:var(--cebra)}
.plf-radar tbody tr:hover th.plf-fija{background:color-mix(in srgb,var(--line-soft) 60%,var(--card))}
.plf-radar .plf-fija a,.plf-radar .plf-fija span{font-weight:600;color:var(--ink)}
.plf-radar .plf-fija a:hover{color:var(--verde)}
.plf-radar .plf-fija small{display:block;font-size:12px;color:var(--ink-tenue)}
.plf-radar .plf-cesado .plf-fija a,.plf-radar .plf-cesado .plf-fija span{color:var(--ink-soft)}
.plf-r{font-size:15px;font-weight:700;line-height:1}
.plf-r-completo{font-size:18px;color:var(--verde-2)} /* el punto lleno sale más chico que ◐: así miden parecido */
.plf-r-curso{color:var(--ink-tenue)}
.plf-r-falta{display:inline-block;padding:2px 7px;border-radius:6px;background:var(--mango-soft);color:var(--mango-dark)}
.plf-r-fuera{color:var(--line-strong)}
.plf-nada{display:inline-block;width:14px;height:3px;border-radius:2px;background:var(--bad);vertical-align:middle}
.plf-oculto{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.plf-radar-ley{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 12px;padding:0;list-style:none;font-size:12.5px;color:var(--ink-soft)}
.plf-radar-ley li{display:inline-flex;align-items:center;gap:6px}
.plf-radar-ley .plf-r-falta{padding:1px 5px}
/* ⚙ Reglas (_planilla_reglas.js › vistaReglasPlanilla): los paneles de ⚙ Reglas (panelRegla, valoresRegla, .reglas-nota); la frase de una
   regla (.plf-regla), en la tinta de siempre. */
.plf-regla{max-width:72ch;margin:0;font-size:14.5px}
/* Subir planilla (planilla_import.js › vistaSubir y previaHTML) y CTS y gratificación (planilla.js › vistaBeneficio): una columna de 980px
   como mucho (.plf-angosto; sus avisos y paneles llevan su margen de 32px). La zona de subir (.plf-zona) es un recuadro punteado con el
   botón de archivo del sistema y «Previsualizar». Las filas de lo subido, de la vista previa y de la masiva (ul.plf-subidas, ul.plf-previa,
   ul.plf-masiva) llevan a la izquierda .plf-cual (el nombre y sus líneas en <small>; en la vista previa, la pastilla de su ficha y su
   select) y a la derecha .plf-cuanto (la cifra y su línea o su pastilla); quien se omite (.plf-omite), en tinta suave; al pie de la masiva,
   el total (li.plf-total). Bajo la lista, la fecha que se mira y el registrar (.plf-pie-cts); aparte, la otra que viene (.plf-otra). */
.plf-angosto{max-width:1044px}
.plf-zona{display:grid;justify-items:center;gap:10px;margin:0 32px 20px;padding:24px 16px;border:1.5px dashed var(--line-strong);border-radius:var(--r);background:var(--card);text-align:center}
.plf-zona form{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0}
.plf-zona p{margin:0;font-size:13px;color:var(--ink-soft)}
.plf-subidas,.plf-previa,.plf-masiva{margin:0;padding:0;list-style:none}
.plf-subidas>li,.plf-previa>li,.plf-masiva>li{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line-soft)}
.plf-subidas>li:last-child,.plf-previa>li:last-child,.plf-masiva>li:last-child{border-bottom:0}
.plf-masiva .av{--av:34px;flex-shrink:0}
.plf-cual{flex:1;min-width:0}
.plf-cual>b,.plf-cual>a,.plf-quien-archivo>b{font-size:14px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.plf-cual>a:hover{color:var(--verde)}
.plf-quien-archivo{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.plf-cual small,.plf-cuanto small{display:block;margin-top:1px;font-size:12.5px;color:var(--ink-soft)}
.plf-cual .ctl{display:block;width:max-content;max-width:100%;margin-top:6px;font-size:13px}
.plf-cuanto{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0;max-width:50%;text-align:right}
.plf-cuanto b{font-weight:600;white-space:nowrap}
.plf-cuanto .pill{display:inline-block;margin-top:4px}
.plf-omite .plf-cual>a,.plf-omite .plf-cuanto>b{color:var(--ink-tenue)}
.plf-masiva>li.plf-total{padding-top:12px;border-top:2px solid var(--line);font-weight:700}
.plf-masiva>li.plf-total>b{white-space:nowrap}
.plf-sin-filas{margin:0;font-size:14px;color:var(--ink-soft)}
.plf-pie-cts{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft)} /* relative: el aviso vacío de la fecha (absoluto) se desplaza con el pie */
.plf-fecha{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:0}
.plf-fecha .fld{width:190px;margin:0}
.plf-registrar{margin:0}
.plf-registrar .btn-primary:disabled{opacity:.5;cursor:not-allowed}
/* Lo que escribe app.js › fechaQueSeRegistraInit si la fecha escrita no es la previsualizada: una línea propia del pie, bajo el botón, así
   el botón no se mueve al aparecer. Vacío queda fuera del flujo (no ocupa lugar ni suma el espacio entre líneas), pero no se esconde: un
   aria-live escondido no se anuncia. */
.plf-aviso-fecha{flex:1 0 100%;margin:-4px 0 0;font-size:13px;font-weight:600;color:var(--mango-dark);text-align:right}
.plf-aviso-fecha:empty{position:absolute;margin:0}
.plf-pie-cts>.notice{flex:1 1 320px;margin:0} /* en lugar del botón, cuando la fecha no pasa la guardia del POST */
.plf-confirma{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line-soft)}
.plf-otra{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.plf-otra-ic{font-size:22px;line-height:1}
.plf-otra p{flex:1;min-width:200px;margin:0;font-size:14.5px;font-weight:600}
.plf-como{margin:0 32px 20px}
.plf-como>summary{display:inline-block;cursor:pointer;list-style:none;font-size:13px;font-weight:600;color:var(--ink-soft)}
.plf-como>summary::-webkit-details-marker{display:none}
.plf-como>summary:hover{color:var(--verde)}
.plf-como p{max-width:80ch;margin:8px 0 0;font-size:13px;color:var(--ink-soft)}
@media (max-width:1320px){
  .plf-lado{top:104px}
  .plf-leyenda{grid-template-columns:repeat(2,minmax(0,1fr))} /* 4 columnas solo con más de 620px junto a la lista */
  .plf-gente{max-height:min(660px,calc(100dvh - 330px))}
  .plf-ficha,.plf-bloque,.plf-mes-abierto,.plf-elegido{scroll-margin-top:104px}
}
@media (max-width:1160px){
  .plf-split{grid-template-columns:minmax(0,1fr)}
  .plf-lado{position:static}
  .plf-gente{max-height:330px}
  .plf-ficha,.plf-bloque,.plf-mes-abierto,.plf-elegido{scroll-margin-top:144px}
}
@media (max-width:1100px){
  .plf-ficha,.plf-bloque,.plf-mes-abierto,.plf-elegido{scroll-margin-top:200px}
  .plf-dos{grid-template-columns:minmax(0,1fr);gap:22px}
  .plf-anio{gap:4px}
  .plf-mes small{padding:2px 1px}
  .plf-v{line-height:1.25;text-align:center;white-space:normal} /* la columna es más angosta que el monto: «S/» arriba y la cifra debajo */
}
@media (max-width:880px){
  .plf-split{margin:0 14px 20px}
  .plf-ficha,.plf-bloque,.plf-mes-abierto,.plf-elegido{scroll-margin-top:136px}
  .plf-ficha-cab h2{font-size:20px}
  .plf-dice{flex-direction:column;align-items:flex-start}
  .plf-dice>.plf-resumen{flex:none} /* en columna, la base de 380px sería alto: los botones, justo debajo */
  .plf-lado-cab .ctl-buscar>input{font-size:16px}
  .plf-anio{gap:3px}
  .plf-pila{height:96px}
  .plf-marca{height:14px}
  .plf-regs li{grid-template-columns:44px minmax(0,1fr) auto;gap:8px}
  .plf-cu{font-size:12px;letter-spacing:-.02em}
  .plf-regs small{display:block;margin-left:0}
  .plf-tl li{grid-template-columns:62px 14px minmax(0,1fr)}
  .plf-tl li::before{left:76px}
  .plf-v{display:none}
  .plf-anio-emp .plf-pila{height:120px}
  .plf-quienes>li{grid-template-columns:28px minmax(0,1fr) auto;row-gap:6px}
  .plf-quienes .plf-barrita{grid-row:2;grid-column:2/-1}
  .plf-radar .plf-fija{min-width:150px}
  .plf-zona,.plf-como{margin:0 14px 16px}
  .plf-fecha .ctl,.plf-cual .ctl{font-size:16px}
}
@media (max-width:640px){
  .plf-ficha,.plf-bloque,.plf-mes-abierto,.plf-elegido{scroll-margin-top:90px}
}
@media (max-width:520px){
  .plf-split{margin:0 10px 20px}
  .plf-mes-abierto{padding:12px}
  .plf-subidas>li,.plf-previa>li,.plf-masiva>li{flex-wrap:wrap;row-gap:6px}
  .plf-cuanto{flex:1 0 100%;flex-direction:row;flex-wrap:wrap;align-items:center;gap:2px 10px;max-width:none;text-align:left}
  .plf-cuanto .pill{margin-top:0}
  .plf-masiva .plf-cuanto{padding-left:46px} /* bajo el nombre, no bajo el avatar */
  .plf-fecha,.plf-registrar,.plf-registrar .btn-primary{width:100%;justify-content:center}
  .plf-fecha .fld{flex:1 1 160px;width:auto}
  .plf-aviso-fecha{text-align:center}
}