/* Rutas + Capilaridad — controles compactos y contraste accesible v58.
   Capa visual: no modifica datos, métricas, permisos ni comportamiento. */

body {
  --ops-control-ink: #0b253f;
  --ops-control-bg: #f8fbff;
  --ops-control-border: #54748b;
  --ops-control-active: #0b3445;
  --ops-control-focus: #facc15;
}

body .routes-panel .routes-tabs {
  min-height: 0 !important;
  padding: 6px 8px !important;
  gap: 6px !important;
  border-left: 4px solid #0f766e !important;
  background: #edf7f9 !important;
}

body .routes-panel .routes-tabs::before {
  content: "VISTAS" !important;
  min-height: 30px !important;
  padding: 0 9px !important;
  color: #083344 !important;
  background: #cffafe !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

body .routes-panel .routes-tabs button {
  min-width: auto !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 11px !important;
  border: 2px solid var(--ops-control-border) !important;
  border-radius: 4px !important;
  color: var(--ops-control-ink) !important;
  background: var(--ops-control-bg) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

body .routes-panel .routes-tabs button.active,
body .routes-panel .routes-tabs button[aria-selected="true"] {
  border-color: var(--ops-control-active) !important;
  color: #ffffff !important;
  background: var(--ops-control-active) !important;
}

body .routes-panel .routes-tabs button.active::before,
body .routes-panel .routes-tabs button[aria-selected="true"]::before {
  content: "✓ ";
  color: #a7f3d0;
}

body .routes-panel :is(.routes-toolbar-primary, .routes-map-actions) button,
body #moduleActions[data-module="rutas"] .module-action-button,
body #moduleActions[data-module="capilaridad"] .module-action-button,
body .cap-panel .cap-toolbar button,
body .cap-panel .vendor-actions button {
  width: auto !important;
  min-width: 0 !important;
  max-width: 230px !important;
  min-height: 38px !important;
  padding: 7px 13px !important;
  border: 2px solid #0f5d69 !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  background: #0b4754 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  box-shadow: none !important;
  justify-self: end !important;
}

body .routes-panel .routes-map-actions button {
  white-space: normal !important;
}

body .routes-panel :is(.routes-toolbar-primary, .routes-map-actions) button:hover,
body .cap-panel :is(.cap-toolbar, .vendor-actions) button:hover {
  border-color: #083344 !important;
  background: #083344 !important;
}

body .routes-panel :is(button, a, input, select):focus-visible,
body .cap-panel :is(button, a, input, select):focus-visible,
body #moduleActions[data-module="rutas"] :is(button, summary):focus-visible,
body #moduleActions[data-module="capilaridad"] :is(button, summary):focus-visible {
  outline: 3px solid var(--ops-control-focus) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .96) !important;
}

body .routes-panel .routes-map-actions {
  grid-template-columns: minmax(130px, .55fr) minmax(180px, 1fr) auto !important;
}

body .routes-panel .routes-map-actions :is(select, input) {
  min-height: 38px !important;
  border: 2px solid #7893a6 !important;
  color: #0b253f !important;
  background: #ffffff !important;
}

body .cap-panel {
  gap: 12px !important;
  padding: 12px !important;
}

body .cap-panel::before {
  padding: clamp(16px, 1.5vw, 24px) !important;
  border: 1px solid #76a1b9 !important;
  border-left: 6px solid #0e7490 !important;
  border-radius: 8px !important;
  color: #071b31 !important;
  background: linear-gradient(110deg, #e7f7fb, #ffffff 68%) !important;
  font-size: clamp(30px, 2.5vw, 46px) !important;
  line-height: 1.04 !important;
  letter-spacing: -.035em !important;
  box-shadow: none !important;
}

body .cap-panel .cap-toolbar {
  grid-template-columns: minmax(240px, 1fr) auto !important;
  gap: 9px !important;
  padding: 10px !important;
  border: 1px solid #b7791f !important;
  border-left: 5px solid #b45309 !important;
  border-radius: 6px !important;
  background: #fffaf0 !important;
}

body .cap-panel .cap-toolbar input {
  min-height: 40px !important;
  border: 2px solid #7a8ea3 !important;
  border-radius: 4px !important;
  color: #0b253f !important;
  background: #ffffff !important;
}

body .cap-panel .cap-kpis article,
body .cap-panel .cap-card,
body .cap-panel .cap-rank,
body .cap-panel .cap-gap,
body .cap-panel .vendor-diagnostic,
body .cap-panel .vendor-metrics span,
body .cap-panel .vendor-visits div {
  border-radius: 7px !important;
  box-shadow: none !important;
}

body .cap-panel .cap-kpis article {
  min-height: 88px !important;
  padding: 13px !important;
  border-color: #8aa3b6 !important;
  border-left-width: 5px !important;
  background: #f8fbff !important;
}

body .cap-panel .cap-kpis strong {
  color: #071b31 !important;
  font-size: clamp(28px, 2vw, 42px) !important;
}

body .cap-panel .cap-kpis span,
body .cap-panel :is(.cap-rank, .cap-gap) :is(span, small),
body .cap-panel .vendor-metrics small,
body .cap-panel .vendor-visits :is(span, small) {
  color: #3e5367 !important;
}

body .cap-panel .cap-rank,
body .cap-panel .cap-gap {
  padding: 11px 12px !important;
  border-color: #8aa3b6 !important;
  border-left-width: 5px !important;
  background: #f8fbff !important;
}

body .cap-panel .cap-gap.high {
  border-color: #be123c !important;
  background: #fff1f2 !important;
}

body .cap-panel .cap-gap.high::before {
  content: "⚠ BRECHA ALTA";
  color: #881337;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
}

body .cap-panel :is(.cap-rank, .cap-gap) em {
  min-width: 58px !important;
  padding: 7px 9px !important;
  border: 2px solid #0e7490 !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  background: #0b4754 !important;
  font-size: 16px !important;
}

body[data-theme="dark"] .routes-panel .routes-tabs,
body[data-theme="dark"] .cap-panel .cap-toolbar {
  border-color: #5b7d91 !important;
  background: #0b1724 !important;
}

body[data-theme="dark"] .routes-panel .routes-tabs button {
  border-color: #6a899d !important;
  color: #f8fafc !important;
  background: #172a3a !important;
}

body[data-theme="dark"] .routes-panel .routes-tabs button.active,
body[data-theme="dark"] .routes-panel .routes-tabs button[aria-selected="true"] {
  border-color: #67e8f9 !important;
  color: #03131d !important;
  background: #67e8f9 !important;
}

body[data-theme="dark"] .cap-panel::before,
body[data-theme="dark"] .cap-panel .cap-kpis article,
body[data-theme="dark"] .cap-panel .cap-card,
body[data-theme="dark"] .cap-panel .cap-rank,
body[data-theme="dark"] .cap-panel .cap-gap {
  border-color: #56768b !important;
  color: #f8fafc !important;
  background: #112131 !important;
}

body[data-theme="dark"] .cap-panel :is(h3, strong) {
  color: #f8fafc !important;
}

body[data-theme="dark"] .cap-panel :is(.cap-kpis span, .cap-rank span, .cap-rank small, .cap-gap span, .cap-gap small) {
  color: #c7d7e2 !important;
}

@media (max-width: 1180px) {
  body .routes-panel .routes-map-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body .routes-panel .routes-map-actions button {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 760px) {
  body .routes-panel .routes-tabs {
    padding: 5px !important;
  }

  body .routes-panel .routes-tabs::before {
    display: none !important;
  }

  body .routes-panel .routes-tabs button {
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 10px !important;
  }

  body .routes-panel .routes-map-actions,
  body .cap-panel .cap-toolbar {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body .routes-panel :is(.routes-toolbar-primary, .routes-map-actions) button,
  body .cap-panel .cap-toolbar button,
  body .cap-panel .vendor-actions button {
    width: 100% !important;
    max-width: none !important;
    min-height: 44px !important;
    justify-self: stretch !important;
  }

  body .cap-panel::before {
    padding: 14px !important;
    font-size: clamp(28px, 9vw, 38px) !important;
  }

  body .cap-panel .cap-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .routes-panel *,
  body .cap-panel * {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}