/* ============================================================
   Gerencia v2 — zip #6 · tanda 2 (21-oct-2026): LECTURA 07 COMERCIAL, lo propio (lo común vive en admin-gerencia-lectura.css).
   Medidas de Gerencia v2.dc.html#g07 (traspasos\zip6_t2\dibujo_g07.md). Prefijo gl-com-, dentro de .gl--comercial. Los
   colores, los de la paleta de TEXTOS L9 más los de las barras del dibujo (#EFEBE0 la pista · #A8B2AE · #8FB5A5 · #5E9A84).
   En la web (≥ 861 px) las rejillas del dibujo; entre 861 y 1100 px lo común pasa las dos columnas a una y las cinco cifras a
   tres; en el teléfono (≤ 860 px) la lectura no pinta ni «Por etapa» ni las campañas de la web, 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: aquí no se repiten.
   La CIFRA de «Sin gestión 48 h» en #8E3A31 (dibujo L695) con el peso de la cifra; su «pendiente de definir», neutro. */
.gl--comercial .gl-cif__n .gl-rojo { color: #8E3A31; font-weight: 800; }
.gl--comercial .gl-cif__n .gl-gris { color: #8A8574; }

/* ---------- Titular (07.2): un divisor · VENDIDO · NETO PARA EL GRUPO (dibujo L687-689) ---------- */
.gl-com-div { width: 1px; height: 40px; background: #EAE5D9; flex: none; }
.gl-com-plata { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gl-com-plata__n { font-size: 20px; line-height: 1.15; font-weight: 800; color: #304D45; white-space: nowrap; }
.gl-com-plata__n.gl-com-neto, .gl-com-plata-tel b.gl-com-neto { color: #3C7E67; }
.gl--comercial .gl-tit__der { max-width: 46%; }
/* teléfono: «vendido $14,0 M · neto $6,2 M» (dibujo L734) */
.gl-com-plata-tel { font-size: 12.5px; color: #55605B; }
.gl-com-plata-tel b { color: #304D45; font-weight: 800; }

/* ---------- Tarjetas de la columna izquierda: título 14 px 800 ---------- */
.gl-com-card__t { font-size: 14px; font-weight: 800; color: #304D45; }

/* ---------- Por etapa (07.4, solo web; dibujo L702-709) ---------- */
.gl-com-emb { background: #fff; border: 1px solid #EAE5D9; border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gl-com-emb__fila { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; font-size: 12.5px; }
.gl-com-emb__fila > span { color: #55605B; min-width: 0; }
.gl-com-emb__fila > b { color: #304D45; white-space: nowrap; }
.gl-com-emb__pista { height: 10px; background: #EFEBE0; border-radius: 5px; overflow: hidden; }
.gl-com-emb__barra { display: block; height: 100%; }
.gl-com-emb__barra--1 { background: #A8B2AE; }
.gl-com-emb__barra--2 { background: #8FB5A5; }
.gl-com-emb__barra--3 { background: #5E9A84; }
.gl-com-emb__barra--4 { background: #3C7E67; }
.gl-com-emb__barra--5 { background: #304D45; }

/* ---------- Campañas corriendo (07.5, web; dibujo L710-714) ---------- */
.gl-com-camp { background: #fff; border: 1px solid #EAE5D9; border-radius: 14px; overflow: hidden; min-width: 0; }
.gl-com-camp__t { padding: 14px 18px 10px; }
.gl-com-camp__fila { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px 12px; padding: 10px 18px; border-top: 1px solid #F2EFE6; min-width: 0; }
.gl-com-camp__c { flex: 1 1 220px; min-width: 0; }
.gl-com-camp__n { font-size: 13.5px; font-weight: 700; color: #304D45; overflow-wrap: anywhere; }
.ger .gl-com-camp__d { font-size: 12px; color: #55605B; overflow-wrap: anywhere; }
.gl-com-camp__fila .gl-pill { white-space: normal; max-width: 100%; }
.ger .gl-com-camp__vacio { padding: 10px 18px 14px; font-size: 12.5px; color: #8A8574; }
.gl-com-camp .gl-nocargo { margin: 0 18px 12px; }

/* ---------- Teléfono: la tarjeta de la campaña (dibujo L741) ---------- */
.gl-com-ct { background: #fff; border: 1px solid #EAE5D9; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gl-com-ct--rojo { background: #FBEEEC; border-color: #E3B4AC; }
.gl-com-ct__rot { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: #8A8574; overflow-wrap: anywhere; }
.gl-com-ct--rojo .gl-com-ct__rot { color: #8E3A31; }
.gl-com-ct__alerta { font-size: 13.5px; font-weight: 800; color: #8E3A31; overflow-wrap: anywhere; }
.ger .gl-com-ct__d { font-size: 12px; color: #55605B; overflow-wrap: anywhere; }
.gl-com-ct .gl-com-camp__vacio { padding: 0; }

/* ---------- Prospectos de alto valor sin gestión (07.6; dibujo L716-725) ---------- */
.gl-com-av .gl-lista__cols, .gl-com-av__fila { grid-template-columns: minmax(0, 1fr) 64px 150px; }
.gl-com-av__filas > .gl-fila:last-child { border-bottom: 0; }
.gl-com-av__dueno { font-size: 12.5px; color: #55605B; overflow-wrap: anywhere; }
.gl-com-av__dueno.gl-rojo { color: #8E3A31; font-weight: 700; }
.ger .gl-com-av__nota { padding: 4px 18px 14px; font-size: 12.5px; color: #8A8574; }
/* teléfono: nombre / forma · dueño a la izquierda; los días a la derecha */
.gl-com-tl__izq { flex: 1; min-width: 0; }
.gl--tel .gl-com-av .gl-dos__1 { font-size: 13px; }
.ger .gl--tel .gl-com-av .gl-dos__2 { font-size: 11.5px; }
.gl-com-tl__dias { flex: none; font-size: 13px; }
.ger .gl--tel .gl-com-av__nota { padding: 0 14px 10px; }

/* Entre 861 y 1100 px la tabla de alto valor no cabe con las columnas del dibujo: se estrecha */
@media (max-width: 1100px) {
  .gl-com-av .gl-lista__cols, .gl-com-av__fila { grid-template-columns: minmax(0, 1fr) 52px 120px; }
  .gl--comercial .gl-tit__der { max-width: none; }
}
/* En el teléfono (≤ 860 px) esa tabla no se pinta (la lista va en filas de dos líneas), y la versión de 1100 px aún pasa de
   343 px fijos si alguna vez se pintara: una columna. Así nada fijo pasa de 375 − 32 (revisar_375.js, medida 1). */
@media (max-width: 860px) {
  .gl-com-av .gl-lista__cols, .gl-com-av__fila { grid-template-columns: minmax(0, 1fr); }
}