/* ============================================================
   Gerencia v2 — zip #6 · tanda 2 (16-oct-2026): LECTURA 04 CONSOLIDADO, lo propio (lo común vive en admin-gerencia-lectura.css).
   Medidas de Gerencia v2.dc.html#g04 (traspasos\zip6_t2\dibujo_g04.md). Prefijo gl-con-, dentro de .gl--consolidado. Los
   colores, los de la paleta de TEXTOS L9 (#304D45 · #3C7E67 · #E2C96F · #8E3A31 · #B8860B · #7A5A08 · #8A8574 · #55605B ·
   #27282A · #EAE5D9) y los blancos translúcidos del bloque de la Utilidad del dibujo.
   En la web (≥ 861 px) las rejillas del dibujo (2 × 2 de áreas · 2 tarjetas de utilidad); entre 861 y 1100 px las filas de
   datos parten línea; en el teléfono (≤ 860 px) la lectura pinta filas-tarjeta y la Utilidad corta, y nada fijo pasa de 343 px.
   ============================================================ */

/* ---------- 04.2 · cuatro tarjetas de área (P-area, 2 × 2) ---------- */
.gl-con-areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.gl-con-area { background: #fff; border: 1px solid #EAE5D9; border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gl-con-area__cab { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gl-con-area__ic { display: inline-flex; color: #304D45; flex: none; }
.gl-con-area__t { font-size: 14px; font-weight: 800; color: #304D45; }
.gl-con-ver { margin-left: auto; background: none; border: 0; padding: 0; font-size: 12px; font-weight: 700; color: #3C7E67; cursor: pointer; white-space: nowrap; }
.gl-con-ver:focus-visible, .gl-con-fm:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(60,126,103,0.3); }
.gl-con-area__n { font-size: 22px; line-height: 1.2; font-weight: 800; color: #304D45; letter-spacing: -0.01em; overflow-wrap: anywhere; }
/* La comparación en línea (13 px 600): lo bueno que sube · lo malo que sube · lo que baja · igual / pendiente de definir */
.gl-con-comp { font-size: 13px; font-weight: 600; letter-spacing: 0; }
.gl-con-comp--bueno { color: #3C7E67; }
.gl-con-comp--malo { color: #8E3A31; }
.gl-con-comp--baja { color: #7A5A08; }
.gl-con-comp--igual, .gl-con-comp--pd { color: #8A8574; }
/* La fila de datos (12,5 px #55605B; los números en #27282A 700, o su tono) */
.gl-con-datos { display: flex; flex-wrap: wrap; gap: 4px 16px; min-width: 0; }
.ger .gl-con-dato { font-size: 12.5px; line-height: 1.5; color: #55605B; overflow-wrap: anywhere; }
.gl-con-dato > b { font-weight: 700; color: #27282A; }
.ger .gl-con-dato--rojo, .ger .gl-con-dato--rojo > b { color: #8E3A31; }
.gl-con-dato > b.gl-con-dato__rojo { color: #8E3A31; }
.gl-con-dato > b.gl-con-dato__ambar { color: #B8860B; }
/* Design P5 (n.º 29 §1.5): lo de la copia importada y los sin dato, aparte y en gris (#8A8574, como 08) */
.ger .gl-con-dato--gris { color: #8A8574; }

/* ---------- 04.3 · la fila Equipo (P-eq) ---------- */
.gl-con-eq { display: flex; align-items: center; gap: 18px; background: #fff; border: 1px solid #EAE5D9; border-radius: 14px; padding: 16px 18px; min-width: 0; }
.ger .gl-con-eq__f { flex: 1; min-width: 0; font-size: 13px; line-height: 1.5; color: #55605B; overflow-wrap: anywhere; }
.gl-con-eq__f > b { font-weight: 700; color: #27282A; }
.gl-con-eq__f > b.gl-rojo { color: #8E3A31; }

/* ---------- 04.4 · Utilidad (P-util): el bloque verde, con el isotipo al 6 % ---------- */
.gl-con-util { position: relative; overflow: hidden; background: #304D45; border-radius: 14px; padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.gl-con-util__iso { position: absolute; right: -50px; bottom: -60px; width: 260px; opacity: 0.06; pointer-events: none; }
.gl-con-util__cab { position: relative; display: flex; align-items: center; gap: 10px; }
.gl-con-util__ic { display: inline-flex; color: #E2C96F; flex: none; }
.gl-con-util__t { font-size: 14px; font-weight: 800; color: #fff; }
.gl-con-util__rej { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; min-width: 0; }
.gl-con-u { position: relative; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ger .gl-con-u .gl-rot { color: rgba(255,255,255,0.6); }
.gl-con-u__n { font-size: 28px; line-height: 1.15; font-weight: 800; color: #fff; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.gl-con-u__s { font-size: 14px; font-weight: 600; color: #E2C96F; letter-spacing: 0; }
.gl-con-u__filas { display: flex; flex-direction: column; gap: 3px; }
.gl-con-u__f { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.8); min-width: 0; }
.gl-con-u__f > span { min-width: 0; overflow-wrap: anywhere; }
.gl-con-u__f > b { font-weight: 700; color: #fff; white-space: nowrap; }
.gl-con-u__f--total { border-top: 1px solid rgba(255,255,255,0.14); padding-top: 4px; }
.gl-con-u__f--total > b { color: #E2C96F; }
/* n.º 29 §2 «04»: lo que la base no tiene, «pendiente de definir», en rgba(255,255,255,0.72): ni el blanco ni el dorado de una
   cifra de verdad (la cifra con su %, las filas, el total y el teléfono) */
.gl-con-u__n > .gl-con-u__pd, .gl-con-u__f > b.gl-con-u__pd, .gl-con-u__f--total > b.gl-con-u__pd,
.gl-con-ut__f > b.gl-con-u__pd { color: rgba(255,255,255,0.72); }
.ger .gl-con-u__pie { font-size: 12px; color: rgba(255,255,255,0.6); }
/* la fila de ancho completo del pago extemporáneo */
.gl-con-uf { flex-direction: row; align-items: center; gap: 14px; padding: 12px 16px; flex-wrap: wrap; }
.gl-con-uf__n { font-size: 16px; font-weight: 800; color: #fff; min-width: 0; overflow-wrap: anywhere; }
.gl-con-uf__d { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,0.75); }
.gl-con-uf__der { margin-left: auto; font-size: 12px; color: rgba(255,255,255,0.65); }
/* un bloque que no cargó dentro de la Utilidad: la franja de lo común, sin sombra extra */
.gl-con-util .gl-nocargo { position: relative; }

/* ---------- Teléfono: filas-tarjeta (P-fila-m) y la Utilidad corta (P-util-m) ---------- */
.gl-con-filas { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gl-con-fm { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: #fff; border: 1px solid #EAE5D9; border-radius: 12px;
  padding: 12px 14px; cursor: pointer; min-width: 0; font: inherit; color: inherit; }
.gl-con-fm__c { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gl-con-fm__a { font-size: 12px; font-weight: 700; color: #8A8574; }
.gl-con-fm__l1 { font-size: 15px; line-height: 1.3; font-weight: 800; color: #304D45; overflow-wrap: anywhere; }
.gl-con-fm__l2 { font-size: 11.5px; line-height: 1.4; color: #55605B; overflow-wrap: anywhere; }
.gl-con-fm__l2--rojo { color: #8E3A31; }
.gl-con-fm__l1 .gl-con-comp--malo { color: #8E3A31; }
.gl-con-fm__l1 .gl-con-comp--bueno { color: #3C7E67; }
.gl-con-fm__l1 .gl-con-comp--baja { color: #7A5A08; }
.gl-con-fm__l1 .gl-con-comp--igual, .gl-con-fm__l1 .gl-con-comp--pd { color: #8A8574; font-weight: 600; }
.gl-con-fm__ch { display: inline-flex; color: #8A8574; flex: none; }
.gl-con-ut { background: #304D45; border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gl-con-ut__cab { display: flex; align-items: center; gap: 8px; }
.gl-con-ut__t { font-size: 12px; font-weight: 800; color: #fff; }
.gl-con-ut__f { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,0.8); min-width: 0; }
.gl-con-ut__f > span { min-width: 0; overflow-wrap: anywhere; }
.gl-con-ut__f > b { font-weight: 700; color: #E2C96F; text-align: right; overflow-wrap: anywhere; }

/* Entre 861 y 1100 px: las dos tarjetas de la Utilidad siguen lado a lado, la fila del extemporáneo parte línea */
@media (max-width: 1100px) {
  .gl-con-uf__der { margin-left: 0; }
}
/* En el teléfono (≤ 860 px) esas rejillas no se pintan (van las filas-tarjeta); si alguna vez se pintaran, irían a una
   columna: así nada pasa de 375 − 32 (revisar_375.js, medida 1). */
@media (max-width: 860px) {
  .gl-con-areas, .gl-con-util__rej { grid-template-columns: minmax(0, 1fr); }
  .gl-con-eq { flex-wrap: wrap; }
}