/* ============================================================
   Gerencia v2 — zip #6 · tanda 1 (15-oct-2026): 01 Hoy · 02/18 la decisión · 19 Decididas, vacío y cola caída · 21 Señales.
   Medidas del dibujo (Gerencia v2.dc.html: g01 · g02 · g18 · g19 · g21) y SOLO la paleta de TEXTOS L9: fondo #F7F5EF ·
   tarjeta #fff borde #EAE5D9 · títulos #304D45 · texto #27282A · secundario #55605B y #6B6455 · rótulos #8A8574 · enlaces y
   Aprobar #3C7E67 · rojo de texto #8E3A31 · rojo de chip #B4322A · franja roja #FBEEEC/#E3B4AC · ámbar #F5EBD3/#7A5A08 · gris
   #ECE9E0/#6B6455 · chip de área #E7EEEB · dorado #E2C96F · ícono de señal #B8860B · «En calma» y divisores #F2EFE6 · borde
   del campo #DDD9CC. Los blancos translúcidos son los de la cáscara sobre el verde.
   Todo con prefijo `ger-`, dentro de `.cs-main.ger`: les gana a las reglas generales de p, h1 y button.
   En la web (≥ 861 px) dos columnas; entre 861 y 1100 px la columna de la derecha baja (no cabe sin desbordar); en el
   teléfono (≤ 860 px) una columna, y a 375 px nada pasa de su ancho: las filas de chips se deslizan DENTRO de su caja.
   ============================================================ */
.cs-main.ger { min-width: 0; }
/* sin especificidad (:where): solo le ganan a las reglas generales de p, h1 y button; cualquier clase de aquí manda */
:where(.ger) p, :where(.ger) h1 { margin: 0; }
:where(.ger) button { font: inherit; }
.ger-placa { font-family: var(--font-mono, ui-monospace, monospace); white-space: nowrap; }
.ger-esp { flex: 1; }
.ger-verde { color: #3C7E67; }
.ger-rojo { color: #8E3A31; }

/* ---------- Cabecera de la pantalla (TEXTOS Común L7) ---------- */
.ger-hoy, .ger-caso, .ger-decididas { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ger-cab { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ger-cab__t { flex: 1; min-width: 0; }
.ger .ger-cab__pre { margin: 0 0 3px; font-size: 13px; line-height: 1.4; color: #8A8574; }
.ger-h1 { font-family: var(--font-display, inherit); font-size: 26px; line-height: 1.2; font-weight: 800; color: #304D45; letter-spacing: -0.01em; text-wrap: balance; }

/* ---------- Rótulos de bloque (TEXTOS L10): mayúsculas pequeñas, 11 px, 0,1 em, 700, #8A8574 ---------- */
.ger-rotulo { font-size: 11px; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: #8A8574; }
.ger-rotulo--rojo { color: #8E3A31; }

/* ---------- Botones (TEXTOS L15) ---------- */
.ger-btn { border: 0; border-radius: 9px; background: #304D45; color: #fff; padding: 9px 14px; font-size: 12.5px; font-weight: 700;
  line-height: 1.2; text-align: center; white-space: nowrap; cursor: pointer; }
.ger-btn:hover { background: #27282A; }
.ger-btn--blanco { background: #fff; color: #304D45; padding: 9px 16px; flex: none; }
.ger-btn--blanco:hover { background: #F7F5EF; }
.ger-btn:focus-visible, .ger-chip:focus-visible, .ger-ver:focus-visible, .ger-reint:focus-visible, .ger-volver:focus-visible,
.ger-aprobar:focus-visible, .ger-rechazar:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(60,126,103,0.3); }
.ger-ver { border: 0; background: none; padding: 0; color: #3C7E67; font-size: 12px; font-weight: 700; text-align: left; cursor: pointer; align-self: flex-start; }
.ger-ver:hover { text-decoration: underline; text-underline-offset: 3px; }
.ger-reint { background: #fff; border: 1px solid #E3B4AC; color: #8E3A31; border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 700;
  white-space: nowrap; cursor: pointer; align-self: flex-start; }
.ger-reint:hover:not(:disabled) { background: #FBEEEC; }
.ger-reint:disabled, .ger-aprobar:disabled, .ger-rechazar:disabled { opacity: 0.55; cursor: progress; }
.ger-volver { border: 0; background: none; padding: 0; margin: 0 0 3px; color: #3C7E67; font-size: 13px; font-weight: 700; cursor: pointer; text-align: left; }
.ger-volver:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Chips (01, 19) ---------- */
.ger-chip { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #EAE5D9; color: #55605B; border-radius: 999px;
  padding: 6px 12px; font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; flex: none; }
.ger-chip:hover { border-color: #DDD9CC; }
.ger-chip.on { background: #304D45; border-color: #304D45; color: #fff; font-weight: 700; cursor: default; }
/* el filtro elegido de Decididas (D2, ámbar): marcado sin competir con el chip oscuro de la vista */
.ger-chip--filtro.on { background: #fff; border-color: #304D45; color: #304D45; }
.ger-punto { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.ger-punto.rojo { background: #B4322A; }
.ger-punto.ambar { background: #B8860B; }
.ger-chip.on .ger-punto { background: #E2C96F; }
.ger-sep { width: 1px; height: 20px; background: #DDD9CC; flex: none; }

/* ---------- Chip de área y chip de días (TEXTOS L11-L12) ---------- */
.ger-area { font-size: 11.5px; font-weight: 800; color: #304D45; background: #E7EEEB; border-radius: 6px; padding: 4px 8px; text-align: center;
  line-height: 1.2; justify-self: start; }
.ger-dias { border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 800; line-height: 1.2; white-space: nowrap; justify-self: start; flex: none; }
.ger-dias.gris { background: #ECE9E0; color: #6B6455; }
.ger-dias.ambar { background: #F5EBD3; color: #7A5A08; }
.ger-dias.rojo { background: #B4322A; color: #fff; }
.ger-dias--cab { padding: 5px 12px; }

/* ---------- «Lo primero» (TEXTOS L57 y L72) ---------- */
.ger-primero { background: #304D45; border-radius: 12px; padding: 12px 16px; display: flex; align-items: center; gap: 14px; min-width: 0; }
.ger-primero__chip { background: #B4322A; color: #fff; border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; flex: none; white-space: nowrap; line-height: 1.2; }
.ger-primero__t { flex: 1; min-width: 0; font-size: 14px; line-height: 1.45; color: #fff; }
.ger-primero__t b { font-weight: 800; }
.ger-primero__dim { color: rgba(255,255,255,0.7); }
.ger-primero--tel { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 14px; }
.ger-primero__cab { display: flex; align-items: center; gap: 8px; }
.ger-primero--tel .ger-primero__chip { padding: 3px 9px; font-size: 10.5px; }
.ger-primero__dias { font-size: 11.5px; color: rgba(255,255,255,0.7); }
.ger-primero__tit { font-size: 14px; line-height: 1.4; font-weight: 800; color: #fff; }
.ger-btn--40 { min-height: 40px; border-radius: 10px; font-size: 13.5px; }

/* ---------- Rejilla de Hoy: la cola y las Señales (304 px) ---------- */
.ger-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) 304px; gap: 18px; align-items: start; }
.ger-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ger-apr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ger-apr__t { font-size: 15px; font-weight: 800; color: #304D45; }

/* ---------- La fila (web, TEXTOS L59) ---------- */
.ger-lista { background: #fff; border: 1px solid #EAE5D9; border-radius: 14px; overflow: hidden; }
.ger-fila { display: grid; grid-template-columns: 76px minmax(0, 1fr) 72px 84px; gap: 12px; align-items: center; min-width: 0; padding: 13px 18px;
  border-bottom: 1px solid #F2EFE6; }
.ger-fila:last-child { border-bottom: 0; }
.ger-fila.vencida { background: #FBEEEC; }
.ger-fila.vencida .ger-area, .ger-tar.vencida .ger-area { background: #fff; border: 1px solid #E3B4AC; color: #8E3A31; }
.ger-fila__t { min-width: 0; }
.ger-fila__tit { font-size: 14px; line-height: 1.35; font-weight: 800; color: #304D45; overflow-wrap: anywhere; }
.ger-fila__l2 { font-size: 12.5px; line-height: 1.45; color: #6B6455; overflow-wrap: anywhere; }
.ger .ger-fila__snd { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: #55605B; }
.ger-fila.vencida .ger-fila__snd, .ger-tar.vencida .ger-tar__snd { color: #8E3A31; }
.ger-fila .ger-btn { width: 100%; }

/* ---------- La tarjeta (teléfono, TEXTOS L73) ---------- */
.ger-tars { display: flex; flex-direction: column; gap: 10px; }
.ger-tar { background: #fff; border: 1px solid #EAE5D9; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ger-tar.vencida { background: #FBEEEC; border-color: #E3B4AC; }
.ger-tar__cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ger-tar__cab .ger-area { padding: 2px 7px; }
.ger-tar__cab .ger-dias { padding: 3px 9px; font-size: 11px; }
.ger-tar__cuando { font-size: 12px; color: #8A8574; }
.ger-tar__tit { font-size: 14px; line-height: 1.35; font-weight: 800; color: #304D45; overflow-wrap: anywhere; }
.ger-tar__l2 { font-size: 12px; line-height: 1.45; color: #6B6455; overflow-wrap: anywhere; }
.ger-tar__snd { font-size: 12px; line-height: 1.45; color: #55605B; overflow-wrap: anywhere; }
.ger-tar__snd b { color: #304D45; }
.ger-tar.vencida .ger-tar__snd b { color: inherit; }
.ger-btn--44 { min-height: 44px; border-radius: 10px; font-size: 13.5px; }

/* ---------- Señales (TEXTOS SEN L41) ---------- */
.ger-senales { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ger-senales__t { font-size: 15px; font-weight: 800; color: #304D45; }
.ger-sen { background: #fff; border: 1px solid #EAE5D9; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ger-sen__f { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.ger-sen__ic { flex: none; width: 16px; height: 16px; margin-top: 1px; color: #B8860B; display: grid; place-items: center; }
.ger-sen__c { min-width: 0; flex: 1; }
.ger-sen__t { font-size: 13.5px; line-height: 1.35; font-weight: 800; color: #304D45; overflow-wrap: anywhere; }
.ger .ger-sen__l { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: #55605B; text-wrap: pretty; overflow-wrap: anywhere; }
.ger-sen__ver { padding-left: 24px; }
.ger-sen__acc { display: flex; gap: 8px; align-items: center; }
/* la señal 1: franja roja con Reintentar */
.ger-sen--falla { background: #FBEEEC; border-color: #E3B4AC; gap: 8px; }
.ger-sen--falla .ger-sen__ic, .ger-sen--falla .ger-sen__t, .ger-sen--falla .ger-sen__l { color: #8E3A31; }
/* 19 · la cola caída: «Una fuente no respondió» en tarjeta blanca, el ícono en rojo (TEXTOS L111) */
.ger-sen--cola .ger-sen__ic { color: #8E3A31; }
/* «En calma» (TEXTOS L53) */
.ger-calma { background: #F2EFE6; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.ger-calma__l { font-size: 12.5px; line-height: 1.45; color: #55605B; overflow-wrap: anywhere; }
.ger-calma--tel { padding: 10px 14px; }

/* ---------- 19 · vacío y cola caída ---------- */
.ger-vacio { background: #fff; border: 1px solid #EAE5D9; border-radius: 14px; padding: 22px 16px; display: flex; flex-direction: column; align-items: center;
  gap: 8px; text-align: center; }
.ger-vacio__ic { color: #3C7E67; display: grid; place-items: center; }
.ger-vacio__t { font-size: 14px; font-weight: 800; color: #304D45; }
.ger-vacio .ger-ver { align-self: center; }
.ger-caida-cola { background: #FBEEEC; border: 1px solid #E3B4AC; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ger-caida-cola .ger-sen__ic { color: #8E3A31; }
.ger-caida-cola__t { font-size: 14px; line-height: 1.35; font-weight: 800; color: #8E3A31; }
.ger .ger-caida-cola__l { margin: 2px 0 0; font-size: 12.5px; color: #8E3A31; }
.ger-ultimo { background: #fff; border: 1px solid #EAE5D9; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; opacity: 0.6; }
.ger-ultimo__l { font-size: 13px; line-height: 1.45; color: #55605B; overflow-wrap: anywhere; }

/* ---------- 02 · la decisión ---------- */
.ger-caso__h1 { font-size: 24px; }
.ger .ger-caso__pide { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: #6B6455; }
.ger-caso__pide b { color: #304D45; font-weight: 700; }
.ger-caso__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 18px; align-items: start; }
.ger-caso__exp, .ger-caso__dec { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ger-par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.ger-card { background: #fff; border: 1px solid #EAE5D9; border-radius: 12px; padding: 14px 16px; min-width: 0; }
.ger-bloque { display: flex; flex-direction: column; gap: 8px; }
.ger-bloque .ger-rotulo { letter-spacing: 0.08em; }
.ger-bloque__x { font-size: 13px; line-height: 1.45; color: #27282A; overflow-wrap: anywhere; }
.ger-bloque__x b { color: #304D45; }
.ger-bloque__x b.ger-verde { color: #3C7E67; }
.ger-bloque__x b.ger-rojo { color: #8E3A31; }
.ger-bloque__l { font-size: 12.5px; line-height: 1.45; color: #55605B; overflow-wrap: anywhere; }
.ger-bloque--pend .ger-bloque__l { color: #8A8574; }
/* 318: las filas de un bloque (el cruce cobro por cobro, los certificados repetidos) */
.ger-bloque__filas { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ger-bloque__fila { font-size: 12.5px; line-height: 1.45; color: #55605B; overflow-wrap: anywhere; }
/* la ficha: carro y persona (02 web) */
.ger-ficha { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.ger-ficha__placa { font: 700 15px var(--font-mono, ui-monospace, monospace); background: #304D45; color: #fff; border-radius: 8px; padding: 6px 12px; white-space: nowrap; flex: none; }
.ger-ficha__t { flex: 1; min-width: 0; }
.ger-ficha__tit { font-size: 14.5px; line-height: 1.35; font-weight: 800; color: #304D45; overflow-wrap: anywhere; }
.ger-ficha__sub { font-size: 12.5px; line-height: 1.45; color: #6B6455; overflow-wrap: anywhere; }
.ger-ficha__av { width: 34px; height: 34px; border-radius: 50%; background: #E7EEEB; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #304D45; flex: none; }
.ger-ficha__per { min-width: 0; flex: 0 1 auto; }
.ger-ficha__nom { font-size: 13.5px; font-weight: 700; color: #304D45; }
.ger-ficha__per .ger-ficha__sub { font-size: 12px; }
/* la plata */
.ger-plata__v { font-size: 24px; line-height: 1.2; font-weight: 800; color: #8E3A31; letter-spacing: -0.01em; }
.ger-plata__l { font-size: 12.5px; line-height: 1.45; color: #55605B; }
.ger-plata__l b { color: #8E3A31; }
.ger-plata__filas { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: #55605B; }
.ger-plata__f { display: flex; justify-content: space-between; gap: 10px; }
.ger-plata__m { font-weight: 700; color: #27282A; white-space: nowrap; }
.ger-plata__pie { font-size: 12px; color: #8A8574; }
/* lo que ya pasó en la ruta */
.ger-paso { display: flex; gap: 10px; align-items: flex-start; }
.ger-paso.futuro { opacity: 0.6; }
.ger-paso__n { width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; box-sizing: border-box; }
.ger-paso__n.hecho { background: #E7EEEB; color: #304D45; }
.ger-paso__n.propuesto { background: #B4322A; color: #fff; }
.ger-paso__n.futuro { border: 1px dashed #8A8574; color: #8A8574; }
.ger-paso__t { font-size: 12.5px; line-height: 1.45; color: #55605B; min-width: 0; overflow-wrap: anywhere; }
.ger-paso__t b { color: #304D45; }
.ger-paso__t b.ger-rojo, .ger-ruta__tel b.ger-rojo { color: #8E3A31; }
.ger-paso.futuro .ger-paso__t { color: #8A8574; }
.ger-ruta__tel { font-size: 12.5px; line-height: 1.45; color: #55605B; }
.ger-ruta__tel b { color: #304D45; }
/* gestiones: la fila es la de la bitácora de la cáscara (BBitacoraLinea) */
.ger-gest__cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ger-gest__res { font-size: 12px; color: #8A8574; }
.ger-hoja-gest { display: flex; flex-direction: column; gap: 8px; }
/* candado: la fuente no respondió (TEXTOS L91) */
.ger-caida { background: #FBEEEC; border-color: #E3B4AC; display: flex; flex-direction: column; gap: 6px; }
.ger-caida__t { font-size: 14px; line-height: 1.35; font-weight: 800; color: #8E3A31; }
.ger-caida__l { font-size: 12.5px; color: #8E3A31; }
.ger-falta { background: #F2EFE6; border-radius: 12px; padding: 12px 14px; }
.ger-falta__t { font-size: 12.5px; line-height: 1.45; color: #55605B; }
/* tu decisión */
.ger-dec { display: flex; flex-direction: column; gap: 10px; }
.ger-dec__f { display: flex; gap: 8px; align-items: flex-start; }
.ger-dec__ic { flex: none; width: 16px; height: 16px; margin-top: 2px; display: grid; place-items: center; }
.ger-dec__ic.si { color: #3C7E67; }
.ger-dec__ic.no { color: #8A8574; }
.ger-dec__t { font-size: 13px; font-weight: 800; color: #304D45; }
.ger .ger-dec__x { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: #55605B; text-wrap: pretty; overflow-wrap: anywhere; }
.ger-dec__x b { color: #304D45; }
.ger-dec--tel { gap: 6px; padding: 12px 14px; }
.ger-form { display: flex; flex-direction: column; gap: 10px; }
.ger-form__l { font-size: 12px; font-weight: 600; color: #55605B; }
.ger-motivo { width: 100%; box-sizing: border-box; min-height: 88px; background: #fff; border: 1px solid #DDD9CC; border-radius: 10px; padding: 10px 14px;
  font: inherit; font-size: 13.5px; line-height: 1.4; color: #27282A; resize: vertical; }
.ger-motivo:focus { outline: none; border-color: #3C7E67; box-shadow: 0 0 0 3px rgba(60,126,103,0.18); }
.ger-motivo.falta { border-color: #8E3A31; }
.ger-motivo::placeholder { color: #8A8574; }
.ger .ger-motivo__falta { margin: -4px 0 0; font-size: 12.5px; color: #8E3A31; }
/* tipo 5 sin salarios en la base (321): el campo «Salarios mínimos del contrato firmado» y «Hoy: {valor}» debajo */
.ger-salarios { width: 100%; box-sizing: border-box; height: 44px; background: #fff; border: 1px solid #DDD9CC; border-radius: 10px; padding: 0 14px;
  font: inherit; font-size: 13.5px; color: #27282A; }
.ger-salarios:focus { outline: none; border-color: #3C7E67; box-shadow: 0 0 0 3px rgba(60,126,103,0.18); }
.ger-salarios.falta { border-color: #8E3A31; }
.ger-salarios::placeholder { color: #8A8574; }
.ger .ger-form__hoy { margin: -4px 0 0; font-size: 12.5px; line-height: 1.45; color: #55605B; overflow-wrap: anywhere; }
/* «Al decidir» · no se envió (315): franja #FBEEEC/#E3B4AC encima de los botones, en #8E3A31 */
.ger-form__franja { background: #FBEEEC; border: 1px solid #E3B4AC; border-radius: 10px; padding: 10px 12px; }
.ger-form__franja-t { font-size: 13px; line-height: 1.4; font-weight: 700; color: #8E3A31; overflow-wrap: anywhere; }
.ger-form__bot { display: flex; gap: 8px; }
.ger-aprobar, .ger-rechazar { flex: 1; min-height: 44px; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ger-aprobar { border: 0; background: #3C7E67; color: #fff; }
.ger-aprobar:hover:not(:disabled) { background: #304D45; }
.ger-rechazar { background: #fff; border: 1px solid #DDD9CC; color: #304D45; }
.ger-rechazar:hover:not(:disabled) { background: #F7F5EF; }
/* «Al decidir» · enviando: el indicador de los `a-btn` (el `spinner` de la cáscara) en el color de la letra del botón, para
   que se vea en el verde y en el blanco */
.ger-aprobar .spinner, .ger-rechazar .spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent;
  box-sizing: border-box; flex: none; }

/* ---------- 19 · Decididas (web) ---------- */
.ger-sel { position: relative; height: 40px; flex: none; display: flex; align-items: center; background: #fff; border: 1px solid #DDD9CC; border-radius: 10px; }
.ger-sel select { appearance: none; -webkit-appearance: none; height: 100%; border: 0; background: transparent; padding: 0 34px 0 38px; font: inherit;
  font-size: 13px; font-weight: 600; color: #304D45; cursor: pointer; border-radius: 10px; }
.ger-sel select:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(60,126,103,0.3); }
.ger-sel__ic { position: absolute; left: 14px; color: #55605B; display: grid; place-items: center; pointer-events: none; }
.ger-sel__fl { position: absolute; right: 12px; color: #8A8574; display: grid; place-items: center; pointer-events: none; }
.ger-chips { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.ger-personas { font-size: 12.5px; color: #8A8574; }
.ger-tabla { background: #fff; border: 1px solid #EAE5D9; border-radius: 14px; overflow: hidden; }
.ger-tabla__cab, .ger-tabla__f { display: grid; grid-template-columns: 118px 84px minmax(0, 1fr) 150px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 18px;
  border-bottom: 1px solid #F2EFE6; }
.ger-tabla__cab { padding: 9px 18px; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: #8A8574; }
.ger-tabla__f:last-of-type { border-bottom: 0; }
.ger-tabla__cuando { font-size: 12.5px; color: #8A8574; }
.ger-tabla__que { min-width: 0; }
.ger-tabla__tit { font-size: 13.5px; line-height: 1.35; font-weight: 700; color: #304D45; overflow-wrap: anywhere; }
.ger-tabla__mot { font-size: 12.5px; line-height: 1.45; color: #6B6455; overflow-wrap: anywhere; }
.ger-tabla__quien { font-size: 12.5px; color: #27282A; }
.ger-tabla__desp { font-size: 12.5px; line-height: 1.45; color: #55605B; overflow-wrap: anywhere; }
.ger-tabla__desp b, .ger-tar__snd b { color: #304D45; }
.ger-dec-vacia { padding: 14px 18px; font-size: 12.5px; color: #8A8574; }
/* 316: sin pie; en «Todo», al final «Ver 20 más» (o, si esa carga falló, la franja B4 con «Reintentar») */
.ger-tabla__mas { padding: 12px 18px; border-top: 1px solid #F2EFE6; display: flex; flex-direction: column; gap: 10px; }
.ger-mas:disabled { opacity: 0.55; cursor: progress; }

/* ---------- Entre 861 y 1100 px: la columna de la derecha baja (la fila no cabe al lado) ---------- */
@media (max-width: 1100px) {
  .ger-rejilla, .ger-caso__rejilla { grid-template-columns: minmax(0, 1fr); }
  .ger-tabla__cab, .ger-tabla__f { grid-template-columns: 96px 84px minmax(0, 1fr) 110px minmax(0, 1fr); }
}

/* ---------- Teléfono (≤ 860 px): TEXTOS 01 · 02 · 18 · 19 · 21 móvil ---------- */
@media (max-width: 860px) {
  .ger-hoy--tel { gap: 12px; }
  .ger .ger-tit .ger-cab__pre { margin: 0 0 2px; font-size: 12.5px; }
  .ger-h1 { font-size: 22px; }
  .ger-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .ger-tabs::-webkit-scrollbar { display: none; }
  .ger-rotulo { font-size: 10.5px; }
  .ger-sen { border-radius: 14px; }
  .ger-sen__ver { padding-left: 24px; }
  .ger-sen--falla .ger-reint, .ger-reint--44, .ger-reint--bloque { min-height: 44px; padding: 0 16px; border-radius: 10px; font-size: 13.5px; }
  .ger-reint--44 { width: 100%; }
  .ger-vacio { border-radius: 14px; }
  /* 19 · Decididas en el teléfono: el periodo y los filtros en UNA fila que se desliza dentro de su caja */
  .ger-desliza { display: flex; gap: 6px; align-items: center; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; }
  .ger-desliza::-webkit-scrollbar { display: none; }
  .ger-decididas--tel { display: flex; flex-direction: column; gap: 10px; }
  .ger-decididas--tel .ger-dec-vacia { padding: 0; text-align: center; }
  .ger-mas-tel { display: flex; flex-direction: column; gap: 10px; }
  .ger-mas-tel .ger-mas { align-self: center; min-height: 44px; }
  /* 02 · 18 en el teléfono: una columna; sin barra de abajo y el formulario fijo al pie (TEXTOS Común L8; 02 móvil) */
  body.ger-sin-barra .cs-barra { display: none; }
  body.ger-sin-barra .cs-main.ger { padding-bottom: 0; }
  .ger-caso--tel { gap: 10px; }
  .ger-caso--tel .ger-caso__exp { gap: 10px; }
  .ger-caso--tel .ger-card { padding: 12px 14px; }
  .ger-caso--tel .ger-rotulo { letter-spacing: 0.08em; }
  .ger-propia .cs-propia__t { display: flex; flex-direction: column-reverse; }
  .ger-propia .cs-propia__t b { font-family: inherit; font-size: 14px; }
  .ger-propia .cs-propia__t span { font-size: 11px; color: rgba(255,255,255,0.65); }
  .ger-propia .ger-dias { padding: 3px 9px; font-size: 11px; }
  .ger-ficha--tel { gap: 10px; padding: 10px 12px; }
  .ger-ficha--tel .ger-ficha__placa { font-size: 13px; padding: 5px 9px; }
  .ger-ficha--tel .ger-ficha__tit { font-size: 13px; }
  .ger-ficha--tel .ger-ficha__sub { font-size: 11.5px; }
  .ger-caso--tel .ger-plata__v { font-size: 22px; }
  .ger-caso--tel .ger-plata__l { font-size: 12px; }
  .ger-pie { position: sticky; bottom: 0; z-index: 20; margin: 0 -16px; background: #fff; border-top: 1px solid #EAE5D9;
    padding: 12px 16px calc(22px + env(safe-area-inset-bottom)); }
  .ger-form--tel { gap: 8px; }
  .ger-form--tel .ger-motivo { min-height: 60px; padding: 9px 12px; font-size: 13px; }
  .ger-form--tel .ger-salarios { height: 40px; padding: 0 12px; font-size: 13px; }
  .ger-pie .ger-falta { margin: 0; }
  /* «!» en la pestaña Hoy cuando la cola no cargó (19) */
  .cs-barra .cs-tab__n.rojo { background: #B4322A; }
}