/* ============================================================
   HUF — Componente: Tabs (.hd-tabs)
   ------------------------------------------------------------
   Reemplaza .nav-tabs + data-bs-toggle="tab" de Bootstrap (que requiere
   su JS). Comportamiento propio en wwwroot/js/huf/hd-tabs.js.
   Ejemplos de uso → docs/hednora-ui-framework-guide.md §Tabs.
   ============================================================ */

/* La tira scrollea en vez de empujar la página. Sin esto, un juego de
   pestañas más ancho que la ventana desbordaba el documento entero: medido en
   el Portal Cliente a 390px, la pestaña "Agenda" terminaba en 387px contra un
   viewport de 375 y toda la página ganaba scroll horizontal. Es del
   componente, no de esa pantalla — le pasa a cualquier hd-tabs que no quepa.
   Mismo recurso que .cat-tabs-scroll del menú QR: se oculta la barra porque la
   tira es angosta y la barra se comería el subrayado de la pestaña activa. */
.hd-tabs__list {
    display: flex;
    gap: var(--hd-space-2);
    border-bottom: 1px solid var(--hd-color-border);
    list-style: none;
    margin: 0;
    padding: 0 0 var(--hd-space-2);
    overflow-x: auto;
    scrollbar-width: none;
}

.hd-tabs__list::-webkit-scrollbar { display: none; }

/* Cada pestaña es un segmento con forma propia — no una palabra subrayada.
   Un subrayado de 2px sobre texto plano se lee como un enlace, no como
   "esta vista tiene varias secciones y estoy en una": a un metro de la
   caja, el cajero no distinguía las cuatro colas de pedidos. */
.hd-tabs__tab {
    padding: var(--hd-space-2) var(--hd-space-4);
    background: var(--hd-color-inset);
    border: 1px solid var(--hd-color-border);
    border-radius: var(--hd-radius-sm);
    white-space: nowrap;
    flex-shrink: 0;
    color: var(--hd-theme-text-muted);
    font-family: var(--hd-theme-font, var(--hd-font-sans));
    font-size: var(--hd-text-base);
    font-weight: 500;
    cursor: pointer;
    transition: color var(--hd-motion-standard) var(--hd-ease),
                background-color var(--hd-motion-standard) var(--hd-ease),
                border-color var(--hd-motion-standard) var(--hd-ease);
}

.hd-tabs__tab:hover {
    color: var(--hd-theme-text);
    border-color: var(--hd-color-border-strong);
}

.hd-tabs__tab:focus-visible {
    outline: var(--hd-focus-ring);
    outline-offset: var(--hd-focus-offset);
}

/* Activa: tinte + borde de acento + peso, el mismo criterio que
   .hd-pay-tile y .hd-panel-card--selectable — "esto está seleccionado"
   es exactamente lo que HVL §4.2 reserva para el color con significado. */
.hd-tabs__tab--active {
    color: var(--hd-theme-accent-text);
    background: rgba(var(--hd-theme-accent-rgb), 0.12);
    border-color: var(--hd-theme-accent);
    font-weight: 600;
}

.hd-tabs__panel {
    padding-top: var(--hd-space-4);
}

/* ── Superficie táctil y afordancia de deslizamiento — bajo 992px ──
   Dos cosas distintas que se resuelven juntas porque comparten causa:
   la tira scrollea, pero no lo parece.

   1. La pestaña medía 41px de alto —tres por debajo del mínimo táctil—
      porque su alto salía del padding y del renglón, no de un token.

   2. Que la tira se deslice lo sabe el CSS, no el usuario. `overflow-x:
      auto` evita el desborde del documento (ver cabecera de este
      archivo), pero deja la última pestaña cortada a media palabra y sin
      ninguna señal: medido a 390px, "Cancelados (0)" se salía 78px en
      Comprobantes y "Domicilios · 5" 231px en Caja. La lectura natural
      es "esa pestaña está rota", no "hay más a la derecha".

   El degradado de borde se pinta SOLO del lado donde queda contenido
   fuera, y lo decide `hd-tabs.js` con dos clases: sin ellas la tira se
   ve entera y sin velo, que es lo correcto cuando todo cabe. Es la misma
   razón por la que no basta un degradado fijo: apagaría la última
   pestaña de toda pantalla que sí cabe.

   `mask-image` y no un pseudo-elemento con gradiente de color: el velo
   tiene que funcionar en tema claro y oscuro sin conocer el fondo. Un
   `::after` con `linear-gradient(to right, transparent, var(--fondo))`
   obliga a acertar el fondo exacto de la región, y la tira vive sobre
   tres superficies distintas. */
@media (max-width: 991.98px) {
    .hd-tabs__tab {
        min-height: var(--hd-size-control-sm);
    }
}

.hd-tabs__list.is-overflow-end {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
}

.hd-tabs__list.is-overflow-start {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px);
    mask-image: linear-gradient(to right, transparent 0, #000 32px);
}

.hd-tabs__list.is-overflow-start.is-overflow-end {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}