/* ============================================================
   HUF — Componente: Toolbar (.hd-toolbar) — HVL §8.1 región C
   ------------------------------------------------------------
   Vehículo: TagHelper <hd-toolbar>.

   Promoción a componente propio de la antigua `.hd-table-toolbar`
   (que solo servía a una tabla). La toolbar es la barra operativa de
   CUALQUIER pantalla, tenga tabla o no.

   Composición fija (HVL §8.1):

       [ filtros: buscar · estado · tipo ]  │  [ acciones: actualizar · exportar · primaria ]
        ───────── izquierda ─────────      ↑            ──────── derecha ────────
                                        divisor

   Regla de copy: NO existe el par "Filtrar / Limpiar". El filtrado es
   en vivo y "limpiar" es una × dentro del propio campo — dos botones
   para lo que el campo ya resuelve es chrome que no acelera ninguna
   decisión (principio rector).

   Sin borde propio: la línea de estado (arriba) o el encabezado de la
   tabla (abajo) ya separan — ley de bordes anidados (HVL §5.2).
   ============================================================ */

.hd-toolbar {
    display: flex;
    align-items: center;
    gap: var(--hd-space-3);
    min-height: var(--hd-size-toolbar);
    flex-wrap: wrap;
}

/* ── Grupo de filtros — izquierda, controles de 36px ───────────── */
.hd-toolbar__filters {
    display: flex;
    align-items: center;
    gap: var(--hd-space-2);
    flex-wrap: wrap;
    min-width: 0;
    /* Reclama el espacio libre ANTES de envolver. Sin `flex: 1` el grupo se
       dimensiona por contenido: un contenedor flexible que envuelve se mide
       en shrink-to-fit y partía la fila —buscador arriba, filtro y contador
       debajo— aunque sobraran 400px a la derecha. Detectado en Usuarios del
       sistema, donde la toolbar medía 67px en vez de los 48 de la ley. */
    flex: 1 1 auto;
}

/* Cuando los filtros van dentro de un <form> propio (para poder enviarlo al
   cambiar un campo — Usuarios, Alertas, Pagos), ese <form> es OTRO
   contenedor flexible con su propio wrap, y sufre el mismo shrink-to-fit de
   la regla de arriba: medido en Usuarios, el <form> se achicaba a 384px
   —ni siquiera el ancho de sus dos campos combinados (320+188)— y el
   segundo campo caía a una línea nueva aunque sobraran 600px a la derecha.
   Las clases `d-flex`/`gap-2`/`flex-wrap` que las pantallas ya traen en el
   <form> son restos de Bootstrap (removido de HUF) y no hacen nada; este
   selector es el que de verdad gobierna su layout. */
.hd-toolbar__filters > form {
    display: flex;
    align-items: center;
    gap: var(--hd-space-2);
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
}

.hd-toolbar__filters .hd-input,
.hd-toolbar__filters .hd-select {
    height: var(--hd-size-control-sm);
}

/* Un control suelto en la toolbar se mide por su contenido. `.hd-input` y
   `.hd-select` traen `width: 100%` porque en un formulario ocupan su
   columna; dentro de la barra eso hace que cada uno reclame la fila entera
   y la toolbar se parta en tres líneas —buscador, filtro y contador—
   midiendo 110px en vez de los 48 de la ley (medido en Menú). El buscador
   es la excepción: conserva su ancho dominante de 20rem.

   Selector de DESCENDIENTE, no de hijo directo: varias pantallas (Usuarios,
   Alertas, Pagos) envuelven sus filtros en un <form> propio para poder
   enviarlo al cambiar un campo — eso pone un nivel de anidamiento de más
   entre `.hd-toolbar__filters` y el input. Con `>` esta regla nunca
   aplicaba ahí y el segundo filtro heredaba `width: 100%`, forzándolo a su
   propia línea aunque sobrara espacio (medido en Usuarios: "Documento"
   caía debajo de "Nombre"). Mismo criterio que ya usa `.hd-field` dos
   reglas abajo. */
.hd-toolbar__filters .hd-select,
.hd-toolbar__filters .hd-input:not(.hd-toolbar__search) {
    width: auto;

    /* ...y además puede ENCOGER. `width: auto` le da al control su ancho de
       contenido como base, pero todo flex item arranca con `min-width: auto`,
       que lo frena en su tamaño mínimo de contenido — y el de un <select> es el
       de su opción más larga. Cuando las opciones salen de datos (un turno de
       caja, una categoría, un método de pago) ese mínimo supera el ancho del
       teléfono, y como ningún ancestro recorta, el desborde se lo lleva el
       DOCUMENTO entero: medido en Comprobantes a 360px, el select de turnos
       ocupaba 364 y la página scrolleaba 20px en horizontal. Esos 20px son los
       que empujan el padding de página fuera de la pantalla y hacen que todo
       —buscador, pestañas, fichas— se vea cortado contra el borde derecho, que
       es como se reporta el defecto desde el teléfono.

       Con `min-width: 0` el control cede: la barra ya envuelve, así que se
       queda solo en su línea y se ajusta al ancho disponible.

       Va en el CONTROL y no en sus envoltorios porque la contribución mínima de
       un contenedor se calcula desde la de sus hijos: bajarla aquí la baja en
       los cuatro envoltorios que las pantallas usan hoy —suelto en la barra,
       dentro de un <form> propio, dentro del .hd-field del TagHelper, y dentro
       de un `d-flex` heredado de Bootstrap—. Reproducido a 360px en
       Comprobantes, Caja, Menú, Ventas, Pagos, Alertas, Reportes de ingresos y
       Reportes de recaudo.

       `max-width` acompaña pero no basta solo: ante un `min-width` mayor, el
       mínimo gana. */
    min-width: 0;
    max-width: 100%;
}

/* Al ceder ancho, el texto de la opción seleccionada deja de caber. Sin esto el
   navegador lo parte a mitad de letra contra la flecha del select. */
.hd-toolbar__filters .hd-select {
    text-overflow: ellipsis;
}

/* Un <hd-input>/<hd-select> completo dentro de la toolbar trae su
   envoltorio .hd-field, pensado para un formulario: columna, etiqueta
   encima y margen inferior. En una barra de 48px eso la hacía crecer a
   56-74px. El contexto ya nombra el filtro, y quien necesite la
   etiqueta usa `hide-label`, que la conserva para lectores de pantalla. */
.hd-toolbar__filters .hd-field {
    margin-bottom: 0;
    flex-direction: row;
    align-items: center;

    /* El envoltorio necesita su propio `min-width: 0`: no hereda el del control
       que lleva dentro. Bajar el mínimo del <select> evita que ÉL frene la
       línea, pero `.hd-field` sigue siendo un flex item con `min-width: auto`
       y su mínimo de contenido se calcula sobre el ancho preferido del hijo, no
       sobre su mínimo. Medido después de arreglar el control: Comprobantes,
       Caja, Menú, Ventas, Pagos y Alertas dejaron de desbordar, pero Reportes
       de ingresos (107px) y Reportes de recaudo (154px) seguían igual — son
       justo las dos que usan <hd-select>, el único camino que interpone este
       envoltorio. */
    min-width: 0;
}

/* El campo de búsqueda es el filtro dominante: más ancho que el resto,
   siempre primero. */
.hd-toolbar__search {
    width: min(20rem, 100%);
}

/* ── Divisor entre filtros y acciones ──────────────────────────
   Empuja el grupo de acciones a la derecha y marca la frontera
   semántica: a la izquierda se acota lo que se ve, a la derecha se
   actúa sobre ello. */
.hd-toolbar__divider {
    /* Ya no necesita `margin-left: auto` para empujar: el grupo de filtros
       ocupa el espacio libre, así que divisor y acciones quedan a la derecha
       por posición, no por margen. */
    align-self: stretch;
    width: 1px;
    background: var(--hd-color-border);
    /* No llega a los bordes: una línea a sangre competiría con los
       separadores estructurales de las regiones vecinas. */
    margin-block: var(--hd-space-2);
}

/* ── Grupo de acciones — derecha ───────────────────────────────
   Máximo una acción primaria (HVL §8.4: "nunca dos acciones
   primarias"). */
.hd-toolbar__actions {
    display: flex;
    align-items: center;
    gap: var(--hd-space-2);
    flex-shrink: 0;

    /* Envuelve en todo ancho, no solo bajo 768. El grupo no encoge
       (`flex-shrink: 0`), así que sin esto sus botones se quedan en una fila
       pase lo que pase: medido en Menú a **768px**, sus cuatro acciones sumaban
       **809px dentro de 768** y se llevaban el documento entero (57px de scroll
       horizontal). El bloque móvil de más abajo ya lo resolvía, pero corta en
       767.98 y dejaba descubierta justo la franja de la tablet en vertical.

       Ponerlo en la regla base y no subir el corte del bloque móvil a 992 es a
       propósito: envolver es inerte mientras quepa —el escritorio no cambia—,
       mientras que subir el bloque entero también habría llevado los filtros y
       el buscador a ancho completo en tablet, que ahí no hace falta.

       `flex-wrap` solo NO alcanza, y conviene dejar escrito por qué: el grupo es
       a la vez contenedor flexible e ítem flexible de la barra, y como ítem
       lleva `flex-shrink: 0`. Su ancho se resuelve en `max-content` (los 809px)
       y nada lo estrecha, así que sus hijos nunca ven una línea corta contra la
       cual envolver. El tope es lo que lo obliga a medir como su contenedor; el
       bloque móvil consigue lo mismo con `width: 100%`. */
    flex-wrap: wrap;
    max-width: 100%;
}

/* Cuando no hay filtros, las acciones siguen alineadas a la derecha
   sin necesidad del divisor. */
.hd-toolbar__actions:first-child {
    margin-left: auto;
}

/* ── Contador de resultados ────────────────────────────────────
   Vive junto a los filtros porque describe lo filtrado, no una acción.
   Número tabular: es un dato operativo (HVL §4, numeral tabular). */
.hd-toolbar__count {
    font-size: var(--hd-text-meta);
    color: var(--hd-theme-text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    padding-inline: var(--hd-space-2);
}

/* ── Móvil ─────────────────────────────────────────────────────
   El divisor vertical no sobrevive al wrap: se convierte en separación
   por espacio. */
@media (max-width: 767.98px) {
    .hd-toolbar__divider {
        display: none;
    }

    .hd-toolbar__filters,
    .hd-toolbar__actions {
        width: 100%;
    }

    /* Las acciones también envuelven: `flex-shrink: 0` las mantiene a su
       ancho natural, así que tres botones en una fila de 375px desbordaban
       la pantalla en vez de pasar a la línea siguiente (medido en Menú, con
       "Categoría · Importar menú · Más"). */
    .hd-toolbar__actions {
        flex-wrap: wrap;
    }

    .hd-toolbar__search {
        width: 100%;
    }
}