/* Menú de secciones del encabezado (franja de asfalto). Usa solo las variables de tema de poltrack.css.
   La sección actual lleva una regla verde al pie de la franja, como la pestaña de un plano. */

.navegacion { display: flex; gap: 0; margin-left: 18px; align-self: stretch; }
.navegacion a {
  position: relative; display: flex; align-items: center;
  padding: 0 12px; text-decoration: none;
  color: var(--texto-suave); font: 600 14.5px/1 var(--fuente); white-space: nowrap;
  transition: color 150ms ease;
}
.navegacion a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px;
  background: var(--acento); transform: scaleX(0); transform-origin: left; transition: transform 260ms var(--curva);
}
.navegacion a:hover { color: var(--texto); }
.navegacion a:hover::after { transform: scaleX(.35); }
.navegacion a[aria-current="page"] { color: var(--texto); }
.navegacion a[aria-current="page"]::after { transform: scaleX(1); }
.navegacion a:focus-visible { outline-offset: -4px; }

/* Con Sucursales e Informes el menú ya no entra en una fila en pantallas medianas: pasa abajo.
   1440 px: el menú del admin es el más largo y a 1366 px (notebooks) se salía de la pantalla. */
@media (max-width: 1440px) {
  .encabezado { flex-wrap: wrap; padding-top: 10px; }
  .navegacion { order: 3; width: calc(100% + 2 * clamp(16px, 4vw, 32px)); margin: 8px calc(-1 * clamp(16px, 4vw, 32px)) 0; padding: 0 clamp(4px, 3vw, 20px); overflow-x: auto; border-top: 1px solid var(--franja-borde); scrollbar-width: none; }
  .navegacion a { padding: 13px 12px; }
  /* Pista de que el menú sigue a la derecha: se desvanece en el borde */
  .navegacion { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
}