/* ============================================================================
   filters_ui.css — Barra de filtros GLOBAL (components/filters.html)
   ----------------------------------------------------------------------------
   Extraído 2026-07-27 del <style> inline que vivía dentro del template: la
   regla del proyecto prohíbe CSS inline y ese bloque se repetía en cada una de
   las ~200 pantallas que incluyen el componente.

   Cubre el MODO PILL (barra redondeada, <= 2 filtros). El MODO PANEL (3+
   filtros) usa el componente de barra con etiqueta: static/css/filter_bar.css.
   Cargado globalmente en templates/base.html.

   OJO con el `:not(.fbar)` de cada selector: el modo panel TAMBIÉN lleva la
   clase `.omnicore-filters-ui` (la necesita filters_autosubmit.js para buscar
   al cambiar un control), así que sin esa exclusión heredaría el alto de 40px
   y el botón de filtros de la píldora, y cuál gana dependería del orden de carga de los
   CSS. Excluido explícitamente: cada modo manda sobre lo suyo.
   ========================================================================= */

    /* Colapso móvil de filtros: bajo md el wrapper #filters_collapse es un
       collapse de Bootstrap (lo abre el botón de filtros de la búsqueda); de md hacia
       arriba se vuelve TRANSPARENTE al grid (display:contents) y sus celdas
       participan del row como siempre — layout desktop intacto. */
    @media (min-width: 768px) {
        .omnicore-filters-ui:not(.fbar) .filters-collapse { display: contents !important; }

        /* Bootstrap reparte el gutter con `.row > *` (margin-top + padding-x).
           `display: contents` borra la CAJA del collapse pero NO cambia el DOM,
           así que ese selector sigue apuntando al collapse —que ya no tiene
           caja donde pintar el gutter— y las celdas de adentro se quedan sin
           él: salían 4px más arriba y 4px corridas frente a la búsqueda, que
           sí es hija directa del row. Se les da el gutter explícitamente. */
        .omnicore-filters-ui:not(.fbar) .filters-collapse > * {
            margin-top: var(--bs-gutter-y);
            padding-right: calc(var(--bs-gutter-x) * 0.5);
            padding-left: calc(var(--bs-gutter-x) * 0.5);
        }
    }

    /* CENTRADO VERTICAL de los controles dentro de su píldora. El
       .input-group nace con align-items:stretch, y un hijo con ALTURA FIJA
       (los 34px de abajo) no se estira: se apoya arriba. Como el ícono `fs-5`
       estira la píldora a ~46px, el texto del buscador quedaba ~3px por encima
       del centro mientras el select — que sí traía align-items-center en su
       markup — se veía bien. Se centra acá para todos, y así ningún markup
       nuevo tiene que acordarse de la clase. */
    .omnicore-filters-ui:not(.fbar) .input-group {
        align-items: center;
    }

    /* DEFENSA de centrado: si algo estira el .input-group (un `h-100`, una
       celda más alta, un ícono grande), un hijo con ALTURA FIJA no se estira y
       se apoya ARRIBA. Con align-self queda centrado pase lo que pase, sin
       depender de que el markup recuerde poner `align-items-center`. */
    .omnicore-filters-ui:not(.fbar) .input-group > .form-control,
    .omnicore-filters-ui:not(.fbar) .input-group > .form-select,
    .omnicore-filters-ui:not(.fbar) .input-group > .select2-container {
        align-self: center;
    }

    /* ALTURA UNIFORME de los controles: 34px, EL MISMO que el modo panel
       (filter_bar.css). Antes eran 40px y la píldora se veía más pesada que la
       barra con etiquetas; con las dos barras conviviendo en la plataforma, el
       desnivel al pasar de un listado a otro cantaba. */
    .omnicore-filters-ui:not(.fbar) .form-control,
    .omnicore-filters-ui:not(.fbar) .form-select {
        height: 34px;
        min-height: 34px;
        padding-top: .25rem;
        padding-bottom: .25rem;
    }

    /* El ícono del pill vive en un .input-group-text cuyo padding vertical
       imponía ~46px de alto al grupo ENTERO: sin esto, bajar los controles a
       34px solo dejaba más aire alrededor y la píldora seguía igual de alta. */
    .omnicore-filters-ui:not(.fbar) .input-group-text {
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Centrado por line-height, NO por flexbox: el `display: flex` que había
       acá reordenaba los hijos del single y mandaba la "x" de limpiar a la
       IZQUIERDA del texto, con un hueco enorme (visible en Auditoría). El
       interior de select2 no se toca — tiene cuatro estados (single vacío,
       single con "x", múltiple vacío con placeholder, múltiple con chips) y
       cada regla sobre sus tripas rompe alguno. */
    .omnicore-filters-ui:not(.fbar) .select2-container--default .select2-selection--single {
        min-height: 34px;
    }
    /* Se anula el padding vertical que `static/css/style.css` le pone al
       rendered: está calculado para un control de ~40px y SE SUMA al
       line-height, engordando el widget frente a los inputs nativos. */
    .omnicore-filters-ui:not(.fbar) .select2-container--default .select2-selection--single .select2-selection__rendered {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 32px;
    }
    .omnicore-filters-ui:not(.fbar) .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 32px;
        top: 0;
    }
    /* El múltiple crece con los chips, pero nunca menos que el resto. */
    .omnicore-filters-ui:not(.fbar) .select2-container--default .select2-selection--multiple {
        min-height: 34px;
    }

    /* El <ul> de chips hereda el `margin-bottom: 1rem` del reset de Bootstrap
       (16px de aire bajo los chips, dentro del borde). Es lo ÚNICO del interior
       del múltiple que se toca; el estado vacío no se ve afectado porque su
       placeholder vive en otro nodo. */
    .omnicore-filters-ui:not(.fbar) .select2-selection--multiple .select2-selection__rendered {
        margin-bottom: 0;
    }

    /* Borde del pill un punto más visible (el default #ECEBF1 se pierde
       sobre el card blanco, sobre todo en móvil). */
    .omnicore-filters-ui:not(.fbar) .input-group.border {
        border-color: #dcdbe6 !important;
    }

    /* Botón de filtros en móvil: CIRCULAR cuando es solo ícono; se estira a pill cuando el
       JS le mete el conteo "(N)" (clase .has-count desde ui_init.js). */
    .omnicore-filters-ui:not(.fbar) .filters-toggle {
        /* 30px: con los controles a 34, un botón de 34 tocaba los bordes del
           pill y lo hacía ver apretado. */
        width: 30px;
        height: 30px;
        padding: 0;
        /* !important: dentro de un .input-group Bootstrap cuadra el lado
           izquierdo del último hijo (border-*-left-radius: 0). */
        border-radius: 50% !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .omnicore-filters-ui:not(.fbar) .filters-toggle.has-count {
        width: auto;
        border-radius: 50rem !important;
        padding: 0 .6rem;
    }
    .omnicore-filters-ui:not(.fbar) .filters-toggle .filters-toggle-count:not(:empty) {
        margin-left: .15rem;
    }

    /* Scope strictly to avoid leaking into other system selects */
    .omnicore-filters-ui:not(.fbar) .select2-container--default .select2-selection--single,
    .omnicore-filters-ui:not(.fbar) .select2-container--default .select2-selection--multiple {
        border: 0px solid transparent !important;
    }

    /* Ensure the wrapper doesn't break flex layout and shrinks properly */
    .omnicore-filters-ui:not(.fbar) .input-group .select2-container {
        flex: 1 1 auto;
        width: 1% !important;
    }

/* SIN salto de altura en móvil: 34px en TODOS los anchos, igual que el modo
   panel. El aumento a 44px (área táctil recomendada) hacía que los controles
   crecieran al cruzar el breakpoint y se notaba demasiado. */