/* ============================================================
 * mv-tab-bar-v2.css
 * MetaVoz — Design System v2
 *
 * Canonical CSS for the WAI-ARIA tablist pattern used by mv-tabs.js.
 *
 * Scope: THIS FILE ONLY owns the *button-tab* variant and panel
 *   hiding rules that were missing from metavoz-theme-v2.css.
 *
 *   - .mv-tab-bar-v2__tab      (<button role="tab">)
 *   - .mv-tab-panel[hidden]    (panel hidden-attr support)
 *   - .mv-tab-panel:not([hidden])  (panel visible-by-default)
 *
 * The legacy anchor variant (.mv-tab-bar-v2__item) and its pill
 * modifier stay in metavoz-theme-v2.css §2.2 (lines 1380–1505)
 * and are NOT duplicated here.
 *
 * IMPORTANT: this file MUST load AFTER metavoz-theme-v2.css so
 * that the more-specific [hidden] rule can override the generic
 * `.mv-tab-panel { display: none }` rule from §2.2.
 *
 * Fixes: ui-visual-qa-auditor bugs #1 (P0) + #5 (P1) · 2026-04-17
 * ============================================================ */

/* Root tablist container — positioning context for indicator */
.mv-tab-bar-v2 {
  position: relative;
}

/* Tablist row — flex row of tab buttons, with bottom border */
.mv-tab-bar-v2 > [role="tablist"] {
  display: flex;
  gap: var(--mv-space-2);
  border-bottom: 1px solid var(--mv-border-subtle);
  position: relative;
  flex-wrap: wrap;
}

/* Button-based tab (distinct from .mv-tab-bar-v2__item which is <a>) */
.mv-tab-bar-v2__tab {
  background: transparent;
  border: 0;
  padding: var(--mv-space-3) var(--mv-space-4);
  color: var(--mv-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-size: var(--mv-text-sm);
  font-weight: var(--mv-fw-medium);
  font-family: inherit;
  line-height: 1.4;
  margin-bottom: -1px; /* overlap the tablist bottom border */
  transition:
    color var(--mv-dur-fast) var(--mv-ease-out),
    border-color var(--mv-dur-fast) var(--mv-ease-out);
  white-space: nowrap;
}

.mv-tab-bar-v2__tab:hover:not([aria-selected="true"]):not(:disabled) {
  color: var(--mv-text);
  border-bottom-color: var(--mv-border);
}

.mv-tab-bar-v2__tab[aria-selected="true"] {
  color: var(--mv-primary-700);
  border-bottom-color: var(--mv-primary-700);
  font-weight: var(--mv-fw-semibold);
}

.mv-tab-bar-v2__tab:focus-visible {
  outline: var(--mv-focus-ring-width) solid var(--mv-focus-ring-color);
  outline-offset: var(--mv-focus-ring-offset);
  border-radius: var(--mv-radius-sm);
}

.mv-tab-bar-v2__tab:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- Panel visibility ---------- */
/* Panels use the native `hidden` HTML attribute to hide, and are
 * visible when the attribute is absent. The existing §2.2 rule
 * `.mv-tab-panel { display: none }` would break this pattern,
 * so we override here with higher-specificity selectors. */

.mv-tab-panel {
  padding: var(--mv-space-5) 0;
}

.mv-tab-panel[hidden] {
  display: none !important; /* Override §2.2 `.mv-tab-panel { display:none }` is fine;
                                 the !important here guards against future
                                 cascade leaks from legacy metavoz-theme.css. */
}

.mv-tab-panel:not([hidden]) {
  display: block;
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .mv-tab-bar-v2__tab {
    transition: none;
  }
}

/* ---------- Mobile: allow horizontal scroll of tabs ---------- */
@media (max-width: 640px) {
  .mv-tab-bar-v2 > [role="tablist"] {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .mv-tab-bar-v2 > [role="tablist"]::-webkit-scrollbar {
    display: none;
  }
}

/* ============================================================
 * Dropdown trigger + menu (mv-dropdown.js WAI-ARIA 1.2)
 * Added 2026-04-18 — Administración nav dropdown fix (P0)
 * ============================================================ */

/* Container: position context for the absolutely-placed menu */
.mv-tab-bar-v2__item--dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Trigger button — styled like a nav item */
.mv-tab-bar-v2__dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--mv-space-2);
  padding: var(--mv-space-2) var(--mv-space-3);
  background: transparent;
  border: 0;
  border-radius: var(--mv-radius-sm);
  font-family: inherit;
  font-size: var(--mv-text-sm);
  font-weight: var(--mv-fw-medium);
  color: var(--mv-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition:
    color var(--mv-dur-fast) var(--mv-ease-out),
    background var(--mv-dur-fast) var(--mv-ease-out);
  /* Same nav-item appearance */
  text-decoration: none;
  line-height: 1.4;
}

.mv-tab-bar-v2__dropdown-trigger:hover {
  color: var(--mv-text);
  background: var(--mv-surface-raised, rgba(0, 0, 0, 0.04));
}

.mv-tab-bar-v2__dropdown-trigger[aria-expanded="true"] {
  color: var(--mv-primary-700);
  background: var(--mv-surface-raised, rgba(0, 0, 0, 0.04));
}

.mv-tab-bar-v2__dropdown-trigger:focus-visible {
  outline: var(--mv-focus-ring-width) solid var(--mv-focus-ring-color);
  outline-offset: var(--mv-focus-ring-offset);
}

/* Chevron arrow rotation on open */
.mv-tab-bar-v2__dropdown-arrow {
  transition: transform var(--mv-dur-fast) var(--mv-ease-out);
  font-size: 0.75em;
}

.mv-tab-bar-v2__dropdown-trigger[aria-expanded="true"] .mv-tab-bar-v2__dropdown-arrow {
  transform: rotate(-180deg);
}

/* Dropdown menu panel */
.mv-tab-bar-v2__dropdown-menu {
  position: absolute;
  top: calc(100% + var(--mv-space-1));
  left: 0;
  min-width: 200px;
  background: var(--mv-surface, #ffffff);
  border: 1px solid var(--mv-border-subtle);
  border-radius: var(--mv-radius-md);
  box-shadow: var(--mv-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));
  list-style: none;
  margin: 0;
  padding: var(--mv-space-1) 0;
  z-index: 200;
}

/* Closed state via native hidden attr — works with mv-dropdown.js */
.mv-tab-bar-v2__dropdown-menu[hidden] {
  display: none !important;
}

/* Menu items */
.mv-tab-bar-v2__dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
  padding: var(--mv-space-2) var(--mv-space-4);
  font-size: var(--mv-text-sm);
  font-weight: var(--mv-fw-regular);
  color: var(--mv-text);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    color var(--mv-dur-fast) var(--mv-ease-out),
    background var(--mv-dur-fast) var(--mv-ease-out);
}

.mv-tab-bar-v2__dropdown-item:hover,
.mv-tab-bar-v2__dropdown-item:focus {
  background: var(--mv-surface-raised, rgba(0, 0, 0, 0.04));
  color: var(--mv-primary-700);
  outline: none;
}

.mv-tab-bar-v2__dropdown-item:focus-visible {
  outline: var(--mv-focus-ring-width) solid var(--mv-focus-ring-color);
  outline-offset: calc(-1 * var(--mv-focus-ring-offset));
  border-radius: var(--mv-radius-sm);
}

.mv-tab-bar-v2__dropdown-item i {
  width: 1em;
  text-align: center;
  flex-shrink: 0;
  color: var(--mv-text-muted);
}

/* Separator li */
.mv-tab-bar-v2__dropdown-menu li[role="separator"],
.mv-tab-bar-v2__dropdown-menu [role="separator"] {
  height: 1px;
  background: var(--mv-border-subtle);
  margin: var(--mv-space-1) 0;
}

/* ---------- Mobile: full-width dropdown menu ---------- */
@media (max-width: 640px) {
  .mv-tab-bar-v2__item--dropdown {
    position: static;
  }
  .mv-tab-bar-v2__dropdown-menu {
    position: fixed;
    top: auto;
    left: var(--mv-space-3);
    right: var(--mv-space-3);
    min-width: 0;
    width: auto;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .mv-tab-bar-v2__dropdown-trigger,
  .mv-tab-bar-v2__dropdown-item,
  .mv-tab-bar-v2__dropdown-arrow {
    transition: none;
  }
}