/* ============================================================
   Gerencia v2 — zip #6 · tanda 2 (16-oct-2026): LECTURA 06 TRÁMITES, lo propio (lo común vive en admin-gerencia-lectura.css).
   Medidas de Gerencia v2.dc.html#g06 (traspasos\zip6_t2\dibujo_g06.md). Prefijo gl-tra-, dentro de .gl--tramites. Los
   colores, los de la paleta de TEXTOS L9 más la pista de las barras del dibujo (#EFEBE0); el chip «Vencido» (#B4322A/#fff) ya
   está en lo común (gl-pill--vencido).
   En la web (≥ 861 px) las rejillas del dibujo; entre 861 y 1100 px las columnas de las filas se estrechan (y lo común pasa la
   fila tarjeta | columna derecha a una columna); en el teléfono (≤ 860 px) la lectura no pinta ni la tarjeta ni la columna
   derecha, y «Lo que lleva más de la cuenta» 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-ambar · .gl-gris) ya los resuelve lo común (`.ger .gl-cif__l.gl-…`). */

/* La cifra «CUPOS DE PARQUE»: «9» y, en el mismo renglón, la empresa (13 px 600) */
.gl-tra-cif__emp { font-size: 13px; font-weight: 600; color: #55605B; }
/* Una placa dentro de una línea: solo la letra monoespaciada (el tamaño y el color, los de su línea) */
.gl-tra-mono { font-family: var(--font-mono, ui-monospace, monospace); font-weight: 700; white-space: nowrap; }

/* ---------- La tarjeta de la izquierda: altas que pasan la mediana · radicados fuera de plazo · su pie ---------- */
.gl-tra-card__nc { padding: 12px 18px; }
.gl-tra-altas { grid-template-columns: 84px minmax(0, 1fr) 64px; }
.gl-tra-altas--pelota { grid-template-columns: 84px minmax(0, 1fr) 64px 170px; }   /* Design P11: con la tabla de la pelota */
.gl-tra-rad__cab { display: flex; align-items: baseline; gap: 8px; padding: 14px 18px 10px; border-top: 1px solid #F2EFE6; min-width: 0; }
.gl-tra-rad { grid-template-columns: 110px minmax(0, 1fr) 64px 170px; }
.gl-tra-rad__n { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; font-weight: 700; color: #55605B; white-space: nowrap; }
.gl-tra-rad__n--rojo { color: #8E3A31; }
.gl-tra-rad__det { font-size: 12px; color: #6B6455; overflow-wrap: anywhere; }
.gl-tra-rad__det--rojo { color: #8E3A31; }
.gl-tra-vacio { padding: 2px 18px 14px; font-size: 12.5px; color: #8A8574; }

/* ---------- La columna derecha (400 px): Parque frente al tope · «Esta semana en el alta» ---------- */
.gl-tra-caja { background: #fff; border: 1px solid #EAE5D9; border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gl-tra-caja--sem { gap: 8px; }
.gl-tra-caja__t { font-size: 14px; font-weight: 800; color: #304D45; }
.gl-tra-parque__l { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; font-size: 12.5px; color: #55605B; }
.gl-tra-parque__l > p { min-width: 0; overflow-wrap: anywhere; }
.gl-tra-parque__l b { color: #304D45; }
.gl-tra-parque__c { white-space: nowrap; }
.gl-tra-parque__l .gl-tra-parque__c { color: #3C7E67; }
.gl-tra-parque__l .gl-tra-parque__c--tope { color: #B8860B; }
.gl-tra-parque__pista { height: 10px; background: #EFEBE0; border-radius: 5px; overflow: hidden; }
.gl-tra-parque__barra { display: block; height: 100%; background: #3C7E67; }
.gl-tra-parque__barra--tope { background: #B8860B; }
.gl-tra-sem { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: #55605B; }
.gl-tra-sem b { color: #27282A; white-space: nowrap; }

/* ---------- Teléfono: «Lo que lleva más de la cuenta» (nombre · placa / la línea a la izquierda; días o chip a la derecha) ---------- */
.gl-tra-tl__izq { flex: 1; min-width: 0; }
.gl-tra-tl__1 { font-size: 13px; font-weight: 700; color: #304D45; overflow-wrap: anywhere; }
.gl-tra-tl__1 .gl-tra-mono { font-size: 11.5px; }
.gl-tra-tl__2 { font-size: 11.5px; color: #6B6455; overflow-wrap: anywhere; }
.gl-tra-tl__2--rojo { color: #8E3A31; }
.gl-tra-tl__d { flex: none; font-size: 13px; }
.gl-tra-tl__chip { flex: none; padding: 3px 9px; font-size: 11px; }
.gl-tra-vacio--tel { padding: 4px 14px 12px; font-size: 12px; }

/* Entre 861 y 1100 px las filas de la tarjeta no caben con las columnas del dibujo: se estrechan */
@media (max-width: 1100px) {
  .gl-tra-altas { grid-template-columns: 72px minmax(0, 1fr) 44px; }
  .gl-tra-altas--pelota { grid-template-columns: 72px minmax(0, 1fr) 44px 140px; }
  .gl-tra-rad { grid-template-columns: 96px minmax(0, 1fr) 44px 140px; }
}
/* En el teléfono (≤ 860 px) la tarjeta no se pinta (vive en la web); si alguna vez se pintara, iría a una columna: así nada
   fijo pasa de 375 − 32 (revisar_375.js, medida 1) */
@media (max-width: 860px) {
  .gl-tra-altas, .gl-tra-altas--pelota, .gl-tra-rad { grid-template-columns: minmax(0, 1fr); }
}