/* =========================================================================
   Menú principal — estilo Apple
   Se carga la última en <head> (base.html) y reajusta la barra sin tocar su estructura ni sus tamaños:
   material translúcido con el contenido pasando por debajo, tipografía con tracking de tamaño, pastillas
   suaves en vez de subrayados, desplegables que «se materializan» desde su botón y curvas de iOS.
   Principios (apple-design): material = jerarquía, respuesta inmediata al pulsar, nada de movimiento brusco,
   y alternativas para quien pide menos movimiento, menos transparencia o más contraste.
   ========================================================================= */
:root {
    --apple-ease: cubic-bezier(.32, .72, 0, 1);                       /* la curva de las hojas de iOS */
    --apple-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Geist", "Segoe UI", system-ui, sans-serif;
}

/* ---------- La barra: un material, no un bloque de color ---------- */
.site-nav {
    font-family: var(--apple-font);
    -webkit-font-smoothing: antialiased;
    background: rgba(11, 37, 89, .88);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    backdrop-filter: saturate(180%) blur(22px);
    border-bottom: .5px solid rgba(255, 255, 255, .18);
    box-shadow: 0 .5px 0 rgba(0, 0, 0, .25), 0 12px 32px -14px rgba(4, 17, 45, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* Marca: baldosa con luz arriba, como un icono de app */
.nav-brand__mark {
    border-radius: 10px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, .10) 100%);
    box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .34), 0 1px 2px rgba(0, 0, 0, .25);
}
.nav-brand__name { font-size: 14px; font-weight: 600; letter-spacing: -.012em; }
.nav-brand__workshop { font-size: 9px; letter-spacing: .14em; color: rgba(255, 255, 255, .62); }

/* ---------- Enlaces ---------- */
.nav-item {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -.006em;
    padding: 8px 10px;                       /* sin el hueco inferior que reservaba el subrayado */
    border-radius: 10px;
    transition: color .22s var(--apple-ease), background-color .22s var(--apple-ease), transform .16s var(--apple-ease);
}
.nav-item:active { transform: scale(.96); }  /* responde al pulsar, no al soltar */

/* Sección activa: pastilla de cristal en lugar de subrayado; el color del área queda en el icono */
.nav-item--active {
    background: rgba(255, 255, 255, .17);
    box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .24), 0 1px 2px rgba(0, 0, 0, .12);
}
.nav-item--active::after { display: none; }
.nav-item--active i { color: var(--nav-accent); }

/* La pastilla que sigue al puntero se desliza con la misma curva */
#nav-bubble {
    background: rgba(255, 255, 255, .13);
    border-radius: 10px;
    transition-timing-function: var(--apple-ease);
    transition-duration: .38s;
}

.nav-item__caret { transition: transform .3s var(--apple-ease); }

/* ---------- Desplegables: material que sale de su botón ---------- */
.nav-dropdown__menu {
    min-width: 214px;
    padding: 6px;
    border-radius: 16px;
    background: rgba(16, 48, 112, .90);
    -webkit-backdrop-filter: saturate(180%) blur(28px);
    backdrop-filter: saturate(180%) blur(28px);
    border: .5px solid rgba(255, 255, 255, .2);
    box-shadow: 0 0 0 .5px rgba(0, 0, 0, .25), 0 10px 24px rgba(2, 10, 30, .25), 0 30px 70px -10px rgba(2, 10, 30, .55);
    transform-origin: top left;              /* nace en el botón que lo abre */
}
.nav-dropdown__menu:not(.hidden) { animation: nav-material-in .28s var(--apple-ease) both; }
@keyframes nav-material-in {
    from { opacity: 0; transform: scale(.94) translateY(-6px); filter: blur(5px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}

.nav-dropdown__item {
    padding: 9px 10px;
    border-radius: 10px;
    font-size: 13px;
    letter-spacing: -.006em;
    transition: background-color .16s var(--apple-ease), color .16s var(--apple-ease);
}
.nav-dropdown__item:hover { background: rgba(255, 255, 255, .15); }
.nav-dropdown__item:active { background: rgba(255, 255, 255, .22); }
.nav-dropdown__item--active { background: rgba(255, 255, 255, .19); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .22); }

/* Separadores finos, de pelo */
.nav-divider { width: .5px; background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .34), rgba(255, 255, 255, 0)); }

/* ---------- Zona derecha: usuario, panel global y selector de taller ---------- */
.nav-user__avatar {
    background: linear-gradient(160deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, .10));
    box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .34), 0 1px 2px rgba(0, 0, 0, .2);
}
.nav-user__name { font-weight: 600; letter-spacing: -.01em; }
.nav-super { border-radius: 999px; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .28); transition: background-color .2s var(--apple-ease), transform .16s var(--apple-ease); }
.nav-super:active { transform: scale(.96); }
.nav-switch { border-radius: 10px; background-color: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3); }

/* ---------- Menú móvil: la misma hoja de cristal ---------- */
.nav-mobile {
    background: rgba(8, 30, 72, .88);
    -webkit-backdrop-filter: saturate(180%) blur(26px);
    backdrop-filter: saturate(180%) blur(26px);
}
@media (min-width: 640px) {
    .nav-mobile { border-radius: 18px; border: .5px solid rgba(255, 255, 255, .2); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .25), 0 30px 70px -10px rgba(2, 10, 30, .55); }
}
.nav-mobile:not(.hidden) { animation: nav-material-in .3s var(--apple-ease) both; transform-origin: top left; }

/* Hoja flotante también en el móvil: separada de los bordes, con esquinas redondeadas y su sombra */
@media (max-width: 639.98px) {
    .nav-mobile {
        margin: 6px 10px 10px;
        border-radius: 20px;
        border: .5px solid rgba(255, 255, 255, .2);
        box-shadow: 0 0 0 .5px rgba(0, 0, 0, .25), 0 24px 56px -10px rgba(2, 10, 30, .55);
        max-height: calc(100vh - 100px);
        max-height: calc(100dvh - 100px);
    }
}
.nav-mobile-item {
    border-radius: 13px;
    letter-spacing: -.008em;
    transition: background-color .18s var(--apple-ease), color .18s var(--apple-ease), transform .16s var(--apple-ease);
}
.nav-mobile-item:active { transform: scale(.98); background: rgba(255, 255, 255, .12); }
.nav-mobile-item__icon { border-radius: 10px; }
/* Activo: pastilla de cristal, sin la barra lateral; el color del área queda en la baldosa del icono */
.nav-mobile-item--active { background: rgba(255, 255, 255, .17); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .24); }
.nav-mobile-item--active .nav-mobile-item__icon { box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .35); }
.nav-mobile__rule { height: .5px; background: rgba(255, 255, 255, .2); }
.nav-mobile__sub-items { border-left-width: .5px; }

/* Velo del menú móvil: atenúa la página para que tocar fuera, que lo cierra, se entienda. Va justo debajo de la barra. */
.nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 99;                              /* la barra es 100: el velo queda por encima de todo lo demás */
    background: rgba(8, 18, 40, .34);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s var(--apple-ease), visibility 0s linear .28s;
}
.nav-scrim.visible { opacity: 1; visibility: visible; transition-delay: 0s; }

/* ---------- Alternativas: menos transparencia, más contraste, menos movimiento ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-nav { background: #0b2559; }
    .nav-dropdown__menu { background: #0e2f6e; }
    .nav-mobile { background: #081e48; }
}
@media (prefers-reduced-transparency: reduce) {
    .nav-scrim { -webkit-backdrop-filter: none; backdrop-filter: none; }
    .site-nav { background: #0b2559; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .nav-dropdown__menu { background: #0e2f6e; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .nav-mobile { background: #081e48; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
    .site-nav { background: #0b2559; border-bottom: 1px solid #fff; }
    .nav-dropdown__menu, .nav-mobile { background: #0b2559; border: 1px solid #fff; }
    .nav-item--active { outline: 1px solid #fff; }
}
@media (prefers-reduced-motion: reduce) {
    .nav-dropdown__menu:not(.hidden), .nav-mobile:not(.hidden) { animation: nav-fundido .15s ease both; }
    #nav-bubble, .nav-item, .nav-item__caret, .nav-scrim { transition-duration: .01ms; }
    .nav-item:active, .nav-super:active, .nav-mobile-item:active { transform: none; }
}
@keyframes nav-fundido { from { opacity: 0; } to { opacity: 1; } }      /* sin deslizar ni desenfocar: solo aparece */