/* =========================================================
   M3SOLARIS — navegación «Barra clásica» (nav/bar/nav.css)
   =========================================================
   PAQUETE nav/bar/: header.php + esta hoja + nav.json + preview.svg.
   Promobar, topbar sticky, logo, menú escritorio, utilidades
   (carrito EasyStore) y drawer móvil. Usa js/nav.js (compartido).
   El core (styles.css/core.js) no contiene NADA del nav.

   TOKENS DE LA PESTAÑA MENÚ (contrato común a todos los paquetes nav/):
   --tb-nav-l1-font / -fs / -fw / -tt / -ls   primer nivel (familia,
       tamaño, peso, mayúsculas, tracking) · --tb-nav-l2-*  segundo nivel
   · --tb-nav-m-l1-fs / --tb-nav-m-l2-fs  tamaños en móvil
   · --tb-nav-panel-w  ancho del panel en móvil.
   index.php solo los escribe si el administrador los cambia; cada regla
   lleva como reserva el valor propio de este estilo, así que sin tocar
   nada el estilo se ve exactamente igual. Ver «soporta» en nav.json.

   CONTRATO con el core (lo único que comparte):
   - SOLO tokens de styles.css §02 — NINGUNA clase del core:
     --paper, --ink, --mute, --rule, --dark-*, --gutter, --container,
     --topbar-h, --t-theme, --t-ui y --nav-*.
     Todos los var() llevan fallback: la hoja no revienta si un
     token falta en el theme de destino.
   - core.js escribe body[data-theme] (observer de secciones);
     aquí solo se CONSUME ese atributo. No tocar esa lógica.
   - Estado del drawer: body.is-drawer-open (lo pone js/nav.js).

   ─────────────────────────────────────────────────────────
   ÍNDICE
   ─────────────────────────────────────────────────────────
   §N1  Promobar (posición topbar)
   §N2  Topbar sticky + tema dark
   §N3  Logo (.mark-logo, imgs desenvueltas)
   §N4  Menú escritorio (.tb-nav, mod_menu)
   §N5  Utilidades (.tb-utils) + SPBuilder en topbar
   §N6  Burger + drawer móvil + overlay
   §N7  Responsive nav (≤768)
   ========================================================= */


/* ---------- §N1 · Promobar (posición topbar) ---------- */
.tb-promobar {
  background-color: var(--ink, #161513);
  color: var(--paper, #ffffff);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 8px var(--gutter, 24px);
}

.tb-promobar p { margin: 0; }
.tb-promobar a { color: inherit; }


/* ---------- §N2 · Topbar sticky + tema dark ---------- */
/* El tema lo escribe core.js en body[data-theme].
   background-color en propiedad LARGA — no cambiar a shorthand. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--tb-head-bg, var(--paper, #ffffff));
  color: var(--ink, #161513);
  border-bottom: 1px solid var(--tb-head-line, var(--rule, rgba(0, 0, 0, 0.14)));
  -webkit-backdrop-filter: blur(var(--tb-head-blur, 0px));
  backdrop-filter: blur(var(--tb-head-blur, 0px));
  transition: background-color var(--t-theme, 0.35s ease), color var(--t-theme, 0.35s ease), border-color var(--t-theme, 0.35s ease), box-shadow var(--t-theme, 0.35s ease);
}

/* topbar__inner es su PROPIO contenedor: mismas medidas que el
   .tb-container del core pero definidas aquí, para que el nav no
   dependa de ninguna clase de styles.css (solo de tokens). */
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter, 24px);
  min-height: var(--topbar-h, 64px);
  width: 100%;
  max-width: var(--container, 1280px);
  margin-inline: auto;
  padding-inline: var(--gutter, 24px);
}

.topbar.is-scrolled { box-shadow: 0 1px 12px rgba(0, 0, 0, 0.07); }

/* Tema oscuro: se redefinen los tokens en el ámbito y los hijos
   (nav, utils, logo, carrito) heredan sin reglas extra. */
body[data-theme="dark"] .topbar {
  --ink:  var(--dark-ink, #f4f2ee);
  --mute: var(--dark-mute, #a9a49b);
  --rule: var(--dark-rule, rgba(255, 255, 255, 0.18));
  background-color: var(--tb-head-bg-dark, var(--dark-paper, #161513));
  border-bottom-color: var(--tb-head-line-dark, var(--rule));
  color: var(--ink);
}


/* ---------- §N3 · Logo (.mark-logo, imgs desenvueltas) ---------- */
/* Imgs DESENVUELTAS (.l-light/.l-dark hijas directas): el swap por
   tema es transición de opacidad — no envolver en spans. */
.mark-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.mark-logo img {
  display: block;
  height: var(--logo-h, 28px);
  width: auto;
  transition: opacity var(--t-theme, 0.35s ease);
}

.mark-logo .l-dark {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  opacity: 0;
}

body[data-theme="dark"] .mark-logo .l-light { opacity: 0; }
body[data-theme="dark"] .mark-logo .l-dark  { opacity: 1; }

.mark-logo__text {
  font-family: var(--display, sans-serif);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink, #161513);
}


/* ---------- §N4 · Menú escritorio (.tb-nav, mod_menu) ---------- */
/* Escopado a .tb-nav: las clases .current/.active de dentro las pone
   Joomla (mod_menu), no son estados propios.
   Tamaño/fuente por tokens --nav-* (styles.css §02): "menú pequeño"
   se arregla en el re-skin, no tocando estas reglas.
   .tb-nav es flex: si conviven varios módulos en la posición menu,
   se alinean en fila en vez de apilarse. */
.tb-nav {
  display: flex;
  align-items: center;
  gap: calc(var(--gutter, 24px) * 1.25);
}

.tb-nav ul:not(.mod-menu__sub) {
  display: flex;
  align-items: center;
  gap: calc(var(--gutter, 24px) * 1.25);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tb-nav a {
  font-family: var(--tb-nav-l1-font, var(--nav-font, var(--mono, ui-monospace, monospace)));
  font-size: var(--tb-nav-l1-fs, var(--nav-fs, 14px));
  font-weight: var(--tb-nav-l1-fw, 400);
  letter-spacing: var(--tb-nav-l1-ls, var(--nav-tracking, 0.1em));
  text-transform: var(--tb-nav-l1-tt, uppercase);
  color: var(--ink, #161513);
  text-decoration: none;
  padding-block: 8px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-ui, 0.2s ease), color var(--t-ui, 0.2s ease);
}

.tb-nav .mod-menu__toggle-sub .nav-header,
.tb-nav .mod-menu__toggle-sub .separator {
  font-family: var(--tb-nav-l1-font, var(--nav-font, var(--mono, ui-monospace, monospace)));
  font-size: var(--tb-nav-l1-fs, var(--nav-fs, 14px));
  font-weight: var(--tb-nav-l1-fw, 400);
  letter-spacing: var(--tb-nav-l1-ls, var(--nav-tracking, 0.1em));
  text-transform: var(--tb-nav-l1-tt, uppercase);
  color: var(--ink, #161513);
  padding-block: 8px;
}

.tb-nav a:hover { border-bottom-color: var(--accent, currentColor); }

.tb-nav li.current > a,
.tb-nav li.active > a { border-bottom-color: var(--ink, #161513); }


/* ---------- §N4b · Submenú de escritorio (segundo nivel) ----------
   Desplegable bajo el padre: se abre al pasar el ratón (solo con puntero
   que puede pasar por encima) y con el botón de Joomla (clic/teclado:
   aria-hidden="false"). El nivel 3 sale sangrado dentro del mismo panel.
   Tipografía: tokens --tb-nav-l2-* de la pestaña Menú. */
.tb-nav li.deeper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}

.tb-nav .mod-menu__sub {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  z-index: 120;
  display: none;
  flex-direction: column;
  min-inline-size: 220px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  background-color: var(--tb-sub-bg, var(--paper, #ffffff));
  border: var(--tb-sub-border, 0);
  border-radius: var(--tb-sub-radius, 0);
  box-shadow: var(--tb-sub-shadow, none);
}

.tb-nav .mod-menu__sub[aria-hidden="false"] { display: flex; }

@media (hover: hover) {
  .tb-nav li.deeper:hover > .mod-menu__sub { display: flex; }
}

.tb-nav .mod-menu__sub a {
  display: block;
  padding: 8px 18px;
  border-bottom: 0;
  white-space: nowrap;
  font-family: var(--tb-nav-l2-font, var(--tb-nav-l1-font, var(--nav-font, var(--mono, ui-monospace, monospace))));
  font-size: var(--tb-nav-l2-fs, 12px);
  font-weight: var(--tb-nav-l2-fw, 400);
  letter-spacing: var(--tb-nav-l2-ls, 0.07em);
  text-transform: var(--tb-nav-l2-tt, uppercase);
}

.tb-nav .mod-menu__sub a:hover,
.tb-nav .mod-menu__sub li.current > a,
.tb-nav .mod-menu__sub li.active > a { color: var(--accent, var(--ink, #161513)); }

.tb-nav .mod-menu__sub li.deeper { display: block; }

.tb-nav .mod-menu__sub .mod-menu__sub {
  position: static;
  display: block;
  min-inline-size: 0;
  padding: 0 0 0 12px;
  border: 0;
  box-shadow: none;
  background-color: transparent;
}


/* ---------- §N5 · Utilidades (.tb-utils) + SPBuilder en topbar ---------- */
.tb-utils {
  display: flex;
  align-items: center;
  gap: calc(var(--gutter, 24px) * 0.75);
}

.tb-utils a { text-decoration: none; }

/* Enlace de cuenta (param "URL de cuenta / login" del estilo).
   Icono a juego con la bolsa del carrito EasyStore (stroke currentColor
   → hereda el tema dark del topbar sin reglas extra). */
.tb-account {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px;
  color: var(--ink, #161513);
  text-decoration: none;
  transition: opacity var(--t-ui, 0.2s ease), color var(--t-theme, 0.35s ease);
}

.tb-account:hover { opacity: 0.65; }

.tb-account__icon {
  display: block;
  width: 20px;
  height: auto;
}

.tb-account__label {
  font-family: var(--nav-font, var(--mono, ui-monospace, monospace));
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* SPBuilder dentro del topbar (p.ej. módulo con el addon Cart de
   EasyStore en header-utils): neutralización ESCOPADA del chrome de
   sección para que el addon se comporte como un icono inline y no
   como una sección a ancho completo. Los ajustes por id que emite el
   builder (márgenes del addon) ganan igualmente por especificidad. */
.topbar .sppb-section,
.topbar .sppb-container-inner {
  padding: 0;
  margin: 0;
  background: none;
}

.topbar .sppb-row {
  margin: 0;
  align-items: center;
}

.topbar .sppb-row-column { padding: 0; }


/* ---------- §N6 · Burger + drawer móvil + overlay ---------- */
.tb-burger {
  display: none;               /* visible ≤768 (§N7) */
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: none;
  border: 0;
  cursor: pointer;
}

.tb-burger__bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background-color: var(--ink, #161513);
  transition: transform var(--t-ui, 0.2s ease), background-color var(--t-theme, 0.35s ease);
}

body.is-drawer-open .tb-burger .tb-burger__bar:first-child { transform: translateY(3.75px) rotate(45deg); }
body.is-drawer-open .tb-burger .tb-burger__bar:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

.tb-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 160;
  width: var(--tb-nav-panel-w, min(320px, 86vw));
  height: 100dvh;
  background-color: var(--paper, #ffffff);
  transform: translateX(100%);
  transition: transform var(--t-theme, 0.35s ease);
  display: flex;
  flex-direction: column;
  padding: var(--gutter, 24px);
  visibility: hidden;
}

body.is-drawer-open .tb-drawer {
  transform: translateX(0);
  visibility: visible;
}

.tb-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--gutter, 24px);
}

/* Logo del drawer: img directa .dlogo, sin wrappers (regla del proyecto) */
.dlogo {
  display: block;
  height: 24px;
  width: auto;
}

.tb-drawer__title { font-family: var(--display, sans-serif); font-weight: 700; }

.tb-drawer__close {
  background: none;
  border: 0;
  font-size: 26px;
  line-height: 1;
  color: var(--ink, #161513);
  cursor: pointer;
  padding: 4px 8px;
}

.tb-drawer__nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tb-drawer__nav a {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule, rgba(0, 0, 0, 0.14));
  font-family: var(--tb-nav-l1-font, var(--nav-font, var(--mono, ui-monospace, monospace)));
  font-size: var(--tb-nav-m-l1-fs, var(--nav-fs, 14px));
  font-weight: var(--tb-nav-l1-fw, 400);
  letter-spacing: var(--tb-nav-l1-ls, var(--nav-tracking, 0.1em));
  text-transform: var(--tb-nav-l1-tt, uppercase);
  text-decoration: none;
  color: var(--ink, #161513);
}

/* Segundo nivel en el panel móvil: acordeón con el botón de Joomla */
.tb-drawer__nav li.deeper {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.tb-drawer__nav li.deeper > a { flex: 1 1 auto; }

.tb-drawer__nav li.deeper > .mod-menu__toggle-sub:not(:has(.nav-header, .separator)) {
  block-size: auto;
  inline-size: 44px;
  border-bottom: 1px solid var(--rule, rgba(0, 0, 0, 0.14));
}

.tb-drawer__nav .mod-menu__sub {
  flex-basis: 100%;
  padding-inline-start: 14px;
}

.tb-drawer__nav .mod-menu__sub a {
  font-family: var(--tb-nav-l2-font, var(--tb-nav-l1-font, var(--nav-font, var(--mono, ui-monospace, monospace))));
  font-size: var(--tb-nav-m-l2-fs, var(--tb-nav-l2-fs, 12px));
  font-weight: var(--tb-nav-l2-fw, 400);
  letter-spacing: var(--tb-nav-l2-ls, 0.07em);
  text-transform: var(--tb-nav-l2-tt, uppercase);
}

.tb-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  background-color: rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-theme, 0.35s ease), visibility var(--t-theme, 0.35s ease);
}

body.is-drawer-open .tb-drawer-overlay {
  opacity: 1;
  visibility: visible;
}

/* Bloquear scroll de fondo con el drawer abierto */
body.is-drawer-open { overflow: hidden; }


/* ---------- §N7 · Responsive nav (≤768) ---------- */
@media (max-width: 768px) {
  .tb-nav { display: none; }        /* nav escritorio fuera */
  .tb-burger { display: flex; }     /* burger dentro */
  .mark-logo img { height: var(--logo-h-m, 24px); }
  .tb-account__label { display: none; }  /* cuenta: solo icono en móvil */
}