/* ============================================================
 * mv-topnav-drawer.css
 * Metavoz Design System v2 — Top Navigation Hamburger + Drawer
 *
 * Responsive off-canvas drawer for the main topnav.
 * Pattern: hamburger button (<=1279px) triggers a slide-in
 * aside with all nav tabs rendered as a vertical list.
 *
 * Breakpoints (literal values — var() not allowed in @media):
 *   <=1279px           : hamburger visible, horizontal nav hidden, drawer active
 *   >=1280px           : hamburger hidden, horizontal nav fully visible, drawer/backdrop hidden
 *
 * Load order: AFTER metavoz-theme.css + metavoz-theme-v2.css
 * Introduced: Ola 1, W1-02 / W1-03 — 2026-04-19
 * Updated: 2026-04-20 — mobile-only hamburger (was <=1279px, now <=767px)
 * Updated: 2026-05-21 — breakpoint raised to 1350px (11 nav items need ~1402px)
 * Updated: 2026-05-22 — breakpoint raised to 1950px (drawer on laptops + Full HD)
 * Updated: 2026-08-01 — nav-homologada: breakpoint lowered back to 1280px now
 *   that the tab-row consolidates MetavozSMS/MetaMailing/MetaWP/Integraciones
 *   into a single "Módulos" tab (~8 tabs fit >=1280px). Drawer reaches full
 *   parity with the mega (NAV_SECTIONS single source of truth — see
 *   context_processors.metavoz_nav + gestor/_nav_node.html). L1/L2/L3
 *   typography tokenized, "Salir" de-duplicated between topbar and drawer
 *   footer (see .mv-topnav__logout / .mv-topnav__user-block rules below).
 * JS companion: mv-topnav-drawer.js
 * ============================================================ */

/* ── Default (>=1951px desktop): hamburger hidden, tabs full ── */
/* !important ensures this wins over any upstream button reset or flex-child rule */
.mv-topnav__hamburger {
  display: none !important;
}

/* Compact tabs — mega range just above the drawer breakpoint, where the
   8-tab row (after the Módulos consolidation) is still a bit tight.
   2026-08-01 (P1 clip fix): at exactly 1280px the 8-tab row measured 932px
   inside an 890px nav box (+42px overflow) — .mv-topnav__nav has
   overflow-x:hidden, so the 8th tab "Módulos" clipped to "Módul" and its
   caret vanished. Fix = tighten each tab's INTERNAL gap (icon↔label↔caret)
   from --mv-space-2 (8px, the base value in metavoz-theme-v2.css) to
   --mv-space-1 (4px). Every one of the 8 tabs has 3 flex items → 2 internal
   gaps, so this removes 4px × 2 × 8 ≈ 64px, landing the row at ~868px:
   inside the 890px box with ~22px headroom at 1280, and well inside the
   wider box at 1440/1600. nav gap (2px) and padding-inline (8px) unchanged
   so the row rhythm at 1440/1920 is preserved. */
@media screen and (min-width: 1280px) and (max-width: 1600px) {
  .mv-topnav__nav {
    gap: 2px;
  }
  .mv-topnav__tab {
    gap: var(--mv-space-1);   /* 8px → 4px: recovers ~64px across 8 tabs (P1) */
    padding-inline: 8px;
    font-size: 13px;
  }
}

/* ── >=1280px: drawer and backdrop always hidden — mega nav takes over ── */
@media (min-width: 1280px) {
  .mv-topnav-drawer,
  .mv-topnav-drawer-backdrop {
    display: none !important;
  }
}

/* ── <1600px: identity already shown in the drawer footer / mega user-block
   is redundant at this width — hide the username, keep the icon-only
   affordances compact. Logout itself is handled by the <1280px rule below
   (kept visible in the topbar for the full mega range >=1280px). ── */
@media (max-width: 1599px) {
  .mv-topnav__username {
    display: none;
  }
}

/* ── <=1279px: hamburger visible, horizontal nav hidden, drawer active ── */
@media (max-width: 1279px) {
  .mv-topnav__hamburger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;      /* WCAG 2.5.5 min touch target */
    height: 44px;
    padding: 0;
    color: var(--mv-topnav-text, var(--mv-text-muted));
    background: transparent;
    border: none;
    border-radius: var(--mv-radius-md);
    cursor: pointer;
    flex-shrink: 0;
    transition: color var(--mv-dur-fast, 120ms) var(--mv-ease-out, ease-out);
  }

  .mv-topnav__hamburger:hover {
    color: var(--mv-topnav-text-hover, var(--mv-text));
  }

  .mv-topnav__hamburger:focus-visible {
    outline: var(--mv-focus-ring-width, 2px) solid var(--mv-focus-ring-color, var(--mv-primary-500));
    outline-offset: var(--mv-focus-ring-offset, 2px);
  }

  /* Hide full tab row on mobile — drawer takes over */
  .mv-topnav__nav {
    display: none;
  }

  /* Hide language picker on mobile (it's inside drawer) */
  .mv-topnav__actions .mv-lang-picker,
  .mv-topnav__actions #mv-lang-picker {
    display: none;
  }

  .mv-topnav__tab--secondary {
    display: none;
  }

  /* "Salir" único: below the drawer breakpoint identity+logout live only in
     the drawer footer (.mv-topnav-drawer__footer) — hide the topbar's own
     copy so it's never rendered twice at the same time. At >=1280px the
     drawer is display:none anyway, so .mv-topnav__user-block stays visible
     there (see rule above hiding only .mv-topnav__username <1600px). */
  .mv-topnav__user-block {
    display: none;
  }

  .mv-topnav__sep {
    display: none;
  }

  /* Re-enable drawer and backdrop on mobile */
  .mv-topnav-drawer,
  .mv-topnav-drawer-backdrop {
    display: unset;
  }
}

/* Ensure .mv-topnav__more is hidden on desktop by default */
.mv-topnav__more {
  display: none;
}

/* ── Drawer (off-canvas, left side) ── */
.mv-topnav-drawer {
  position: fixed;
  inset: 0 auto 0 0;         /* top:0 right:auto bottom:0 left:0 */
  width: min(280px, 85vw);
  transform: translateX(-100%);
  transition:
    transform var(--mv-dur-base, 200ms) var(--mv-ease-out, ease-out),
    visibility 0ms var(--mv-dur-base, 200ms); /* delay visibility until slide finishes */
  z-index: 1050;
  background: var(--mv-surface, #ffffff);
  box-shadow: var(--mv-elev-5);
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--mv-space-4);
  visibility: hidden;
  /* Keep drawer above topnav mega menus (z-index 100) */
}

.mv-topnav-drawer[aria-hidden="false"] {
  transform: translateX(0);
  visibility: visible;
  transition:
    transform var(--mv-dur-base, 200ms) var(--mv-ease-out, ease-out),
    visibility 0ms 0ms;
}

/* Drawer header */
.mv-topnav-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--mv-space-4);
  border-bottom: 1px solid var(--mv-border-subtle);
  margin-bottom: var(--mv-space-4);
}

.mv-topnav-drawer__brand {
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
  font-weight: var(--mv-fw-semibold);
  font-size: var(--mv-text-md);
  color: var(--mv-text);
  text-decoration: none;
}

.mv-topnav-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: var(--mv-radius-md);
  color: var(--mv-text-muted);
  cursor: pointer;
  transition: color var(--mv-dur-fast) var(--mv-ease-out),
              background var(--mv-dur-fast) var(--mv-ease-out);
}

.mv-topnav-drawer__close:hover {
  color: var(--mv-text);
  background: var(--mv-surface-sunken);
}

.mv-topnav-drawer__close:focus-visible {
  outline: var(--mv-focus-ring-width, 2px) solid var(--mv-focus-ring-color, var(--mv-primary-500));
  outline-offset: var(--mv-focus-ring-offset, 2px);
}

/* Drawer nav list */
.mv-topnav-drawer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Drawer nav item */
.mv-topnav-drawer__item {
  display: flex;
  align-items: center;
  gap: var(--mv-space-3);
  min-height: 44px;            /* WCAG 2.5.5 touch target — L1 spec */
  padding: var(--mv-space-2) var(--mv-space-3);
  border-radius: var(--mv-radius-md);
  color: var(--mv-text-muted);
  text-decoration: none;
  font-size: var(--mv-text-sm);
  font-weight: var(--mv-fw-medium);
  cursor: pointer;
  transition:
    color var(--mv-dur-fast, 120ms) var(--mv-ease-out, ease-out),
    background var(--mv-dur-fast, 120ms) var(--mv-ease-out, ease-out);
  /* Remove default button styles if used as <button> */
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
}

.mv-topnav-drawer__item:hover {
  color: var(--mv-text);
  background: var(--mv-surface-sunken, var(--mv-neutral-100));
}

.mv-topnav-drawer__item[aria-current="page"],
.mv-topnav-drawer__item--active {
  background: var(--mv-primary-50);
  color: var(--mv-primary-700);
  font-weight: var(--mv-fw-semibold);
}

.mv-topnav-drawer__item:focus-visible {
  outline: var(--mv-focus-ring-width, 2px) solid var(--mv-focus-ring-color, var(--mv-primary-500));
  outline-offset: -2px;
  border-radius: var(--mv-radius-md);
}

.mv-topnav-drawer__item-icon {
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  font-size: 14px;
}

/* Section title inside drawer */
.mv-topnav-drawer__section-title {
  padding: var(--mv-space-4) var(--mv-space-3) var(--mv-space-2);
  font-size: 11px;
  font-weight: var(--mv-fw-semibold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--mv-text-muted);
}

/* Divider inside drawer */
.mv-topnav-drawer__divider {
  height: 1px;
  background: var(--mv-border-subtle);
  margin: var(--mv-space-3) 0;
}

/* Logout / user row at bottom of drawer */
.mv-topnav-drawer__footer {
  margin-top: var(--mv-space-6);
  padding-top: var(--mv-space-4);
  border-top: 1px solid var(--mv-border-subtle);
}

.mv-topnav-drawer__user {
  font-size: var(--mv-text-sm);
  color: var(--mv-text-muted);
  padding: 0 var(--mv-space-3) var(--mv-space-2);
}

/* ── Lang picker inside drawer ── */
.mv-topnav-drawer__section {
  margin-bottom: var(--mv-space-3);
}

/* Position the lang picker inline — override any absolute/relative positioning
   that works in the topnav right-actions context. */
.mv-topnav-drawer__lang-wrap {
  padding: 0 var(--mv-space-3);
  display: flex;
  align-items: center;
}

/* Ensure the lang picker form/select stretches to fit the drawer column */
.mv-topnav-drawer__lang-wrap .mv-lang-picker,
.mv-topnav-drawer__lang-wrap #mv-lang-picker,
.mv-topnav-drawer__lang-wrap form,
.mv-topnav-drawer__lang-wrap select {
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* ── Backdrop ── */
.mv-topnav-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.50);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mv-dur-base, 200ms) var(--mv-ease-out, ease-out);
  z-index: 1040;   /* below drawer (1050) */
}

.mv-topnav-drawer-backdrop--open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .mv-topnav-drawer,
  .mv-topnav-drawer-backdrop {
    transition: none;
  }
}

/* ── Accordion — EVERY section is now one (nav-homologada, 2026-08) ──
   L1 · Sección: accordion toggle AND a hypothetical flat link share ONE
   style (--mv-text-sm / 600 / --mv-text) — fixes the "two nivel 1" bug:
   this button used to reset to `font:inherit;color:inherit`, which pulled
   in the browser/body default (~15.12px/400) instead of the shared
   `.mv-topnav-drawer__item` token-based style (~13.09px/500), so two
   visually different "level 1" rows existed side by side. Explicit
   token values below always win (same specificity, later in cascade). */
.mv-topnav-drawer__accordion-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: var(--mv-text-sm);
  font-weight: var(--mv-fw-semibold);
  color: var(--mv-text);
}

.mv-topnav-drawer__accordion-caret {
  margin-left: auto;
  font-size: 0.75rem;
  transition: transform 0.25s ease;
}

.mv-topnav-drawer__accordion-toggle[aria-expanded="true"] .mv-topnav-drawer__accordion-caret {
  transform: rotate(180deg);
}

.mv-topnav-drawer__accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  list-style: none;
  padding: 0 0 var(--mv-space-2);
  margin: 0 0 0 var(--mv-space-6);      /* rail: aligns under the L1 icon */
  padding-left: var(--mv-space-1);
  border-left: 1px solid var(--mv-border-subtle);
}

/* 2000px comfortably covers the largest panel (CRM: Cobranza + Ventas,
   ~13 leaf links) — the drawer itself scrolls (overflow-y:auto), so an
   oversized cap here never clips content, it just needs to exceed the
   tallest realistic panel so max-height:<cap> doesn't act as a clip. */
.mv-topnav-drawer__accordion-panel[data-open="true"] {
  max-height: 2000px;
}

/* ── Etiqueta de grupo — non-interactive eyebrow heading (mockup: "Telefonía",
   "Audios", "Difusión de voz"...). Rendered by gestor/_nav_node.html for any
   node with children, at any depth. ── */
.mv-topnav-drawer__group-label {
  padding: var(--mv-space-3) var(--mv-space-3) var(--mv-space-1) var(--mv-space-4);
  font-size: var(--mv-text-2xs);
  font-weight: var(--mv-fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mv-text-muted);
}

/* ── L2 / L3 leaf links — shared base + depth modifiers ──
   L2 = a leaf that IS a column itself (direct child of the section, no
        group wrapper, e.g. "Buscar grabación").
   L3 = nieto — nested under at least one group-label (e.g. "Troncales SIP"
        under "Telefonía"). */
.mv-topnav-drawer__subitem {
  display: flex;
  align-items: center;
  gap: var(--mv-space-2);
  min-height: 40px;                     /* WCAG 2.5.5 touch target */
  border-radius: var(--mv-radius-md);
  color: var(--mv-text-muted);
  text-decoration: none;
  transition: background var(--mv-dur-fast, 120ms) var(--mv-ease-out, ease-out),
              color      var(--mv-dur-fast, 120ms) var(--mv-ease-out, ease-out);
}

.mv-topnav-drawer__subitem--l2 {
  padding: var(--mv-space-2) var(--mv-space-3) var(--mv-space-2) var(--mv-space-4);
  font-size: var(--mv-text-xs);
  font-weight: var(--mv-fw-medium);
  /* 2026-08-01 (optional P2): give L2 the darker primary text token (was
     inheriting --mv-text-muted from the base .mv-topnav-drawer__subitem).
     Creates a two-tone split for long panels — L2 = dark/500, L3 = gray/400
     — on top of the existing weight + 16px indent + group-label eyebrow
     cues. Darkening (never lightening) keeps contrast ABOVE AA: the only
     lighter token, --mv-text-tertiary (#a8a8ae), fails 4.5:1 on white, so L3
     stays at --mv-text-muted (#6e6e73 ≈ 4.9:1). L1 (text-sm/600 + caret)
     stays clearly above L2 (text-xs/500). */
  color: var(--mv-text);
}

.mv-topnav-drawer__subitem--l3 {
  padding: var(--mv-space-2) var(--mv-space-3) var(--mv-space-2) var(--mv-space-7);
  font-size: var(--mv-text-xs);
  font-weight: var(--mv-fw-regular);
}

.mv-topnav-drawer__subitem:hover {
  background: var(--mv-surface-sunken, var(--mv-neutral-100));
  color: var(--mv-text);
}

.mv-topnav-drawer__subitem[aria-current="page"] {
  background: var(--mv-primary-50);
  color: var(--mv-primary-700);
  font-weight: var(--mv-fw-semibold);
}

.mv-topnav-drawer__subitem:focus-visible {
  outline: var(--mv-focus-ring-width, 2px) solid var(--mv-focus-ring-color, var(--mv-primary-500));
  outline-offset: -2px;
}

.mv-topnav-drawer__subitem i {
  width: 16px;
  text-align: center;
  font-size: var(--mv-text-2xs);
  opacity: 0.7;
  flex-shrink: 0;
}