/*
 * El menú de abajo en móvil pasa al glass-tabbar de Arc (Alex, 4-oct-2026), el mismo de Startup y
 * Dashboard. Esta hoja hace dos cosas y nada más:
 *   1. Da al componente las variables de Arc que necesita, SOLO dentro de la barra (no se carga
 *      foundation.css: repintaría el panel entero y lo que se pidió es cambiar el menú). Los valores
 *      son los de direccion/diseno/kit/foundation.css.
 *   2. Apaga el aspecto de la barra de siempre (la franja de abajo con su borde, la rejilla de cinco
 *      columnas, el verde de la activa y el punto de aviso, que ahora es el badge del componente).
 *      Las reglas de ui2-app.css van por «.u2app .barra-item», que gana a las del componente por
 *      especificidad, así que aquí van por id y con !important.
 * Lo que NO toca: los botones siguen siendo los mismos, con su data-action, y el clic lo resuelve la
 * delegación de ui2-app.js. Sin el componente (no carga, o falta motion.js) nada de esto aplica: la
 * barra no lleva .aui-glass-tabbar y se ve la de siempre.
 */
#barraMovil.aui-glass-tabbar {
    --background: oklch(100% 0 0);
    --surface: oklch(100% 0 0);
    --surface-raised: oklch(100% 0 0);
    --surface-muted: oklch(97.8% 0 0);
    --foreground: oklch(15% 0 0);
    --border: oklch(93.5% 0 0);
    --border-strong: oklch(82% 0 0);
    --accent: oklch(33% 0 0);
    --accent-foreground: oklch(100% 0 0);
    --font-body: 'Inter', 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --tracking-body: -.01em;
    font-family: var(--font-body);
    --text-xs: .75rem;
    --radius-pill: 9999px;
    --duration-fast: 160ms;
    --duration-standard: 240ms;
    --duration-considered: 480ms;
    --duration-spring: 580ms;
    --ease-standard: cubic-bezier(.22,1,.36,1);
    --ease-spring: linear(0, 0.0258, 0.09, 0.1763, 0.2732, 0.3724, 0.4683, 0.5573, 0.6376, 0.7082, 0.7689, 0.8202, 0.8628, 0.8976, 0.9256, 0.9476, 0.9648, 0.9778, 0.9875, 0.9945, 0.9994, 1.0026, 1.0047, 1.0058, 1.0062, 1.0062, 1.0059, 1.0055, 1.0049, 1.0043, 1.0036, 1.0031, 1.0025, 1.002, 1.0016, 1.0013, 1);
}
/* Oscuro. El kit lo lee de data-theme="dark" en <html>; el panel de la cuenta lo lleva en
   .u2app[data-ui-theme], o el del sistema si el cliente lo tiene en automático. */
.u2app[data-ui-theme="dark"] #barraMovil.aui-glass-tabbar {
    --background: oklch(19% 0 0);
    --surface: oklch(21.5% 0 0);
    --surface-raised: oklch(24% 0 0);
    --surface-muted: oklch(26% 0 0);
    --foreground: oklch(96% 0 0);
    --border: oklch(29% 0 0);
    --border-strong: oklch(40% 0 0);
    --accent: oklch(80% 0 0);
    --accent-foreground: oklch(19% 0 0);
    --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);
}
@media (prefers-color-scheme: dark) {
    .u2app:not([data-ui-theme="light"]) #barraMovil.aui-glass-tabbar {
        --background: oklch(19% 0 0);
        --surface: oklch(21.5% 0 0);
        --surface-raised: oklch(24% 0 0);
        --surface-muted: oklch(26% 0 0);
        --foreground: oklch(96% 0 0);
        --border: oklch(29% 0 0);
        --border-strong: oklch(40% 0 0);
        --accent: oklch(80% 0 0);
        --accent-foreground: oklch(19% 0 0);
        --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);
    }
}

@media (max-width: 820px) {
    /* La barra deja de ser la franja de antes: el cristal lo pone el componente, en su cápsula. */
    .u2app #barraMovil.aui-glass-tabbar {
        display: flex !important;
        grid-template-columns: none !important;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 16px !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 0 env(safe-area-inset-bottom, 0px) !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
        overflow: visible !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: 46 !important;
    }

    /* Los botones adoptados: el componente les pone su caja; aquí se quita lo de la barra de
       siempre (columna, hueco, relleno, letra de 11 px y el verde de la activa). */
    .u2app #barraMovil.aui-glass-tabbar .barra-item {
        display: grid !important;
        flex: none !important;
        flex-direction: unset !important;
        gap: 0 !important;
        padding: 0 !important;
        border-radius: var(--radius-pill) !important;
        background: none !important;
        font-size: inherit !important;
        line-height: normal !important;
        transition: color var(--duration-standard) var(--ease-standard) !important;
    }
    .u2app #barraMovil.aui-glass-tabbar .aui-glass-tabbar-bubble-button.barra-item { border-radius: inherit !important; }
    /* El icono: 22 px de Lucide, como lo sirve Arc. La caja de 22 px de alto de la barra de siempre
       se suelta para que el componente lo suba y lo agrande. */
    .u2app #barraMovil.aui-glass-tabbar .barra-ico {
        display: grid !important;
        height: auto !important;
    }
    .u2app #barraMovil.aui-glass-tabbar .barra-ico svg {
        width: 22px !important;
        height: 22px !important;
        stroke: currentColor !important;
        fill: none !important;
    }
    /* El punto de aviso de la barra de siempre: ahora avisa el badge del componente. */
    .u2app #barraMovil.aui-glass-tabbar .barra-punto { display: none !important; }
    /* La etiqueta, con las medidas de Arc: 12 px, peso medio, interlineado 16. */
    .u2app #barraMovil.aui-glass-tabbar .aui-glass-tabbar-item .barra-txt {
        max-width: none !important;
        font-family: var(--font-body) !important;
        font-size: var(--text-xs) !important;
        font-weight: 500 !important;
        line-height: 16px !important;
        letter-spacing: 0 !important;
    }
    /* Color: el acento de Arc es neutro. Fuera el verde de la activa. El tinte que cruza con la
       lente (--gtb-cerca) lo pone el componente; aquí solo se le devuelve la prioridad. */
    .u2app #barraMovil.aui-glass-tabbar .aui-glass-tabbar-item {
        color: color-mix(in oklab, var(--glass-active) calc(var(--gtb-cerca, 0) * 100%), var(--glass-ink)) !important;
    }
    .u2app #barraMovil.aui-glass-tabbar .aui-glass-tabbar-bubble-button { color: var(--glass-ink) !important; }
    .u2app #barraMovil.aui-glass-tabbar .aui-glass-tabbar-bubble[data-active] .aui-glass-tabbar-bubble-button { color: var(--glass-active) !important; }

    /* Sitio para la barra flotante: la de antes pedía 96 px; esta flota 16 px más arriba. */
    .u2app .shell { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* En escritorio no sale: allí está el menú lateral. */
@media (min-width: 821px) {
    .u2app #barraMovil.aui-glass-tabbar { display: none !important; }
}