/*
 * Dock estilo macOS para el menú lateral plegado.
 *
 * Solo actúa cuando se dan las tres condiciones a la vez:
 *   - escritorio (>= 1024px): por debajo el menú se abre entero sobre el contenido
 *   - menú en modo iconos: el <div id="fi-main-sidebar"> pierde .fi-sidebar-open
 *   - el usuario no ha pedido reducir el movimiento
 *
 * La ampliación al pasar el puntero la calcula public/js/filament-dock.js,
 * que escribe --fi-dock-s (1 = reposo) en cada botón. Aquí solo se define
 * cómo se pinta. Si el JS no carga, el menú se ve como un dock quieto y
 * sigue funcionando.
 *
 * El nombre del módulo lo pinta .fi-dock-plate, al final del fichero: un
 * rótulo pegado al azulejo, no el tooltip flotante que Filament monta de
 * serie (el JS apaga esa instancia mientras el menú está plegado).
 */

@media (min-width: 1024px) {
    #fi-main-sidebar:not(.fi-sidebar-open) {
        /*
         * Geometría del dock. El icono ampliado sobresale de la barra hacia
         * el contenido, así que el hueco de la derecha del menú tiene que
         * dar para la mitad de lo que crece más el salto. Si se toca la
         * ampliación de PASOS en el JS hay que rehacer esa cuenta o el icono
         * saldrá cortado: .fi-sidebar-nav recorta en horizontal.
         */
        --fi-dock-size: 2.75rem;
        --fi-dock-max: 1.34;
        --fi-dock-bar: 3.75rem;

        /* Salida de la ampliación. La cifra y la curva salen del dock de
           frontend.fyi: corta y con desaceleración fuerte, para que el
           cambio se note pero no dé tirones. */
        --fi-dock-ease: cubic-bezier(0.25, 1, 0.5, 1);
        --fi-dock-speed: 160ms;

        /* Color de un icono sin módulo en config/admin_modules.php (el
           escritorio, los catálogos, los roles). Los demás lo reciben por
           URL desde la vista filament.partials.dock. */
        --fi-dock-tint: var(--gray-500);

        /* La barra usa la superficie y el anillo de las tarjetas de
           Filament, no un cristal de macOS: el panel no tiene fondo de
           escritorio detrás y el cristal desentonaba. */
        --fi-dock-surface: var(--color-white);
        --fi-dock-ring: color-mix(in srgb, var(--gray-950) 5%, transparent);
        --fi-dock-glass-shadow: rgb(0 0 0 / 0.14);

        width: 6.25rem;
    }

    .dark #fi-main-sidebar:not(.fi-sidebar-open) {
        --fi-dock-surface: var(--gray-900);
        --fi-dock-ring: color-mix(in srgb, var(--color-white) 10%, transparent);
        --fi-dock-glass-shadow: rgb(0 0 0 / 0.45);
    }

    /*
     * La barra va en un pseudoelemento del menú y no en el contenedor de
     * navegación: ese es el que hace el scroll y recorta en horizontal, y
     * entonces el icono no podría salirse de ella al ampliarse, que es justo
     * la gracia.
     */
    #fi-main-sidebar:not(.fi-sidebar-open)::before {
        content: '';
        position: absolute;
        inset-block: 0.5rem;
        inset-inline-start: 0.5rem;
        width: var(--fi-dock-bar);
        border-radius: 0.75rem;
        background-color: var(--fi-dock-surface);
        box-shadow:
            0 0 0 1px var(--fi-dock-ring),
            0 1px 3px -1px var(--fi-dock-glass-shadow);
        pointer-events: none;
        transition: width var(--fi-dock-speed) var(--fi-dock-ease);
    }

    /*
     * Con el puntero dentro, la barra se ensancha para seguir conteniendo al
     * icono ampliado: crece 7,5 por lado y salta otros 8 hacia el contenido,
     * así que su borde derecho llega a 75,5 y la barra en reposo termina en
     * 68. Sin esto, el icono se sale de la tarjeta y parece un fallo.
     */
    #fi-main-sidebar:not(.fi-sidebar-open).fi-dock-hover::before {
        width: 4.5rem;
    }

    #fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav {
        /* Sin relleno lateral: los iconos se colocan con su propio margen
           para caer centrados sobre la barra, y el resto del ancho queda
           libre para que el icono ampliado salga hacia el contenido. */
        padding: 0.875rem 0;

        /* 16px entre iconos. Hacen falta 11,5 para que el ampliado (2,75rem
           × 1,34 = 59px, 7,5 más por lado) no llegue a tocar al vecino, que
           crece 4 por su lado; así ninguno tiene que apartarse y el dock
           deja de moverse entero al pasar el ratón. Los 4,5 de sobra son
           para que respire. */
        row-gap: 1rem;
        background: transparent;
        scrollbar-gutter: auto;
        scrollbar-width: none;
        overscroll-behavior: contain;
    }

    #fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav::-webkit-scrollbar {
        display: none;
    }

    /* Separadores entre grupos, como las secciones del dock de macOS.
       Los rótulos de grupo ya los oculta Filament al plegar el menú. */
    #fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav-groups {
        margin-inline: 0;
        row-gap: 0.75rem;
    }

    /* La raya va del ancho del icono, no del menú: si no, se saldría de la
       barra de cristal. */
    #fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-group + .fi-sidebar-group {
        position: relative;
        padding-top: 0.75rem;
    }

    #fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-group + .fi-sidebar-group::before {
        content: '';
        position: absolute;
        top: 0.3125rem;
        inset-inline-start: 1.25rem;
        width: 2rem;
        height: 1px;
        background-color: color-mix(in srgb, var(--gray-500) 35%, transparent);
    }

    #fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-items {
        row-gap: 1rem;
    }

    /*
     * El icono. Mismo tratamiento que el del cuadro de su módulo en el
     * escritorio: cuadrado con el color al 10% y el glifo del color entero.
     * Sin degradados ni sombras propias, que es lo que desentonaba con el
     * resto del panel.
     *
     * Los selectores llevan el id del menú a propósito: así ganan a las
     * reglas hover/activo que Filament trae para los items del menú, sin
     * recurrir a !important.
     */
    #fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn {
        width: var(--fi-dock-size);
        height: var(--fi-dock-size);

        /* Centrado sobre la barra: margen (8) + medio hueco de la barra (30)
           menos medio icono (22). El resto del ancho del menú queda libre
           para el salto hacia el contenido. */
        margin-inline: 1rem auto;
        padding: 0;
        border-radius: 0.625rem;
        background-color: color-mix(in srgb, var(--fi-dock-tint) 10%, transparent);
        box-shadow: none;

        /*
         * Crecen desde su centro: con el origen en un lado, la mitad que
         * crece se saldría del menú y la recortaría el overflow.
         *
         * --fi-dock-x es el salto hacia el contenido, como el icono que se
         * levanta del dock. Va antes de la escala para que mueva el centro
         * y no el centro ya escalado.
         */
        transform: translateX(var(--fi-dock-x, 0px)) scale(var(--fi-dock-s, 1));
        transform-origin: center;
        z-index: calc(var(--fi-dock-s, 1) * 100);

        /* La transición no se quita mientras el puntero recorre el dock: es
           justo lo que amortigua el salto de un escalón al siguiente. */
        transition:
            background-color var(--fi-dock-speed) var(--fi-dock-ease),
            transform var(--fi-dock-speed) var(--fi-dock-ease);
        will-change: transform;
    }

    #fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn:hover,
    #fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn:focus-visible,
    #fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
        background-color: color-mix(in srgb, var(--fi-dock-tint) 18%, transparent);
    }

    #fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-icon,
    #fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-icon {
        width: 1.5rem;
        height: 1.5rem;
        color: var(--fi-dock-tint);
    }

    .dark #fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn {
        background-color: color-mix(in srgb, var(--fi-dock-tint) 22%, transparent);
    }

    .dark #fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn:hover,
    .dark #fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn:focus-visible,
    .dark #fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
        background-color: color-mix(in srgb, var(--fi-dock-tint) 34%, transparent);
    }

    .dark #fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-icon,
    .dark #fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-icon {
        color: color-mix(in srgb, var(--fi-dock-tint) 35%, var(--color-white));
    }

    /* Punto de "aplicación abierta" junto al módulo abierto, dentro de la
       barra. Se le quita la escala del icono para que no engorde con él. */
    #fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
        content: '';
        position: absolute;
        inset-inline-start: -0.375rem;
        top: 50%;
        width: 0.25rem;
        height: 0.25rem;
        border-radius: 9999px;
        background-color: color-mix(in srgb, var(--fi-dock-tint) 70%, var(--gray-950));
        transform: translateY(-50%) scale(calc(1 / var(--fi-dock-s, 1)));
    }

    .dark #fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
        background-color: rgb(255 255 255 / 0.75);
    }

    /* Rebote al abrir el módulo, como cuando se lanza una app. La clase la
       pone el JS al hacer clic y se va sola con la propia navegación. */
    @keyframes fi-dock-bounce {
        0%,
        100% {
            translate: 0 0;
        }
        35% {
            translate: 0 -0.3rem;
        }
        70% {
            translate: 0 0.05rem;
        }
    }

    #fi-main-sidebar:not(.fi-sidebar-open) .fi-dock-launch .fi-sidebar-item-icon {
        animation: fi-dock-bounce 450ms ease-out;
    }

    /* El botón de desplegar el menú también se integra en el cristal. */
    #fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-header {
        justify-content: center;
    }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
    #fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn {
        transform: none;
        transition: background-color 75ms;
    }

    #fi-main-sidebar:not(.fi-sidebar-open) .fi-dock-launch .fi-sidebar-item-icon {
        animation: none;
    }
}

/*
 * Rótulo con el nombre del módulo: el globo oscuro con pico del dock de
 * macOS, apuntando al icono. Como el dock es vertical, sale a la derecha y
 * el pico mira a la izquierda.
 *
 * Sustituye al tooltip de Filament mientras el menú está plegado (lo apaga
 * public/js/filament-dock.js). Vive en <body> y va posicionado a mano: dentro
 * del menú lo recortaría el overflow horizontal de la navegación.
 *
 * Fuera del @media a propósito: el JS solo lo crea cuando el dock está
 * activo, y así la placa no depende de un ancho concreto de ventana.
 */
.fi-dock-plate {
    --fi-dock-plate-bg: rgb(28 28 30 / 0.82);

    position: fixed;
    z-index: 40;
    display: flex;
    align-items: center;
    height: 1.875rem;
    padding: 0 0.6875rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    color: rgb(255 255 255 / 0.92);
    background-color: var(--fi-dock-plate-bg);
    box-shadow: 0 6px 18px -8px rgb(0 0 0 / 0.6);

    /* Se ancla por su borde izquierdo y su centro vertical, que es lo que
       calcula el JS a partir de la caja del icono ya ampliado. */
    transform: translateY(-50%) translateX(-0.25rem);
    transform-origin: left center;

    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease-out, transform 120ms ease-out;
}

/* El pico. Es un triángulo de bordes, como el ::after del dock original. */
.fi-dock-plate::before {
    content: '';
    position: absolute;
    inset-inline-start: -0.3125rem;
    top: 50%;
    width: 0;
    height: 0;
    transform: translateY(-50%);
    border-block: 5px solid transparent;
    border-inline-end: 5px solid var(--fi-dock-plate-bg);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .fi-dock-plate {
        --fi-dock-plate-bg: rgb(28 28 30 / 0.68);

        -webkit-backdrop-filter: blur(13px);
        backdrop-filter: blur(13px);
    }
}

.fi-dock-plate.fi-dock-plate-visible {
    opacity: 1;
    transform: translateY(-50%);
}

@media (prefers-reduced-motion: reduce) {
    .fi-dock-plate {
        transition: none;
    }
}

/*
 * Menú desplegado: el mismo azulejo tintado que el dock.
 *
 * Plegado, cada módulo es un azulejo de color; desplegado eran iconos grises
 * sueltos con el rótulo al lado, así que abrir y cerrar el menú parecía cambiar
 * de panel. Aquí se reutiliza --fi-dock-tint —que la vista
 * filament.partials.dock asigna por URL desde config/admin_modules.php, la
 * misma fuente que colorea las tarjetas del escritorio— para que un módulo se
 * vea igual en los tres sitios.
 *
 * Va fuera del @media del dock: el azulejo no depende del ancho, solo la
 * ampliación al pasar el puntero.
 */
#fi-main-sidebar.fi-sidebar-open {
    /* Los que no salen en admin_modules (escritorio, catálogos, roles). */
    --fi-dock-tint: var(--gray-500);
}

#fi-main-sidebar.fi-sidebar-open .fi-sidebar-item-icon {
    color: var(--fi-dock-tint);
    background-color: color-mix(in srgb, var(--fi-dock-tint) 10%, transparent);
    border-radius: 0.5rem;
    /* content-box: el padding agranda el azulejo sin encoger el icono. */
    box-sizing: content-box;
    padding: 0.375rem;
    transition: background-color 120ms ease;
}

#fi-main-sidebar.fi-sidebar-open .fi-sidebar-item-btn:hover .fi-sidebar-item-icon,
#fi-main-sidebar.fi-sidebar-open .fi-sidebar-item-btn:focus-visible .fi-sidebar-item-icon,
#fi-main-sidebar.fi-sidebar-open .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon {
    background-color: color-mix(in srgb, var(--fi-dock-tint) 18%, transparent);
}

.dark #fi-main-sidebar.fi-sidebar-open .fi-sidebar-item-icon {
    color: color-mix(in srgb, var(--fi-dock-tint) 35%, var(--color-white));
    background-color: color-mix(in srgb, var(--fi-dock-tint) 22%, transparent);
}

.dark #fi-main-sidebar.fi-sidebar-open .fi-sidebar-item-btn:hover .fi-sidebar-item-icon,
.dark #fi-main-sidebar.fi-sidebar-open .fi-sidebar-item-btn:focus-visible .fi-sidebar-item-icon,
.dark #fi-main-sidebar.fi-sidebar-open .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon {
    background-color: color-mix(in srgb, var(--fi-dock-tint) 34%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    #fi-main-sidebar.fi-sidebar-open .fi-sidebar-item-icon {
        transition: none;
    }
}