/**
 * Combobox flotante: .form-combobox-floating + .form-floating > select.form-select.
 *
 * Comportamiento estandar en TODOS los combobox del panel (filtros, drawers, formularios):
 * 1. JS (selector.js) convierte a combobox con busqueda solo selects cuyas
 *    opciones vienen de BD (mayoria de values numericos / data-combobox-bd="1").
 * 2. Opciones fijas (letras A-E, dia semana, si/no, enums cortos) siguen como <select> nativo.
 * 3. En .filtros-listado: «Todas las sedes» / «Todos» visibles y elegibles en el picker.
 * 4. Lista desplegable con scroll y filtro al escribir en el campo de busqueda.
 *
 * Forzar: data-combobox-bd="1" (busqueda) o data-combobox-bd="0" / data-combobox-nativo (nativo).
 * Rejilla letras: .examen-claves-rejilla o data-combobox-nativo.
 * Requisito HTML: envolver el formulario en .form-combobox-floating y usar option value="" como placeholder.
 */
@supports (appearance: base-select) {
    .form-combobox-floating .form-floating > select.form-select,
    .form-combobox-floating .form-floating > select.form-select::picker(select) {
        appearance: base-select;
        padding-top: 15px;
    }

    .form-combobox-floating .form-floating > select.form-select::picker-icon,
    .form-combobox-floating .form-floating > select.form-select option::checkmark {
        display: none;
    }

    .form-combobox-floating .form-floating > select.form-select::picker(select) {
        border: 2px solid var(--floating-border, rgba(114, 114, 114, 0.25));
        border-radius: var(--floating-radius, 1rem);
        background-color: var(--floating-bg, #fff);
        margin-block-start: 0.2rem;
        box-sizing: border-box;
        max-block-size: var(--floating-picker-max-block-size, min(16.5rem, 52dvh));
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        /* Look de barra: scroll.css (no scrollbar-width aquí: Chrome 121+ anula ::-webkit-*) */
        -webkit-overflow-scrolling: touch;
    }

    /**
     * ---------------------------------------------------------------------------
     * Barra de filtros de listado — a partir de aquí (base-select) y tras @supports (.form-floating).
     * HTML: <form class="filtros-listado form-combobox-floating"> vía x-filtros-listado :combobox-flotante.
     * ---------------------------------------------------------------------------
     */
    .filtros-listado.form-combobox-floating .form-floating > select.form-select::picker(select) {
        border: 1px solid var(--panel-filtro-border, var(--floating-border));
        border-radius: var(--floating-picker-radius, 0.875rem);
        background-color: var(--panel-filtro-picker-bg, var(--panel-filtro-bg));
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .form-combobox-floating .form-floating > select.form-select option {
        padding: 0.45rem 0.85rem;
        color: var(--panel-filtro-picker-option-text, var(--floating-text));
        background-color: transparent;
    }

    /* Placeholder vacio (Seleccione, Todas, etc.): visible en el campo, oculto en el picker */
    .form-combobox-floating .form-floating > select.form-select option[value=""] {
        display: none;
    }

    .form-combobox-floating .form-floating > select.form-select option[value=""]:checked,
    .form-combobox-floating .form-floating > select.form-select option[value=""]:hover,
    .form-combobox-floating .form-floating > select.form-select option[value=""]:focus-visible {
        background-color: transparent;
        color: var(--panel-filtro-picker-option-text, var(--floating-text));
    }

    /* Al abrir sin valor elegido: resaltar la primera opcion real del picker */
    .form-combobox-floating .form-floating > select.form-select:open option[value=""]:checked + option {
        background-color: var(--panel-filtro-picker-option-bg-active, var(--floating-focus));
        color: var(--panel-filtro-picker-option-text-active, var(--color-blanco));
    }

    /* Navegacion teclado en el picker */
    .form-combobox-floating .form-floating > select.form-select option:focus-visible:not([value=""]) {
        background-color: var(--panel-filtro-picker-option-bg-active, var(--floating-focus));
        color: var(--panel-filtro-picker-option-text-active, var(--color-blanco));
    }

    /* Valor actual en el picker (cuando ya hay seleccion) */
    .form-combobox-floating .form-floating > select.form-select option:checked:not([value=""]) {
        background-color: var(--panel-filtro-picker-option-bg-active, var(--floating-focus));
        color: var(--panel-filtro-picker-option-text-active, var(--color-blanco));
    }

    .form-combobox-floating .form-floating > select.form-select option:hover {
        background-color: var(--panel-filtro-picker-option-bg-active, var(--floating-focus));
        color: var(--panel-filtro-picker-option-text-active, var(--color-blanco));
    }

    .filtros-listado.form-combobox-floating .form-floating > select.form-select,
    .filtros-listado.form-combobox-floating .form-floating > select.form-select::picker(select) {
        padding-top: 0.5rem;
    }

    /**
     * Barra de filtros de listado: «Todas las sedes», «Todos», etc. deben elegirse desde el picker.
     * En drawers el value="" sigue oculto (placeholder «Seleccione»).
     */
    .filtros-listado.form-combobox-floating .form-floating > select.form-select option[value=""] {
        display: block;
    }

    .filtros-listado.form-combobox-floating .form-floating > select.form-select option[value=""]:checked,
    .filtros-listado.form-combobox-floating .form-floating > select.form-select option[value=""]:hover,
    .filtros-listado.form-combobox-floating .form-floating > select.form-select option[value=""]:focus-visible {
        background-color: var(--panel-filtro-picker-option-bg-active, var(--floating-focus));
        color: var(--panel-filtro-picker-option-text-active, var(--color-blanco));
    }

    .filtros-listado.form-combobox-floating .form-floating > select.form-select:open option[value=""]:checked + option {
        background-color: transparent;
        color: var(--panel-filtro-picker-option-text, var(--floating-text));
    }
}

.filtros-listado.form-combobox-floating .form-floating {
    --floating-label-inset: 0.8rem;
    --floating-label-pad-x: 0.3rem;
    /* Inicio del texto del valor = mismo eje que el texto de la etiqueta (inset + padding horizontal del label) */
    --floating-value-padding-left: calc(var(--floating-label-inset) + var(--floating-label-pad-x));
    --floating-control-height: calc(2.15rem + 2px);
    --floating-radius: 9999px;
    --floating-picker-radius: 0.875rem;
    --floating-bg: var(--panel-filtro-bg);
    --floating-field-bg: var(--panel-filtro-field-bg);
    --floating-label-bg: var(--panel-filtro-label-bg);
    --floating-label-color: var(--panel-filtro-label-color);
    --floating-border: var(--panel-filtro-border);
    --floating-border-hover: var(--panel-filtro-border-hover);
    --floating-text: var(--panel-filtro-value-text);
    --floating-autofill-text: var(--panel-filtro-value-text);
}

/* Misma altura/tokens que el select flotante (badge + campo en celdas de tabla) */
.filtros-listado.form-combobox-floating .floating-field-icon {
    --floating-control-height: calc(2.15rem + 2px);
    --floating-radius: 9999px;
    --floating-bg: var(--panel-filtro-bg);
    --floating-border: var(--panel-filtro-border);
    --floating-border-hover: var(--panel-filtro-border-hover);
    --floating-text: var(--panel-filtro-value-text);
    --floating-focus: var(--panel-category-bg, var(--color-granate-active, #9a2d2d));
    width: 100%;
    min-width: 0;
    margin-bottom: 0;
}

.filtros-listado.form-combobox-floating .form-floating > select.form-select:not([multiple]) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.filtros-listado.form-combobox-floating .form-floating {
    min-width: 0;
}

.filtros-listado.form-combobox-floating .row > [class*='col-'] {
    min-width: 0;
}

/**
 * Filtros con etiquetas largas (grupo pension, grupo utiles, etc.):
 * en pantallas grandes el ancho sigue al texto; en pequeñas ocupa la fila completa.
 */
.filtros-listado.form-combobox-floating .filtro-texto-adaptable {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
}

.filtros-listado.form-combobox-floating .filtro-texto-adaptable .form-floating,
.filtros-listado.form-combobox-floating .filtro-texto-adaptable .selector--filtro-pill {
    width: 100%;
    max-width: 100%;
}

.filtros-listado.form-combobox-floating .filtro-texto-adaptable .form-floating > select.form-select:not([multiple]) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: var(--floating-control-height);
    min-height: var(--floating-control-height);
    padding-top: 0.48rem;
    padding-bottom: 0.18rem;
}

.filtros-listado.form-combobox-floating .filtro-texto-adaptable .selector--filtro-pill .selector__combobox {
    height: var(--floating-control-height);
    min-height: var(--floating-control-height);
    align-items: center;
    padding-top: 0.48rem;
    padding-bottom: 0.18rem;
}

.filtros-listado.form-combobox-floating .filtro-texto-adaptable .selector--filtro-pill .selector__valor-texto,
.filtros-listado.form-combobox-floating .filtro-texto-adaptable .selector--filtro-pill .selector__placeholder {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
    line-height: 1.22;
    flex: 1 1 auto;
    min-width: 0;
}

.filtros-listado.form-combobox-floating .filtro-texto-adaptable .selector--filtro-pill .selector__toggle {
    top: 50%;
    transform: translateY(-50%);
}

@media (min-width: 1200px) {
    .filtros-listado.form-combobox-floating .filtro-texto-adaptable {
        flex: 1 1 24rem;
        width: auto;
        min-width: 24rem;
        max-width: min(100%, 40rem);
    }

    .filtros-listado.form-combobox-floating .filtro-texto-adaptable .form-floating,
    .filtros-listado.form-combobox-floating .filtro-texto-adaptable .selector--filtro-pill {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    /* Una sola linea: alarga el campo, no aumenta la altura */
    .filtros-listado.form-combobox-floating .filtro-texto-adaptable .form-floating > select.form-select:not([multiple]) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        height: var(--floating-control-height);
        min-height: var(--floating-control-height);
        padding-top: 0.48rem;
        padding-bottom: 0.18rem;
        word-break: normal;
    }

    .filtros-listado.form-combobox-floating .filtro-texto-adaptable .form-floating > :is(.form-control:not(textarea), .form-select) {
        height: var(--floating-control-height);
    }

    .filtros-listado.form-combobox-floating .filtro-texto-adaptable .selector--filtro-pill .selector__combobox {
        height: var(--floating-control-height);
        min-height: var(--floating-control-height);
        align-items: center;
        padding-top: 0.48rem;
        padding-bottom: 0.18rem;
    }

    .filtros-listado.form-combobox-floating .filtro-texto-adaptable .selector--filtro-pill .selector__valor-texto,
    .filtros-listado.form-combobox-floating .filtro-texto-adaptable .selector--filtro-pill .selector__placeholder {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: normal;
        line-height: 1.22;
        flex: 1 1 auto;
        min-width: 0;
    }

    .filtros-listado.form-combobox-floating .filtro-texto-adaptable .selector--filtro-pill .selector__toggle {
        top: 50%;
        transform: translateY(-50%);
    }
}

.filtros-listado.form-combobox-floating .form-floating > :is(.form-control, .form-select) {
    padding: 0.4rem 1rem 0.3rem 0.9rem;
    font-size: 0.875rem;
    line-height: 1.2;
    min-height: var(--floating-control-height);
    border-radius: var(--floating-radius);
    border-width: 1px;
    background-color: var(--floating-field-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.filtros-listado.form-combobox-floating .form-floating > :is(.form-control:not(textarea), .form-select) {
    height: var(--floating-control-height);
}

.filtros-listado.form-combobox-floating .form-floating > select.form-select {
    padding: 0.48rem 2.1rem 0.18rem var(--floating-value-padding-left);
    line-height: 1.22;
    color: var(--panel-filtro-value-text);
}

.filtros-listado.form-combobox-floating .form-floating > input.form-control[type="date"] {
    padding-left: var(--floating-value-padding-left);
}

.filtros-listado.form-combobox-floating .form-floating > .form-control:is(:not(:placeholder-shown), :-webkit-autofill) {
    padding-top: 0.4rem;
    padding-bottom: 0.3rem;
}

.filtros-listado.form-combobox-floating .form-floating > :is(.form-control, .form-select, textarea.form-control):focus {
    border-color: var(--color-granate, #661414);
    box-shadow: 0 0 0 2px rgba(var(--color-granate-rgb), 0.28);
    background-color: var(--floating-field-bg);
}

.filtros-listado.form-combobox-floating .form-floating > :is(.form-control, textarea.form-control):focus {
    padding-top: 0.4rem;
    padding-bottom: 0.3rem;
}

.filtros-listado.form-combobox-floating .form-floating > :is(.form-control:hover, .form-select:hover, textarea.form-control:hover, .form-control:disabled, .form-select:disabled) {
    background-color: var(--floating-field-bg);
}

.filtros-listado.form-combobox-floating .form-floating > .form-control:-webkit-autofill,
.filtros-listado.form-combobox-floating .form-floating > .form-control:-webkit-autofill:hover {
    -webkit-text-fill-color: var(--floating-autofill-text);
    box-shadow: 0 0 0 1000px transparent inset;
    transition: background-color 5000s ease-out;
}

.filtros-listado.form-combobox-floating .form-floating > .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--floating-autofill-text);
    box-shadow: 0 0 0 1000px transparent inset, 0 0 0 2px rgba(var(--color-granate-rgb), 0.28);
    transition: background-color 5000s ease-out;
}

.filtros-listado.form-combobox-floating .form-floating > label {
    position: absolute;
    top: 0;
    left: var(--floating-label-inset);
    width: max-content;
    max-width: calc(100% - 2.5rem);
    height: auto;
    margin: 0;
    padding: 0 var(--floating-label-pad-x);
    font-size: 0.75rem;
    line-height: 1.15;
    color: var(--floating-label-color);
    transform: translateY(-50%);
    transform-origin: left center;
    border-radius: 0.35rem;
    background-color: var(--floating-label-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
    z-index: 4;
    opacity: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/**
 * Rejilla claves examen (admisión): 5 columnas, flujo por columna. HTML: examenes_academicos/_rejilla_claves.blade.php
 */
.examen-claves-rejilla {
    --examen-claves-columnas: 5;
    --examen-claves-gap-col: clamp(1rem, 2.5vw, 2rem);
    --examen-claves-gap-row: clamp(0.85rem, 2vh, 1.35rem);
    --examen-claves-numero-w: 1.5rem;
    --examen-claves-numero-gap: 0.45rem;
    width: 100%;
}

.examen-claves-rejilla__grid {
    display: grid;
    grid-template-columns: repeat(var(--examen-claves-columnas), minmax(0, 1fr));
    grid-template-rows: repeat(var(--examen-claves-filas, 6), auto);
    grid-auto-flow: column;
    column-gap: var(--examen-claves-gap-col);
    row-gap: var(--examen-claves-gap-row);
    width: 100%;
    max-width: none;
    margin-inline: 0;
    justify-items: stretch;
    align-items: center;
}

.examen-claves-rejilla__item {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--examen-claves-numero-gap);
    width: 100%;
    min-width: 0;
}

.examen-claves-rejilla__numero {
    flex: 0 0 var(--examen-claves-numero-w);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1;
    color: #1a1a1a;
    text-align: right;
}

.examen-claves-rejilla__campo.form-floating {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    margin-bottom: 0;
    --floating-radius: 9999px;
    --floating-control-height: calc(2.35rem + 2px);
    --floating-value-padding-left: 1rem;
}

.form-combobox-floating .examen-claves-rejilla .examen-claves-rejilla__campo.form-floating > :is(.form-control, .form-select) {
    min-height: var(--floating-control-height);
    height: var(--floating-control-height);
    border-radius: var(--floating-radius);
    border-width: 1px;
    background-color: var(--floating-field-bg, var(--floating-bg, #fff));
}

.form-combobox-floating .examen-claves-rejilla .examen-claves-rejilla__campo.form-floating > select.form-select {
    padding: 0.5rem 2.1rem 0.5rem var(--floating-value-padding-left);
    line-height: 1.25;
    font-size: 0.9375rem;
}

.form-combobox-floating .examen-claves-rejilla .examen-claves-rejilla__campo.form-floating > label.visually-hidden {
    position: absolute !important;
}

@supports (appearance: base-select) {
    .form-combobox-floating .examen-claves-rejilla .examen-claves-rejilla__campo.form-floating > select.form-select,
    .form-combobox-floating .examen-claves-rejilla .examen-claves-rejilla__campo.form-floating > select.form-select::picker(select) {
        appearance: base-select;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .form-combobox-floating .examen-claves-rejilla .examen-claves-rejilla__campo.form-floating > select.form-select::picker(select) {
        border-radius: var(--floating-picker-radius, 0.875rem);
    }
}

.examen-claves-rejilla__item .invalid-feedback {
    flex: 0 0 100%;
    margin-top: 0.1rem;
    margin-left: calc(var(--examen-claves-numero-w) + var(--examen-claves-numero-gap));
}

@media (max-width: 767.98px) {
    .examen-claves-rejilla__grid {
        --examen-claves-columnas: 3;
        grid-template-rows: repeat(var(--examen-claves-filas-movil, 10), auto);
    }
}

/**
 * Calendario emergente en barra de filtros (x-campo-calendario-emergente :variantePill).
 * Reutiliza --celda-calendario-pill + --badge-solo-icono; tokens alineados al resto de filtros.
 */
.filtros-listado.form-combobox-floating .floating-field-icon--celda-calendario-pill {
    --celda-cal-fondo: var(--floating-field-bg);
    --floating-label-inset: 0.8rem;
    --floating-label-pad-x: 0.3rem;
    /* Inicio de etiqueta dentro del area de texto (tras el icono, sin solaparlo) */
    --filtro-cal-etiqueta-izq: 0.2rem;
}

.filtros-listado.form-combobox-floating .floating-field-icon--celda-calendario-pill
    .floating-field-icon__badge {
    position: relative;
    z-index: 5;
    font-size: 0.875rem;
}

.filtros-listado.form-combobox-floating .floating-field-icon--celda-calendario-pill
    .calendario-emergente--solo-fecha .calendario-emergente__disparador {
    padding-top: 0.38rem !important;
    padding-bottom: 0.28rem !important;
    line-height: 1.2;
}

.filtros-listado.form-combobox-floating .floating-field-icon--celda-calendario-pill
    .calendario-emergente--solo-fecha .calendario-emergente__texto,
.filtros-listado.form-combobox-floating .floating-field-icon--celda-calendario-pill
    .calendario-emergente--solo-mes .calendario-emergente__texto {
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--panel-filtro-value-text);
}

.filtros-listado.form-combobox-floating .floating-field-icon--celda-calendario-pill
    .calendario-emergente--solo-fecha:not(.calendario-emergente--con-valor) .calendario-emergente__texto,
.filtros-listado.form-combobox-floating .floating-field-icon--celda-calendario-pill
    .calendario-emergente--solo-mes:not(.calendario-emergente--con-valor) .calendario-emergente__texto {
    font-size: 0.8125rem;
    color: color-mix(in srgb, var(--panel-filtro-value-text) 45%, transparent);
}

.filtros-listado.form-combobox-floating .floating-field-icon--celda-calendario-pill
    .floating-field-icon__floating.form-floating > label,
.filtros-listado.form-combobox-floating .floating-field-icon--celda-calendario-pill:focus-within
    .floating-field-icon__floating.form-floating > label,
.filtros-listado.form-combobox-floating .floating-field-icon--celda-calendario-pill
    .floating-field-icon__floating.form-floating:has(> .calendario-emergente--con-valor) > label,
.filtros-listado.form-combobox-floating .floating-field-icon--celda-calendario-pill
    .floating-field-icon__floating.form-floating:has(> .calendario-emergente:not(.calendario-emergente--con-valor)) > label {
    top: 0;
    left: var(--filtro-cal-etiqueta-izq);
    max-width: calc(100% - 0.75rem);
    padding: 0 var(--floating-label-pad-x);
    font-size: 0.6875rem;
    line-height: 1.15;
    color: var(--floating-label-color);
    background-color: var(--floating-label-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transform: translateY(-50%);
    transform-origin: left center;
    z-index: 4;
}

/**
 * Popup calendario solo en barra de filtros (clase puesta por calendario-emergente.js).
 * Resto del panel: fondo blanco/crema solido como antes.
 */
.calendario-emergente__panel--filtro-listado,
.calendario-emergente__panel--filtro-listado[data-cal-panel-fijo] {
    background: var(--panel-filtro-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: var(--panel-filtro-border);
    box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .calendario-emergente__panel--filtro-listado,
[data-theme="dark"] .calendario-emergente__panel--filtro-listado[data-cal-panel-fijo] {
    background: var(--panel-filtro-bg);
    border-color: var(--panel-filtro-border);
    box-shadow: var(--ce-emergente-sombra-panel-oscura, 0 0.4rem 1.15rem rgba(0, 0, 0, 0.35));
}

/**
 * Combobox con busqueda (upgrade a <x-selector> via selector.js).
 * Filtros pill: altura y tipografia alineadas a .filtros-listado.form-combobox-floating.
 */
.form-combobox-floating .selector--combobox-upgrade:not(.selector--filtro-pill) {
    display: block;
    width: 100%;
}

/* Rejilla Bootstrap (row g-3): el gap de columnas define el ritmo; sin mb-3 duplicado */
.form-combobox-floating .row > [class*='col-'] > .selector,
.form-combobox-floating .row > [class*='col-'] > .selector.mb-3,
.form-combobox-floating .row > [class*='col-'] > .selector--combobox-upgrade,
.form-combobox-floating .row > [class*='col-'] > .selector--combobox-upgrade.mb-3 {
    margin-bottom: 0;
}

/* Rejilla del drawer (drawer-campos-rejilla): igual que la rejilla Bootstrap, el gap define el ritmo y el selector no suma margen. */
.form-combobox-floating .drawer-campos-rejilla .selector,
.form-combobox-floating .drawer-campos-rejilla .selector.mb-3,
.form-combobox-floating .drawer-campos-rejilla .selector--combobox-upgrade,
.form-combobox-floating .drawer-campos-rejilla .selector--combobox-upgrade.mb-3 {
    margin-bottom: 0;
}

/* Formularios apilados sin rejilla: mismo ritmo que .form-floating.mb-3 */
.form-combobox-floating .form-drawer > .selector--combobox-upgrade:not(.selector--filtro-pill):not(:last-child),
.form-combobox-floating .form-drawer > .form-floating.mb-3 {
    margin-bottom: 1rem;
}

.form-combobox-floating .selector--filtro-pill {
    --floating-control-height: calc(2.15rem + 2px);
    --floating-radius: 9999px;
    --floating-label-inset: 0.8rem;
    --floating-label-pad-x: 0.3rem;
    width: 100%;
}

.form-combobox-floating .selector--filtro-pill .selector__combobox {
    min-height: var(--floating-control-height);
    height: var(--floating-control-height);
    padding: 0.48rem 2.1rem 0.18rem calc(var(--floating-label-inset) + var(--floating-label-pad-x));
    border-width: 1px;
    border-radius: var(--floating-radius);
    background-color: var(--floating-field-bg, var(--panel-filtro-field-bg));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.form-combobox-floating .selector--filtro-pill .selector__valor-texto,
.form-combobox-floating .selector--filtro-pill .selector__placeholder {
    font-size: 0.875rem;
    line-height: 1.22;
    color: var(--panel-filtro-value-text);
    text-align: left;
}

.form-combobox-floating .selector--filtro-pill .selector__etiqueta--flotante {
    top: 0;
    left: var(--floating-label-inset);
    max-width: calc(100% - 2.5rem);
    padding: 0 var(--floating-label-pad-x);
    font-size: 0.75rem;
    line-height: 1.15;
    color: var(--floating-label-color, var(--panel-filtro-label-color));
    background-color: var(--floating-label-bg, var(--panel-filtro-label-bg));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transform: translateY(-50%);
    transform-origin: left center;
    border-radius: 0.35rem;
}

.form-combobox-floating .selector--filtro-pill.selector--abierto .selector__combobox,
.form-combobox-floating .selector--filtro-pill .selector__combobox:focus {
    border-color: var(--color-granate, #661414);
    box-shadow: 0 0 0 2px rgba(var(--color-granate-rgb), 0.28);
}

.form-combobox-floating .selector--combobox-upgrade:not(.selector--filtro-pill) .selector__combobox {
    min-height: var(--floating-control-height, calc(3.2rem + 2px));
    padding: 0.72rem 2.5rem 0.58rem 1rem;
    justify-content: flex-start;
    text-align: left;
}

.form-combobox-floating .selector--combobox-upgrade .selector__placeholder,
.form-combobox-floating .selector--combobox-upgrade .selector__valor-texto {
    text-align: left;
    flex: 1 1 0%;
    min-width: 0;
}

.form-combobox-floating .form-floating > select.form-select {
    text-align: left;
    text-align-last: left;
}

.form-combobox-floating .selector__lista {
    max-height: var(--floating-picker-max-block-size, min(16.5rem, 52dvh));
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Look de barra: scroll.css */
}

.form-combobox-floating .selector__panel {
    border-radius: var(--floating-picker-radius, 0.875rem);
    overflow: hidden;
}

.filtros-listado.form-combobox-floating .selector--filtro-pill .selector__panel {
    border-width: 1px;
    background-color: var(--panel-filtro-picker-bg, var(--panel-filtro-bg));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Stock de docentes: cápsula crema. El nombre empieza en el mismo eje que la etiqueta flotante. */
#filtrosStockDocente .selector--filtro-pill {
    --floating-bg: var(--panel-main-bg, var(--color-crema, #f7f3e8));
    --floating-label-inset: 0.8rem;
    --floating-label-pad-x: 0.3rem;
    --floating-value-padding-left: calc(var(--floating-label-inset) + var(--floating-label-pad-x));
}

#filtrosStockDocente .selector--filtro-pill .selector__etiqueta--flotante {
    margin: 0;
    left: var(--floating-label-inset);
    padding: 0 var(--floating-label-pad-x);
}

#filtrosStockDocente .selector--filtro-pill .selector__combobox {
    align-items: center;
    justify-content: flex-start;
    padding: 0 1.65rem 0 var(--floating-value-padding-left);
}

#filtrosStockDocente .selector--filtro-pill .selector__chips:empty {
    display: none;
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    margin: 0;
    padding: 0;
}

#filtrosStockDocente .selector--filtro-pill .selector__placeholder,
#filtrosStockDocente .selector--filtro-pill .selector__valor-texto {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#filtrosStockDocente .selector--filtro-pill .selector__combobox,
#filtrosStockDocente .selector--filtro-pill .selector__panel,
#filtrosStockDocente .selector--filtro-pill .selector__busqueda {
    background-color: var(--panel-main-bg, var(--color-crema, #f7f3e8));
}

#filtrosStockDocente .selector--filtro-pill .selector__panel {
    border-radius: 1.5rem;
}

.panel-drawer .form-combobox-floating .selector--combobox-upgrade {
    --panel-selector-combobox-bg: var(--panel-drawer-floating-bg);
    --panel-selector-combobox-border: var(--panel-drawer-floating-border);
    --panel-selector-combobox-border-hover: var(--panel-drawer-floating-border-hover);
    --panel-selector-panel-bg: var(--panel-drawer-picker-bg);
    --panel-selector-panel-border: var(--panel-drawer-floating-border);
    --panel-selector-placeholder: var(--panel-drawer-text-muted);
    --panel-selector-option-text: var(--panel-drawer-floating-text);
    --panel-selector-etiqueta-flotante-bg: var(--panel-drawer-bg);
    --panel-selector-etiqueta-flotante-color: var(--panel-drawer-floating-label-focus);
    --panel-selector-etiqueta-flotante-focus: var(--panel-drawer-floating-label-focus);
}

/**
 * Menú desplegable (Bootstrap dropdown) pintado como picker del combobox.
 * Disparador libre (ej. btn-accion-pill); opciones con mismos tokens que form-combobox-floating / SelectorUI.
 * HTML: <ul class="dropdown-menu form-combobox-floating-menu"> > <a class="dropdown-item">
 */
.dropdown-menu.form-combobox-floating-menu {
    --form-combobox-menu-radius: var(--floating-picker-radius, 0.875rem);
    --bs-dropdown-bg: transparent;
    min-width: 11.5rem;
    padding: 0.35rem 0;
    margin-top: 0.35rem !important;
    border: 1px solid var(--panel-filtro-border, var(--floating-border, rgba(114, 114, 114, 0.25)));
    border-radius: var(--form-combobox-menu-radius);
    background-color: var(--panel-filtro-picker-bg, var(--panel-filtro-bg, rgba(255, 255, 255, 0.28))) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--panel-selector-panel-shadow, 0 4px 12px rgba(102, 20, 20, 0.25));
    overflow: hidden;
}

.dropdown-menu.form-combobox-floating-menu .dropdown-item {
    padding: 0.45rem 0.85rem;
    font-size: 0.9375rem;
    line-height: 1.35;
    color: var(--panel-filtro-picker-option-text, var(--floating-text, var(--color-text-default)));
    background-color: transparent;
    border-radius: 0;
}

.dropdown-menu.form-combobox-floating-menu .dropdown-item:hover,
.dropdown-menu.form-combobox-floating-menu .dropdown-item:focus,
.dropdown-menu.form-combobox-floating-menu .dropdown-item:active,
.dropdown-menu.form-combobox-floating-menu .dropdown-item.active {
    background-color: var(--panel-filtro-picker-option-bg-active, var(--floating-focus, var(--color-granate-active)));
    color: var(--panel-filtro-picker-option-text-active, var(--color-blanco));
}

[data-theme="dark"] .dropdown-menu.form-combobox-floating-menu {
    background-color: var(--panel-filtro-picker-bg, rgba(var(--color-blanco-rgb), 0.08)) !important;
    border-color: var(--panel-filtro-border, var(--floating-border));
}