/* views/cobranza.css · layout propio de la vista; todos los selectores bajo .v-cobranza (SPEC 3, 4.3)
 * Solo compone los componentes de styles.css (3.29 bloque de cliente, 3.8 píldoras, 3.23 Quién, 3.21 traba y vacío,
 * 3.22 campos). Colores siempre por token (claro y oscuro). Ancho: sin scroll horizontal a 375 px; las tiras de filtros
 * se desplazan dentro de su contenedor (.pills, .quien). */

.v-cobranza { min-width: 0; }

/* ---- Filtros (auditoría H33): segmentado + Filtrar, y la antigüedad como barra apilada ------------ */
.v-cobranza__filtros { display: grid; gap: var(--sp-4); min-width: 0; margin: 0 0 var(--sp-6); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--line); }
.v-cobranza__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); min-width: 0; }
.v-cobranza__fila > .segscroll { flex: 0 1 auto; min-width: 0; max-width: 100%; margin: 0; padding: 0; }
.v-cobranza__filtrar { flex: none; }
.v-cobranza__rotulo { margin: 0; font-weight: 600; color: var(--text-strong); }
.v-cobranza__antig { display: grid; gap: var(--sp-2); min-width: 0; max-width: 720px; }
.v-cobranza__barra { display: flex; gap: 2px; height: 12px; border-radius: var(--r-pill); overflow: hidden; background: var(--bg-sunken); }
.v-cobranza__tramo { flex-basis: 0; min-width: 6px; cursor: pointer; transition: opacity var(--dur-1) var(--ease); }
.v-cobranza__tramo.is-otro { opacity: .3; }
.v-cobranza__tramo--a { background: var(--ok-fill); }
.v-cobranza__tramo--b { background: var(--warn-fill); }
.v-cobranza__tramo--c { background: color-mix(in srgb, var(--danger-fill) 65%, var(--surface)); }
.v-cobranza__tramo--d { background: var(--danger-fill); }
.v-cobranza__leyenda { display: grid; grid-template-columns: repeat(4, minmax(0, max-content)); gap: 6px; }
.v-cobranza__ley { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 10px; border-radius: var(--r-pill);
  cursor: pointer; font-size: var(--fs-small); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.v-cobranza__ley:hover { background: var(--hover); }
.v-cobranza__ley:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.v-cobranza__ley[aria-pressed="true"] { background: var(--sel); color: var(--on-sel); box-shadow: none; font-weight: 600; }
.v-cobranza__ley-c { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.v-cobranza__ley-n { color: var(--text-3); font-weight: 600; }
.v-cobranza__ley[aria-pressed="true"] .v-cobranza__ley-n { color: inherit; opacity: .85; }
@media (max-width: 1023.98px) { .v-cobranza__ley { min-height: 44px; } }        /* área táctil de 44 px (H08) */
@container main (max-width: 599.98px) {
  .v-cobranza__leyenda { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-cobranza__ley { justify-content: flex-start; }
  .v-cobranza__ley-n { margin-inline-start: auto; }
}
/* Hoja "Filtrar": las personas en varias líneas, sin tira desplazable */
.v-cobranza--filtrar .quien { flex-wrap: wrap; overflow: visible; margin: 0; padding: 2px 0; }
.v-cobranza--filtrar .quien__chip { min-height: 44px; }
.v-cobranza .quien__chip--sin .quien__name { color: var(--warn); }
.v-cobranza .quien__chip--sin[aria-pressed="true"] .quien__name { color: inherit; }

/* Una sola vez arriba: los reclamos de antes de la app no figuran (H59) */
.v-cobranza__antes { display: flex; align-items: flex-start; gap: 8px; margin: 0; }
.v-cobranza__antes > .ico { flex: none; margin-top: 2px; color: var(--text-3); }

/* Cabecera en el celular: las dos líneas apiladas, sin la barra separadora suelta (H60) */
@media (max-width: 599.98px) {
  .v-cobranza .pagehead .meta { flex-direction: column; }
  .v-cobranza .pagehead .meta > li + li { border-inline-start: 0; margin-inline-start: 0; padding-inline-start: 0; }
}

/* ---- Lista de clientes ---------------------------------------------------------------------------- */
.v-cobranza__lista { display: grid; gap: var(--sp-4); min-width: 0; }
.v-cobranza__lista > .grupo { margin: var(--sp-5) 0 0; }
.v-cobranza__lista > .grupo:first-child { margin-top: 0; }
.v-cobranza__lista > .vacio { padding-block: var(--sp-8); }

/* Bloque de cliente (3.29): sin texto cortado; Nº, días y montos alineados */
.v-cobranza .cobra { min-width: 0; }
.v-cobranza .cobra__head .resp { flex: 0 1 auto; }
.v-cobranza .cobra__cli { min-width: 12ch; overflow-wrap: anywhere; }
.v-cobranza .cobra__head > .chip { flex: none; }
.v-cobranza .cobra__meta > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.v-cobranza .cobra__resumen { font-variant-numeric: tabular-nums; }
.v-cobranza .cobra__acc { align-items: center; }
.v-cobranza .cobra__f > :nth-child(4),
.v-cobranza .cobra__f > :nth-child(8) { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.v-cobranza .cobra__f > .chip { overflow: visible; justify-self: start; }
.v-cobranza .cobra__f > :nth-child(5),
.v-cobranza .cobra__f > :nth-child(6) { text-align: right; overflow: visible; }
.v-cobranza .cobra__f > :nth-child(8) { color: var(--text-2); }
.v-cobranza .cobra__mas { padding-top: var(--sp-2); }
/* H58: la razón social en mayúsculas ya está en la ficha del cliente */
.v-cobranza .cobra__razon { display: none; }
/* H34: "Fernando · reclama él" */
.v-cobranza .v-cobranza__resp-fp .resp__rol { font-size: var(--fs-small); color: var(--text-2); }
/* H08: la fila entera de la factura abre el trabajo (pestaña Factura); el Nº de trabajo es texto */
.v-cobranza .v-cobranza__f { position: relative; }
.v-cobranza .v-cobranza__fabrir { position: absolute; inset: 0; z-index: 1; border-radius: var(--r-sm, 6px); }
.v-cobranza .v-cobranza__fabrir:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
@media (hover: hover) { .v-cobranza .v-cobranza__f:hover { background: var(--hover); } }
@media (max-width: 1023.98px) { .v-cobranza .v-cobranza__f { min-height: 44px; } }

/* Tabla de facturas (contenedor ancho): columnas fijas para que todo quede alineado entre clientes */
@container main (min-width: 1000px) {
  /* "Factura A 3093" entra entero (el número largo de ARCA ya no va en la fila: H29) */
  .v-cobranza .cobra__f { grid-template-columns: 136px 124px 128px 104px 144px 76px minmax(0, 1fr); padding-block: 2px; }
  .v-cobranza .cobra__f > .cobra__arca { display: none; }
}
/* Contenedor angosto: líneas apiladas (Nº y días arriba, montos abajo, estado al pie) */
@container main (max-width: 999.98px) {
  .v-cobranza .cobra__f { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "nro emi emi chip" "trab trab usd ars" "est est est est";
    gap: 4px 12px; align-items: baseline; padding: 10px 0; }
  .v-cobranza .cobra__f > :nth-child(1) { grid-area: nro; }
  .v-cobranza .cobra__f > :nth-child(2) { display: none; }
  .v-cobranza .cobra__f > :nth-child(3) { display: block; grid-area: emi; color: var(--text-3); }
  .v-cobranza .cobra__f > :nth-child(4) { grid-area: trab; }
  .v-cobranza .cobra__f > :nth-child(5) { grid-area: usd; justify-self: end; }
  .v-cobranza .cobra__f > :nth-child(6) { grid-area: ars; justify-self: end; }
  .v-cobranza .cobra__f > :nth-child(7) { grid-area: chip; justify-self: end; align-self: center; }
  .v-cobranza .cobra__f > :nth-child(8) { grid-area: est; }
  .v-cobranza .cobra__f > :nth-child(8):empty { display: none; }
}
@container main (max-width: 599.98px) {
  .v-cobranza .cobra { padding: var(--sp-4) var(--sp-3) var(--sp-3) var(--sp-4); }
  .v-cobranza .cobra__acc > .btn--secondary { flex: 1 1 100%; }
  .v-cobranza .cobra__acc > .btn--tertiary { flex: 1 1 0; min-width: max-content; }
  .v-cobranza .cobra__head { gap: 8px 12px; }
  /* Upgrade 20/10/26: el encabezado es logo + nombre (una pieza); abajo el estado y el responsable */
  .v-cobranza .cobra__head { flex-wrap: wrap; }
  .v-cobranza .cobra__id { flex-basis: 100%; order: 1; }
  .v-cobranza .cobra__cli { flex-basis: auto; order: 0; }
  .v-cobranza .cobra__head > .chip { order: 2; }
  .v-cobranza .cobra__head > .cobra__resp { order: 3; width: auto; margin-inline-start: auto; }
}

/* Avisos, pausa y nota de subconjunto (arriba de las facturas) */
.v-cobranza__aviso { margin: 0; }
.v-cobranza__aviso .traba__t { font-size: var(--fs-small); }
.v-cobranza__aviso .traba__a { margin-top: 8px; }
.v-cobranza__pausa,
.v-cobranza__nota { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: var(--fs-small); color: var(--text-2); }
.v-cobranza__nota .btn { margin-inline-start: -4px; }

/* Pie: "Cobradas en los últimos 60 días" */
.v-cobranza__pie { margin: var(--sp-6) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.v-cobranza__pie .btn { padding-inline: 0; }
.v-cobranza__pie .ico { margin-inline-start: 2px; }

/* ---- Un cliente (#cobranza-{id}) ----------------------------------------------------------------- */
.v-cobranza__volver { margin: 0 0 var(--sp-4); }
.v-cobranza__volver .btn { padding-inline: 0; }
.v-cobranza__clinombre { margin: 0 0 var(--sp-2); }
.v-cobranza__extra { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: var(--sp-3) 0 0; }
.v-cobranza__extra .btn { padding-inline: 0; }
.v-cobranza__seccion { margin-top: var(--sp-7); min-width: 0; }
.v-cobranza__h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 var(--sp-3); }

.v-cobranza__historial { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.v-cobranza__hitem { display: grid; grid-template-columns: 88px 128px minmax(0, 1fr); gap: 4px 12px; align-items: center; min-height: 44px; padding: 8px 0;
  border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.v-cobranza__hfecha { color: var(--text-2); }
.v-cobranza__historial .resp { min-width: 0; }
.v-cobranza__htxt { display: flex; align-items: flex-start; gap: 8px; min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.v-cobranza__htxt > .ico { flex: none; margin-top: 2px; color: var(--text-3); }

/* ---- Cobradas en los últimos 60 días (consulta, sin montos) ------------------------------------- */
.v-cobranza__cobradas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.v-cobranza__cob { display: grid; grid-template-columns: 64px minmax(0, 1fr) 132px 124px 152px minmax(0, 1fr); gap: 4px 12px; align-items: center; min-height: 44px;
  padding: 6px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.v-cobranza__cobradas--cli .v-cobranza__cob { grid-template-columns: 64px 132px 124px 152px minmax(0, 1fr); }
.v-cobranza__cob > * { min-width: 0; overflow-wrap: anywhere; }
.v-cobranza__cob > .chip { justify-self: start; }
.v-cobranza__cobcli { font-weight: 600; color: var(--text-strong); }
.v-cobranza__cob a { color: var(--accent); }
@container main (max-width: 699.98px) {
  .v-cobranza__cob { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "nro cli chip" "tr emi emi" "rec rec rec"; padding: 10px 0; align-items: baseline; }
  .v-cobranza__cobradas--cli .v-cobranza__cob { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "nro tr chip" "emi emi emi" "rec rec rec"; }
  .v-cobranza__cob > .cobra__nro { grid-area: nro; }
  .v-cobranza__cob > .v-cobranza__cobcli { grid-area: cli; }
  .v-cobranza__cob > .v-cobranza__cobtr { grid-area: tr; }
  .v-cobranza__cob > .v-cobranza__cobemi { grid-area: emi; }
  .v-cobranza__cob > .chip { grid-area: chip; justify-self: end; align-self: center; }
  .v-cobranza__cob > .v-cobranza__cobrec { grid-area: rec; }
  .v-cobranza__cob > .v-cobranza__cobrec:empty { display: none; }
}

@container main (max-width: 599.98px) {
  .v-cobranza__hitem { grid-template-columns: auto minmax(0, 1fr); }
  .v-cobranza__htxt { grid-column: 1 / -1; }
}

/* ---- Hojas (cobro, respuesta, plazo, contacto, redactor propio) ---------------------------------- */
.v-cobranza--hoja { display: grid; gap: var(--sp-5); min-width: 0; }
.v-cobranza--hoja .campos-2 { align-items: start; }
.v-cobranza--hoja .hoja__intro { margin: 0; }
.v-cobranza__facturas { display: grid; gap: 4px; min-width: 0; }
/* Todas las facturas a la vista: sin una segunda barra de desplazamiento dentro de la hoja */
.v-cobranza__facturas .campo__opciones { max-height: none; overflow: visible; padding-inline: 2px; }
.v-cobranza__facturas .opcion { font-variant-numeric: tabular-nums; }
.v-cobranza__marcar { display: flex; gap: 8px; margin: 0; }
.v-cobranza__marcar .btn { padding-inline: 4px; }
.v-cobranza__saldo { display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); }
.v-cobranza__saldo .datos { font-variant-numeric: tabular-nums; }
.v-cobranza__saldo .datos dd { text-align: right; }
.v-cobranza__saldo-t { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: var(--fs-small); color: var(--text-strong); }
@media (max-width: 599.98px) { .v-cobranza__saldo .datos { grid-template-columns: minmax(0, 1fr) auto; } .v-cobranza__saldo .datos dd { margin-bottom: 0; } }

.v-cobranza__tanda { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); }
.v-cobranza__tanda-t { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; margin: 0; font-size: var(--fs-small); color: var(--text-strong); }
.v-cobranza__copiar { display: grid; gap: var(--sp-3); min-width: 0; }
.v-cobranza__copiar .copiamail { margin-top: 0; }
.v-cobranza__abrir { margin: 0; }
@media (max-width: 599.98px) {
  .v-cobranza--hoja .segscroll .seg:has(> :nth-child(4)) { display: grid; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; box-sizing: border-box; }
}

/* ---------- Rediseño 21/10/26: Cobranza = las columnas del cobro del Excel (todo bajo .v-cob2) ---------- */
.v-cob2 .v-cob2__dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.v-cob2 .v-cob2__dot.is-rojo { background: var(--danger-fill); }
.v-cob2 .v-cob2__dot.is-amarillo { background: var(--warn-fill); }
.v-cob2 .v-cob2__dot.is-verde { background: var(--ok-fill); }
.v-cob2 .v-cob2__barra { display: flex; justify-content: flex-end; margin: 0 0 var(--sp-3); }
.v-cob2 .v-cob2__barra .search { width: min(380px, 100%); }
.v-cob2 .v-cob2__ayuda { margin: 0 0 var(--sp-3); font-size: var(--fs-small); color: var(--text-2); }
.v-cob2 .v-cob2__card { background: var(--surface); border-radius: var(--r-lg); border-top: 3px solid var(--card-top); box-shadow: var(--sh-card); overflow-x: auto; }
.v-cob2 .v-cob2__tabla { width: 100%; border-collapse: collapse; }
.v-cob2 .v-cob2__tabla th { position: static; height: auto; padding: 10px 12px; background: var(--surface-2); white-space: nowrap; vertical-align: bottom; }
.v-cob2 .v-cob2__l { display: block; margin-bottom: 2px; font: 600 10px/1 var(--font-mono); letter-spacing: 0; color: var(--text-3); }
.v-cob2 .v-cob2__tabla td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.v-cob2 .v-cob2__tabla tbody tr:last-child td { border-bottom: 0; }
.v-cob2 .v-cob2__tabla th:first-child, .v-cob2 .v-cob2__tabla td:first-child { padding-inline-start: 20px; }
.v-cob2 .is-num { text-align: right; }
.v-cob2 .v-cob2__inf { font-weight: 600; color: var(--text-strong); text-decoration: none; }
.v-cob2 .v-cob2__inf:hover, .v-cob2 .v-cob2__cli:hover span { text-decoration: underline; }
.v-cob2 .v-cob2__cli { display: inline-flex; align-items: center; gap: 8px; color: var(--text-strong); font-weight: 600; text-decoration: none; }
.v-cob2 .v-cob2__ok { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); }
.v-cob2 .v-cob2__ok .num { color: var(--text-2); }
.v-cob2 .v-cob2__dias { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.v-cob2 .v-cob2__dias.is-rojo { color: var(--danger); }
.v-cob2 .v-cob2__dias.is-amarillo { color: var(--warn); }
.v-cob2 .v-cob2__acc { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 220px; }
.v-cob2 .v-cob2__acc-h { min-width: 220px; }
.v-cob2 .v-cob2__recl { flex-basis: 100%; font-size: var(--fs-caption); color: var(--text-3); }
/* repaso: «Reclamar» va una vez por cliente; las otras facturas de más de 30 días dicen en qué reclamo están */
.v-cob2 .v-cob2__enrecl { display: inline-flex; align-items: center; min-height: 32px; font-size: var(--fs-caption); line-height: 1.3; color: var(--text-3); }
.v-cob2 .v-cob2__vacio { display: flex; align-items: center; gap: 10px; margin: 0; padding: 28px 20px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-card); color: var(--text-2); }
.v-cob2 .v-cob2__vacio .ico { color: var(--ok); }
@media (max-width: 1023.98px) {
  .v-cob2 .v-cob2__barra .search { width: 100%; }
}
.v-cob2 .v-cob2__tabla th, .v-cob2 .v-cob2__tabla td { padding-inline: 9px; }
.v-cob2 .v-cob2__tabla td:nth-child(2) { white-space: normal; max-width: 110px; }
.v-cob2 .v-cob2__inf { white-space: nowrap; }   /* un Nº nunca se parte ("AB-2026-07" entero); varios Nº van uno debajo del otro */
.v-cob2 .v-cob2__acc, .v-cob2 .v-cob2__acc-h { min-width: 0; width: auto; }
/* el ancho lo fijan las columnas (colgroup); "Último reclamo" va debajo de los botones */
.v-cob2 .v-cob2__tabla { table-layout: fixed; }
.v-cob2 .v-cob2__tabla td { overflow: hidden; text-overflow: ellipsis; }
.v-cob2 .v-cob2__tabla th { white-space: normal; }
/* el nombre del cliente nunca se corta: si no entra, pasa a dos renglones */
.v-cob2 .v-cob2__tabla td:nth-child(3) { white-space: normal; }
.v-cob2 .v-cob2__cli span { min-width: 0; overflow-wrap: anywhere; }

/* Celular y contenedor angosto: una tarjeta por factura, con los botones a la vista */
.v-cob2 .v-cob2__items { list-style: none; margin: 0; padding: 0; }
.v-cob2 .v-cob2__item { display: grid; gap: 4px; min-width: 0; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.v-cob2 .v-cob2__item:last-child { border-bottom: 0; }
.v-cob2 .v-cob2__ih { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 2px; min-width: 0; }
.v-cob2 .v-cob2__ih .v-cob2__cli { min-width: 0; }
.v-cob2 .v-cob2__ih .v-cob2__dias { flex: none; }
.v-cob2 .v-cob2__il { margin: 0; font-size: var(--fs-small); color: var(--text-2); overflow-wrap: anywhere; }
.v-cob2 .v-cob2__im { color: var(--text-strong); font-weight: 600; }
.v-cob2 .v-cob2__item .v-cob2__acc { gap: 8px; margin-top: 8px; }
.v-cob2 .v-cob2__item .v-cob2__acc > .btn--secondary { flex: 1 1 100%; }
/* Tablet y notebook angosta (la tabla no entra): datos a la izquierda y botones a la derecha, siempre en el mismo lugar */
@container main (min-width: 600px) {
  .v-cob2 .v-cob2__item { grid-template-columns: minmax(0, 1fr) 290px; column-gap: 24px; align-items: center; padding-inline: 20px; }
  .v-cob2 .v-cob2__item > p { grid-column: 1; }
  .v-cob2 .v-cob2__item .v-cob2__acc { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
  .v-cob2 .v-cob2__item .v-cob2__acc > .btn--secondary { flex: none; }
}

/* ===================================================================================================
   Facturar y cobrar (v17, SPEC_v17 §10.2): la barra de Administración y las filas de S y AE (como las de Trabajos)
   =================================================================================================== */
.v-fyc { display: grid; gap: var(--sp-4); }
.v-fyc > .pagehead { margin-bottom: 0; }
.v-fyc .v-fyc__filtros { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.v-fyc .v-fyc__filtros .search { flex: 1 1 280px; max-width: 460px; }
.v-fyc .v-fyc__most { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: -4px 0 0; padding: 8px 12px; border-radius: var(--r-sm);
  background: var(--accent-soft); color: var(--text-strong); font: 500 var(--fs-small)/1.35 var(--font-ui); }
.v-fyc .v-fyc__limpiar { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--accent); font: 600 var(--fs-small)/1.2 var(--font-ui); text-decoration: none; }
.v-fyc .v-fyc__limpiar:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.v-fyc .v-fyc__limpiar:hover { text-decoration: underline; }
/* la barra: Falta facturar S │ Falta enviar AE │ Por cobrar AB */
.v-fyc .v-fyc__barra { padding: 10px 12px 12px; background: var(--surface); border-radius: var(--r-lg); border-top: 3px solid var(--card-top, var(--imc-ink)); box-shadow: var(--sh-card, var(--sh-1)); }
.v-fyc .v-fyc__bey { margin: 2px 6px 8px; color: var(--text-strong); }
.v-fyc .v-fyc__bl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v-fyc .v-fyc__bi { display: grid; min-width: 0; }
.v-fyc .v-fyc__bi + .v-fyc__bi { border-inline-start: 1px solid var(--line); }
.v-fyc .v-fyc__b { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 10px 14px; margin: 0 4px; border-radius: var(--r-sm); color: var(--text); text-decoration: none;
  transition: background-color var(--dur-1, .12s) var(--ease, ease); }
.v-fyc .v-fyc__b:hover { background: var(--hover); }
.v-fyc .v-fyc__b:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.v-fyc .v-fyc__bnom { font: 600 var(--fs-small)/1.25 var(--font-ui); color: var(--text-strong); }
.v-fyc .v-fyc__bval { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.v-fyc .v-fyc__bn { font: 400 2.25rem/1 var(--font-display); letter-spacing: .005em; color: var(--text-strong); }
.v-fyc .v-fyc__b.is-cero .v-fyc__bn { color: var(--text-3); }
.v-fyc .v-fyc__bu { font: 500 var(--fs-small)/1.2 var(--font-ui); color: var(--text-2); }
.v-fyc .v-fyc__b2 { font: 600 var(--fs-small)/1.2 var(--font-ui); color: var(--danger); }
.v-fyc .v-fyc__b[aria-current="page"] { background: var(--tile-bg, var(--imc-ink)); box-shadow: inset 0 -3px 0 var(--imc-orange); --focus: #FFB27A; }
.v-fyc .v-fyc__b[aria-current="page"]:hover { background: var(--tile-hover, var(--imc-navy)); }
.v-fyc .v-fyc__b[aria-current="page"] :is(.v-fyc__bnom, .v-fyc__bn) { color: #FFFFFF; }
.v-fyc .v-fyc__b[aria-current="page"] :is(.v-fyc__bu, .letra-col) { color: #DFE0EE; }
.v-fyc .v-fyc__b[aria-current="page"] .v-fyc__b2 { color: #FFC4C4; }
/* el paso elegido */
.v-fyc .v-fyc__sec { display: grid; gap: 8px; min-width: 0; container-type: inline-size; container-name: fyc; }
.v-fyc .v-fyc__gt { display: flex; align-items: baseline; gap: 10px; margin: var(--sp-3) 2px 0; font: 400 2.5rem/1.05 var(--font-display); letter-spacing: .005em; color: var(--text-strong); }
.v-fyc .v-fyc__gt .letra-col { font: 600 13px/1 var(--font-ui); }
.v-fyc .v-fyc__ayuda { margin: 0 2px 6px; font: 400 var(--fs-body)/1.45 var(--font-ui); color: var(--text-2); }
.v-fyc .v-fyc__nada { display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface-2); color: var(--text-2); font: 500 var(--fs-body)/1.4 var(--font-ui); }
.v-fyc .v-fyc__nada .ico { color: var(--ok-fill); flex: none; }
/* filas de S y AE */
.v-fyc .v-fyc__lista { list-style: none; margin: 0; padding: 0; display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.v-fyc .v-fyc__fila { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) 118px 112px 132px minmax(0, 190px) 20px; align-items: center; gap: 4px 16px;
  min-height: 60px; padding: 10px 14px; box-sizing: border-box; cursor: pointer; transition: background-color var(--dur-1, .12s) var(--ease, ease); }
.v-fyc .v-fyc__fila + .v-fyc__fila { border-top: 1px solid var(--line); }
.v-fyc .v-fyc__fila:hover { background: var(--hover); }
.v-fyc .v-fyc__fila.is-tarde { box-shadow: inset 3px 0 0 var(--danger-fill); }
.v-fyc .v-fyc__logo { display: inline-flex; }
.v-fyc .v-fyc__main { display: grid; gap: 2px; min-width: 0; }
.v-fyc .v-fyc__l1 { display: flex; align-items: baseline; min-width: 0; font: 600 var(--fs-body)/1.3 var(--font-ui); color: var(--text-strong); }
.v-fyc .v-fyc__nro, .v-fyc .v-fyc__cli { color: var(--text-strong); text-decoration: none; white-space: nowrap; }
.v-fyc .v-fyc__cli { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.v-fyc :is(.v-fyc__nro, .v-fyc__cli):hover { text-decoration: underline; }
.v-fyc :is(.v-fyc__nro, .v-fyc__cli):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.v-fyc .v-fyc__fac { white-space: nowrap; }
.v-fyc .v-fyc__sep { color: var(--text-3); white-space: pre; }
.v-fyc .v-fyc__l2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 var(--fs-small)/1.35 var(--font-ui); color: var(--text-2); }
.v-fyc .v-fyc__dato { display: grid; gap: 1px; font: 500 var(--fs-small)/1.3 var(--font-ui); color: var(--text); }
.v-fyc .v-fyc__dt { font: 400 var(--fs-caption)/1.2 var(--font-ui); color: var(--text-2); }
.v-fyc .v-fyc__usd { font: 600 var(--fs-body)/1.2 var(--font-ui); color: var(--text-strong); white-space: nowrap; }
.v-fyc .v-fyc__usd.is-est { color: var(--text-2); font-weight: 500; }
.v-fyc .v-fyc__usd.is-sin { color: var(--text-3); font-weight: 500; font-size: var(--fs-small); }
.v-fyc .v-fyc__estado .chip { white-space: nowrap; }
.v-fyc .v-fyc__acc { display: flex; justify-content: flex-end; min-width: 0; }
.v-fyc .v-fyc__btn { white-space: nowrap; }
.v-fyc .v-fyc__chev { display: inline-flex; color: var(--text-3); }
.v-cob2 .v-cob2__sinenv { color: var(--warn); font-weight: 600; font-size: var(--fs-small); }
@container fyc (max-width: 879.98px) {
  .v-fyc .v-fyc__fila { grid-template-columns: 32px minmax(0, 1fr) auto auto 20px; }
  .v-fyc .v-fyc__dato { grid-column: 2; grid-row: 2; display: flex; gap: 6px; align-items: baseline; }
  .v-fyc .v-fyc__monto { grid-column: 3; grid-row: 1; }
  .v-fyc .v-fyc__estado { grid-column: 3; grid-row: 2; }
  .v-fyc .v-fyc__acc { grid-column: 4; grid-row: 1 / span 2; }
  .v-fyc .v-fyc__chev { grid-column: 5; grid-row: 1 / span 2; }
}
@container fyc (max-width: 579.98px) {
  .v-fyc .v-fyc__fila { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px; }
  .v-fyc .v-fyc__logo { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .v-fyc .v-fyc__main { grid-column: 2; grid-row: 1; }
  .v-fyc .v-fyc__monto { grid-column: 3; grid-row: 1; align-self: start; }
  .v-fyc .v-fyc__dato { grid-column: 2 / -1; grid-row: 2; }
  .v-fyc .v-fyc__estado { grid-column: 1 / -1; grid-row: 3; }
  .v-fyc .v-fyc__acc { grid-column: 1 / -1; grid-row: 4; }
  .v-fyc .v-fyc__acc .btn { width: 100%; justify-content: center; min-height: 44px; }
  .v-fyc .v-fyc__chev { display: none; }
  .v-fyc .v-fyc__l2 { white-space: normal; }
}
@media (max-width: 599.98px) {
  .v-fyc .v-fyc__barra { padding: 8px 6px 10px; }
  .v-fyc .v-fyc__b { padding: 8px 6px; margin: 0 2px; gap: 4px; }
  .v-fyc .v-fyc__bnom { font-size: var(--fs-caption); }
  .v-fyc .v-fyc__bn { font-size: 1.75rem; }
  .v-fyc .v-fyc__bu, .v-fyc .v-fyc__b2 { font-size: var(--fs-caption); }
  .v-fyc .v-fyc__filtros .search { flex-basis: 100%; max-width: none; }
}

/* ===================================================================================================
   v20 (reunión con el equipo, 23/10/26): tipo de cambio arriba, chips por responsable y los cuadros de Por cobrar
   =================================================================================================== */
/* La franja del tipo de cambio: rótulo · valor en serif · de cuándo · botones; abajo, la regla de las facturas E */
.v-fyc .v-fyc__tc { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "a v de acc"; align-items: center;
  gap: 8px 24px; margin: 0; padding: 12px 20px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--imc-orange);
  border-radius: var(--r-lg); box-shadow: var(--sh-card, var(--sh-1)); }
.v-fyc .v-fyc__tc > * { margin: 0; min-width: 0; }
.v-fyc .v-fyc__tc-a { grid-area: a; display: grid; gap: 3px; }
.v-fyc .v-fyc__tc-ey { font: 600 var(--fs-eyebrow)/1.2 var(--font-caps); font-stretch: 125%; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-2); }
.v-fyc .v-fyc__tc-que { font: 600 var(--fs-body)/1.25 var(--font-ui); color: var(--text-strong); }
.v-fyc .v-fyc__tc-v { grid-area: v; font: 400 2.25rem/1 var(--font-display); color: var(--text-strong); white-space: nowrap; }
.v-fyc .v-fyc__tc-de { grid-area: de; display: grid; gap: 4px; }
.v-fyc .v-fyc__tc-cuando { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font: 500 var(--fs-small)/1.35 var(--font-ui); color: var(--text); }
.v-fyc .v-fyc__tc-acc { grid-area: acc; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 14px; }
.v-fyc .v-fyc__tc-link { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; color: var(--accent); font: 600 var(--fs-small)/1.2 var(--font-ui); text-decoration: none; white-space: nowrap; }
.v-fyc .v-fyc__tc-link:hover { text-decoration: underline; }
.v-fyc .v-fyc__tc-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.v-fyc .v-fyc__tc-e { margin: 0; font: 400 var(--fs-caption)/1.4 var(--font-ui); color: var(--text-2); }
.v-fyc .v-fyc__tc.is-viejo { border-left-color: var(--warn-fill); }
@container main (max-width: 899.98px) {
  .v-fyc .v-fyc__tc { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "a v" "de de" "acc acc"; gap: 8px 16px; padding: 12px 16px; }
  .v-fyc .v-fyc__tc-v { font-size: 2rem; justify-self: end; }
  .v-fyc .v-fyc__tc-acc { justify-content: flex-start; }
}

/* Chips por responsable del trabajo (S y AE): en varias líneas, sin tira desplazable */
.v-fyc .v-fyc__resp .quien { flex-wrap: wrap; overflow: visible; margin: 0; padding: 2px 0 4px; }
.v-fyc .v-fyc__resp .quien__chip { min-height: 40px; }
.v-fyc .v-fyc__resp-nadie { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 12px; }
.v-fyc .v-fyc__resp-nadie .ico { flex: none; margin-top: 2px; }
@media (max-width: 1023.98px) { .v-fyc .v-fyc__resp .quien__chip { min-height: 44px; } }
.v-fyc .v-fyc__quien { display: inline-flex; align-items: center; gap: 5px; vertical-align: -4px; color: var(--text); font-weight: 500; }
.v-fyc .v-fyc__quien.is-sin { color: var(--warn); font-weight: 600; vertical-align: baseline; }

/* Por cobrar: tres cuadros (Al día · Para reclamar · Atrasadas) que se entienden solos y filtran la tabla */
.v-fyc .v-cob3 { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.v-fyc .v-cob3 > li { display: grid; min-width: 0; }
.v-fyc .v-cob3__t { all: unset; box-sizing: border-box; display: grid; align-content: start; gap: 8px; min-width: 0; padding: 14px 18px 16px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--z, var(--line-strong)); border-radius: var(--r-lg); box-shadow: var(--sh-card, var(--sh-1));
  color: var(--text); transition: background-color var(--dur-1, .12s) var(--ease, ease); }
.v-fyc .v-cob3__t.is-verde { --z: var(--ok-fill); --zt: var(--ok); }
.v-fyc .v-cob3__t.is-amarillo { --z: var(--warn-fill); --zt: var(--warn); }
.v-fyc .v-cob3__t.is-rojo { --z: var(--danger-fill); --zt: var(--danger); }
.v-fyc .v-cob3__t:hover { background: var(--hover); }
.v-fyc .v-cob3__t:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.v-fyc .v-cob3__t[aria-pressed="true"] { background: var(--tile-bg, var(--imc-ink)); border-color: var(--tile-bg, var(--imc-ink)); border-top-color: var(--z); box-shadow: inset 0 -3px 0 var(--imc-orange); --focus: #FFB27A; }
.v-fyc .v-cob3__t[aria-pressed="true"]:hover { background: var(--tile-hover, var(--imc-navy)); }
.v-fyc .v-cob3__nom { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font: 700 var(--fs-body)/1.25 var(--font-ui); color: var(--text-strong); }
.v-fyc .v-cob3__dot { flex: none; align-self: center; width: 10px; height: 10px; border-radius: 50%; background: var(--z); }
.v-fyc .v-cob3__rango { font: 600 var(--fs-small)/1.25 var(--font-ui); color: var(--zt, var(--text-2)); }
.v-fyc .v-cob3__cifra { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.v-fyc .v-cob3__n { font: 400 2.5rem/1 var(--font-display); color: var(--text-strong); }
.v-fyc .v-cob3__u { font: 500 var(--fs-small)/1.2 var(--font-ui); color: var(--text-2); }
.v-fyc .v-cob3__usd { flex-basis: 100%; font: 600 var(--fs-small)/1.3 var(--font-ui); color: var(--text-strong); }
.v-fyc .v-cob3__lin { font: 400 var(--fs-small)/1.4 var(--font-ui); color: var(--text-2); }
.v-fyc .v-cob3__t.is-cero .v-cob3__n { color: var(--text-3); }
.v-fyc .v-cob3__t[aria-pressed="true"] :is(.v-cob3__nom, .v-cob3__n, .v-cob3__usd) { color: #FFFFFF; }
.v-fyc .v-cob3__t[aria-pressed="true"] :is(.v-cob3__u, .v-cob3__lin) { color: #DFE0EE; }
.v-fyc .v-cob3__t[aria-pressed="true"] .v-cob3__rango { color: #FFD7B8; }
.v-fyc .v-cob3__most { margin: 6px 0 2px; }
.v-fyc[data-paso="cobro"] .v-cob2__card, .v-fyc[data-paso="cobro"] .v-cob2__vacio { margin-top: 6px; }
@media (max-width: 599.98px) {
  .v-fyc .v-fyc__gt { font-size: 2rem; }
  .v-fyc .v-fyc__ayuda { font-size: var(--fs-small); }
  /* en el celular, un cuadro por renglón: nombre y qué hacer a la izquierda, la cantidad a la derecha */
  .v-fyc .v-cob3 { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .v-fyc .v-cob3__t { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom cifra" "lin cifra"; gap: 4px 12px; padding: 12px 14px; border-top-width: 1px; border-left: 4px solid var(--z); }
  .v-fyc .v-cob3__t[aria-pressed="true"] { border-left-color: var(--z); }
  .v-fyc .v-cob3__nom { grid-area: nom; }
  .v-fyc .v-cob3__lin { grid-area: lin; }
  .v-fyc .v-cob3__cifra { grid-area: cifra; flex-direction: column; align-items: flex-end; justify-content: center; gap: 2px; text-align: right; }
  .v-fyc .v-cob3__n { font-size: 2rem; }
  .v-fyc .v-cob3__usd { flex-basis: auto; }
}
@media (max-width: 599.98px) {
  /* en el celular, la franja del tipo de cambio sin la regla de las facturas E (se ve en la computadora) */
  .v-fyc .v-fyc__tc-e { display: none; }
  .v-fyc .v-fyc__tc { padding: 12px 14px; gap: 6px 12px; }
}