/* Reportes de monitoreo (pantallas 34-38). Solo tokens: nada de colores literales. Prefijos propios `rep-` y `ret-` (mapa). */

/* Barra de filtros (rango de fechas, tipo, usuario). */
.rep-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; padding: 14px 16px; margin-bottom: 18px; }
.rep-campo { display: flex; flex-direction: column; gap: .3rem; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); min-width: 0; }
.rep-campo .campo-input { min-width: 0; text-transform: none; letter-spacing: 0; font-weight: 400; }
.rep-campo input[type="datetime-local"] { width: 210px; max-width: 100%; }
.rep-campo input[type="date"] { width: 160px; max-width: 100%; }
.rep-campo select { min-width: 200px; max-width: 100%; }
.rep-campo-linea { flex-direction: row; align-items: center; gap: .5rem; }
.rep-error-rango { flex-basis: 100%; margin: 0; }
.rep-filtros .seg-toggle { align-self: flex-end; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.rep-filtros .seg-toggle button { flex: none; }

/* Pestañas internas y barra de opciones sobre la tabla. */
.rep-pestanas { display: flex; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; margin-bottom: 14px; }
.rep-pestanas button { flex: none; }
.rep-barra { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 12px; font-size: 13px; }
.rep-check { font-size: 13px; }
.rep-select { width: auto; min-width: 150px; max-width: 100%; height: 34px; }

/* Gráfica y celdas. */
.rep-panel-grafica { margin-bottom: 18px; }
.rep-pct, .rep-excede { font-weight: 700; }
.rep-excede { color: var(--danger); }
.rep-pills { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 14px; }

/* Unidades con retraso. */
.rep-actualizado { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-top: 6px; font-size: 12.5px; }
.rep-vivo { color: var(--success); }
.rep-unidad { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rep-txt { min-width: 0; overflow-wrap: anywhere; }
.rep-avatar { width: 32px; height: 32px; font-size: 13px; flex: none; color: var(--ink-1); }
.rep-avatar-aviso { background: var(--warning-soft); color: var(--warning); }
.rep-avatar-mal { background: var(--danger-soft); color: var(--danger); }
.rep-nota-mapa { margin: 12px 18px 0; display: flex; gap: .5rem; align-items: flex-start; overflow-wrap: anywhere; min-width: 0; }
.rep-mapa-caja { padding: 14px 18px 18px; }

/* Mapa (Leaflet): fondo, controles y globos con tokens para claro y oscuro. */
.ret-mapa { width: 100%; border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; }
.ret-mapa.leaflet-container { background: var(--sunken); font-family: var(--font-ui); }
.ret-mapa .leaflet-bar a { background: var(--card); color: var(--ink-1); border-bottom-color: var(--border); }
.ret-mapa .leaflet-bar a:hover { background: var(--sunken); }
.ret-mapa .leaflet-control-attribution { background: var(--card); color: var(--ink-3); }
.ret-mapa .leaflet-control-attribution a { color: var(--accent); }
.ret-mapa .leaflet-popup-content-wrapper, .ret-mapa .leaflet-popup-tip { background: var(--card); color: var(--ink-1); box-shadow: var(--shadow-lg); }
.ret-mapa .leaflet-popup-close-button { color: var(--ink-3); }
.ret-popup { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.ret-popup-titulo { font: 700 14px var(--font-brand); color: var(--ink-1); margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.ret-marcador { display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid var(--card); box-shadow: var(--shadow); font-size: 13px; }
.ret-marcador-aviso { background: var(--warning); color: var(--card); }
.ret-marcador-mal { background: var(--danger); color: var(--card); }
.ret-cluster { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: var(--on-accent); border: 3px solid var(--accent-soft); font: 700 13px var(--font-ui); font-variant-numeric: tabular-nums; box-shadow: var(--shadow); }

/* Resumen general: pilas de datos. */
.rep-colas { padding: 12px 16px; margin-bottom: 18px; }
.rep-colas-titulo { font: 700 13px var(--font-ui); color: var(--ink-1); margin-bottom: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.rep-colas-titulo i { color: var(--accent); }
.rep-colas-titulo .muted { font-weight: 400; font-size: 12px; }
.rep-colas-lista { display: flex; flex-wrap: wrap; gap: .5rem; }
.rep-cola { display: inline-flex; align-items: center; gap: .5rem; max-width: 100%; padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--sunken); font-size: 12.5px; }
.rep-cola-nombre { color: var(--ink-2); overflow-wrap: anywhere; }
.rep-cola-alerta { border-color: var(--danger); background: var(--danger-soft); }

@media (max-width: 760px) {
  .rep-filtros { padding: 12px; gap: .6rem; }
  .rep-filtros .rep-campo, .rep-filtros .btn-primario { flex: 1 1 100%; }
  .rep-campo input[type="datetime-local"], .rep-campo input[type="date"], .rep-campo select { width: 100%; }
  .rep-campo-linea { flex-wrap: wrap; }
  .rep-mapa-caja { padding: 10px; }
  .rep-nota-mapa { margin: 10px 10px 0; }
}