/* ARCHIVO: /assets/css/pestanas.css
   Componente global de pestañas (helpers/pestanas.php: render_tabs() +
   assets/js/pestanas.js — ver AGENTS.md § "Estándar de página", punto 3).

   Cargado tanto por páginas internas (layouts/header.php) como por páginas
   públicas sin layout (funcionalidades.php) — por eso vive en su propio
   archivo en vez de sumarse a assets/css/components.css (interno) o a una
   hoja de una sola página pública.

   Solo tokens (assets/css/tokens.css): compatible con la piel C sin tocarla
   (AGENTS.md § "Estándar de página", punto 5). */

.lb-tabs-wrap {
    /* El contenedor que hace scroll horizontal es este wrapper, nunca la
       página entera — la página lo envuelve dentro de su contenedor
       centrado habitual. */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.lb-tabs {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    width: max-content;
    min-width: 100%;
}

.lb-tab {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-visible);
    background: var(--surface1);
    color: var(--text1);
    font: inherit;
    font-size: var(--text-body-sm);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition:
        background var(--duration-fast) var(--ease-smooth),
        border-color var(--duration-fast) var(--ease-smooth),
        color var(--duration-fast) var(--ease-smooth);
}

.lb-tab:hover {
    background: var(--accent-subtle);
    border-color: var(--accent);
    color: var(--accent-strong);
}

.lb-tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.lb-tab[aria-selected="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text1-inverse);
}

/* Piel C: el acento menta claro (#0E8C7C) con el texto claro da 3,9:1; el
   acento "strong" de la piel (oscuro en claro, brillante en oscuro) pasa AA. */
[data-skin="c"] .lb-tab[aria-selected="true"] {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
}

/* Cualquier panel de pestaña (role="tabpanel") oculto por pestanas.js. Sin
   JS ningún panel trae `hidden` (mejora progresiva: todo visible) — esta
   regla solo entra en juego una vez que el script corrió. Sin scope a
   propósito: [hidden]{display:none} es el default del user-agent, así que
   esto es solo un refuerzo explícito — no cambia nada en las ~14 vistas con
   pestañas a mano (deuda conocida, tests/fixtures/estandar_de_pagina_deuda.php)
   que este cambio explícitamente NO toca. */
[role="tabpanel"][hidden] {
    display: none;
}

/* data-lb-panel (no role="tabpanel" a secas): el panel lo escribe la PÁGINA,
   no render_tabs(), así que esta clase de foco solo debe pintarse en los
   paneles que la página marcó como parte del componente global — nunca en
   los de las ~14 vistas con pestañas a mano de arriba, que también usan
   role="tabpanel" pero no deberían cambiar de aspecto sin que nadie lo pida
   (gga, revisión de este mismo commit: alcance estricto al task). */
[data-lb-panel]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-card);
}