/* ============================================================================
   filter_bar.css — Barra de filtros con ETIQUETA ARRIBA (componente compartido)
   ----------------------------------------------------------------------------
   Alternativa a la barra global (`components/filters.html`), que mete el filtro
   dentro de un pill y confía TODO el significado al ícono. Acá cada control
   lleva su etiqueta visible encima: se entiende qué filtra sin abrirlo.

   Responsive REAL sin breakpoints a mano: el grid usa auto-fit + minmax, así
   que la barra reacomoda sus columnas según el ancho disponible (1 columna en
   360px, 3 en tablet, 6 en desktop) en vez de repartir `col-md-2 col-6` fijos,
   que en móvil apretaban dos selects de fecha por fila.

   USO
     <form method="GET" class="fbar">
       <div class="fbar-field">
         <label class="fbar-label"><i class="bi bi-calendar3"></i> Año</label>
         <select class="form-select form-select-sm">…</select>
       </div>
       …
       <div class="fbar-field fbar-field--search">
         <label class="fbar-label">Buscar</label>
         <div class="input-group input-group-sm">…input + botones…</div>
       </div>
     </form>

   En MÓVIL solo queda visible la búsqueda; el resto de criterios vive en un
   collapse que abre el botón de filtros situado DENTRO del propio campo de búsqueda
   (mismo gesto que la barra global, para no enseñar dos patrones distintos).

   CLASES
     .fbar                  grid contenedor (es el <form>)
     .fbar-field            celda: etiqueta + control
     .fbar-field--search    celda de búsqueda: 2 columnas; visual al final
     .fbar-field--wide      celda que ocupa 2 columnas (campos largos)
     .fbar-label            etiqueta encima del control
     .fbar-actions          celda de botones Buscar/Todo (última del grid)
     .filters-collapse      wrapper plegable en móvil / display:contents en md+
     .filters-toggle        botón de filtros dentro del buscador (lo cuenta ui_init.js)
     .fbar-chips            fila de contadores/resumen bajo la barra
     .fbar-chip(.is-*)      contador individual (-success/-warning/-danger)

   DEPENDE DE: `filters-collapse`, `filters-toggle` y `filters-toggle-count`
   son los MISMOS nombres que usa static/js/ui_init.js para abrir el panel y
   pintar el conteo de filtros activos — no renombrar sin tocar ese JS.
   ========================================================================= */

.fbar {
    display: grid;
    /* 9.5rem = ancho mínimo con el que un select de mes o un dd/mm/aaaa siguen
       siendo legibles. Calibrado para que en un card de ~1200px entren las 7
       unidades de una barra típica (5 filtros + la búsqueda, que pide 2) en
       UNA fila; con 11rem la búsqueda caía sola a una segunda fila. */
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.5rem 0.75rem;
    align-items: end;
}

.fbar-field {
    display: flex;
    flex-direction: column;
    min-width: 0;   /* sin esto un select largo desborda la celda del grid */
}

/* La búsqueda ocupa la fila ENTERA mientras el panel está apilado (bajo md):
   es su propia fila, así que dejarla en 2 de N columnas abría un hueco a la
   derecha del card. De md hacia arriba comparte fila y toma 2 columnas. */
.fbar-field--search,
.fbar-field--wide {
    grid-column: 1 / -1;
}

@media (min-width: 768px) {
    .fbar-field--search,
    .fbar-field--wide {
        grid-column: span 2;
    }
}

/* La búsqueda va VISUALMENTE al final de la barra (regla del diseño: "la
   búsqueda queda al final, pegada al botón") pero PRIMERA en el DOM, porque en
   móvil es lo único que no se colapsa y el panel plegable tiene que quedar
   debajo de ella. `order` separa el orden visual del orden del documento. */
@media (min-width: 768px) {
    .fbar-field--search { order: 90; }
    /* Los botones se anclan a la ÚLTIMA columna (-2/-1): si sobra hueco en la
       fila de filtros caen ahí, y si no, bajan a la siguiente fila pero
       SIEMPRE pegados a la derecha. Sin esto quedaban solos abajo a la
       izquierda y parecía un error de maquetado, no una decisión. */
    .fbar-actions {
        order: 100;
        grid-column: -2 / -1;
        justify-self: stretch;
    }
}

/* ── Colapso en MÓVIL ───────────────────────────────────────────────────────
   Mismo mecanismo que la barra global (components/filters.html): bajo md el
   wrapper es un collapse de Bootstrap que abre el botón de filtros del buscador; de md
   hacia arriba se vuelve TRANSPARENTE al grid (display:contents) y sus celdas
   son celdas normales de .fbar — el layout de escritorio queda intacto.       */
.fbar .filters-collapse.show,
.fbar .filters-collapse.collapsing {
    /* grid-column: 1/-1 es OBLIGATORIO. Mientras es un bloque (bajo md) el
       wrapper es UN item del grid padre, así que sin esto ocupa UNA columna y
       encierra todos los filtros en una tira angosta. No se ve a 375px (el
       padre tiene una sola columna, donde 1 == todas) ni de md hacia arriba
       (display:contents lo disuelve): solo rompe entre ~576px y 767px. */
    grid-column: 1 / -1;
    display: grid;
    /* Columnas FIJAS (no auto-fit) mientras está apilado: con auto-fit, una
       fila incompleta dejaba las celdas a su ancho mínimo y el card se veía
       vacío por la derecha. 1 columna en móvil chico, 2 de aquí a md. */
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem 0.75rem;
    align-items: end;
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .fbar .filters-collapse.show,
    .fbar .filters-collapse.collapsing {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .fbar .filters-collapse { display: contents !important; }
}

/* Botón de filtros DENTRO del buscador (no al lado): el usuario nunca pierde
   de vista el campo de texto y el resto de criterios se despliega desde ahí.
   CUADRADO y PEGADO al input — acá el buscador es rectangular, así que el
   círculo de la píldora se veía como un botón suelto flotando encima. Se deja
   que el .input-group le dé el radio de su esquina derecha. */
.fbar .filters-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0 0.7rem;
}

/* Botonera a todo el ancho en móvil: en una columna suelta quedaba corta y
   descolgada al final del panel. */
@media (max-width: 767.98px) {
    .fbar-actions { grid-column: 1 / -1; }
}

.fbar-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #64748b);
    margin-bottom: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fbar-label i {
    color: var(--bs-primary, #5e72e4);
}

/* Altura uniforme de todos los controles: sin esto el input[type=date] sale
   más alto que el select nativo y la fila queda dentada.

   El padding vertical se REDUCE a .25rem: `.form-select-sm` del tema trae
   .5rem arriba y abajo que, sumados a la línea de 19.6px, dan 35.6px — MÁS que
   los 34 de alto. Al no caber, el texto del select dejaba de verse centrado. */
.fbar .form-control,
.fbar .form-select,
.fbar .input-group > .form-control {
    height: 34px;
    min-height: 34px;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* DEFENSA de centrado: un hijo con altura fija no se estira dentro de un
   .input-group más alto — se apoya arriba. align-self lo centra siempre. */
.fbar .input-group > .form-control,
.fbar .input-group > .form-select,
.fbar .input-group > .select2-container {
    align-self: center;
}

.fbar .input-group > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 0.7rem;
}

/* Buscar/Todo NO llevan alto propio: usan el del tema (btn-xs), exactamente el
   mismo botón que el modo píldora. Forzarles 34/44px los engordaba y rompía la
   paridad entre las dos barras. */
.fbar-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── select2 dentro del panel ───────────────────────────────────────────────
   Los filtros que la vista declara con `css_class='select2'` los inicializa el
   init global (static/js/ui_init.js, `select.select2`) — eso sigue igual acá.
   Pero select2 SUSTITUYE el <select> por un <span class="select2-container">,
   así que las reglas de `.form-select` de arriba no lo alcanzan: sin esto el
   widget sale con su alto y su borde gris propios y la fila queda dentada
   junto a los controles nativos. Borde y radio copiados del tema
   (#e8e7ed / .25rem) para que no se distinga cuál es cuál.                    */
/* SOLO estilado EXTERNO (ancho, borde, radio, alto mínimo). El interior lo
   maneja select2: tiene cuatro estados —single vacío, single con "x" de
   limpiar, múltiple vacío con placeholder y múltiple con chips— y cada regla
   sobre sus tripas rompe alguno. Ya pasó: un `display:flex` sobre el single
   mandó la "x" a la izquierda, y anular el padding del múltiple sacó el
   placeholder fuera de la caja. Si algún día hay que tocar el interior, se
   verifican LOS CUATRO estados antes de dar por bueno el cambio. */
.fbar .select2-container {
    width: 100% !important;
}

.fbar .select2-container--default .select2-selection--single,
.fbar .select2-container--default .select2-selection--multiple {
    border: 1px solid #e8e7ed;
    border-radius: 0.25rem;
    min-height: 34px;
}

/* Centrado del texto por line-height (lo que usa el propio select2), NO por
   flexbox: flex reordena la "x" de limpiar y el texto.
   OJO: `static/css/style.css` (global) ya le mete al rendered un padding
   vertical calculado (~10.4px arriba + 9.2px abajo) pensado para un control de
   ~40px. Ese padding SE SUMA al line-height: sin anularlo, el widget salía a
   53.7px contra los 34px de los inputs nativos — el "select gordo". */
.fbar .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 32px;
}

/* La flecha también viene dimensionada para 40px desde style.css (height 40,
   top 6): en una caja de 34 se salía por abajo. */
.fbar .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px;
    top: 0;
}

/* El contenedor de chips del múltiple es un <ul> y hereda el
   `margin-bottom: 1rem` del reset de Bootstrap, que select2 no anula: son
   16px de aire bajo los chips, dentro del borde. Es lo ÚNICO del interior del
   múltiple que se toca — verificado que no afecta al estado vacío, donde el
   placeholder vive en otro nodo. */
.fbar .select2-selection--multiple .select2-selection__rendered {
    margin-bottom: 0;
}

/* ── ÁREA TÁCTIL EN MÓVIL — AL FINAL DEL ARCHIVO A PROPÓSITO ────────────────
   Estas alturas tienen la MISMA especificidad que las reglas base de arriba
   (34px), así que solo ganan si van después. Escrito junto a su regla base, el
   móvil se quedaba en 34px sin que nada avisara. Cualquier alto nuevo para
   móvil se agrega ACÁ.                                                        */
/* SIN salto de altura en móvil: 34px en TODOS los anchos. Antes el control
   crecía a 44px bajo md (área táctil recomendada) y el cambio de tamaño al
   girar el teléfono o al cruzar el breakpoint se notaba mucho. Decisión de
   José: prima la consistencia visual. */

/* ── Contadores/resumen que acompañan a la barra ── */
.fbar-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.fbar-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background-color: var(--bs-white, #fff);
    border: 1px solid var(--bs-gray-200, #e3e7ef);
    border-radius: 50rem;
    padding: 0.2rem 0.7rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--bs-body-color, #475569);
    white-space: nowrap;
}

.fbar-chip strong {
    font-weight: 800;
}

.fbar-chip.is-success strong { color: var(--bs-success, #16a34a); }
.fbar-chip.is-warning strong { color: var(--bs-warning, #d97706); }
.fbar-chip.is-danger  strong { color: var(--bs-danger, #dc3545); }