/* =========================================================
   MUT_MARIONA — navegación de tres zonas (css/nav-tyt.css)
   =========================================================
   HOJA INDEPENDIENTE del nav, pareja de layouts/header-tyt.php.
   Tercera variante junto a nav.css (barra clásica) y nav-md.css
   (drawer). Se sirve cuando el parámetro "Estilo de navegación"
   vale "tyt". js/nav.js es COMPARTIDO y no se toca: mismos ids.

   CONTRATO con el core (idéntico al de nav.css):
   - SOLO tokens de styles.css §02, todos con fallback. NINGUNA
     clase del core: .tb-container es exclusiva de styles.css.
   - core.js escribe body[data-theme]; aquí solo se consume.
   - Estado del drawer: body.is-drawer-open (lo pone js/nav.js).
   - Las clases .current/.active de los <li> las pinta mod_menu:
     se LEEN, no son estado propio (el estado propio es .is-*).

   Decisión de layout: el header es FIXED y transparente porque el
   diseño lo quiere flotando sobre imagen a sangre. El hueco lo
   compensa .tb-main con padding-top; las páginas a sangre lo
   anulan con el sufijo de clase de página "tyt-flush".

   ─────────────────────────────────────────────────────────
   ÍNDICE
   ─────────────────────────────────────────────────────────
   §T1  Promobar (heredada, posición topbar)
   §T2  Barra de tres zonas + compensación de altura
   §T3  Zona 1 · marca (logo desenvuelto o texto)
   §T4  Zona 2 · caption contextual
   §T5  Zona 3a · menú (mod_menu) y selector de idioma
   §T6  Zona 3b · créditos de ficha + cierre
   §T7  Burger + drawer móvil + overlay
   §T8  Responsive (≤768)
   ========================================================= */


/* ---------- §T1 · Promobar (posición topbar) ---------- */
.tb-promobar {
  background-color: var(--ink, #000);
  color: var(--paper, #fff);
  font-family: var(--nav-font, sans-serif);
  font-size: var(--nav-fs, 10px);
  letter-spacing: var(--nav-tracking, 0.08em);
  text-transform: uppercase;
  text-align: center;
  padding: 8px var(--gutter, 16px);
}

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


/* ---------- §T2 · Barra de tres zonas ---------- */
/* background-color en propiedad LARGA (regla del proyecto: el
   shorthand congela la transición). Aquí es transparent porque la
   barra flota sobre la imagen; si algún día lleva fondo, cambiar
   solo este valor. */
.tb-tbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: var(--gutter, 16px);
  min-height: var(--topbar-h, 34px);
  padding: 10px var(--gutter, 16px);
  background-color: transparent;
  color: var(--ink, #000);
  font-family: var(--nav-font, sans-serif);
  font-size: var(--nav-fs, 10px);
  letter-spacing: var(--nav-tracking, 0.08em);
  text-transform: uppercase;
  transition: color var(--t-theme, 0.35s ease);
}

/* Sobre secciones oscuras el observer de core.js pone data-theme */
body[data-theme="dark"] .tb-tbar { color: var(--dark-ink, #fff); }

/* Tinta por ZONA según la foto que tenga debajo (js/custom.js §03).
   La barra flota sobre imagen, y en el mosaico son dos columnas: a la
   misma altura puede haber una foto negra bajo la marca y una blanca
   bajo el menú. Por eso el color no se decide para la barra entera.

   No se pintan colores, se REDEFINEN los tokens de la zona: así el
   menú, el selector de idioma, la barra "/" y la hamburguesa —que ya
   usan var(--ink) y var(--mute)— cambian solos, sin una regla más.
   El color declarado en la zona gana al heredado de la barra sin pelea
   de especificidad: un valor heredado siempre pierde contra uno
   declarado en el propio elemento. */
.tb-tbar .is-over-dark {
  --ink:  var(--dark-ink, #fff);
  --mute: var(--dark-mute, #9a9a9a);
  color: var(--dark-ink, #fff);
}

.tb-tbar .is-over-light {
  --ink:  #000;
  --mute: #8a8a8a;
  color: #000;
}

.tb-tbar a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-ui, 0.2s ease), opacity var(--t-ui, 0.2s ease);
}

/* Hueco del header fijo: NINGUNO.
   La barra flota sobre el contenido, así que en este sitio la norma es
   que la imagen empiece a sangre pegada al borde superior —el mosaico,
   la home y las fichas de proyecto—. Reservar hueco aquí era lo que
   pintaba la franja blanca bajo el header.
   Las dos únicas páginas que son texto en la primera línea se separan
   ellas mismas, cada una en su hoja, y por eso no necesitan nada aquí:
     · Archive  → .tb-archive       (custom.css §M6)
     · Contacto → .tb-main .mut-contact (contact.css §C1)
   Si algún día se monta con el maquetador una página que empiece con
   texto, se le pone un pt-5 al primer bloque en M3 y listo.
   (El sufijo de clase "tyt-flush" ya no hace falta: era para anular
   esta franja y la franja ya no existe.) */
.tb-nav-tyt .tb-main { padding-top: 0; }


/* ---------- §T3 · Zona 1 · marca ---------- */
.tb-tbar__mark { justify-self: start; min-width: 0; }

.tb-tbar__mark .mark-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Imgs desenvueltas: la opacidad por tema aplica directa */
.tb-tbar__mark .mark-logo img { display: block; max-height: 18px; width: auto; }
.tb-tbar__mark .l-dark { display: none; }
body[data-theme="dark"] .tb-tbar__mark .l-light { display: none; }
body[data-theme="dark"] .tb-tbar__mark .l-dark  { display: block; }

.mark-logo__text { white-space: nowrap; }


/* ---------- §T4 · Zona 2 · caption contextual ---------- */
/* Centrado respecto a la PÁGINA, no respecto al hueco sobrante:
   por eso la rejilla es 1fr auto 1fr y esta columna es la del medio. */
.tb-tbar__caption {
  justify-self: center;
  text-align: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ---------- §T5 · Zona 3a · menú e idioma ---------- */
.tb-tbar__end {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
}

.tb-nav ul {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Inactivo apagado, activo a tinta plena — es la única jerarquía
   visual del menú en este diseño. .current/.active vienen de mod_menu. */
.tb-nav a { color: var(--mute, #8a8a8a); }
.tb-nav li.current > a,
.tb-nav li.active > a,
.tb-nav a:hover { color: var(--ink, #000); }

body[data-theme="dark"] .tb-nav a { color: var(--dark-mute, #a9a49b); }
body[data-theme="dark"] .tb-nav li.current > a,
body[data-theme="dark"] .tb-nav li.active > a,
body[data-theme="dark"] .tb-nav a:hover { color: var(--dark-ink, #fff); }

/* Selector de idioma (mod_languages en header-utils) — EN / ES
   ────────────────────────────────────────────────────────────────
   mod_languages trae su propia hoja (media/mod_languages/css/…) que
   Joomla inyecta al renderizar el módulo, es decir DESPUÉS de esta.
   Por eso todo va escopado a .tb-utils .mod-languages: gana por
   especificidad sin tener que recurrir a !important.

   Markup real del módulo:
     <div class="mod-languages">
       <p class="visually-hidden">Select your language</p>
       <ul class="mod-languages__list lang-inline">
         <li><a>ES</a></li>
         <li class="lang-active"><a aria-current="true">EN</a></li>
       </ul>
     </div>
   El <p> es texto para lectores de pantalla. Se recorta, no se borra:
   display:none se lo quitaría también a ellos. El orden EN / ES lo
   decide la ordenación de Idiomas de contenido, no el CSS. */
.tb-utils .mod-languages { margin: 0; padding: 0; }

.tb-utils .mod-languages > p {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.tb-utils .mod-languages ul {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Reset de lo que pinta la hoja del módulo: fondos, cajas y bordes */
.tb-utils .mod-languages li,
.tb-utils .mod-languages li.lang-active {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  list-style: none;
}

.tb-utils .mod-languages li + li::before {
  content: "/";
  margin-right: 6px;
  color: var(--mute, #8a8a8a);
}

.tb-utils .mod-languages a {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: none;
  text-decoration: none;
  color: var(--mute, #8a8a8a);
  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
}

/* El idioma activo, a tinta plena. Es la única marca: sin fondo,
   sin subrayado, sin negrita — como en el diseño. */
.tb-utils .mod-languages li.lang-active > a,
.tb-utils .mod-languages a[aria-current="true"],
.tb-utils .mod-languages a:hover {
  color: var(--ink, #000);
  background-color: transparent;
  font-weight: inherit;
}

body[data-theme="dark"] .tb-utils .mod-languages a { color: var(--dark-mute, #a9a49b); }
body[data-theme="dark"] .tb-utils .mod-languages li + li::before { color: var(--dark-mute, #a9a49b); }
body[data-theme="dark"] .tb-utils .mod-languages li.lang-active > a,
body[data-theme="dark"] .tb-utils .mod-languages a[aria-current="true"],
body[data-theme="dark"] .tb-utils .mod-languages a:hover { color: var(--dark-ink, #fff); }


/* ---------- §T6 · Zona 3b · créditos de ficha + cierre ---------- */
.tb-credits {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.tb-credits__item { white-space: nowrap; }
.tb-credits__role { color: var(--mute, #8a8a8a); margin-right: 5px; }
.tb-credits__name { color: inherit; }

body[data-theme="dark"] .tb-credits__role { color: var(--dark-mute, #a9a49b); }

.tb-close {
  font-size: 15px;
  line-height: 1;
  padding: 2px 4px;
}

.tb-close:hover { opacity: 0.55; }


/* ---------- §T7 · Burger + drawer móvil ---------- */
.tb-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.tb-burger__bar {
  display: block;
  width: 100%;
  height: 1px;
  background-color: currentColor;
}

/* El panel es una COLUMNA: cabecera arriba, menú debajo y el selector
   de idioma empujado al fondo. Y hereda la misma tipografía de interfaz
   que la barra —familia, cuerpo, tracking, caja alta— para que abrir el
   menú en móvil no cambie de registro tipográfico. */
.tb-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 120;
  display: flex;
  flex-direction: column;
  width: min(88vw, 380px);
  padding: var(--gutter, 16px);
  background-color: var(--paper, #fff);
  color: var(--ink, #000);
  font-family: var(--nav-font, sans-serif);
  font-size: var(--nav-fs, 10px);
  letter-spacing: var(--nav-tracking, 0.08em);
  text-transform: uppercase;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
  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;
  gap: 16px;
  font-family: var(--nav-font, sans-serif);
  font-size: var(--nav-fs, 10px);
  letter-spacing: var(--nav-tracking, 0.08em);
  text-transform: uppercase;
}

.tb-drawer__close {
  border: 0;
  background: none;
  color: inherit;
  font-size: 22px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.tb-drawer__nav {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* OJO: solo el ul del MENÚ. Antes esta regla cogía también el <ul> del
   selector de idioma y lo apilaba en vertical. */
.tb-drawer__nav > ul,
.tb-drawer__nav .mod-menu {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Mismo cuerpo y mismo gris que el menú de la barra: en móvil no cambia
   la tipografía, solo el sitio donde vive. El padding es para el dedo,
   no para el ojo: la línea sigue midiendo lo mismo.
   Si algún día se quiere el menú móvil más grande, es este font-size. */
.tb-drawer__nav .mod-menu a {
  display: block;
  padding: 7px 0;
  color: var(--mute, #8a8a8a);
  text-decoration: none;
  font-family: var(--nav-font, sans-serif);
  font-size: var(--nav-fs, 10px);
  letter-spacing: var(--nav-tracking, 0.08em);
  text-transform: uppercase;
}

.tb-drawer__nav .mod-menu li.current > a,
.tb-drawer__nav .mod-menu li.active > a,
.tb-drawer__nav .mod-menu a:hover { color: var(--ink, #000); }

/* Idioma: al fondo del panel, en horizontal y pegado a la derecha.
   El aspecto lo hereda de §T5 por el envoltorio .tb-utils; aquí solo se
   coloca. margin-top:auto es lo que lo empuja abajo del todo. */
.tb-drawer__utils {
  margin-top: auto;
  padding-top: 28px;
  display: flex;
  justify-content: flex-end;
}

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

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


/* ---------- §T8 · Responsive (≤768) ---------- */
@media (max-width: 768px) {
  /* El caption se va: en móvil no cabe junto a marca y burger */
  .tb-tbar { grid-template-columns: 1fr auto; }
  .tb-tbar__caption { display: none; }
  /* En la barra desaparecen menú e idioma —se van al drawer—, pero el
     envoltorio .tb-utils del propio drawer tiene que seguir viéndose. */
  .tb-nav, .tb-tbar__end .tb-utils { display: none; }
  .tb-burger { display: flex; }

  /* En ficha, los créditos pasan a una segunda línea bajo la marca */
  .tb-tbar.is-credits { grid-template-columns: 1fr auto; row-gap: 6px; }
  .tb-tbar.is-credits .tb-tbar__end {
    grid-column: 1 / -1;
    justify-self: start;
    flex-wrap: wrap;
    gap: 12px;
  }
  .tb-credits { flex-wrap: wrap; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .tb-drawer { transition: none; }
}