/*
  TRAZZA - Ruta diaria visual operativa
  Alcance: solo presentación.
  No modifica rango horario, endpoints, lógica, eventos ni cálculo de jornadas.
*/

#dashboardOperativo {
  --rd-visual-border: #cbd9e8;
  --rd-visual-border-soft: #e7edf5;
  --rd-visual-text: #0f172a;
  --rd-visual-muted: #64748b;
  --rd-visual-panel: #ffffff;
  --rd-visual-panel-soft: #f8fafc;
  --rd-visual-hour-bg: #f1f6fb;
  --rd-visual-jornada-bg: rgba(226, 232, 240, .72);
  --rd-visual-jornada-border: rgba(100, 116, 139, .62);
  --rd-visual-jornada-open-bg: rgba(219, 234, 254, .78);
  --rd-visual-odt-bg: #bdf4c9;
  --rd-visual-odt-border: #16a34a;
  --rd-visual-odt-done-bg: #dbeafe;
  --rd-visual-odt-done-border: #2563eb;
  --rd-visual-odt-fail-bg: #fed7aa;
  --rd-visual-odt-fail-border: #ea580c;
}

/* Contenedor general de la línea */
#dashboardOperativo .toa-card,
#dashboardOperativo .timeline-card,
#dashboardOperativo .ruta-card {
  border: 1px solid var(--rd-visual-border) !important;
  border-radius: 16px !important;
  background: var(--rd-visual-panel) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08) !important;
  overflow: hidden !important;
}

/* Toolbar: compacta, estable y legible */
#dashboardOperativo .toa-toolbar {
  gap: 8px !important;
  align-items: center !important;
  padding: 10px 12px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border-bottom: 1px solid var(--rd-visual-border-soft) !important;
}

#dashboardOperativo .toa-toolbar label,
#dashboardOperativo .toa-toolbar span,
#dashboardOperativo #dashUpdated {
  color: var(--rd-visual-muted) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

/* Scroll horizontal/vertical: conserva rango completo */
#dashboardOperativo #toaScroll {
  background: #fff !important;
  border-top: 1px solid var(--rd-visual-border-soft) !important;
  scrollbar-gutter: stable !important;
}

/* Cabecera de horas: mismo ancho, mejor lectura */
#dashboardOperativo #toaHours,
#dashboardOperativo .toa-hours {
  background: var(--rd-visual-hour-bg) !important;
  border-bottom: 1px solid var(--rd-visual-border) !important;
}

#dashboardOperativo .toa-hour {
  color: #334155 !important;
  border-left: 1px solid #b9c7d6 !important;
  background: linear-gradient(180deg, #f8fbff 0%, #eef5fb 100%) !important;
}

#dashboardOperativo .toa-hour div {
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
}

#dashboardOperativo .toa-hour small {
  color: #64748b !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
}

/* Columna izquierda: cuadrilla fija más limpia */
#dashboardOperativo .toa-left-head,
#dashboardOperativo .toa-row-left,
#dashboardOperativo #toaRows .toa-row-left {
  background: #f8fafc !important;
  border-right: 1px solid var(--rd-visual-border) !important;
  box-shadow: 8px 0 14px rgba(15, 23, 42, .05) !important;
}

#dashboardOperativo .toa-row-left strong,
#dashboardOperativo .rd-final-oficial {
  color: var(--rd-visual-text) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
  letter-spacing: .01em !important;
}

#dashboardOperativo .rd-final-ayudante,
#dashboardOperativo .toa-row-left span {
  color: var(--rd-visual-muted) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

/* Filas: no se toca cantidad de horas ni conversión minuto/pixel */
#dashboardOperativo .toa-row {
  border-bottom: 1px solid var(--rd-visual-border-soft) !important;
  background: #fff !important;
}

#dashboardOperativo .toa-row:nth-child(even) {
  background: #fbfdff !important;
}

#dashboardOperativo .toa-row-lane {
  background-image:
    linear-gradient(to right, rgba(148,163,184,.48) 1px, transparent 1px),
    linear-gradient(to right, rgba(226,232,240,.90) 1px, transparent 1px) !important;
  background-size: 96px 100%, 24px 100% !important;
  background-position: 0 0, 0 0 !important;
}

/* Jornada: queda como contexto, no compite con la ODT */
#dashboardOperativo .toa-jornada {
  background: var(--rd-visual-jornada-bg) !important;
  border: 1px solid var(--rd-visual-jornada-border) !important;
  border-bottom: 3px solid #38bdf8 !important;
  border-radius: 8px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75) !important;
  opacity: .88 !important;
}

#dashboardOperativo .toa-jornada.is-open {
  background: var(--rd-visual-jornada-open-bg) !important;
  border-color: #60a5fa !important;
  border-bottom-color: #2563eb !important;
}

#dashboardOperativo .toa-jornada-head {
  background: rgba(255,255,255,.72) !important;
  color: #334155 !important;
  border-bottom: 1px solid rgba(148,163,184,.35) !important;
  font-size: 9.5px !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
}

/* ODT: protagonista visual */
#dashboardOperativo .toa-event {
  background: linear-gradient(180deg, #d9ffe0 0%, var(--rd-visual-odt-bg) 100%) !important;
  border: 1px solid var(--rd-visual-odt-border) !important;
  color: #052e16 !important;
  border-radius: 8px !important;
  font-size: 10.5px !important;
  font-weight: 950 !important;
  letter-spacing: .01em !important;
  text-shadow: none !important;
  box-shadow: 0 2px 5px rgba(22, 163, 74, .18) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#dashboardOperativo .toa-event.is-finalizado {
  background: linear-gradient(180deg, #eff6ff 0%, var(--rd-visual-odt-done-bg) 100%) !important;
  border-color: var(--rd-visual-odt-done-border) !important;
  color: #1e3a8a !important;
  box-shadow: 0 2px 5px rgba(37, 99, 235, .16) !important;
}

#dashboardOperativo .toa-event.is-fallida {
  background: linear-gradient(180deg, #fff7ed 0%, var(--rd-visual-odt-fail-bg) 100%) !important;
  border-color: var(--rd-visual-odt-fail-border) !important;
  color: #7c2d12 !important;
  box-shadow: 0 2px 5px rgba(234, 88, 12, .18) !important;
}

#dashboardOperativo .toa-event.is-short {
  min-width: 22px !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}

/* Hover sin alterar click ni drag */
#dashboardOperativo .toa-event:hover,
#dashboardOperativo .toa-event:focus-visible {
  filter: brightness(1.02) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 12px rgba(15, 23, 42, .18) !important;
  outline: 2px solid rgba(15, 62, 110, .18) !important;
  outline-offset: 1px !important;
}

/* Guía roja de cursor: visible pero menos invasiva */
#dashboardOperativo #toaMouseLine,
#dashboardOperativo .toa-now-line {
  width: 2px !important;
  background: #dc2626 !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.9), 0 0 8px rgba(220,38,38,.28) !important;
  opacity: .95 !important;
}

#dashboardOperativo #toaMouseLabel,
#dashboardOperativo .toa-now-label {
  background: #dc2626 !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  box-shadow: 0 4px 12px rgba(220,38,38,.24) !important;
}

/* Hover preview */
#toaHoverPreview {
  border: 1px solid #cbd5e1 !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 45px rgba(15,23,42,.22) !important;
  overflow: hidden !important;
}

/* Estados vacíos/error */
#dashboardOperativo .toa-empty,
#dashboardOperativo .toa-error {
  color: #64748b !important;
  background: #f8fafc !important;
  border: 1px dashed #cbd5e1 !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
}

/* Consolidacion visual Ruta diaria
   Capa final validada.
   Mantiene rango horario y comportamiento original.
*/

/* Blindaje de capa final: evita que estilos legacy vuelvan a degradar lectura */
#dashboardOperativo .toa-row-lane {
  overflow: visible !important;
}

#dashboardOperativo .toa-event {
  min-height: 18px !important;
  line-height: 1.05 !important;
  display: block !important;
  align-content: center !important;
}

#dashboardOperativo .toa-jornada {
  pointer-events: none !important;
}

#dashboardOperativo .toa-event {
  pointer-events: auto !important;
}

/* Mantiene los eventos manuales visibles sin competir con ODT */
#dashboardOperativo .toa-row-lane .ruta-evento-v1-bar,
#dashboardOperativo .toa-row-lane .ruta-evento-render {
  z-index: 18 !important;
  max-height: 30px !important;
  overflow: hidden !important;
}

/* Evita que la columna izquierda pierda lectura por reglas heredadas */
#dashboardOperativo .toa-row-left,
#dashboardOperativo #toaRows .toa-row-left {
  overflow: hidden !important;
}

#dashboardOperativo .toa-row-left strong,
#dashboardOperativo .toa-row-left span {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Mantiene grilla horaria igual, solo mejora percepción de separación */
#dashboardOperativo .toa-row-lane {
  background-size: 96px 100%, 24px 100% !important;
}

/* Asegura que el hover no quede por debajo de paneles */
#toaHoverPreview {
  z-index: 100001 !important;
}