/* assets/css/tabs.css - Navegación interna de página (estilo Vercel/Linear): texto, línea inferior que se desliza, sin píldoras.
   Un único componente para .section-tabs (sub-páginas de sección), .calc-tabs (calculadora, rankings) y .rutas-tabs. */
.section-tabs, .calc-tabs, .rutas-tabs {
  --fl: 0px; --fr: 0px;
  position: relative; display: flex; align-items: stretch; gap: clamp(1.1rem, 0.7rem + 1.6vw, 1.9rem);
  width: 100%; max-width: none; margin: 0.35rem 0 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: none !important;
  box-shadow: inset 0 -1px 0 var(--border) !important;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
}
.section-tabs::-webkit-scrollbar, .calc-tabs::-webkit-scrollbar, .rutas-tabs::-webkit-scrollbar { display: none; }
/* Se coloca bajo el título al cargar; hasta entonces no ocupa sitio */
.section-tabs[data-relocate] { visibility: hidden; height: 0; min-height: 0; margin: 0 !important; }

.section-tabs a, .calc-tabs a, .rutas-tabs a {
  position: relative; z-index: 1; flex: none; display: inline-flex; flex-direction: row; align-items: center; gap: 0.4rem;
  min-height: 2.9rem; padding: 0 0.1rem !important; margin: 0;
  border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
  font-family: var(--font-display); font-weight: 560; font-size: 0.92rem !important; letter-spacing: -0.005em; white-space: nowrap; text-decoration: none;
  color: var(--muted-foreground) !important;
  transition: color 0.22s var(--ease-out);
}
.section-tabs a svg:not(.nav-badge svg), .calc-tabs a svg, .rutas-tabs a svg, .calc-tabs a i { display: none; }
@media (hover: hover) {
  .section-tabs a:hover, .calc-tabs a:hover, .rutas-tabs a:hover { color: color-mix(in srgb, var(--foreground) 80%, var(--muted-foreground)) !important; }
}
.section-tabs a:active, .calc-tabs a:active, .rutas-tabs a:active { transform: none; }
.section-tabs a.is-active, .calc-tabs a.is-active, .rutas-tabs a.is-active { color: var(--foreground) !important; }
.section-tabs a:focus-visible, .calc-tabs a:focus-visible, .rutas-tabs a:focus-visible { outline: 2px solid rgb(var(--a-500)); outline-offset: -2px; border-radius: 0.4rem !important; }

/* Línea deslizante */
.section-tabs .tab-indicator, .calc-tabs .tab-indicator, .rutas-tabs .tab-indicator {
  position: absolute; left: 0; top: auto !important; bottom: 0; height: 2px; border-radius: 2px 2px 0 0 !important;
  background: var(--foreground) !important; box-shadow: none !important;
}
/* Sin JS: la pestaña activa lleva su propia línea */
.section-tabs:not(.has-indicator) a.is-active, .calc-tabs:not(.has-indicator) a.is-active, .rutas-tabs:not(.has-indicator) a.is-active { box-shadow: inset 0 -2px 0 var(--foreground) !important; }

.nav-badge { margin-left: 0.1rem; }
@media (prefers-reduced-motion: reduce) { .section-tabs a, .calc-tabs a, .rutas-tabs a { transition: none; } }