/* views/planilla.css · La Planilla (v17, SPEC_v17 §7.2–§7.4): la hoja VENTAS como en el Excel. Todo bajo .v-planilla.
 * Los colores salen de la tabla de §7.3 (día y noche). El formato de cada columna (letra, relleno, borde) lo arma
 * planilla.js desde IMC_VENTAS.formato en <style id="pl-formato-xl">; acá van las fichas del tema y las marcas. */

/* ---- fichas del tema (§7.3) ---------------------------------------------------------------------------------------- */
.v-planilla {
  --xl-papel: #FFFFFF; --xl-tinta: #000000; --xl-hl: #C0C0C0; --xl-vl: #000000;
  --xl-enc: #F3F3F3; --xl-enc-t: #444444; --xl-enc-sel: #D2D2D2; --xl-sel: #107C41;
  --xl-gris: #E3E3E3; --xl-verde: #CCFFCC; --xl-banda: #DCE6F2; --xl-banda-t: #000080; --xl-azul-t: #1F497D;
  --xl-rojo: #FF0000; --xl-rojo-t: #000000; --xl-amarillo: #FFFF00; --xl-amarillo-t: #000000;
  --xl-amarillo2: #FFFFC0; --xl-amarillo2-t: #000000; --xl-celeste: #00B0F0; --xl-celeste-t: #000000;
  --xl-link: #0563C1; --xl-filtro: #0563C1; --xl-gris-t: #595959; --xl-velo: rgb(0 0 0 / .10);
  --xl-fijo: #9B9B9B; --xl-nota: #FF0000; --xl-globo: #FFFFE1; --xl-sigue: #E8620A; --xl-app: #2F6FED;
  --xl-ui: 400 12px/1.2 var(--font-ui);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .v-planilla {
    --xl-papel: #1E1E1E; --xl-tinta: #E8E8E8; --xl-hl: #4A4A4A; --xl-vl: #7A7A7A;
    --xl-enc: #2B2B2B; --xl-enc-t: #CFCFCF; --xl-enc-sel: #404040; --xl-sel: #6FD49A;
    --xl-gris: #33343A; --xl-verde: #1F3B27; --xl-banda: #1B2440; --xl-banda-t: #AFC3FF; --xl-azul-t: #A9C4EE;
    --xl-rojo: #B3261E; --xl-rojo-t: #FFFFFF; --xl-amarillo: #6E6100; --xl-amarillo-t: #FFFFFF;
    --xl-amarillo2: #4A4620; --xl-amarillo2-t: #FFFFFF; --xl-celeste: #0B5674; --xl-celeste-t: #FFFFFF;
    --xl-link: #8CC2FF; --xl-filtro: #8CC2FF; --xl-gris-t: #ABABAB; --xl-velo: rgb(255 255 255 / .10);
    --xl-fijo: #8A8A8A; --xl-nota: #FF6B5E; --xl-app: #7DA7FF;
  }
}
:root[data-theme="dark"] .v-planilla {
  --xl-papel: #1E1E1E; --xl-tinta: #E8E8E8; --xl-hl: #4A4A4A; --xl-vl: #7A7A7A;
  --xl-enc: #2B2B2B; --xl-enc-t: #CFCFCF; --xl-enc-sel: #404040; --xl-sel: #6FD49A;
  --xl-gris: #33343A; --xl-verde: #1F3B27; --xl-banda: #1B2440; --xl-banda-t: #AFC3FF; --xl-azul-t: #A9C4EE;
  --xl-rojo: #B3261E; --xl-rojo-t: #FFFFFF; --xl-amarillo: #6E6100; --xl-amarillo-t: #FFFFFF;
  --xl-amarillo2: #4A4620; --xl-amarillo2-t: #FFFFFF; --xl-celeste: #0B5674; --xl-celeste-t: #FFFFFF;
  --xl-link: #8CC2FF; --xl-filtro: #8CC2FF; --xl-gris-t: #ABABAB; --xl-velo: rgb(255 255 255 / .10);
  --xl-fijo: #8A8A8A; --xl-nota: #FF6B5E; --xl-app: #7DA7FF;
}

/* ---- 1. cabecera de un renglón sobre la banda --------------------------------------------------------------------- */
.v-planilla .pagehead { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 14px; row-gap: 8px; align-items: center;
  padding: 5px 0; margin-bottom: 4px; }
.v-planilla .pagehead > .pagehead__title { grid-column: 1; grid-row: 1; font-size: 1.75rem; line-height: 1.1; white-space: nowrap; }
.v-planilla .pagehead > .meta { grid-column: 2; grid-row: 1; margin: 0; clip-path: none; min-width: 0; flex-wrap: nowrap; font-size: 12.5px; }
.v-planilla .pagehead > .meta > li { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; color: rgb(255 255 255 / .86); }
.v-planilla .pagehead > .pagehead__actions { grid-column: 3; grid-row: 1; flex-wrap: nowrap; gap: 8px; }
.v-planilla .pagehead .btn--sm { min-height: 32px; padding: 0 12px; font-size: 13px; }
/* Año ▾ y «Con algo pendiente», con la misma línea blanca que los botones de la banda */
.v-planilla .pl__anio, .v-planilla .pl__pend { box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5); color: #FFFFFF; font: 600 13px/1 var(--font-ui); white-space: nowrap; }
.v-planilla .pl__anio select { margin: 0; padding: 0 2px; border: 0; background: transparent; color: #FFFFFF; font: inherit; cursor: pointer; }
.v-planilla .pl__anio select option { color: #111111; background: #FFFFFF; }
.v-planilla .pl__anio:focus-within { box-shadow: inset 0 0 0 1px #FFFFFF, 0 0 0 2px #FFFFFF; }
.v-planilla .pl__anio select:focus { outline: none; }
.v-planilla .pl__pend { border: 0; background: transparent; cursor: pointer; }
.v-planilla .pl__pend:hover { background: rgb(255 255 255 / .09); }
.v-planilla .pl__pend[aria-pressed="true"] { background: var(--imc-orange); color: #0F0D3A; box-shadow: none; }
.v-planilla .pl__pend:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
/* el buscador sobre la banda (Ctrl+F busca en todas las filas; el Ctrl K del buscador general no va acá) */
.v-planilla .pagehead .search { width: 176px; flex: none; }
.v-planilla .pagehead .search__input { height: 32px; border-radius: 3px; background: rgb(255 255 255 / .1); color: #FFFFFF; font-size: 13px; padding-right: 28px; }
.v-planilla .pagehead .search__input::placeholder { color: rgb(255 255 255 / .8); }
.v-planilla .pagehead .search__input:focus { background: #FFFFFF; color: #1C1B33; box-shadow: 0 0 0 2px var(--imc-orange); }
.v-planilla .pagehead .search__input:focus::placeholder { color: #5E6575; }
.v-planilla .pagehead .search__icon, .v-planilla .pagehead .search__clear { color: rgb(255 255 255 / .85); }
.v-planilla .pagehead .search:focus-within .search__icon, .v-planilla .pagehead .search:focus-within .search__clear { color: #4C5465; }
.v-planilla .pagehead .search__kbd { display: none; }
@media (max-width: 1279.98px) {
  .v-planilla .pagehead > .pagehead__actions { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; justify-content: flex-start; }
}
@media (max-width: 599.98px) {
  .v-planilla .pagehead { grid-template-columns: minmax(0, 1fr); }
  .v-planilla .pagehead > .meta { grid-column: 1; grid-row: 2; }
  .v-planilla .pagehead > .pagehead__actions { grid-row: 3; }
  .v-planilla .pagehead .search { flex: 1 1 140px; width: auto; }
}

/* ---- 2. cuadro de nombre + fx -------------------------------------------------------------------------------------- */
.v-planilla .pl__fx { position: relative; display: grid; grid-template-columns: 92px 28px minmax(0, 1fr); align-items: stretch; height: 24px; margin: 0 0 2px;
  background: var(--xl-papel); color: var(--xl-tinta); box-shadow: inset 0 0 0 1px var(--xl-hl); font: 400 13px/22px var(--font-ui); }
.v-planilla .pl__nombre { box-sizing: border-box; width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0 6px; border: 0; border-right: 1px solid var(--xl-hl);
  background: transparent; color: var(--xl-tinta); font: 400 13px/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.v-planilla .pl__nombre::placeholder { color: var(--xl-gris-t); opacity: 1; }
.v-planilla .pl__nombre:focus { outline: 2px solid var(--xl-sel); outline-offset: -2px; }
.v-planilla .pl__fxi { display: grid; place-items: center; border-right: 1px solid var(--xl-hl); font: italic 600 13px/1 Georgia, var(--font-display); color: var(--xl-gris-t); }
.v-planilla .pl__fxv { display: block; min-width: 0; padding: 0 8px; overflow: hidden; white-space: nowrap; text-overflow: clip; }
/* el texto no entra: la barra se abre hacia abajo, encima de la grilla (no la empuja) */
.v-planilla .pl__fxv.is-larga { position: absolute; z-index: 9; top: 0; left: 120px; right: 0; max-height: calc(5 * 18px + 8px); padding: 2px 8px; overflow: auto;
  white-space: pre-wrap; overflow-wrap: anywhere; line-height: 18px; background: var(--xl-papel); box-shadow: inset 0 0 0 1px var(--xl-hl), 0 8px 18px -6px rgb(0 0 0 / .3); }

/* ---- 3–5. la grilla ------------------------------------------------------------------------------------------------ */
.v-planilla .pl__grid { position: relative; overflow: auto; height: calc(100dvh - 300px); min-height: 320px; background: var(--xl-papel);
  box-shadow: 0 0 0 1px var(--xl-hl); overscroll-behavior: contain; outline: none; -webkit-user-select: none; user-select: none; }
.v-planilla .pl__grid:focus-visible { box-shadow: 0 0 0 2px var(--focus); }
.v-planilla .pl__tabla { border-collapse: separate; border-spacing: 0; table-layout: fixed; color: var(--xl-tinta);
  font: 400 10.67px/17px Arial, "Liberation Sans", Helvetica, sans-serif; }
.v-planilla .pl__tabla td, .v-planilla .pl__tabla th { box-sizing: border-box; height: 20px; padding: 1px 3px 0; overflow: hidden; white-space: nowrap; text-overflow: clip;
  vertical-align: top; border-bottom: 1px solid var(--xl-hl); background-color: var(--xl-papel); color: var(--xl-tinta); text-align: left; font-weight: 400; }
/* filas fijas: las letras y las filas 3–9 quedan arriba, como «Inmovilizar paneles» */
.v-planilla .pl__tabla thead { position: sticky; top: 0; z-index: 3; }
.v-planilla .pl__let th { height: 18px; padding: 0; text-align: center; vertical-align: middle; background: var(--xl-enc); color: var(--xl-enc-t);
  border-right: 1px solid var(--xl-hl); border-bottom: 1px solid var(--xl-hl); font: 400 12px/17px var(--font-ui); cursor: s-resize; }
.v-planilla .pl__let th.pl__esq { cursor: default; }
.v-planilla .pl__letra { font: inherit; }
.v-planilla .pl__let th.is-act { background: var(--xl-enc-sel); color: var(--xl-sel); font-weight: 600; box-shadow: inset 0 -2px 0 var(--xl-sel); }
/* Nº de fila */
.v-planilla .pl__rn { position: sticky; left: 0; z-index: 2; text-align: center !important; vertical-align: middle !important; padding: 0 2px !important;
  background: var(--xl-enc) !important; color: var(--xl-enc-t) !important; border-right: 1px solid var(--xl-hl); font: 400 11.5px/19px var(--font-ui) !important; cursor: e-resize; }
.v-planilla thead .pl__rn { cursor: default; z-index: 5; }
.v-planilla .pl__rn.is-act { background: var(--xl-enc-sel) !important; color: var(--xl-sel) !important; font-weight: 600 !important; box-shadow: inset -2px 0 0 var(--xl-sel); }
.v-planilla .pl__grid.is-filtrado tbody .pl__rn { color: var(--xl-filtro) !important; }
.v-planilla .pl__esq { position: sticky; left: 0; z-index: 6; background: var(--xl-enc); }
/* la C (Inf) fija, con la línea gris de inmovilizar */
.v-planilla .pl__tabla .is-fija { position: sticky; left: var(--pl-rn, 38px); z-index: 2; box-shadow: 1px 0 0 var(--xl-fijo); }
.v-planilla .pl__tabla thead .is-fija { z-index: 3; }
/* filas 3–6 y 8: el texto que sobra pasa a las celdas vacías de la derecha (como el Excel) */
.v-planilla .pl__xr td { overflow: hidden; }
.v-planilla .pl__xr td.is-spill { overflow: visible; position: relative; z-index: 4; }
.v-planilla .pl__spill { display: block; overflow: hidden; white-space: nowrap; }
.v-planilla .pl__xr td.is-gris { color: var(--xl-gris-t) !important; }
.v-planilla .pl__xr--8 td, .v-planilla .pl__xr--8 th { height: 27px; padding-top: 2px; }
.v-planilla .pl__xr--6 td, .v-planilla .pl__xr--6 th { height: 17px; line-height: 15px; }
/* L4 y L5: contados con la regla de Trabajos y Facturar y cobrar; tocar filtra esas filas */
.v-planilla .pl__cta { all: unset; box-sizing: border-box; display: block; width: 100%; text-align: center; color: var(--xl-link); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.v-planilla .pl__cta[aria-pressed="true"] { background: var(--xl-enc-sel); color: var(--xl-tinta); text-decoration: none; }
.v-planilla .pl__cta:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* fila 9: los encabezados del Excel con la flecha del autofiltro */
.v-planilla .pl__h9 th { height: 31px; padding: 1px 15px 0 3px; position: relative; white-space: normal; line-height: 10px; vertical-align: top; color: var(--xl-tinta); }
.v-planilla .pl__h9 th.pl__rn { padding: 0 2px; }
.v-planilla .pl__hct { display: block; max-height: 30px; overflow: hidden; overflow-wrap: anywhere; }
.v-planilla .pl__af { all: unset; box-sizing: border-box; position: absolute; right: 1px; bottom: 1px; display: grid; place-items: center; width: 13px; height: 13px;
  border: 1px solid #A6A6A6; border-radius: 1px; background: #FFFFFF; color: #444444; cursor: pointer; }
.v-planilla .pl__af:hover { border-color: var(--xl-sel); }
.v-planilla .pl__af:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.v-planilla .pl__hc.is-filtrada .pl__af { color: #0F5132; border-color: #107C41; background: #E6F4EA; }
/* celdas de datos: alineación, rellenos del Excel y formato condicional (los rellenos con letra blanca a la noche) */
.v-planilla .pl__tabla .al-l { text-align: left; } .v-planilla .pl__tabla .al-c { text-align: center; } .v-planilla .pl__tabla .al-r { text-align: right; }
.v-planilla .pl__tabla .f-papel { background-color: var(--xl-papel); }
.v-planilla .pl__tabla .f-gris { background-color: var(--xl-gris); }
.v-planilla .pl__tabla .f-verde { background-color: var(--xl-verde); }
.v-planilla .pl__tabla .f-banda { background-color: var(--xl-banda); }
.v-planilla .pl__tabla .f-rojo, .v-planilla .pl__tabla .cf-rojo { background-color: var(--xl-rojo); color: var(--xl-rojo-t); }
.v-planilla .pl__tabla .f-amarillo, .v-planilla .pl__tabla .cf-amarillo { background-color: var(--xl-amarillo); color: var(--xl-amarillo-t); }
.v-planilla .pl__tabla .f-amarillo2, .v-planilla .pl__tabla .cf-amarillo2 { background-color: var(--xl-amarillo2); color: var(--xl-amarillo2-t); }
.v-planilla .pl__tabla .f-celeste, .v-planilla .pl__tabla .cf-celeste { background-color: var(--xl-celeste); color: var(--xl-celeste-t); }
.v-planilla .pl__tabla .cf-verde { background-color: var(--xl-verde); }
.v-planilla .pl__tabla .cf-gris { background-color: var(--xl-gris); }
.v-planilla .pl__tabla .cf-papel { background-color: var(--xl-papel); }
.v-planilla .pl__td { position: relative; cursor: cell; }
/* el Inf de un trabajo con ficha: azul y subrayado */
.v-planilla .pl__nro { color: var(--xl-link); text-decoration: underline; text-underline-offset: 1px; }
.v-planilla .pl__nro:focus-visible { outline: 2px solid var(--focus); outline-offset: -1px; }
/* marcas de la app: nota (triángulo rojo), falta cargar (filete naranja abajo), cambiado en la app (barra azul) */
.v-planilla .has-nota { background-image: linear-gradient(225deg, var(--xl-nota) 0 5px, transparent 5px); background-repeat: no-repeat; }
.v-planilla .pl__td.is-sigue::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--xl-sigue); pointer-events: none; }
.v-planilla .pl__td.is-app::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--xl-app); pointer-events: none; }
/* la celda activa (borde verde de 2 px y el cuadradito) y el rango (velo gris y borde verde) */
.v-planilla .pl__td { --rt: 0px; --rb: 0px; --rl: 0px; --rr: 0px; --velo: transparent; }
.v-planilla .pl__td.is-rng { --velo: var(--xl-velo); }
.v-planilla .pl__td.is-rng-t { --rt: 2px; } .v-planilla .pl__td.is-rng-b { --rb: 2px; } .v-planilla .pl__td.is-rng-l { --rl: 2px; } .v-planilla .pl__td.is-rng-r { --rr: 2px; }
.v-planilla .pl__td.is-sel { --rt: 2px; --rb: 2px; --rl: 2px; --rr: 2px; --velo: transparent; }
.v-planilla .pl__td.is-rng, .v-planilla .pl__td.is-sel { box-shadow: inset 0 var(--rt) 0 var(--xl-sel), inset 0 calc(-1 * var(--rb)) 0 var(--xl-sel),
  inset var(--rl) 0 0 var(--xl-sel), inset calc(-1 * var(--rr)) 0 0 var(--xl-sel), inset 0 0 0 200px var(--velo); }
.v-planilla .pl__td.is-fija.is-sel, .v-planilla .pl__td.is-fija.is-rng { box-shadow: inset 0 var(--rt) 0 var(--xl-sel), inset 0 calc(-1 * var(--rb)) 0 var(--xl-sel),
  inset var(--rl) 0 0 var(--xl-sel), inset calc(-1 * var(--rr)) 0 0 var(--xl-sel), inset 0 0 0 200px var(--velo), 1px 0 0 var(--xl-fijo); }
.v-planilla .pl__asa { position: absolute; right: 0; bottom: 0; width: 6px; height: 6px; background: var(--xl-sel); box-shadow: 0 0 0 1px var(--xl-papel); pointer-events: none; }
/* la lista ▾ de las columnas con lista (como la validación de datos del Excel) */
.v-planilla .pl__lbtn { all: unset; position: absolute; right: 2px; top: 2px; display: grid; place-items: center; width: 15px; height: 15px; border: 1px solid #A6A6A6;
  background: #F3F3F3; color: #333333; font: 9px/1 Arial, sans-serif; cursor: pointer; }
/* edición en la celda */
.v-planilla .pl__td.is-editando { padding: 0; overflow: visible; box-shadow: none; z-index: 4; }
.v-planilla .pl__in { box-sizing: border-box; width: 100%; min-width: 100%; height: 20px; margin: 0; padding: 0 2px; border: 2px solid var(--xl-sel); border-radius: 0;
  background: var(--xl-papel); color: var(--xl-tinta); font: inherit; outline: none; }
.v-planilla .pl__esp td { border: 0; padding: 0; height: auto; background: transparent; }
/* fila nueva de la app (todavía no está en el Excel) */
.v-planilla tr.is-nueva .pl__rn { font-style: italic; }
/* las 3 filas del final y «＋ Fila nueva» en la C */
.v-planilla .pl__cola td.is-spill { overflow: visible; z-index: 3; box-shadow: 1px 0 0 var(--xl-fijo); }
.v-planilla .pl__nueva { position: relative; z-index: 3; white-space: nowrap; color: var(--xl-link); font-weight: 700; text-decoration: none; }
.v-planilla .pl__nueva:hover { text-decoration: underline; }
.v-planilla .pl__nueva:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* ---- 6–7. pestañas de hojas y barra de estado ---------------------------------------------------------------------- */
.v-planilla .pl__pie { display: flex; align-items: stretch; min-height: 24px; margin-top: 1px; background: var(--xl-enc); color: var(--xl-enc-t);
  box-shadow: 0 0 0 1px var(--xl-hl); font: 400 12px/22px var(--font-ui); }
.v-planilla .pl__hojas { display: flex; flex: none; border-right: 1px solid var(--xl-hl); }
.v-planilla .pl__hoja { all: unset; box-sizing: border-box; padding: 0 14px; cursor: pointer; color: var(--xl-enc-t); border-right: 1px solid var(--xl-hl); }
.v-planilla .pl__hoja:hover { background: var(--xl-enc-sel); }
.v-planilla .pl__hoja[aria-selected="true"] { background: var(--xl-papel); color: var(--xl-sel); font-weight: 700; box-shadow: inset 0 -2px 0 var(--xl-sel); }
.v-planilla .pl__hoja:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.v-planilla .pl__estado { display: flex; flex: 1 1 auto; min-width: 0; justify-content: space-between; gap: 12px; padding: 0 10px; }
.v-planilla .pl__est-izq { display: flex; align-items: center; gap: 12px; min-width: 0; overflow: hidden; white-space: nowrap; }
.v-planilla .pl__est-msg:empty { display: none; }
.v-planilla .pl__est-msg { color: var(--xl-tinta); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.v-planilla .pl__estado.con-msg .pl__est-txt { display: none; }
.v-planilla .pl__est-link, .v-planilla .pl__est-ayuda { all: unset; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--xl-enc-t); white-space: nowrap; }
.v-planilla .pl__est-link { text-decoration: underline; text-underline-offset: 2px; }
.v-planilla .pl__est-link[aria-pressed="true"] { color: var(--xl-tinta); font-weight: 700; }
.v-planilla .pl__est-ayuda { justify-content: center; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--xl-enc-t); font-weight: 700; font-size: 11.5px; }
.v-planilla .pl__est-link:focus-visible, .v-planilla .pl__est-ayuda:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.v-planilla .pl__est-der { display: flex; gap: 16px; white-space: nowrap; }

/* ---- ventanitas: autofiltro, lista, leyenda y nota ----------------------------------------------------------------- */
.v-planilla .pl__pop { position: fixed; z-index: 60; box-sizing: border-box; width: 280px; max-width: calc(100vw - 16px); padding: 10px; border-radius: 4px;
  background: var(--surface-raised, #FFFFFF); color: var(--text, #111111); box-shadow: 0 0 0 1px var(--line-strong), 0 12px 32px -8px rgb(0 0 0 / .35); font: 400 13px/1.35 var(--font-ui); }
.v-planilla .pl__pop-tit { margin: 0 0 8px; font-weight: 700; color: var(--text-strong); }
.v-planilla .pl__pop-borrar { all: unset; display: block; width: 100%; box-sizing: border-box; padding: 6px 4px; margin-bottom: 6px; border-radius: 3px; cursor: pointer; color: var(--text-strong); }
.v-planilla .pl__pop-borrar:hover:not([disabled]) { background: var(--hover); }
.v-planilla .pl__pop-borrar[disabled] { color: var(--text-3); cursor: default; }
.v-planilla .pl__pop-borrar:focus-visible { outline: 2px solid var(--focus); }
.v-planilla .pl__pop-q { box-sizing: border-box; width: 100%; height: 32px; margin: 0 0 6px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 3px;
  background: var(--surface); color: var(--text-strong); font: inherit; }
.v-planilla .pl__pop-q:focus { outline: 2px solid var(--focus); outline-offset: -1px; }
.v-planilla .pl__pop-lista { max-height: 260px; overflow: auto; padding: 4px; border: 1px solid var(--line-strong); border-radius: 3px; }
.v-planilla .pl__fil { display: flex; align-items: center; gap: 8px; padding: 3px 2px; cursor: pointer; }
.v-planilla .pl__fil[hidden] { display: none; }
.v-planilla .pl__fil span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-planilla .pl__fil small { flex: none; color: var(--text-2); font-variant-numeric: tabular-nums; }
.v-planilla .pl__fil--todo { font-weight: 600; }
.v-planilla .pl__pop-nada { margin: 6px 2px; color: var(--text-2); }
.v-planilla .pl__pop-pie { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.v-planilla .pl__listapop { width: 320px; padding: 6px; }
.v-planilla .pl__opts { max-height: 280px; overflow: auto; outline: none; }
.v-planilla .pl__opt { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 5px 8px; border-radius: 3px; cursor: pointer; }
.v-planilla .pl__opt[hidden] { display: none; }
.v-planilla .pl__opt small { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-planilla .pl__opt.is-var { padding-left: 20px; }
.v-planilla .pl__opt[aria-selected="true"] { font-weight: 700; }
.v-planilla .pl__opt.is-foco, .v-planilla .pl__opt:hover { background: var(--accent-soft); }
.v-planilla .pl__leypop { width: 400px; }
.v-planilla .pl__ley { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.v-planilla .pl__ley li { display: flex; align-items: flex-start; gap: 10px; }
.v-planilla .pl__mu { flex: none; display: inline-block; box-sizing: border-box; width: 26px; height: 16px; margin-top: 1px; background: #FFFFFF; box-shadow: inset 0 0 0 1px #C0C0C0;
  font: 10.67px/16px Arial, sans-serif; text-align: center; color: #000000; font-style: normal; }
.v-planilla .pl__mu--sigue { box-shadow: inset 0 -2px 0 #E8620A, inset 0 0 0 1px #C0C0C0; }
.v-planilla .pl__mu--app { box-shadow: inset 3px 0 0 #2F6FED, inset 0 0 0 1px #C0C0C0; }
.v-planilla .pl__mu--rojo { background: #FF0000; }
.v-planilla .pl__mu--af { background: linear-gradient(90deg, #CCFFCC 0 33%, #FFFF00 33% 66%, #FF0000 66%); }
.v-planilla .pl__mu--nota { background-image: linear-gradient(225deg, #FF0000 0 5px, transparent 5px); }
.v-planilla .pl__mu--link { width: 40px; color: #0563C1; text-decoration: underline; }
.v-planilla .pl__mu--fx { font: italic 600 11px/16px Georgia, serif; color: #444444; background: #F3F3F3; }
.v-planilla .pl__est-link .pl__mu { width: 10px; height: 12px; margin: 0; }
.v-planilla .pl__globo { position: fixed; z-index: 61; max-width: 260px; padding: 6px 8px; background: var(--xl-globo); color: #000000; border: 1px solid #A0A0A0;
  box-shadow: 2px 2px 6px rgb(0 0 0 / .25); font: 400 11.5px/1.35 Tahoma, Arial, sans-serif; white-space: pre-wrap; pointer-events: none; }
.v-planilla .pl__globo[hidden] { display: none; }

/* ---- Base de datos (solo lectura) ---------------------------------------------------------------------------------- */
.v-planilla .pl__grid--base { cursor: default; }
.v-planilla .pl__grid--base .pl__h5 th { height: 22px; background: var(--xl-gris); font-weight: 700; }
.v-planilla .pl__grid--base tbody td { cursor: cell; }
.v-planilla .pl__grid--base td.is-sel { box-shadow: inset 0 0 0 2px var(--xl-sel); }
.v-planilla .pl__grid--base tr.is-nuevo td { color: var(--xl-link); }
.v-planilla .pl__grid--base tr.is-fuera td { color: var(--xl-gris-t); }

/* ---- celular: se mira (se carga desde la ficha) -------------------------------------------------------------------- */
@media (max-width: 599.98px) {
  .v-planilla .pl__xr--3, .v-planilla .pl__xr--4, .v-planilla .pl__xr--5 { display: none; }
  .v-planilla .pl__est-prom, .v-planilla .pl__est-rec, .v-planilla .pl__est-link { display: none; }
  .v-planilla .pl__estado { padding: 0 6px; gap: 8px; }
  .v-planilla .pl__hoja { padding: 0 8px; }
  .v-planilla .pl__fx { grid-template-columns: 70px 24px minmax(0, 1fr); }
  .v-planilla .pl__fxv.is-larga { left: 94px; }
  .v-planilla { padding-bottom: calc(var(--tabbar-h, 64px) + 8px); }
}
@media (pointer: coarse) {
  .v-planilla .pl__af { width: 18px; height: 18px; }
  .v-planilla .pl__lbtn { width: 20px; height: 18px; top: 1px; }
}