/* BaseForum — UI System
   Componentes reutilizables. Siempre después de tokens.css.
*/

/* ── Reset base ── */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  background: var(--bf-bg);
  color: var(--bf-ink);
  font-family: var(--bf-font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6 {
  font-family: var(--bf-font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

/* ── Flag-bar (firma visual de BaseForum) ── */
.bf-flagbar {
  display: flex;
  height: 6px;
  width: 100%;
  flex-shrink: 0;
}
.bf-flagbar > span { flex: 1; }
.bf-flagbar > span:nth-child(1) { background: var(--bf-rojo); }
.bf-flagbar > span:nth-child(2) { background: var(--bf-gualda); }
.bf-flagbar > span:nth-child(3) { background: var(--bf-rojo); }
.bf-flagbar > span:nth-child(4) { background: var(--bf-marino); }
.bf-flagbar > span:nth-child(5) { background: var(--bf-white); }
.bf-flagbar > span:nth-child(6) { background: var(--bf-rojo); }
.bf-flagbar > span:nth-child(7) { background: var(--bf-azul); }
.bf-flagbar > span:nth-child(8) { background: var(--bf-gualda); }
.bf-flagbar--sm { height: 4px; }

/* ── Botones ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--bf-font-display);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform var(--motion-base) var(--ease-out),
              background var(--motion-base) var(--ease-out);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary  { background: var(--bf-ink);    color: var(--bf-bg); }
.btn--ghost    { background: transparent; color: var(--bf-ink); border: 1px solid var(--bf-line); }
.btn--accent   { background: var(--bf-accent); color: var(--bf-accent-ink); }
.btn--danger   { background: var(--bf-rojo);   color: var(--bf-white); }

/* Variante sobre fondo oscuro */
.btn--on-dark          { background: var(--bf-white); color: var(--bf-marino); }
.btn--ghost.btn--on-dark { background: transparent; color: var(--bf-white); border-color: var(--bf-line-on-dark); }

/* ── Eyebrow (meta-etiqueta sobre títulos) ── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--bf-font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bf-ink-3);
}
.eyebrow::before {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--bf-rojo);
  flex-shrink: 0;
}
.eyebrow--gualda::before { background: var(--bf-gualda); }
.eyebrow--marino::before { background: var(--bf-marino); }
.eyebrow--azul::before   { background: var(--bf-azul); }
.eyebrow--no-line::before { display: none; }
.eyebrow--on-dark { color: rgba(255,255,255,0.75); }

/* ── Chip ── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 10px;
  font-family: var(--bf-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bf-ink-2);
  background: var(--bf-bg-sunken);
  border: 1px solid var(--bf-line-soft);
  border-radius: var(--radius-full);
}

/* ── Status live (punto parpadeante) ── */
.status-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--bf-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--bf-ink-2);
}
.status-live::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bf-rojo);
  animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink { 50% { opacity: 0.2; } }

/* ── Placeholder imagen (archivo) ── */
.img-placeholder {
  position: relative;
  width: 100%;
  background:
    repeating-linear-gradient(135deg, rgba(10,34,64,0.06) 0 2px, transparent 2px 10px),
    var(--bf-bg-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bf-ink-3);
  font-family: var(--bf-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  overflow: hidden;
}
.img-placeholder::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(10,34,64,0.15);
  pointer-events: none;
}
.img-placeholder--dark {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 10px),
    var(--bf-placeholder-dark-bg);
  color: var(--bf-ink-3);
}

/* ── Hotspot (punto interactivo sobre visor 360°) ── */
.hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 2;
}
.hotspot__dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--bf-gualda);
  border: 2px solid var(--bf-white);
  box-shadow: var(--shadow-hotspot);
  animation: pulse 2.2s ease-out infinite;
  transition: background var(--motion-base);
}
.hotspot--active .hotspot__dot {
  background: var(--bf-rojo);
  box-shadow: var(--shadow-hotspot-active);
  animation: none;
}
@keyframes pulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(242,183,0,0), 0 2px 6px rgba(0,0,0,0.3); }
}
.hotspot__card {
  position: absolute;
  left: 24px; top: -6px;
  background: var(--bf-bg-elev);
  border: 1px solid var(--bf-line);
  padding: 12px 14px;
  width: 220px;
  font-size: 12px;
  line-height: 1.45;
  box-shadow: var(--shadow-md);
  z-index: 10;
  border-radius: var(--radius-md);
}
.hotspot__ref {
  font-family: var(--bf-font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bf-rojo);
  margin-bottom: 6px;
}
.hotspot__title {
  font-family: var(--bf-font-display);
  font-size: 13px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.hotspot__body { color: var(--bf-ink-2); }

/* ── Popup overlay ── */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-popup);
  padding: var(--space-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-base) var(--ease-out);
}
.popup-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.popup-card {
  background: var(--bf-bg-elev);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 480px;
  padding: var(--space-7);
  animation: popup-in 220ms var(--ease-out);
}
@keyframes popup-in {
  from { transform: translateY(12px) scale(0.97); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ── Audio player ── */
.audio-player {
  background: var(--bf-bg-elev);
  border: 1px solid var(--bf-line);
  border-radius: var(--radius-md);
  padding: 20px 20px 16px;
  position: relative;
  overflow: hidden;
}
.audio-player--dark {
  background: var(--bf-marino);
  border: none;
  color: var(--bf-white);
}
.audio-player__track {
  font-family: var(--bf-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 10px;
}
.audio-player__title {
  font-family: var(--bf-font-display);
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 16px;
}
.audio-player__waveform {
  display: flex;
  align-items: center;
  gap: 1px;
  height: 40px;
  margin-bottom: 8px;
}
.audio-player__waveform-bar {
  flex: 1;
  background: var(--bf-line);
  border-radius: 1px;
  transition: background var(--duration-fast);
}
.audio-player__waveform-bar--played { background: var(--bf-gualda); }
.audio-player__times {
  display: flex;
  justify-content: space-between;
  font-family: var(--bf-font-mono);
  font-size: 11px;
  opacity: 0.7;
  margin-bottom: 14px;
}
.audio-player__controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.audio-player__btn-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--bf-line);
  background: transparent;
  color: inherit;
  display: flex; align-items: center; justify-content: center;
}
.audio-player__btn-play {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--bf-rojo);
  color: var(--bf-white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-play);
}
.audio-player__speed {
  margin-left: auto;
  border: 1px solid var(--bf-line);
  background: transparent;
  color: inherit;
  padding: 5px 9px;
  border-radius: var(--radius-sm);
  font-family: var(--bf-font-mono);
  font-size: 11px;
}

/* ── Nav header ── */
.site-header-wrap {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--bf-bg);
}
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--app-padding-x);
  border-bottom: 1px solid var(--bf-line);
}
.site-header__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.site-header__right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.site-header__hamburger { display: none; }
.site-header__sep {
  width: 1px; height: 20px;
  background: var(--bf-line);
}
.site-header__location {
  font-family: var(--bf-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bf-ink-3);
}
.site-nav {
  display: flex;
  gap: 28px;
  font-family: var(--bf-font-display);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.site-nav a {
  color: var(--bf-ink-2);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: color var(--motion-base), border-color var(--motion-base);
}
.site-nav a:hover,
.site-nav a.active { color: var(--bf-ink); border-bottom-color: var(--bf-ink); }

/* ── Wordmark ── */
.wordmark {
  font-family: var(--bf-font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.04em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--bf-ink);
}
.wordmark__dot { opacity: 0.35; font-size: 12px; font-weight: 400; }

/* ── Lang switch ── */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--bf-line);
  border-radius: var(--radius-full);
  font-family: var(--bf-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
}
.lang-switch__btn {
  border: none;
  background: transparent;
  color: var(--bf-ink-3);
  padding: 4px 9px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--motion-base), color var(--motion-base);
}
.lang-switch__btn.active {
  background: var(--bf-ink);
  color: var(--bf-bg);
}
.lang-switch__btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── Piece card (colección) ── */
.piece-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
}
.piece-card__img {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 1/1;
}
.piece-card__badge-type {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--overlay-badge);
  color: var(--bf-white);
  padding: 3px 8px;
  font-family: var(--bf-font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.piece-card__badge-num {
  position: absolute;
  top: 10px; right: 10px;
  background: var(--bf-gualda);
  color: var(--bf-marino);
  padding: 3px 8px;
  font-family: var(--bf-font-mono);
  font-size: 10px;
  font-weight: 600;
}
.piece-card__title {
  font-family: var(--bf-font-display);
  font-size: 18px;
  line-height: 1.1;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.piece-card__meta { font-size: 12px; color: var(--bf-ink-3); }

/* ── Stats grid (datos numéricos) ── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  border-top: 1px solid var(--bf-line);
  border-left: 1px solid var(--bf-line);
}
.stats-grid__cell {
  padding: 14px 16px;
  border-right: 1px solid var(--bf-line);
  border-bottom: 1px solid var(--bf-line);
}
.stats-grid__label {
  font-family: var(--bf-font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bf-ink-3);
  margin-top: 4px;
}
.stats-grid__value {
  font-family: var(--bf-font-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--bf-rojo);
  line-height: 1;
}

/* ── Footer ── */
.site-footer {
  padding: 28px var(--app-padding-x);
  border-top: 1px solid var(--bf-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--bf-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bf-ink-3);
}

/* Cabecera y pie: el ELEMENTO sigue a todo el ancho —así su línea de separación
   se lee como una banda completa— pero su contenido se topa antes, con una caja
   más ancha que la del contenido para que no quede tan encerrado.
   El padding solo crece cuando la pantalla supera --app-max-width-bar; por
   debajo se queda en el de siempre, así que móvil y portátiles no cambian.
   Va DESPUÉS de los bloques de arriba a propósito: ambos declaran `padding`
   con el atajo y pisarían este `padding-inline` si fuera antes. */
.site-header,
.site-footer {
  padding-inline: max(var(--app-padding-x), (100% - var(--app-max-width-bar)) / 2);
}

/* ── Utilidades ── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.hidden { display: none !important; }
.scroll-x { overflow-x: auto; scrollbar-width: none; }
.scroll-x::-webkit-scrollbar { display: none; }

/* ── Menú móvil ── */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--bf-bg);
  z-index: 200;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--duration-slow) cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu__backdrop {
  position: fixed;
  inset: 0;
  background: var(--overlay-backdrop);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-slow);
}
.mobile-menu__backdrop.is-open { opacity: 1; pointer-events: all; }
.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--app-padding-mob);
  border-bottom: 1px solid var(--bf-line);
}
.mobile-menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--bf-ink);
}
.mobile-menu__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}
.mobile-menu__link {
  display: flex;
  align-items: center;
  padding: 18px var(--app-padding-mob);
  font-family: var(--bf-font-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--bf-ink-2);
  border-bottom: 1px solid var(--bf-line-soft);
  transition: color var(--duration-fast), padding-left var(--duration-fast);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.mobile-menu__link.active,
.mobile-menu__link:hover {
  color: var(--bf-ink);
  padding-left: calc(var(--app-padding-mob) + 6px);
}
.mobile-menu__link.active::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 22px;
  background: var(--bf-rojo);
  margin-right: 14px;
  flex-shrink: 0;
}
.mobile-menu__footer {
  padding: 20px var(--app-padding-mob) 32px;
  border-top: 1px solid var(--bf-line);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.mobile-menu__address {
  font-family: var(--bf-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bf-ink-3);
  text-align: right;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  :root {
    --app-padding-x: var(--app-padding-mob);
  }
  .site-header { padding: 14px var(--app-padding-mob); }
  .site-nav { display: none; }
  .site-header__sep,
  .site-header__location { display: none; }
  .site-header .lang-switch { display: none; }
  .site-header__hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--bf-ink);
  }
  .site-footer { flex-direction: column; gap: var(--space-2); text-align: center; }
  .bf-flagbar { height: 4px; }
}

/* ══════════════════════════════════════════════════════════════
   ACCESIBILIDAD (WCAG 2.1 AA) — revisión 2026-09-09
   ══════════════════════════════════════════════════════════════ */

/* 2.4.7 Foco visible. El anillo por defecto del navegador es de 1px y se pierde
   sobre el crema; se sustituye por uno del color corporativo, solo para foco
   de teclado (:focus-visible), así el ratón no lo dispara. */
:focus-visible {
  outline: 3px solid var(--bf-azul);
  outline-offset: 2px;
  border-radius: 2px;
}
.btn:focus-visible,
.lang-switch__btn:focus-visible { outline-offset: 3px; }

/* 2.4.1 Enlace de salto: fuera de pantalla hasta que recibe el foco. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--bf-marino);
  color: #fff;
  font-family: var(--bf-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
  box-shadow: var(--shadow-md);
}
.skip-link:focus { top: 12px; }

/* Objetivo táctil de la navegación principal: la fuente de 11px dejaba enlaces
   de ~14px de alto. Con este relleno superan los 24px sin mover el diseño. */
.site-nav a { padding-top: 6px; padding-bottom: 6px; }
/* El <main> recibe el foco solo desde el enlace de salto (tabindex=-1, fuera del
   orden de tabulación): no se pinta anillo alrededor de toda la página. */
main[tabindex="-1"]:focus, main[tabindex="-1"]:focus-visible { outline: none; }