/* Skin TOA para controles de Mapa operativo — mapa-operativo-toa-20260728_114023
   Capa visual acotada. No modifica Leaflet, GPS, datos ni lógica JS. */

/* Variables acotadas al módulo cargado */
#viewContainer:has(#mapaOperativoFecha),
.module-root:has(#mapaOperativoFecha),
#mapaOperativoFecha {
  --mo-btn-h: 28px;
  --mo-radius: 6px;
  --mo-primary-bg: #0f4c81;
  --mo-primary-hover: #0b3b66;
  --mo-primary-border: #0b3b66;
  --mo-secondary-bg: #ffffff;
  --mo-secondary-hover: #eef5fb;
  --mo-secondary-border: #b9cadd;
  --mo-secondary-text: #0f3e6e;
  --mo-input-border: #c1cfdd;
  --mo-text: #16202a;
  --mo-muted: #52616d;
}

/* Header / barra superior del mapa */
#viewContainer:has(#mapaOperativoFecha) .mo-hero,
#viewContainer:has(#mapaOperativoFecha) .mo-header,
#viewContainer:has(#mapaOperativoFecha) .mo-top,
#viewContainer:has(#mapaOperativoFecha) .mapa-operativo-header,
#viewContainer:has(#mapaOperativoFecha) .module-header {
  border-radius: 8px !important;
  border: 1px solid #cbd8e6 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

/* Contenedor de controles */
#viewContainer:has(#mapaOperativoFecha) .mo-controls,
#viewContainer:has(#mapaOperativoFecha) .mo-filters,
#viewContainer:has(#mapaOperativoFecha) .mapa-operativo-controls,
#viewContainer:has(#mapaOperativoFecha) .mapa-operativo-filtros,
#viewContainer:has(#mapaOperativoFecha) .module-actions {
  display: flex !important;
  align-items: end !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

/* Labels FECHA / CUADRILLA */
#viewContainer:has(#mapaOperativoFecha) label,
#viewContainer:has(#mapaOperativoFecha) .form-label,
#viewContainer:has(#mapaOperativoFecha) .mo-label {
  color: var(--mo-text) !important;
  font-size: 10px !important;
  line-height: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  margin: 0 0 4px 0 !important;
}

/* Inputs y selector */
#viewContainer:has(#mapaOperativoFecha) input[type="date"],
#viewContainer:has(#mapaOperativoFecha) input[type="text"],
#viewContainer:has(#mapaOperativoFecha) input[type="search"],
#viewContainer:has(#mapaOperativoFecha) select,
#mapaOperativoFecha,
#mapaOperativoCuadrilla {
  height: var(--mo-btn-h) !important;
  min-height: var(--mo-btn-h) !important;
  max-height: var(--mo-btn-h) !important;
  border-radius: var(--mo-radius) !important;
  border: 1px solid var(--mo-input-border) !important;
  background: #ffffff !important;
  color: var(--mo-text) !important;
  font-size: 10.5px !important;
  line-height: 26px !important;
  font-weight: 800 !important;
  padding: 0 9px !important;
  box-shadow: none !important;
  outline: none !important;
  box-sizing: border-box !important;
}

#viewContainer:has(#mapaOperativoFecha) select,
#mapaOperativoCuadrilla {
  min-width: 260px !important;
  max-width: 330px !important;
  padding-right: 30px !important;
}

#viewContainer:has(#mapaOperativoFecha) input[type="date"],
#mapaOperativoFecha {
  min-width: 145px !important;
  max-width: 165px !important;
}

#viewContainer:has(#mapaOperativoFecha) input:focus,
#viewContainer:has(#mapaOperativoFecha) select:focus,
#mapaOperativoFecha:focus,
#mapaOperativoCuadrilla:focus {
  border-color: #0f4c81 !important;
  box-shadow: 0 0 0 2px rgba(15, 76, 129, .12) !important;
}

/* Botones del módulo, evitando controles internos del mapa Leaflet */
#viewContainer:has(#mapaOperativoFecha) button:not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out),
#viewContainer:has(#mapaOperativoFecha) a.btn,
#viewContainer:has(#mapaOperativoFecha) .btn,
#mapaOperativoBuscarBtn {
  height: var(--mo-btn-h) !important;
  min-height: var(--mo-btn-h) !important;
  max-height: var(--mo-btn-h) !important;
  padding: 0 12px !important;
  border-radius: var(--mo-radius) !important;
  border: 1px solid var(--mo-primary-border) !important;
  background: var(--mo-primary-bg) !important;
  color: #ffffff !important;
  font-size: 10.5px !important;
  line-height: 26px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

#viewContainer:has(#mapaOperativoFecha) button:not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out):hover,
#viewContainer:has(#mapaOperativoFecha) a.btn:hover,
#viewContainer:has(#mapaOperativoFecha) .btn:hover,
#mapaOperativoBuscarBtn:hover {
  background: var(--mo-primary-hover) !important;
  border-color: var(--mo-primary-hover) !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Botón Línea de tiempo: secundario compacto, mismo lenguaje que Ruta diaria */
#viewContainer:has(#mapaOperativoFecha) button[onclick*="dashboard"],
#viewContainer:has(#mapaOperativoFecha) button[onclick*="loadView"],
#viewContainer:has(#mapaOperativoFecha) a[onclick*="dashboard"],
#viewContainer:has(#mapaOperativoFecha) a[onclick*="loadView"],
#viewContainer:has(#mapaOperativoFecha) .mo-back,
#viewContainer:has(#mapaOperativoFecha) .mo-timeline-btn,
#viewContainer:has(#mapaOperativoFecha) .dash-quick-btn {
  height: var(--mo-btn-h) !important;
  min-height: var(--mo-btn-h) !important;
  max-height: var(--mo-btn-h) !important;
  padding: 0 12px !important;
  border-radius: var(--mo-radius) !important;
  border: 1px solid var(--mo-secondary-border) !important;
  background: #edf5fd !important;
  color: var(--mo-secondary-text) !important;
  font-size: 10.5px !important;
  line-height: 26px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

#viewContainer:has(#mapaOperativoFecha) button[onclick*="dashboard"]:hover,
#viewContainer:has(#mapaOperativoFecha) button[onclick*="loadView"]:hover,
#viewContainer:has(#mapaOperativoFecha) a[onclick*="dashboard"]:hover,
#viewContainer:has(#mapaOperativoFecha) a[onclick*="loadView"]:hover,
#viewContainer:has(#mapaOperativoFecha) .mo-back:hover,
#viewContainer:has(#mapaOperativoFecha) .mo-timeline-btn:hover,
#viewContainer:has(#mapaOperativoFecha) .dash-quick-btn:hover {
  background: var(--mo-secondary-hover) !important;
  border-color: #9eb6cf !important;
  color: var(--mo-secondary-text) !important;
}

/* Botón Actualizar: primario */
#mapaOperativoBuscarBtn,
#viewContainer:has(#mapaOperativoFecha) button[id*="Buscar"],
#viewContainer:has(#mapaOperativoFecha) button[id*="Actualizar"],
#viewContainer:has(#mapaOperativoFecha) button[class*="actualizar"],
#viewContainer:has(#mapaOperativoFecha) button[class*="Actualizar"] {
  background: var(--mo-primary-bg) !important;
  color: #fff !important;
  border-color: var(--mo-primary-border) !important;
  min-width: 88px !important;
}

/* Tarjetas superiores: no cambia layout, solo unifica peso visual */
#viewContainer:has(#mapaOperativoFecha) .mo-kpi,
#viewContainer:has(#mapaOperativoFecha) .kpi-card,
#viewContainer:has(#mapaOperativoFecha) .metric-card {
  border-radius: 6px !important;
  box-shadow: none !important;
}

/* Panel derecho y cajas del mapa: coherencia visual sin tocar Leaflet */
#viewContainer:has(#mapaOperativoFecha) .mo-card,
#viewContainer:has(#mapaOperativoFecha) .mo-panel,
#viewContainer:has(#mapaOperativoFecha) .mo-side,
#viewContainer:has(#mapaOperativoFecha) .detalle-operativo {
  border-radius: 6px !important;
  box-shadow: none !important;
}

/* Estado inferior / mensajes */
#mapaOperativoStatus,
#viewContainer:has(#mapaOperativoFecha) .mo-status,
#viewContainer:has(#mapaOperativoFecha) [id*="Status"] {
  color: var(--mo-muted) !important;
  font-size: 10px !important;
  line-height: 14px !important;
  font-weight: 800 !important;
}

/* Leaflet queda intacto */
#viewContainer:has(#mapaOperativoFecha) .leaflet-control-zoom a,
#viewContainer:has(#mapaOperativoFecha) .leaflet-control a {
  font: 22px/26px Arial, Helvetica, sans-serif !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#viewContainer:has(#mapaOperativoFecha) .leaflet-popup-content button,
#viewContainer:has(#mapaOperativoFecha) .leaflet-popup-content a {
  all: revert;
}