/* 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;
}

/* Forma de pestaña (no de botón): una tira con línea base y pestañas de
   esquinas superiores redondeadas. La activa "se abre" hacia la página (se
   funde con la línea base) y lleva la barra de marca arriba; las otras son
   texto tranquilo sin caja. Así una pestaña (cambia la vista) no se confunde
   con una acción (botón con borde completo, ver .lb-page-actions). */
.lb-tabs {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    width: max-content;
    min-width: 100%;
    border-bottom: 1px solid var(--border-visible);
}

.lb-tab {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin-bottom: -1px;
    padding: 0.55rem 1.05rem 0.5rem;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text2);
    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);
    color: var(--accent-strong);
}

.lb-tab:focus-visible {
    /* Hacia adentro: el wrapper recorta (overflow) lo que sale de la tira. */
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.lb-tab[aria-selected="true"] {
    background: var(--surface1);
    border-color: var(--border-visible);
    border-bottom-color: var(--surface1);
    box-shadow: inset 0 3px 0 var(--accent);
    color: var(--accent-strong);
    font-weight: 700;
}

/* 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,
   también para la barra de marca de la pestaña activa. */
[data-skin="c"] .lb-tab[aria-selected="true"] {
    box-shadow: inset 0 3px 0 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);
}