/*
 * Retoques del panel que no encajan en una pantalla concreta.
 *
 * Se carga desde AdminPanelProvider (HEAD_END) para todo el panel.
 */

/*
 * Selects múltiples: tope de altura.
 *
 * El campo crece una fila por cada opción marcada. En el mapa de fichajes, con
 * los veinticinco grupos seleccionados, medía 485 px y empujaba el mapa fuera
 * de la pantalla; el panel viejo lo evitaba escondiendo los grupos tras un
 * modal de checkboxes.
 *
 * Con tope y barra propia caben unas dos filas de etiquetas y el resto se
 * recorre con la rueda, sin perder el buscador del desplegable —que es lo que
 * el modal no tenía—.
 */
.fi-fo-select .fi-select-input-value-ctn {
    max-height: 4.5rem;
    overflow-y: auto;
    scrollbar-width: thin;
    /* El contenedor vive dentro del <button> que abre el desplegable: sin esto
       el clic para arrastrar la barra lo abriría. */
    overscroll-behavior: contain;
}

/*
 * Conmutador entre el panel viejo y el nuevo, en la barra superior.
 *
 * Es un interruptor de dos posiciones, no dos botones: la pastilla clara se
 * desliza de una mitad a la otra. Así se lee de un vistazo en qué versión se
 * está, que es lo que hace falta mientras las dos conviven.
 *
 * Todos los colores llevan valor de respaldo. Filament v5 NO define
 * `--gray-100` ni `--primary-600`: los suyos se llaman `--color-gray-100` y
 * además apuntan a variables que el panel inyecta aparte. La versión anterior
 * de este bloque usaba los nombres cortos, así que no pintaba absolutamente
 * nada y se veían dos palabras sueltas al lado del avatar.
 */
.fi-panel-version {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem;
    border-radius: 999px;
    background-color: var(--color-gray-100, #f1f2f4);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.06);
    user-select: none;
}

.dark .fi-panel-version {
    background-color: var(--color-gray-800, #27272a);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
}

/*
 * La pastilla que marca la versión activa.
 *
 * Va en un elemento propio y no como fondo del enlace para que se DESLICE en
 * vez de encenderse y apagarse: es lo que hace que el control se lea como un
 * interruptor. Mide media caja menos el relleno de los dos lados y se mueve
 * exactamente su propio ancho, así que cae clavada sobre cada mitad sin
 * depender de cuánto ocupe el texto.
 */
.fi-panel-version-thumb {
    position: absolute;
    z-index: 0;
    top: 0.1875rem;
    bottom: 0.1875rem;
    left: 0.1875rem;
    width: calc((100% - 0.375rem) / 2);
    border-radius: 999px;
    background-color: #fff;
    box-shadow:
        0 1px 2px rgb(0 0 0 / 0.14),
        0 0 0 1px rgb(0 0 0 / 0.04);
    transition: transform 220ms cubic-bezier(0.25, 1, 0.5, 1);
}

.dark .fi-panel-version-thumb {
    background-color: var(--color-gray-950, #09090b);
    box-shadow:
        0 1px 2px rgb(0 0 0 / 0.5),
        0 0 0 1px rgb(255 255 255 / 0.08);
}

.fi-panel-version--v2 .fi-panel-version-thumb {
    transform: translateX(100%);
}

@media (prefers-reduced-motion: reduce) {
    .fi-panel-version-thumb {
        transition: none;
    }
}

.fi-panel-version-opt {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    /* Las dos mitades miden lo mismo pase lo que pase con el texto: si no, la
       pastilla —que se desplaza el 100 % de su ancho— se descolocaría. */
    flex: 1 1 0;
    min-width: 2.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.02em;
    color: var(--color-gray-500, #71717a);
    text-decoration: none;
    transition: color 160ms ease;
}

.fi-panel-version-opt:hover {
    color: var(--color-gray-700, #3f3f46);
}

.dark .fi-panel-version-opt {
    color: var(--color-gray-400, #a1a1aa);
}

.dark .fi-panel-version-opt:hover {
    color: var(--color-gray-200, #e4e4e7);
}

.fi-panel-version-on,
.fi-panel-version-on:hover {
    color: var(--color-primary-600, #a50000);
}

.dark .fi-panel-version-on,
.dark .fi-panel-version-on:hover {
    color: var(--color-primary-400, #f87171);
}

/*
 * El aviso de que el panel nuevo está en pruebas.
 *
 * Es un punto y no la palabra «beta»: en una cápsula de este tamaño el texto
 * obligaba a estrechar todo lo demás y descuadraba las dos mitades. El nombre
 * completo sigue estando en el `aria-label` y en el `title` del enlace, así que
 * no se pierde para quien use lector de pantalla ni al pasar el ratón.
 */
.fi-panel-version-beta {
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 999px;
    background-color: var(--color-warning-500, #f59e0b);
}

/* Sin la pastilla blanca debajo, el punto se pierde sobre el fondo gris. */
.fi-panel-version-opt:not(.fi-panel-version-on) .fi-panel-version-beta {
    opacity: 0.55;
}

.fi-panel-version-opt:focus-visible {
    outline: 2px solid var(--color-primary-600, #a50000);
    outline-offset: 2px;
}