/* «Cheques que nos entregó» — bloque de la ficha (ADR-029, docs/contrato-cheques-recibidos.md §5).
   -----------------------------------------------------------------------------------------------
   Portado de los mockups aprobados por Fernando el 2026-09-12
   (`docs/design/direcciones/cheques-2026-09-{A,B}{,-mobile}.html`): eligió **"A con la línea de
   tiempo de B"** — tarjetas KPI + barra de plazos de A, la línea de tiempo recepción→cobro de B
   antes del desplegable, y la lista en filas (A), no en tabla (B). Lo que no se eligió (la tabla
   densa de B, que en 375 px scrollea de costado) NO se porta.

   ⚠️ NINGÚN color nuevo: todo sale de `tokens.css`. Los dos tokens de COLOR SEMÁNTICO que este
   archivo usa sobre un fondo se midieron con la fórmula WCAG en los DOS temas, sobre el fondo REAL
   (`--surface`, que es el de `.group`), y el ratio queda anotado al lado — misma convención que ya
   trae `tokens.css` y que el proyecto pagó dos veces por no seguir (§4, 2026-09-01 `--blue` y
   2026-09-08 `--text-4`/`--text-3`).

   ⚠️ **DESVÍO DELIBERADO DEL MOCKUP, medido**: el mockup pinta `.chq-kpi` con `var(--surface-2)`.
   Sobre ese fondo, en tema OSCURO, `--red-text` (#ff6961 sobre #3a3a3c) da **4,02:1** y NO llega a
   AA (4,5:1) — el propio `tokens.css` documenta esas variantes como "AA sobre surface y sobre su
   soft", no sobre `--surface-2`. Con `var(--surface)` da **4,94:1 en oscuro** y **5,38:1 en claro**,
   y la tarjeta se sigue delimitando con su borde. El KPI rojo es JUSTO el que no puede quedar por
   debajo del piso: es el que responde "¿nos está rechazando los cheques?".
   Mediciones (fórmula WCAG, fondo `--surface`):
     · `--red-text`   → 5,38:1 claro (#d70015 sobre #ffffff) · 4,94:1 oscuro (#ff6961 sobre #2c2c2e)
     · `--green-text` → 5,41:1 claro (#1d7a33 sobre #ffffff) · 7,57:1 oscuro (#30db5b sobre #2c2c2e)
     · `--text-2`     → 7,26:1 claro · 6,91:1 oscuro
     · `--text-3`     → 4,66:1 claro · **4,33:1 oscuro** → NO se usa para texto informativo acá
       (mismo hallazgo del 2026-09-08: la cifra "5,1:1" del token es del tema CLARO). Las etiquetas
       de los KPI son lo ÚNICO que dice qué significa el número: van en `--text-2`. La jerarquía la
       dan el tamaño, el peso y la caja alta, no el color.
*/

/* ---- KPIs (variante A) --------------------------------------------------------------------- */
.chq-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
  padding: var(--sp-3) var(--sp-4);
}
.chq-kpi {
  border: .5px solid var(--hairline); border-radius: 10px; padding: 10px 12px;
  background: var(--surface); min-width: 0;
}
.chq-kpi .k {
  font: 600 11px/1.3 var(--font); color: var(--text-2);
  text-transform: uppercase; letter-spacing: .04em;
}
.chq-kpi .v { font: 700 20px/1.2 var(--font); color: var(--text-1); margin-top: 2px; }
.chq-kpi .s { font: 400 12px/1.35 var(--font); color: var(--text-2); margin-top: 2px; }
.chq-kpi.red .v   { color: var(--red-text); }    /* 5,38:1 claro · 4,94:1 oscuro (sobre --surface) */
.chq-kpi.green .v { color: var(--green-text); }  /* 5,41:1 claro · 7,57:1 oscuro (sobre --surface) */

/* ---- Barra de plazo de entrega (variante A) ------------------------------------------------ */
.chq-plazo { padding: var(--sp-2) var(--sp-4) var(--sp-3); }
.chq-plazo-hd {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font: 400 var(--fs-sm)/1.4 var(--font); color: var(--text-2);
}
.chq-plazo-hd b { font-size: var(--fs-body); color: var(--text-1); }
.chq-bar {
  display: flex; height: 14px; border-radius: 7px; overflow: hidden; margin: 8px 0 6px;
  background: var(--gray-soft);
}
.chq-bar span { display: block; height: 100%; }
/* Las cuatro franjas son DECORATIVAS: cada una tiene su entrada en la leyenda de abajo con el
   conteo en texto, así que el color nunca es el único portador de información (WCAG 1.4.1). */
.chq-b1 { background: var(--green-text); }
.chq-b2 { background: var(--blue-text); }
.chq-b3 { background: var(--orange-text); }
.chq-b4 { background: var(--red-text); }
.chq-leg {
  display: flex; gap: 12px; flex-wrap: wrap; font: 400 12px/1.4 var(--font); color: var(--text-2);
}
.chq-leg i {
  display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px;
  vertical-align: middle;
}
.chq-foot { font: 400 12px/1.4 var(--font); color: var(--text-2); padding: 0 var(--sp-4) var(--sp-2); }
.chq-foot.warn { color: var(--orange-text); }

/* ---- Línea de tiempo recepción → cobro contra "hoy" (variante B, elegida por Fernando) ------
   Va ANTES del desplegable «Ver cheques»: responde el *cuándo* de un vistazo (qué está por
   vencer, qué ya venció) sin abrir la lista. El eje se calcula desde los datos (el JS interpola
   `left`/`width` en %), nunca con meses fijos: un cliente con cheques a 200 días y otro a 30 no
   pueden compartir escala. */
.chq-tl { padding: var(--sp-2) var(--sp-4); }
/* ⚠️ El GUTTER de la izquierda no es decoración: sin él, la etiqueta del número —que es opaca y
   vivía en `left: 0`— TAPA el arranque de cualquier segmento que empiece en 0%, y con datos
   reales eso es lo normal (medido el 2026-09-12 sobre la cuenta 82: sus 8 cheques más recientes
   se recibieron el MISMO día, así que los 8 segmentos arrancaban en 0% y los 8 quedaban tapados).
   El mockup no lo mostraba porque sus datos ficticios arrancaban en 28-78%.
   `.chq-tl-plot` es lo que hace que los `%` del JS (eje, segmentos y la línea de "hoy") se
   resuelvan contra el MISMO ancho, el de la pista sin el gutter — si la línea de hoy viviera
   afuera, mediría contra un ancho distinto y quedaría corrida respecto de las barras. */
.chq-tl-wrap { position: relative; }
.chq-tl-plot { position: relative; margin-left: 88px; }
.chq-tl-axis {
  position: relative; height: 22px; border-bottom: 1px solid var(--border);
  font: 400 11px/1 var(--font); color: var(--text-2);
}
.chq-tl-axis span { position: absolute; top: 4px; transform: translateX(-50%); white-space: nowrap; }
.chq-tl-row { position: relative; height: 30px; border-bottom: .5px dashed var(--hairline); }
.chq-tl-seg {
  position: absolute; top: 8px; height: 14px; border-radius: 7px;
  background: var(--gray-soft); border: .5px solid var(--border);
}
/* ---- Los CUATRO colores de CH8 (2026-09-13, pedido textual de Fernando) --------------------
   verde = cubierto y pagado · rojo = no cubierto · azul = en cartera · gris = sin seguimiento.
   Las clases se llaman por el SIGNIFICADO (`ok`/`danger`/`wait`/`mute`) y no por el estado de
   Odoo: quién cae en cada una lo decide `UI.chequeSemaforo`, única definición (§4.1 nº6). Los
   nombres viejos (`dep`/`cub`/`rech`/`venc`) se retiran — eran un segundo mapeo estado→color
   escondido en el CSS.
   ⚠️ RELLENO PLENO, no el `soft` — y esto se decidió MIDIENDO, no por gusto. Con los `soft`
   (10-16%, que es lo que traía el mockup de la variante B) las cuatro barras dan **1,08 a 1,36:1**
   contra el fondo en los dos temas: muy por debajo del piso de 3:1 de un componente gráfico
   (WCAG 1.4.11) y, sobre todo, **indistinguibles entre sí** — verde 1,08 y rojo 1,14 en claro es
   "dos barras del mismo gris pálido", o sea exactamente lo contrario de lo que CH8 pide
   ("si fue cubierto y pagado verde, si no rojo"). Con el tono pleno van de 4,35 a 7,57:1, y es
   además lo que ya hace la barra de plazos de arriba (`.chq-b1`..`.chq-b4`).
   El color igual NUNCA viaja solo: cada franja tiene su palabra en la leyenda (WCAG 1.4.1) y cada
   cheque su chip con el texto completo en la lista. */
.chq-tl-seg.ok     { background: var(--green-text); border-color: var(--green-text); }
.chq-tl-seg.danger { background: var(--red-text);   border-color: var(--red-text); }
.chq-tl-seg.wait   { background: var(--blue-text);  border-color: var(--blue-text); }
.chq-tl-seg.mute   { background: var(--text-3);     border-color: var(--text-3); }
/* Cuadraditos de la leyenda de la línea de tiempo: el TONO PLENO (no el soft), porque a 8×8 px un
   relleno al 10% es invisible. Son decorativos — la palabra está al lado. */
.chq-leg-ok     { background: var(--green-text); }
.chq-leg-danger { background: var(--red-text); }
.chq-leg-wait   { background: var(--blue-text); }
.chq-leg-mute   { background: var(--text-3); }
/* La leyenda de la línea de tiempo va ARRIBA del eje y con su propio respiro: pegada al eje se
   leía como si fuera parte de la escala de meses. */
.chq-tl-leg { margin-bottom: 8px; }
.chq-tl-lbl {
  position: absolute; left: -88px; top: 9px; width: 84px;
  font: 600 11px/1 var(--font); color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chq-tl-hoy { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--red-text); }
.chq-tl-hoy::after {
  content: 'hoy'; position: absolute; top: -16px; left: -10px;
  font: 600 10px/1 var(--font); color: var(--red-text);
}

/* ---- Filas etiqueta/valor de ESTE bloque ---------------------------------------------------
   ⚠️ `.frow .lbl` es `flex-shrink: 0` en app.css (correcto para las etiquetas cortas del resto de
   la app). Acá la más larga —«Rechazos asentados sin cheque identificado»— mide 269 px y a 375 px
   empujaba el VALOR 4 px fuera de la fila: medido, no supuesto. Se deja encoger y envolver en vez
   de acortar el texto, porque esa etiqueta está haciendo trabajo real (distingue el rechazo que
   administración asentó sin poder identificar el cheque, que es justo el que no aparece en la
   lista de abajo). La regla es LOCAL a este bloque: no toca `.frow` de nadie más.
   ⚠️ El README de los mockups afirma «0 cortes en 375 px tras acortar la etiqueta» y el mockup
   que hay en el repo NO la acorta — la afirmación no era reproducible. */
.chq-frow .lbl { flex-shrink: 1; min-width: 0; }

/* ---- Lista «Ver cheques» (variante A: filas, no tabla) -------------------------------------- */
.chq-list { padding: 0 var(--sp-4) var(--sp-2); }
.chq-row {
  display: flex; justify-content: space-between; gap: 10px; padding: 8px 0;
  border-top: .5px solid var(--hairline); align-items: flex-start;
}
.chq-row:first-child { border-top: 0; }
.chq-row-main { min-width: 0; }
/* Nombre a ancho completo en su propio renglón, meta abajo (§4.1 nº12, patrón `.prod-row`): el
   ellipsis de una línea es para tablas densas, y esto es una lista vertical. `title` SIEMPRE lo
   pone el JS. */
.chq-name { font: 600 var(--fs-sm)/1.35 var(--font); color: var(--text-1); }
.chq-meta { font: 400 12px/1.4 var(--font); color: var(--text-2); margin-top: 2px; }
/* Los chips mini de la meta (estado + emisor, CH9) viven en línea con el texto y ENVUELVEN: a
   375 px, con «Recibido 14 jul · cobro 20 dic · 159 días» + «En cartera» + «De un tercero» no
   entran en un renglón (la fila tiene 311 px útiles) y el segundo chip baja solo. El `margin`
   vertical es para que dos renglones de chips no se toquen; `vertical-align` para que el chip no
   cuelgue del baseline del texto de 12 px.
   ⚠️ Kind del chip de emisor = `yellow`, decidido MIDIENDO sobre el fondo REAL de la fila
   (`--surface`, el de `.group`, con el `soft` del chip encima), fórmula WCAG:
     · `yellow` (`--yellow-text` sobre `--yellow-soft`+surface) → 4,95:1 claro · 6,51:1 oscuro ✓
     · `gray`   (`--text-2` sobre `--gray-soft`+surface)        → 6,87:1 claro · 5,44:1 oscuro ✓
     · `blue`   (el candidato "info" natural)                   → 5,31:1 claro · **4,01:1 oscuro** ✗
   El azul falla AA en oscuro y además ya significa "en cartera" en este bloque. */
.chq-meta .chip.mini { vertical-align: middle; margin: 1px 0; }
.chq-amt {
  font: 600 var(--fs-sm)/1.35 var(--font); white-space: nowrap; text-align: right; color: var(--text-1);
}
/* Blanco táctil de 44 px por pseudo-elemento, NUNCA por padding (convención del proyecto: agrandar
   la caja real descoloca la fila). Acá el `min-height` ya lo da porque el summary es su propia
   fila, pero el patrón se mantiene explícito para que un cambio de `font-size` no lo baje. */
details.chq-det > summary {
  cursor: pointer; padding: var(--sp-2) var(--sp-4);
  font: 600 var(--fs-sm)/1.4 var(--font); color: var(--blue-text);
  list-style: none; min-height: 44px; display: flex; align-items: center;
}
details.chq-det > summary::-webkit-details-marker { display: none; }

/* ---- Celular: las tarjetas KPI van de a dos y la fila de cheque se apila ---------------------
   Medido a 375 px (343 útiles): con `auto-fit minmax(150px,1fr)` entran 2 columnas de 161 px, y
   la fila de la lista en horizontal dejaba el monto pegado al nombre. */
@media (max-width: 500px) {
  .chq-row { flex-direction: column; gap: 4px; }
  .chq-amt { text-align: left; }
  .chq-kpis { grid-template-columns: 1fr 1fr; }
  /* Gutter más chico: a 375 px el bloque tiene 311 px útiles y 88 se comían el 28% de la pista. */
  .chq-tl-plot { margin-left: 68px; }
  .chq-tl-lbl { left: -68px; width: 64px; }
}