/* ============================================================
   Gerencia v2 — zip #6 · tanda 2 (16-oct-2026): LECTURA 03 CARTERA, lo propio (lo común vive en admin-gerencia-lectura.css).
   Medidas de Gerencia v2.dc.html#g03 (traspasos\zip6_t2\dibujo_g03.md). Prefijo gl-car-, dentro de .gl--cartera. Los colores,
   los de la paleta de TEXTOS L9 más los tres de las barras del dibujo (#EFEBE0 la pista · #A8B2AE el tramo 1 a 30).
   En la web (≥ 861 px) las rejillas del dibujo; entre 861 y 1100 px las columnas de las tablas se estrechan (y lo común pasa la
   fila Edad | Lista a una columna); en el teléfono (≤ 860 px) la lectura no pinta ni la Edad ni el extemporáneo, y la lista va
   en filas de dos líneas: a 375 px nada pasa de su ancho.
   ============================================================ */

/* Los tonos de las líneas de una cifra (.gl-rojo · .gl-verde · .gl-gris · .gl-enl) ya los resuelve lo común
   (admin-gerencia-lectura.css, `.ger .gl-cif__l.gl-…`): aquí no se repiten. */

/* Cifra «Cobrado de lo facturado»: la barra de 6 px */
.gl-car-barra { height: 6px; background: #EFEBE0; border-radius: 3px; overflow: hidden; }
.gl-car-barra > span { display: block; height: 100%; background: #3C7E67; }

/* ---------- Edad de la deuda (P-bar, solo web) ---------- */
.gl-car-edad { background: #fff; border: 1px solid #EAE5D9; border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.gl-car-edad__t { font-size: 14px; font-weight: 800; color: #304D45; }
.gl-car-edad__pila { display: flex; flex-direction: column; gap: 10px; }
.gl-car-edad__fila { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; font-size: 12.5px; }
.gl-car-edad__fila > span { color: #55605B; min-width: 0; }
.gl-car-edad__fila > b { color: #304D45; white-space: nowrap; }
.gl-car-edad__fila > b.gl-rojo { color: #8E3A31; }
.gl-car-edad__pista { height: 10px; background: #EFEBE0; border-radius: 5px; overflow: hidden; }
.gl-car-edad__barra { display: block; height: 100%; }
.gl-car-edad__barra--1 { background: #A8B2AE; }
.gl-car-edad__barra--2 { background: #B8860B; }
.gl-car-edad__barra--3 { background: #8E3A31; }
.gl-car-edad__barra--4 { background: #B4322A; }

/* ---------- Quién lleva más tiempo debiendo (P-lis) ---------- */
.gl-car-lista .gl-lista__cols, .gl-car-lista .gl-car-fila { grid-template-columns: minmax(0, 1fr) 84px 60px 104px 170px; }
.gl-car-filas > .gl-fila:last-child { border-bottom: 0; }
/* teléfono: nombre · placa / Estado a la izquierda; días / saldo a la derecha */
.gl-car-tl__izq { flex: 1; min-width: 0; }
.gl--tel .gl-car-lista .gl-dos__1 { font-size: 13px; }
.gl--tel .gl-car-lista .gl-placa { font-size: 11.5px; }
.gl-car-tl__est { font-size: 11.5px; overflow-wrap: anywhere; }
.gl-car-est--gris { color: #6B6455; }
.gl-car-est--rojo { color: #8E3A31; }
.gl-car-est--verde { color: #304D45; }
.gl-car-est--ambar { color: #7A5A08; }
.gl-car-tl__der { flex: none; text-align: right; }
.gl-car-tl__der .gl-dias { font-size: 13px; }
.gl-car-tl__saldo { font-size: 11.5px; color: #27282A; white-space: nowrap; }

/* ---------- Pago extemporáneo de la administración mensual (P-res, solo web) ---------- */
.gl-car-ext { background: #fff; border: 1px solid #EAE5D9; border-radius: 14px; overflow: hidden; min-width: 0; }
.gl-car-ext__celdas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 6px 18px 12px; }
.gl-car-cel { background: #F7F5EF; border-radius: 10px; padding: 10px 12px; min-width: 0; }
.gl-car-cel__n { font-size: 18px; font-weight: 800; color: #304D45; overflow-wrap: anywhere; }
.gl-car-cel__s { font-size: 12px; font-weight: 600; color: #55605B; }
.gl-car-cel__pd { margin-top: 3px; font-size: 13px; font-weight: 600; color: #8A8574; }
.gl-car-ext__sub { display: flex; align-items: baseline; gap: 10px; padding: 10px 18px; border-top: 1px solid #F2EFE6; min-width: 0; }
.gl-car-ext__st { font-size: 13.5px; font-weight: 800; color: #304D45; }
.gl-car-ext .gl-lista__cols { border-bottom: 0; border-top: 1px solid #F2EFE6; }
.gl-car-ctrl { display: grid; grid-template-columns: 130px minmax(0, 1fr) 120px 110px 160px; gap: 12px; align-items: center; }
.gl-car-ctrl__fila { padding: 9px 18px; border-top: 1px solid #F2EFE6; min-width: 0; }
.gl-car-ctrl__cuando { font-size: 12.5px; color: #8A8574; white-space: nowrap; }
.gl-car-ctrl__per { font-size: 13px; font-weight: 700; color: #304D45; overflow-wrap: anywhere; }
.gl-car-ctrl__fp { font-size: 13px; font-weight: 700; color: #27282A; white-space: nowrap; }
.gl-car-ctrl__v { font-size: 13px; color: #27282A; white-space: nowrap; }
.gl-car-ctrl__q { font-size: 12.5px; color: #55605B; overflow-wrap: anywhere; }
.gl-car-ext .gl-lista__pie { padding: 10px 18px; }
.gl-car-ext .gl-abrir--tel { font-size: 12.5px; }

/* ---------- Saldos por reconocer (P-fra, solo web; sin «Saldos pendientes →» en la tanda 2) ---------- */
.gl-car-saldos { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #EAE5D9; border-radius: 12px; padding: 12px 18px; min-width: 0; }
.gl-car-saldos__t { font-size: 14px; font-weight: 800; color: #304D45; }
.gl-car-saldos__d { font-size: 13px; color: #55605B; }
.gl-car-saldos__d b { color: #304D45; }

/* Entre 861 y 1100 px las tablas de la web no caben con las columnas del dibujo: se estrechan */
@media (max-width: 1100px) {
  .gl-car-lista .gl-lista__cols, .gl-car-lista .gl-car-fila { grid-template-columns: minmax(0, 1fr) 72px 44px 96px 140px; }
  .gl-car-ctrl { grid-template-columns: 96px minmax(0, 1fr) 80px 84px 110px; }
  .gl-car-ext__celdas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* En el teléfono (≤ 860 px) esas dos tablas no se pintan (la lista va en filas de dos líneas; el extemporáneo vive en la web) y
   la versión de 1100 px aún pasa de 343 px (352 y 370 fijos): si alguna vez se pintaran, irían a una columna. Así nada fijo
   pasa de 375 − 32 (revisar_375.js, medida 1). */
@media (max-width: 860px) {
  .gl-car-lista .gl-lista__cols, .gl-car-lista .gl-car-fila, .gl-car-ctrl { grid-template-columns: minmax(0, 1fr); }
}