/* Estilos propios de Atlas TMS (complementan Tailwind). */
[x-cloak] { display: none !important; }
summary::-webkit-details-marker { display: none; }
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Tipografía: Inter con cifras tabulares y "1" sin serifa, más legible en tablas de valores. */
body { font-feature-settings: "cv11", "ss01"; }
h1, h2, h3 { letter-spacing: -0.012em; }

/* Barras de desplazamiento discretas (menú lateral oscuro y tablas). */
.scroll-oscuro { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.scroll-oscuro::-webkit-scrollbar { width: 6px; }
.scroll-oscuro::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }
.overflow-x-auto { scrollbar-width: thin; }

/* Opción activa del menú lateral: franja ámbar como la línea del carril del logo. */
.nav-activa { position: relative; background: rgba(255,255,255,.08); color: #fff; }
.nav-activa::before {
  content: ""; position: absolute; left: -0.75rem; top: 0.45rem; bottom: 0.45rem;
  width: 3px; border-radius: 0 3px 3px 0; background: #fbbf24;
}

/* Fondo de la pantalla de ingreso: carretera en perspectiva (motivo del logo). */
.fondo-via {
  background-color: #0f1f4d;
  background-image:
    radial-gradient(120% 80% at 100% 0%, rgba(51,125,252,.22) 0%, rgba(15,31,77,0) 60%),
    linear-gradient(180deg, rgba(15,31,77,0) 55%, rgba(8,17,43,.55) 100%);
}

/* Foco visible y consistente en toda la app (teclado). */
:focus-visible { outline: 2px solid #1d5ef1; outline-offset: 2px; }
.bg-atlas-950 :focus-visible { outline-color: #fbbf24; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}