/* ============================================================================
   HEADER / NAVBAR centralizado — desktop + móvil off-canvas + variante scrolled
   Markup ESTÁTICO en cada página, emitido por scripts/build-shell.mjs (origen único).
   ============================================================================ */

/* ============================================================================
   DESTINOS SOLO-DUEÑO (Torneos)
   Se ocultan por CSS, no con `style="display:none"` + JS. Antes la barra nacía con 5
   destinos y auth.js revelaba el sexto al confirmar la sesión: para el dueño, cada
   navegación reacomodaba TODA la barra (los .tab-item son flex:1, así que sumar uno
   recalcula el ancho y la posición de los cinco). El atributo lo pone el boot inline
   del <head> antes del primer frame, así la barra nace con la forma final.
   Al revelar NO se fija ningún display: el elemento vuelve al suyo natural (list-item
   en el menú, flex en la tab bar), que es justo lo que hacía `el.style.display = ""`.
   Es cosmético: el permiso real lo sigue decidiendo la RPC.
   ============================================================================ */
:root:not([data-duenio="1"]) .nav-owner-only { display: none; }

/* ============================================================================
   TRANSICIÓN ENTRE DOCUMENTOS (View Transitions API)
   El portal es multipágina: cada pestaña es un documento propio. Nombrar el header y
   la tab bar hace que el navegador los trate como el MISMO elemento a ambos lados de
   la navegación, en vez de incluirlos en el corte de toda la página. Resultado: el nav
   queda quieto y solo cruza el contenido — el efecto que se le pide a un SPA, sin serlo.
   Requiere que el nav esté en el HTML (si lo pintara JS no habría qué capturar).
   Donde no hay soporte, no pasa nada: se navega como hasta ahora.
   ============================================================================ */
@view-transition { navigation: auto; }

.site-header { view-transition-name: mc-header; }
.tab-bar { view-transition-name: mc-tabbar; }

/* Corto a propósito: es un cambio de pestaña, no una animación. Además acota cuánto
   tiempo se muestra el snapshot congelado de páginas pesadas (el mapa de la cancha). */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 140ms; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-fixed);
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: var(--border-width) solid var(--border);
  transition: height var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-normal);
}
.site-header.scrolled {
  height: 60px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-md);
}
.site-header__inner {
  max-width: var(--container-max); height: 100%; margin-inline: auto;
  padding-inline: var(--space-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}

/* Brand / logo ------------------------------------------------------------- */
.brand-logo { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--tap-min, 44px); }
.brand-img { height: 34px; width: auto; transition: height var(--transition-normal); }
.site-header.scrolled .brand-img { height: 28px; }
.brand-divider { width: 1px; height: 22px; background: var(--border-strong); }
.brand-tag {
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--brand-600);
}
@media (max-width: 480px) { .brand-divider, .brand-tag { display: none; } .brand-img { height: 30px; } }

/* Nav ----------------------------------------------------------------------- */
.site-nav { display: flex; align-items: center; }
.nav-menu { display: flex; align-items: center; gap: var(--space-1); }
.nav-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-md);
  color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--fw-medium);
  transition: color var(--transition-fast), background var(--transition-fast);
  position: relative;
}
.nav-link i { font-size: 0.95rem; }
.nav-link:hover { color: var(--text); background: var(--surface-2); }
.nav-link.active { color: var(--brand-700); }
.nav-link.active::after {
  content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: 4px;
  height: 2px; background: var(--brand); border-radius: 2px;
}

.nav-user {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
  border-radius: var(--radius-pill); background: var(--surface-2); border: var(--border-width) solid var(--border);
  font-size: var(--fs-sm); color: var(--text);
}
.nav-user .avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--brand);
  color: #fff; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: var(--fw-bold);
  font-family: var(--font-mono);
}
.nav-cta { margin-left: var(--space-2); }

/* ============================================================================
   BARRA INFERIOR (tab bar) — navegación principal en móvil, al alcance del pulgar.
   Reemplaza al menú hamburguesa. Oculta en escritorio; se activa en la media query.
   ============================================================================ */
.tab-bar { display: none; }

/* Responsive ---------------------------------------------------------------- */
@media (max-width: 768px) {
  .site-header, .site-header.scrolled { height: var(--header-h-mobile); }
  .site-header__inner { padding-inline: var(--space-4); gap: var(--space-3); }

  /* Los 4 destinos pasan a la barra inferior; el menú superior se oculta.
     #navPerfil queda en el DOM (oculto) para que auth.js siga alternándolo. */
  .nav-menu { display: none; }

  /* La nav superior queda inline en el header, solo con las acciones de cuenta. */
  .site-nav { gap: var(--space-2); }
  .nav-auth { gap: var(--space-2); flex-wrap: nowrap; }
  .nav-cta { margin-left: 0; }
  /* 44 px = --tap-min, el mínimo cómodo en el teléfono; entran de sobra en el header de 60. */
  .nav-auth .btn { min-height: var(--tap-min, 44px); min-width: var(--tap-min, 44px); white-space: nowrap; }

  /* Chip de socio compacto: solo el avatar; al tocarlo se abre el perfil (nav.js).
     C69: el padding suma al área de toque (36px + 4px*2 = 44px = --tap-min) sin agrandar el círculo
     visual del avatar. */
  .nav-user { background: none; border: none; padding: var(--space-1); cursor: pointer; }
  .nav-user > span:not(.avatar) { display: none; }
  .nav-user .avatar { width: 36px; height: 36px; font-size: var(--fs-sm); }

  /* "Salir" como ícono compacto en la esquina (su texto se oculta). */
  .auth-button.logout span { display: none; }
  .auth-button.logout i { font-size: 1.05rem; }

  /* ----- Barra inferior fija (tab bar) ----- */
  .tab-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-fixed);
    display: flex; align-items: stretch; justify-content: space-around;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    border-top: var(--border-width) solid var(--border);
    box-shadow: 0 -2px 12px rgba(16, 32, 22, 0.06);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tab-item {
    position: relative; flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 56px; padding: 8px 4px 6px;
    color: var(--text-light); font-size: var(--fs-2xs); font-weight: var(--fw-medium);
    transition: color var(--transition-fast);
  }
  .tab-item i { font-size: 1.45rem; line-height: 1; }
  .tab-item.active { color: var(--brand); }
  .tab-item.active::before {
    content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--brand);
  }
  .tab-item:active { background: var(--surface-2); }

  /* El contenido deja aire al pie para no quedar tapado por la barra. */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================================
   AVISO GLOBAL "SIN CONEXIÓN" — la clase la pone mc.js según navigator.onLine.
   Barra fija y discreta pegada al borde inferior del header, por encima del
   contenido (no tapa el header ni la tab bar: ambos viven en su propia franja).
   ============================================================================ */
html.sin-red::before {
  content: "Sin conexión";
  position: fixed; left: 0; right: 0; top: var(--header-h); z-index: calc(var(--z-fixed) + 1);
  padding: 3px 12px; text-align: center;
  font-family: var(--font-text); font-size: 12px; line-height: 1.3; font-weight: var(--fw-medium);
  color: #fff; background: var(--text);
  pointer-events: none;
}
@media (max-width: 768px) {
  html.sin-red::before { top: var(--header-h-mobile); }
}

/* Cartel previo al permiso de notificaciones de iOS (push.js; solo aparece en la app nativa). */
.mc-push-ask {
  position: fixed; left: 12px; right: 12px; z-index: calc(var(--z-fixed) + 1);
  bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 12px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  padding: 14px; border-radius: 14px;
  background: var(--surface); border: var(--border-width) solid var(--border); box-shadow: var(--shadow-md);
}
.mc-push-ask > i { font-size: 1.6rem; line-height: 1; color: var(--brand); }
.mc-push-ask__txt { flex: 1 1 200px; font-size: var(--fs-sm); line-height: 1.35; color: var(--text); }
.mc-push-ask__btns { display: flex; gap: 8px; width: 100%; justify-content: flex-end; }

/* ============================================================================
   HOOKS LEGACY de auth.js — .auth-button (botón Iniciar/Cerrar sesión) y
   .user-info (chip "Bienvenido, …" insertado antes del botón). auth.js setea
   su textContent y alterna la clase .logout; acá los vestimos con el sistema.
   ============================================================================ */
/* `.nav-auth` viaja VACÍO en el HTML estático y lo puebla auth.js (chip del socio desde el
   snapshot, o botones de invitado al resolver la sesión). Reservamos su ancho para que los links
   del nav no salten hacia la izquierda cuando llega el contenido. */
.nav-auth { gap: var(--space-2); min-width: 190px; justify-content: flex-end; }
@media (max-width: 768px) {
  /* V5 (prueba integral, Tarea 7.7): en móvil "Salir" sale del header (queda solo el avatar);
     "Cerrar sesión" vive en Mi Perfil. En desktop (≥768px) el botón del header se conserva. */
  .nav-auth { min-width: 44px; }
  .nav-auth .auth-button.logout { display: none; }
}
.user-info {
  font-size: var(--fs-sm); color: var(--text-muted); white-space: nowrap;
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--surface-2); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-pill);
}
.auth-button.logout {
  --btn-bg: transparent; --btn-fg: var(--error); --btn-bd: var(--error-soft);
}
.auth-button.logout:hover { background: var(--error-soft); border-color: var(--error); }

@media (max-width: 768px) {
  /* En móvil las acciones de cuenta van inline en el header (no a lo ancho). */
  .user-info { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ============================== Badge del nav ==============================
   Contador numérico sobre un destino del nav (ej. solicitudes de amistad
   pendientes en "Amigos"). Lo pinta window.MCNav.setBadge(id, n) desde nav.js;
   hidden cuando n<=0. Vive tanto en el link de escritorio como en la tab móvil. */
.nav-link,
.tab-item {
  position: relative;
}
.nav-badge {
  position: absolute;
  top: 2px;
  right: 6px;
  min-width: 16px;
  padding: 2px 4px;
  border-radius: var(--radius-pill);
  background: var(--error, #c0392b);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  pointer-events: none;
}
.nav-link .nav-badge {
  top: -4px;
  right: -10px;
}

/* Términos / Privacidad / Soporte se abren también desde el registro, sin sesión: ahí «‹ Perfil» y la
   tab bar llevan a pantallas que no puede usar. #navPerfil queda display:none hasta que auth.js
   confirma la sesión. Acotado a esas páginas (data-publica) para no esconder la barra en el resto
   mientras auth resuelve. */
body[data-publica]:has(#navPerfil[style*="none"]) :is(.pf-back, .tab-bar) { display: none !important; }