/* ============================================================
   HUF — Componente: PageHeader (.hd-page-header)
   ------------------------------------------------------------
   Vehículo: TagHelper <hd-page-header> (AdminPortal/TagHelpers/
   HdPageHeaderTagHelper.cs). Versión HUF-nativa, en paralelo a
   _PageHeader.cshtml (que sigue sin cambios — no se migra ninguna
   pantalla). Jerarquía de página (plan §16.1): encabezado → acción
   principal → contenido → acciones secundarias.
   Ejemplos de uso → docs/hednora-ui-framework-guide.md §PageHeader.
   ============================================================ */

.hd-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--hd-space-4);
}

/* El grupo envuelve por dentro cuando su fila ya no cabe. Con
   `flex-shrink: 0` y sin wrap, una cabecera de tres acciones (Menú:
   importar · categoría · producto) medía 382px a 390 de ventana y se salía
   de la pantalla. Envolver es lo correcto aquí y no lo contradice §8.4: la
   ley limita a UNA acción primaria, no a una sola acción. */
.hd-page-header__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--hd-space-2);
    min-width: 0;
}

/* REVISIÓN 3 (2026-08-04): se retiró el borde izquierdo de acento de 4px.
   El título de una pantalla no es un estado activo ni una acción: la jerarquía
   ya la establecen su tamaño y su peso. Además el segmento era de 4px, un
   grosor que la firma no contempla (§4.2 admite 3px en el sidebar y 2px en el
   resto), así que era acento decorativo y fuera de especificación a la vez. */
.hd-page-header__title {
    font-size: var(--hd-text-page);
    font-weight: 700; /* máximo permitido por HVL §5.4 — 800/900 leen promocional */
    color: var(--hd-theme-text);
    margin: 0;
}

.hd-page-header__subtitle {
    font-size: var(--hd-text-caption);
    color: var(--hd-theme-text-muted);
    margin: var(--hd-space-1) 0 0;
}

/* ── Región A en ventanas cortas ───────────────────────────────
   La otra mitad del escalón compacto que implementa HVL §8.3 por altura; las
   regiones y sus paddings van en shell.css, con la medición que lo motivó.

   EL SUBTÍTULO SE OCULTA, y es el que más paga: 22 de los 76px que medía el
   encabezado en Menú. Se puede porque es texto EXPLICATIVO, no operativo —
   "Categorías y productos disponibles para el carrito de mesas" le cuenta a
   alguien qué es esta pantalla la primera vez que la abre, y quien trabaja en un
   POS ocho horas al día ya lo sabe. El título, la ruta de contexto y la acción
   primaria se quedan: esos sí orientan a diario.

   El título baja 24 → 22 → 20px, y no más. A 20px empata con
   `--hd-text-section` (encabezado de sección) y la jerarquía de HVL §5.4 se
   pierde: el título de la pantalla dejaría de leerse como el de mayor rango.
   Por eso el primer escalón usa 22px, que no existe como token de rol porque no
   es un rol nuevo — es el mismo rol apretado.

   Se redefine el TOKEN y no la regla porque `--hd-text-page` tiene un solo
   consumidor (este título), y así una pantalla futura que lo use hereda el
   escalón sin enterarse. Al revés que `--hd-size-topbar`, que sí tiene un
   consumidor ajeno y por eso en shell.css se evitó — ver la nota de allá.

   DONDE HAY ACCIÓN PRIMARIA, ESTO CASI NO SE NOTA, Y ESTÁ BIEN ASÍ. Medido: en
   Menú el encabezado bajó de 76 a 60px, no a los ~43 que dan las cuentas del
   texto. El motivo es que el grupo se alinea a `flex-start` y el botón "Nuevo
   producto" mide `--hd-size-control` (44px), así que **el piso del encabezado lo
   pone el botón, no el título**: ocultar el subtítulo no recorta nada por debajo
   de ese piso. En Caja, que no lleva acción primaria, el mismo escalón sí baja
   53 → 42 → 36.

   Se podría ganar ese hueco encogiendo `--hd-size-control`, y NO SE HACE A
   PROPÓSITO: 44px es el mínimo táctil de iOS, y el equipo que motivó todo esto es
   un POS que se opera con el dedo. Apretar el cromo para que quepan más filas es
   la ley (HVL §8.3); apretar el blanco de un botón hasta que el operador falle el
   toque es cambiar un problema visible por uno que se paga en errores de venta.
   El piso de 44px es la frontera de este escalón, no una tarea pendiente.
   ============================================================ */

@media (min-width: 992px) and (max-height: 850px) {
    :root {
        --hd-text-page: 1.375rem; /* 22px */
    }

    .hd-page-header__subtitle {
        display: none;
    }
}

@media (min-width: 992px) and (max-height: 650px) {
    :root {
        --hd-text-page: 1.25rem; /* 20px */
    }
}

/* ── Región A en el teléfono ───────────────────────────────────
   Envolver ya evitaba el desborde (regla de arriba), pero dejaba las acciones
   como un bloque irregular: cada botón conserva su ancho de texto, así que a
   360px el Centro de operaciones repartía "Nuevo pedido · Nuevo cliente ·
   Registrar pago" en dos filas con sangrías de 34, 180 y 40px, y en
   Inteligencia la cuarta acción abría una tercera fila. Nada quedaba alineado
   y la acción primaria perdía su lugar de cabecera.

   Se reparte igual que el footer de acciones en shell.css, y por la misma
   razón: es la misma decisión de composición en la misma ventana. El primario
   se lleva una fila entera arriba —es la acción que el pulgar busca sin
   mirar— y los secundarios se reparten la fila siguiente a ancho parejo.

   `flex` y no `grid`: el grupo no siempre lleva solo botones (alguna pantalla
   mete un <form> o un menú), y con flex lo que no sea `.hd-btn` conserva su
   comportamiento actual en vez de convertirse en celda.

   El corte va en 768 y no en 992 por lo mismo que el footer: a 768 medido las
   acciones caben en una fila, la tablet no necesita el reparto. */
@media (max-width: 767.98px) {
    .hd-page-header__actions {
        width: 100%;
    }

    /* 9rem de base: por debajo de eso dos botones ya no caben juntos en un
       teléfono de 360 y es preferible que uno baje a la fila siguiente antes
       que dejar dos etiquetas partidas. */
    .hd-page-header__actions > .hd-btn {
        flex: 1 1 9rem;
    }

    .hd-page-header__actions > .hd-btn--primary {
        flex-basis: 100%;
        order: -1;
    }
}