/*
 * glass-tabbar — traducción del CSS module de Arc (registry/components/glass-tabbar/glass-tabbar.module.css).
 * Mismas variables, mismos valores. Una cápsula de cristal translúcido: tinte claro sobre un fondo
 * desenfocado y saturado, un borde especular iluminado desde arriba, un brillo interior que le da grosor y
 * una sombra que la levanta del contenido. La pestaña elegida va bajo una lente que se convierte en cristal
 * transparente mientras viaja. Solo las capas de material usan backdrop-filter.
 */
.aui-glass-tabbar {
    --glass-tint: oklab(99% 0 0 / .56);
    --glass-filter: blur(18px) saturate(1.8) brightness(1.04);
    --glass-rim: oklab(100% 0 0 / .95);
    --glass-rim-soft: oklab(100% 0 0 / .5);
    --glass-glow: oklab(100% 0 0 / .32);
    --glass-edge: oklab(0% 0 0 / .07);
    --glass-shadow: 0 10px 30px -10px oklab(0% 0 0 / .3), 0 2px 8px -2px oklab(0% 0 0 / .1);
    --glass-ink: oklab(20% 0 0 / .88);
    --glass-active: var(--accent);
    --lens-fill: oklab(0% 0 0 / .07);
    --lens-edge: oklab(100% 0 0 / .45);
    --lens-glass: oklab(100% 0 0 / .42);
    --lens-shadow: 0 6px 18px -6px oklab(0% 0 0 / .28);
    /* Las medidas de Arc: SLOT_MAX 78, SLOT_MIN 56, SLOT_COMPACT 48, HEIGHT 62, HEIGHT_COMPACT 48, PAD 4, GAP 10. */
    --gtb-slot: 78px;
    --gtb-alto: 62px;
    --gtb-pad: 4px;
    display: flex;
    justify-content: center;
    font-family: var(--font-body);
    letter-spacing: var(--tracking-body);
    pointer-events: none;
}
/* Acento neutro (el de Arc por defecto y el que eligió Alex): la pestaña activa usa la tinta del texto. */
:root:not([data-accent]) .aui-glass-tabbar,
:root[data-accent="neutral"] .aui-glass-tabbar { --glass-active: var(--foreground); }
:root[data-theme="dark"] .aui-glass-tabbar {
    --glass-tint: oklab(21% 0 0 / .58);
    --glass-filter: blur(18px) saturate(1.6) brightness(.86);
    --glass-rim: oklab(100% 0 0 / .36);
    --glass-rim-soft: oklab(100% 0 0 / .14);
    --glass-glow: oklab(100% 0 0 / .05);
    --glass-edge: oklab(100% 0 0 / .07);
    --glass-shadow: 0 12px 32px -10px oklab(0% 0 0 / .65), 0 2px 8px -2px oklab(0% 0 0 / .4);
    --glass-ink: oklab(97% 0 0 / .86);
    --lens-fill: oklab(100% 0 0 / .13);
    --lens-edge: oklab(100% 0 0 / .1);
    --lens-glass: oklab(100% 0 0 / .14);
    --lens-shadow: 0 6px 18px -6px oklab(0% 0 0 / .6);
}

/* La lista que inyecta el JS en modo enlaces: nada de viñetas, márgenes ni sangrías del tema. */
.aui-glass-tabbar-list,
.aui-glass-tabbar-list > li {
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: none !important;
    gap: 0 !important;
}
.aui-glass-tabbar-list::before, .aui-glass-tabbar-list::after,
.aui-glass-tabbar-list > li::before, .aui-glass-tabbar-list > li::after { content: none !important; }

.aui-glass-tabbar-group {
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: auto;
}

.aui-glass-tabbar-bar {
    position: relative;
    display: flex;
    gap: 0 !important;
    height: var(--gtb-alto);
    padding: 0 var(--gtb-pad);
    border-radius: var(--radius-pill);
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: height var(--duration-considered) var(--ease-standard);
}

/* El material: tinte y fondo en una capa, la luz que recoge en sombras, el anillo especular encima. */
.aui-glass-tabbar-material {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--glass-tint);
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    box-shadow:
        0 0 0 .5px var(--glass-edge),
        inset 0 1px .5px -.5px var(--glass-rim),
        inset 0 -1px .5px -.5px var(--glass-rim-soft),
        inset 0 0 16px var(--glass-glow),
        var(--glass-shadow);
    pointer-events: none;
}

/* El borde especular: una línea de pelo, más brillante arriba a la izquierda, por donde entra la luz. */
.aui-glass-tabbar-material::after,
.aui-glass-tabbar-lens::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(160deg, var(--glass-rim), oklab(100% 0 0 / .08) 30%, oklab(100% 0 0 / 0) 55%, oklab(100% 0 0 / .06) 78%, var(--glass-rim-soft));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
}

/* La lente: un relleno suave bajo la pestaña elegida cuando está quieta. Mientras viaja o la sujetan,
   aparece una capa de cristal transparente con su propio borde y su sombra, así que se lee como una gota
   de cristal que se desliza. El desplazamiento va en --gtb-x (lo pone el JS). */
.aui-glass-tabbar-lens {
    position: absolute;
    top: var(--gtb-pad);
    left: 0;
    width: var(--gtb-slot);
    height: calc(var(--gtb-alto) - var(--gtb-pad) * 2);
    border-radius: var(--radius-pill);
    background: var(--lens-fill);
    box-shadow: inset 0 0 0 .5px var(--lens-edge);
    /* Posición, escala y opacidad las escribe el componente en cada cuadro (muelle `morph` y la
       velocidad del viaje): aquí NO hay transición, o pelearía con el muelle y lo frenaría. */
    transform: translateX(var(--gtb-x, 0px)) scale(var(--gtb-sx, 1), var(--gtb-sy, 1));
    opacity: var(--gtb-presencia, 1);
    pointer-events: none;
    will-change: transform;
}
.aui-glass-tabbar-lens[hidden] { display: block; opacity: 0; }
.aui-glass-tabbar-lens::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--lens-glass);
    box-shadow:
        inset 0 1px .5px -.5px var(--glass-rim),
        inset 0 0 10px var(--glass-glow),
        var(--lens-shadow);
    opacity: 0;
}
/* El cristal claro entra con el levantamiento, que el componente calcula con la velocidad del
   viaje y su propio muelle (rigidez 420). Es el --lift de Arc, con el mismo nombre de idea. */
.aui-glass-tabbar-lens::before { opacity: var(--gtb-lift, 0); }
.aui-glass-tabbar-lens::after { opacity: var(--gtb-lift, 0); }

/* Los paneles de Aiden traen CSS agresivo por id («#menu a { padding: 8px }»), que gana por
   especificidad y descuadra la geometría: la lente se calcula con el ancho de pestaña y se quedaba
   corta 16 px por pestaña (lo cazó el banco el 4-oct). Se protege lo imprescindible, nada más. */
.aui-glass-tabbar-item {
    position: relative;
    z-index: 1;
    display: grid;
    flex: none;
    box-sizing: border-box !important;
    width: var(--gtb-slot) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--gtb-alto) !important;
    place-items: center;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--radius-pill);
    background: none !important;
    color: var(--glass-ink);
    font: inherit;
    line-height: normal;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        color var(--duration-standard) var(--ease-standard),
        width var(--duration-considered) var(--ease-standard),
        height var(--duration-considered) var(--ease-standard);
}
/* El tinte NO salta al elegir: cruza con el paso de la lente. --gtb-cerca va de 0 a 1 según lo
   cerca que pase, igual que el `near` de Arc, así que el acento viaja con ella. */
.aui-glass-tabbar-item {
    color: color-mix(in oklab, var(--glass-active) calc(var(--gtb-cerca, 0) * 100%), var(--glass-ink));
}

.aui-glass-tabbar-icon {
    position: relative;
    display: grid;
    place-items: center;
    /* Lo sube el componente desde el progreso del encogido, y lo agranda la lente al pasar: las
       dos cosas salen de variables escritas cuadro a cuadro, sin transición que las frene. */
    transform: translateY(var(--gtb-icono-y, -8px));
    scale: var(--gtb-lupa, 1);
    transform-origin: 50% 60%;
    transition: scale var(--duration-fast) var(--ease-standard);
}
.aui-glass-tabbar-icon svg { width: 22px; height: 22px; }
.aui-glass-tabbar-item:active .aui-glass-tabbar-icon { scale: calc(var(--gtb-lupa, 1) * .9); }

.aui-glass-tabbar-label {
    position: absolute;
    bottom: 7px;
    left: 2px;
    right: 2px;
    overflow: hidden;
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform-origin: 50% 0;
    pointer-events: none;
    opacity: var(--gtb-etiqueta-o, 1);
    transform: translateY(var(--gtb-etiqueta-y, 0px)) scale(var(--gtb-etiqueta-s, 1));
}

.aui-glass-tabbar-badge {
    position: absolute;
    top: -5px;
    left: calc(100% - 8px);
    min-width: 16px;
    height: 16px;
    padding-inline: 4px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--accent-foreground);
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0;
    text-align: center;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 1.5px var(--glass-tint);
}

.aui-glass-tabbar-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Compacta: al bajar por la página la barra se encoge a una cápsula de iconos. Una sola medida
   (--gtb-slot y --gtb-alto, que cambia el JS) mueve ancho, alto, lente, iconos y etiquetas a la vez. */
/* El estado encogido NO se fija aquí: lo escribe el progreso del muelle cuadro a cuadro. Si se
   fijara, pisaría al muelle justo al final y daría el salto que se trataba de evitar. */

/* La acción: el mismo cristal, redondo, con su lente que crece al ser la pestaña elegida. */
.aui-glass-tabbar-bubble {
    position: relative;
    flex: none;
    width: var(--gtb-alto);
    height: var(--gtb-alto);
    border-radius: var(--radius-pill);
    transition: width var(--duration-considered) var(--ease-standard), height var(--duration-considered) var(--ease-standard);
}
.aui-glass-tabbar-bubble-lens {
    position: absolute;
    inset: 4px;
    border-radius: inherit;
    background: var(--lens-fill);
    box-shadow: inset 0 0 0 .5px var(--lens-edge);
    opacity: 0;
    scale: .6;
    transition: opacity var(--duration-fast) var(--ease-standard), scale var(--duration-spring) var(--ease-spring);
    pointer-events: none;
}
.aui-glass-tabbar-bubble[data-active] .aui-glass-tabbar-bubble-lens { opacity: 1; scale: 1; }
.aui-glass-tabbar-bubble-button {
    position: relative;
    display: grid;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    place-items: center;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: inherit;
    background: none;
    color: var(--glass-ink);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--duration-standard) var(--ease-standard);
}
.aui-glass-tabbar-bubble[data-active] .aui-glass-tabbar-bubble-button { color: var(--glass-active); }
.aui-glass-tabbar-bubble-icon { display: grid; place-items: center; transition: scale var(--duration-fast) var(--ease-standard); }
.aui-glass-tabbar-bubble-icon svg { width: 22px; height: 22px; }
.aui-glass-tabbar-bubble-button:active .aui-glass-tabbar-bubble-icon { scale: .9; }

@media (prefers-reduced-motion: reduce) {
    .aui-glass-tabbar-bar,
    .aui-glass-tabbar-lens,
    .aui-glass-tabbar-item,
    .aui-glass-tabbar-icon,
    .aui-glass-tabbar-label,
    .aui-glass-tabbar-bubble,
    .aui-glass-tabbar-bubble-button,
    .aui-glass-tabbar-bubble-icon { transition: none; }
    .aui-glass-tabbar-lens { transition: opacity var(--duration-fast) linear; }
    .aui-glass-tabbar-lens[data-mueve]::before,
    .aui-glass-tabbar-lens[data-mueve]::after,
    .aui-glass-tabbar-item[data-active] .aui-glass-tabbar-icon { animation: none; }
    .aui-glass-tabbar-item:active .aui-glass-tabbar-icon,
    .aui-glass-tabbar-bubble-button:active .aui-glass-tabbar-bubble-icon { scale: 1; }
    .aui-glass-tabbar-bubble-lens { scale: 1; transition: opacity var(--duration-fast) linear; }
}

@media (prefers-reduced-transparency: reduce) {
    .aui-glass-tabbar .aui-glass-tabbar-material {
        background: var(--surface-raised, var(--surface));
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: inset 0 0 0 1px var(--border), var(--glass-shadow);
    }
    .aui-glass-tabbar-material::after,
    .aui-glass-tabbar-lens::before,
    .aui-glass-tabbar-lens::after { display: none; }
    .aui-glass-tabbar { --lens-fill: var(--surface-muted); --lens-edge: var(--border); }
}

@media (prefers-contrast: more) {
    .aui-glass-tabbar { --glass-ink: var(--foreground); --lens-edge: var(--border-strong); }
    .aui-glass-tabbar .aui-glass-tabbar-material {
        background: color-mix(in oklab, var(--surface) 94%, transparent);
        box-shadow: inset 0 0 0 1px var(--border-strong), var(--glass-shadow);
    }
}