/* Skin TOA compacto para Ruta diaria — toa-compacto-20260728_112038
   Capa visual aislada. No modifica datos, endpoints ni dashboard.js.
   Replica una consola compacta: fila baja, jornada secundaria y ODT como barra principal. */

#dashboardOperativo {
  --toa-row-h: 46px;
  --toa-left-w: 300px;
  --toa-hour-w: 96px;
  --toa-grid-main: #9fb1c2;
  --toa-grid-soft: #e7edf3;
  --toa-border: #aebdcc;
  --toa-text: #16202a;
  --toa-muted: #52616d;
  --toa-jornada-bg: rgba(232, 238, 244, .86);
  --toa-jornada-border: #71869a;
  --toa-jornada-line: #1ba6cf;
  --toa-odt-bg: #bff3c8;
  --toa-odt-border: #11a246;
  --toa-falla-bg: #ffe7bf;
  --toa-falla-border: #f59e0b;
}

/* Contenedor general: consola plana, no tarjeta gigante */
#dashboardOperativo .toa-card,
#dashboardOperativo .ruta-card,
#dashboardOperativo .timeline-card,
#dashboardOperativo .card {
  border-radius: 3px !important;
  box-shadow: none !important;
}

/* Toolbar compacta */
#dashboardOperativo .toa-toolbar,
#dashboardOperativo .dashboard-toolbar,
#dashboardOperativo .rd-toolbar {
  min-height: 34px !important;
  padding: 4px 6px !important;
  gap: 5px !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  background: #f8fafc !important;
}

#dashboardOperativo .toa-toolbar button,
#dashboardOperativo .dashboard-toolbar button,
#dashboardOperativo .rd-toolbar button,
#dashboardOperativo #dashRefresh,
#dashboardOperativo #dashToday,
#dashboardOperativo #dashOdtSearchBtn,
#dashboardOperativo #rutaDetalleSearchBtn {
  height: 24px !important;
  min-height: 24px !important;
  padding: 0 9px !important;
  border-radius: 4px !important;
  font-size: 10.5px !important;
  line-height: 22px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

#dashboardOperativo input[type="date"],
#dashboardOperativo input[type="search"],
#dashboardOperativo .ruta-search-wrap input {
  height: 24px !important;
  min-height: 24px !important;
  border-radius: 4px !important;
  font-size: 10.5px !important;
  padding: 0 7px !important;
  box-shadow: none !important;
}

/* Scroll / grilla */
#dashboardOperativo #toaScroll {
  border: 1px solid var(--toa-border) !important;
  border-radius: 3px !important;
  background: #fff !important;
  overflow: auto !important;
  scrollbar-gutter: stable !important;
}

#dashboardOperativo #toaGrid {
  background: #fff !important;
}

/* Cabecera horaria más chica */
#dashboardOperativo #toaHours,
#dashboardOperativo .toa-hours {
  min-height: 31px !important;
  height: 31px !important;
  background: #f2f5f8 !important;
  border-bottom: 1px solid var(--toa-border) !important;
}

#dashboardOperativo .toa-hour {
  height: 31px !important;
  min-height: 31px !important;
  border-left: 1px solid var(--toa-grid-main) !important;
  background: #f7f9fb !important;
  color: #344250 !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  box-sizing: border-box !important;
}

#dashboardOperativo .toa-hour div {
  font-size: 11px !important;
  line-height: 13px !important;
  font-weight: 800 !important;
}

#dashboardOperativo .toa-hour small {
  font-size: 7.5px !important;
  line-height: 8px !important;
  color: #52616d !important;
}

/* Punto crítico:
   dashboard.js infla altura por tracks. Para parecerse a TOA,
   la fila se normaliza visualmente por CSS. */
#dashboardOperativo .toa-row {
  height: var(--toa-row-h) !important;
  min-height: var(--toa-row-h) !important;
  max-height: var(--toa-row-h) !important;
  border-bottom: 1px solid #d2dbe5 !important;
  background: #fff !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

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

/* Columna izquierda: oficial + ayudante siempre visibles */
#dashboardOperativo .toa-row-left {
  height: var(--toa-row-h) !important;
  min-height: var(--toa-row-h) !important;
  max-height: var(--toa-row-h) !important;
  width: var(--toa-left-w) !important;
  padding: 5px 7px 4px !important;
  background: #f8fafb !important;
  border-right: 1px solid #9fb1c2 !important;
  border-bottom: 1px solid #d2dbe5 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#dashboardOperativo .toa-row-left strong,
#dashboardOperativo .rd-final-oficial {
  display: block !important;
  margin: 0 !important;
  color: var(--toa-text) !important;
  font-size: 10.5px !important;
  line-height: 13px !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#dashboardOperativo .rd-final-ayudante {
  display: block !important;
  margin-top: 2px !important;
  color: var(--toa-muted) !important;
  font-size: 8.5px !important;
  line-height: 10px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Carril de tiempo: alto fijo y líneas tipo consola */
#dashboardOperativo .toa-row-lane {
  height: var(--toa-row-h) !important;
  min-height: var(--toa-row-h) !important;
  max-height: var(--toa-row-h) !important;
  position: relative !important;
  overflow: hidden !important;
  background-color: transparent !important;
  background-image:
    linear-gradient(to right, var(--toa-grid-main) 1px, transparent 1px),
    linear-gradient(to right, var(--toa-grid-soft) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148,163,184,.18) 1px, transparent 1px) !important;
  background-size:
    96px 100%,
    24px 100%,
    100% 7px !important;
  box-sizing: border-box !important;
}

/* Jornada: banda secundaria. No debe llenar toda la fila. */
#dashboardOperativo .toa-jornada {
  top: 7px !important;
  height: 27px !important;
  min-height: 27px !important;
  max-height: 27px !important;
  background: var(--toa-jornada-bg) !important;
  border: 1px solid var(--toa-jornada-border) !important;
  border-bottom: 4px solid var(--toa-jornada-line) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  opacity: .82 !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#dashboardOperativo .toa-jornada.is-open {
  border-right: 4px solid #ef4444 !important;
}

#dashboardOperativo .toa-jornada-head {
  height: 14px !important;
  min-height: 14px !important;
  max-height: 14px !important;
  padding: 1px 5px !important;
  font-size: 8px !important;
  line-height: 11px !important;
  font-weight: 900 !important;
  color: #263544 !important;
  background: transparent !important;
  border: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#dashboardOperativo .toa-jornada-head span {
  font-size: 8px !important;
  line-height: 11px !important;
  font-weight: 900 !important;
  color: #263544 !important;
  white-space: nowrap !important;
}

/* ODT: barra chica principal, arriba de la jornada */
#dashboardOperativo .toa-event {
  top: 21px !important;
  height: 15px !important;
  min-height: 15px !important;
  max-height: 15px !important;
  padding: 0 4px !important;
  border: 1px solid var(--toa-odt-border) !important;
  border-left: 3px solid #f59e0b !important;
  border-radius: 3px !important;
  background: var(--toa-odt-bg) !important;
  color: #102a1a !important;
  font-size: 8.5px !important;
  line-height: 13px !important;
  font-weight: 900 !important;
  text-align: left !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
  z-index: 8 !important;
}

#dashboardOperativo .toa-event.is-finalizado {
  background: #c9f7d3 !important;
  border-color: #12a34a !important;
}

#dashboardOperativo .toa-event.is-fallida {
  background: var(--toa-falla-bg) !important;
  border-color: var(--toa-falla-border) !important;
  color: #7c2d12 !important;
}

#dashboardOperativo .toa-event.is-short {
  padding-left: 2px !important;
  padding-right: 2px !important;
  font-size: 7.5px !important;
}

/* Mini eventos muy cortos: que no agranden visualmente el cuadro */
#dashboardOperativo .toa-event[style*="width: 22px"],
#dashboardOperativo .toa-event[style*="width:22px"] {
  font-size: 0 !important;
  padding: 0 !important;
  border-left-width: 2px !important;
}

/* Hover sin agrandar */
#dashboardOperativo .toa-event:hover,
#dashboardOperativo .toa-event:focus-visible {
  outline: 1px solid #0f4c81 !important;
  outline-offset: 1px !important;
  z-index: 30 !important;
}

/* Línea roja de hora/cursor */
#dashboardOperativo #toaMouseLine,
#dashboardOperativo .toa-now-line {
  width: 1px !important;
  background: #ef233c !important;
  box-shadow: none !important;
  z-index: 60 !important;
}

#dashboardOperativo #toaMouseLabel,
#dashboardOperativo .toa-now-label {
  border-radius: 2px !important;
  background: #e53935 !important;
  color: #fff !important;
  font-size: 9.5px !important;
  font-weight: 900 !important;
  padding: 2px 5px !important;
}

/* Leyenda más liviana */
#dashboardOperativo .toa-legend,
#dashboardOperativo .rd-legend {
  font-size: 8.5px !important;
  font-weight: 900 !important;
  color: #334155 !important;
  gap: 6px !important;
}

/* Mensajes */
#dashboardOperativo .toa-empty,
#dashboardOperativo .toa-error {
  font-size: 10.5px !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}

/* Preview: compacto */
#toaHoverPreview {
  border-radius: 4px !important;
  border: 1px solid #9fb2c5 !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .20) !important;
  font-size: 10.5px !important;
  max-width: 360px !important;
}

/* Evitar que piezas viejas de eventos contaminen la vista principal */
#dashboardOperativo .ruta-evento-v1-bar {
  height: 14px !important;
  min-height: 14px !important;
  max-height: 14px !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}

/* BOTONES TOA NORMALIZADOS INICIO */
/* botones-toa-20260728_113201
   Botonera compacta y consistente para Ruta diaria.
   No toca geometría, filas, jornada ni ODT. */

#dashboardOperativo {
  --rd-btn-h: 26px;
  --rd-btn-radius: 5px;
  --rd-btn-primary-bg: #0f4c81;
  --rd-btn-primary-bg-hover: #0b3b66;
  --rd-btn-primary-border: #0b3b66;
  --rd-btn-secondary-bg: #ffffff;
  --rd-btn-secondary-bg-hover: #eef5fb;
  --rd-btn-secondary-border: #b9cadd;
  --rd-btn-secondary-text: #0f3e6e;
}

/* Barra superior: todos los controles en una misma altura */
#dashboardOperativo .toa-toolbar,
#dashboardOperativo .dashboard-toolbar,
#dashboardOperativo .rd-toolbar,
#dashboardOperativo [class*="toolbar"] {
  min-height: 36px !important;
  height: auto !important;
  padding: 5px 7px !important;
  gap: 6px !important;
  align-items: center !important;
  border-radius: 6px !important;
  background: #f8fafc !important;
  border: 1px solid #cbd8e6 !important;
  box-shadow: none !important;
}

/* Regla base: cualquier botón de Ruta diaria queda normalizado */
#dashboardOperativo button,
#dashboardOperativo input[type="button"],
#dashboardOperativo input[type="submit"],
#dashboardOperativo .btn,
#dashboardOperativo .button {
  height: var(--rd-btn-h) !important;
  min-height: var(--rd-btn-h) !important;
  max-height: var(--rd-btn-h) !important;
  padding: 0 11px !important;
  border-radius: var(--rd-btn-radius) !important;
  border: 1px solid var(--rd-btn-primary-border) !important;
  background: var(--rd-btn-primary-bg) !important;
  color: #fff !important;
  font-size: 10.5px !important;
  line-height: 24px !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;
  box-sizing: border-box !important;
}

#dashboardOperativo button:hover,
#dashboardOperativo input[type="button"]:hover,
#dashboardOperativo input[type="submit"]:hover,
#dashboardOperativo .btn:hover,
#dashboardOperativo .button:hover {
  background: var(--rd-btn-primary-bg-hover) !important;
  border-color: var(--rd-btn-primary-bg-hover) !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Botones secundarios: Hoy, Excel, pestañas no activas y controles livianos */
#dashboardOperativo #dashToday,
#dashboardOperativo button.secondary,
#dashboardOperativo .secondary,
#dashboardOperativo .btn-secondary,
#dashboardOperativo .tab:not(.active),
#dashboardOperativo .toa-tab:not(.active),
#dashboardOperativo [aria-selected="false"] {
  background: var(--rd-btn-secondary-bg) !important;
  color: var(--rd-btn-secondary-text) !important;
  border: 1px solid var(--rd-btn-secondary-border) !important;
}

#dashboardOperativo #dashToday:hover,
#dashboardOperativo button.secondary:hover,
#dashboardOperativo .secondary:hover,
#dashboardOperativo .btn-secondary:hover,
#dashboardOperativo .tab:not(.active):hover,
#dashboardOperativo .toa-tab:not(.active):hover,
#dashboardOperativo [aria-selected="false"]:hover {
  background: var(--rd-btn-secondary-bg-hover) !important;
  color: var(--rd-btn-secondary-text) !important;
  border-color: #9eb6cf !important;
}

/* Línea de tiempo activa: igual que botón principal */
#dashboardOperativo .active,
#dashboardOperativo .tab.active,
#dashboardOperativo .toa-tab.active,
#dashboardOperativo [aria-selected="true"] {
  background: var(--rd-btn-primary-bg) !important;
  color: #fff !important;
  border-color: var(--rd-btn-primary-border) !important;
  box-shadow: none !important;
}

/* Botones concretos de la pantalla */
#dashboardOperativo #dashRefresh,
#dashboardOperativo #dashOdtSearchBtn,
#dashboardOperativo #rutaDetalleSearchBtn {
  background: var(--rd-btn-primary-bg) !important;
  color: #fff !important;
  border-color: var(--rd-btn-primary-border) !important;
}

#dashboardOperativo #dashToday {
  min-width: 42px !important;
}

#dashboardOperativo button[title*="Excel"],
#dashboardOperativo button[id*="Excel"],
#dashboardOperativo button[id*="excel"],
#dashboardOperativo button[class*="excel"],
#dashboardOperativo a[class*="excel"],
#dashboardOperativo a[href*="excel"] {
  height: var(--rd-btn-h) !important;
  min-height: var(--rd-btn-h) !important;
  max-height: var(--rd-btn-h) !important;
  padding: 0 12px !important;
  border-radius: var(--rd-btn-radius) !important;
  border: 1px solid var(--rd-btn-secondary-border) !important;
  background: var(--rd-btn-secondary-bg) !important;
  color: var(--rd-btn-secondary-text) !important;
  font-size: 10.5px !important;
  line-height: 24px !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;
}

/* Inputs: misma altura que botones */
#dashboardOperativo input[type="date"],
#dashboardOperativo input[type="search"],
#dashboardOperativo input[type="text"],
#dashboardOperativo .ruta-search-wrap input,
#dashboardOperativo #dashOdtSearch,
#dashboardOperativo #rutaDetalleSearchInput {
  height: var(--rd-btn-h) !important;
  min-height: var(--rd-btn-h) !important;
  max-height: var(--rd-btn-h) !important;
  padding: 0 8px !important;
  border-radius: var(--rd-btn-radius) !important;
  border: 1px solid #c1cfdd !important;
  background: #fff !important;
  color: #16202a !important;
  font-size: 10.5px !important;
  line-height: 24px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
  outline: none !important;
  box-sizing: border-box !important;
}

#dashboardOperativo input[type="date"]:focus,
#dashboardOperativo input[type="search"]:focus,
#dashboardOperativo input[type="text"]:focus,
#dashboardOperativo .ruta-search-wrap input:focus,
#dashboardOperativo #dashOdtSearch:focus,
#dashboardOperativo #rutaDetalleSearchInput:focus {
  border-color: #0f4c81 !important;
  box-shadow: 0 0 0 2px rgba(15,76,129,.12) !important;
}

/* Buscador: no debe verse como pieza ajena */
#dashboardOperativo .ruta-search-wrap {
  height: var(--rd-btn-h) !important;
  min-height: var(--rd-btn-h) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 5px !important;
  flex: 0 1 360px !important;
}

#dashboardOperativo .ruta-search-wrap input {
  width: 260px !important;
  min-width: 220px !important;
  max-width: 320px !important;
}

/* Fecha + label */
#dashboardOperativo label,
#dashboardOperativo .toa-toolbar label,
#dashboardOperativo .dashboard-toolbar label,
#dashboardOperativo .rd-toolbar label {
  height: var(--rd-btn-h) !important;
  min-height: var(--rd-btn-h) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 !important;
  color: #16202a !important;
  font-size: 10.5px !important;
  line-height: 24px !important;
  font-weight: 900 !important;
}

/* Texto de actualización: alineado y sin romper la botonera */
#dashboardOperativo #dashUpdated,
#dashboardOperativo .dash-updated,
#dashboardOperativo [id*="Updated"],
#dashboardOperativo [class*="updated"] {
  height: var(--rd-btn-h) !important;
  min-height: var(--rd-btn-h) !important;
  display: inline-flex !important;
  align-items: center !important;
  color: #52616d !important;
  font-size: 9.5px !important;
  line-height: 24px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  margin: 0 4px !important;
}

/* Evitar botones gigantes heredados */
#dashboardOperativo button *,
#dashboardOperativo .btn *,
#dashboardOperativo .button * {
  line-height: inherit !important;
  font-size: inherit !important;
}

/* Botón Evento: mismo tamaño que Actualizar, no tarjeta distinta */
#dashboardOperativo button[id*="Evento"],
#dashboardOperativo button[id*="evento"],
#dashboardOperativo button[class*="evento"],
#dashboardOperativo button[class*="Evento"] {
  height: var(--rd-btn-h) !important;
  min-height: var(--rd-btn-h) !important;
  max-height: var(--rd-btn-h) !important;
  padding: 0 11px !important;
  border-radius: var(--rd-btn-radius) !important;
  background: var(--rd-btn-primary-bg) !important;
  color: #fff !important;
  border-color: var(--rd-btn-primary-border) !important;
  font-size: 10.5px !important;
  line-height: 24px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

/* Separación final: Excel alineado al resto */
#dashboardOperativo .toa-toolbar > *,
#dashboardOperativo .dashboard-toolbar > *,
#dashboardOperativo .rd-toolbar > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  vertical-align: middle !important;
}
/* BOTONES TOA NORMALIZADOS FIN */