/* =========================================================================
   TusRifas: layout.css
   Menú superior, menú móvil, footer (legales), cabecera de página,
   migas de pan y botón flotante de WhatsApp.
   ========================================================================= */

/* Reserva el alto del header mientras JS lo renderiza (evita saltos) y lo pinta igual
   que el menú real, para que no se note el cambio si tarda un instante */
#site-header { min-height: var(--header-h); }
#site-header:empty { background: var(--blanco); border-bottom: 1px solid var(--linea); box-sizing: content-box; }
/* En las páginas que arman su contenido con datos (rifa, compra, mis rifas, restablecer)
   el contenido ocupa al menos una pantalla: el pie queda debajo y no se ve "saltar" de
   la mitad de la pantalla hacia abajo cuando llegan los datos */
body[data-pagina="rifa"] #main,
body[data-pagina="participar"] #main,
body[data-pagina="mis-rifas"] #main,
body[data-pagina="restablecer"] #main { min-height: 100vh; }

.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
}
.header__barra {
  height: var(--header-h);
  display: flex; align-items: center; gap: 1.5rem;
}

/* Marca */
.marca { display: inline-flex; align-items: center; gap: .625rem; text-decoration: none; color: var(--tinta); flex-shrink: 0; }
.marca:hover { color: var(--tinta); }
.marca__boleto { width: 34px; height: 24px; }
.marca__nombre { font-size: 1.375rem; font-weight: 800; letter-spacing: -.03em; }

/* Navegación principal */
.nav { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.nav__link {
  position: relative; padding: .5rem .75rem; border-radius: 8px;
  color: var(--tinta-80); text-decoration: none; font-weight: 600; font-size: .9375rem; white-space: nowrap;
}
.nav__link:hover { color: var(--tinta); background: var(--papel); }
.nav__link[aria-current="page"] { color: var(--tinta); }
.nav__link[aria-current="page"]::after {
  content: ''; position: absolute; left: .75rem; right: .75rem; bottom: .15rem;
  height: 3px; border-radius: 2px; background: var(--sol);
}

.header__acciones { display: flex; align-items: center; gap: .5rem; }
.redes { display: flex; align-items: center; gap: .25rem; }
.redes__link {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  color: var(--tinta-80); text-decoration: none; font-size: 1.125rem;
}
.redes__link:hover { background: var(--papel); color: var(--tinta); }
.header__separador { width: 1px; height: 24px; background: var(--linea); margin-inline: .25rem; }

/* Menú de usuario */
.usuario { position: relative; }
.usuario__boton {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px;
  padding: .25rem .625rem .25rem .25rem; border-radius: 999px;
  border: 1.5px solid var(--linea); background: var(--blanco); font-weight: 600; font-size: var(--t-s);
}
.usuario__boton:hover { border-color: var(--linea-fuerte); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--celeste-100); color: var(--tinta); font-weight: 800; font-size: var(--t-xs); font-stretch: 100%;
}
.usuario__menu {
  position: absolute; right: 0; top: calc(100% + .5rem); min-width: 240px;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-m); box-shadow: var(--sombra);
  padding: .5rem; display: grid;
}
.usuario__cabecera { padding: .5rem .75rem .75rem; border-bottom: 1px solid var(--linea); margin-bottom: .25rem; }
.usuario__cabecera strong { display: block; }
.usuario__cabecera span { font-size: var(--t-xs); color: var(--tinta-60); word-break: break-all; }
.usuario__item {
  display: flex; align-items: center; gap: .625rem; padding: .625rem .75rem; border-radius: 8px;
  color: var(--tinta); text-decoration: none; font-weight: 600; font-size: var(--t-s);
  background: none; border: 0; text-align: left; width: 100%;
}
.usuario__item:hover { background: var(--papel); color: var(--tinta); }
.usuario__item i { width: 18px; color: var(--tinta-60); }

/* Botón hamburguesa (solo móvil) */
.header__menu-btn {
  display: none; width: 44px; height: 44px; border-radius: 10px;
  border: 1.5px solid var(--linea); background: var(--blanco); font-size: 1.125rem;
}

/* ---------- Responsive del header ---------- */
@media (max-width: 1080px) {
  .nav__link { padding-inline: .5rem; font-size: var(--t-s); }
  .nav__link[aria-current="page"]::after { left: .5rem; right: .5rem; }
}
@media (max-width: 940px) {
  .header__barra { gap: .75rem; }
  .header__menu-btn { display: grid; place-items: center; }
  .header__acciones { margin-left: auto; }
  .header__acciones .redes, .header__acciones .header__separador { display: none; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--blanco); border-bottom: 1px solid var(--linea); box-shadow: var(--sombra);
    padding: .5rem 1rem 1rem;
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  }
  .header:not(.nav-abierta) .nav { display: none; }
  .nav__link { padding: .875rem .5rem; font-size: var(--t-m); border-bottom: 1px solid var(--papel); border-radius: 0; }
  .nav__link[aria-current="page"]::after { left: 0; right: auto; top: .875rem; bottom: .875rem; width: 3px; height: auto; }
  .nav__link[aria-current="page"] { padding-left: .875rem; }
  .nav__redes { display: flex; gap: .5rem; padding-top: 1rem; }
  .nav__redes .redes__link { width: auto; height: auto; padding: .5rem .875rem; border-radius: 999px; border: 1.5px solid var(--linea); gap: .5rem; display: inline-flex; font-size: var(--t-s); font-weight: 600; }
}
@media (min-width: 941px) { .nav__redes { display: none; } }
@media (max-width: 420px) {
  .marca__nombre { font-size: 1.1875rem; }
  .usuario__nombre { display: none; }
  .header__ingresar span { display: none; }
}

/* ---------- Cabecera de página interna ---------- */
.pagina-cabecera { padding-block: 2.25rem 1.5rem; }
.pagina-cabecera h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 2.875rem); }
.pagina-cabecera p { margin-top: .75rem; }
.migas { padding: 0; display: flex; flex-wrap: wrap; gap: .375rem; font-size: var(--t-s); color: var(--tinta-60); margin-bottom: 1rem; }
.migas a { color: var(--tinta-60); }
.migas li { list-style: none; display: inline-flex; gap: .375rem; }
.migas li + li::before { content: '/'; color: var(--linea-fuerte); }

/* ---------- Footer ---------- */
.footer { background: var(--tinta); color: #B9C7D6; margin-top: 4rem; font-size: var(--t-s); }
.footer a { color: #DCE6F0; text-decoration: none; }
.footer a:hover { color: var(--blanco); text-decoration: underline; }
.footer__grid {
  display: grid; grid-template-columns: 1.3fr 1fr 1.4fr 1.1fr; gap: 2.5rem;
  padding-block: 3.5rem 2.5rem;
}
.footer__marca .marca { color: var(--blanco); }
.footer__marca p { margin-top: 1rem; max-width: 34ch; }
.footer__col h2 { font-size: var(--t-m); color: var(--blanco); font-stretch: 100%; margin-bottom: 1rem; }
.footer__col ul { list-style: none; padding: 0; display: grid; gap: .625rem; }
.footer__col li { display: flex; gap: .625rem; align-items: baseline; }
.footer__col li > i { width: 16px; color: var(--sol); flex-shrink: 0; }
.footer .redes { margin-top: 1.25rem; gap: .5rem; }
.footer .redes__link { border: 1.5px solid #3A5673; color: var(--blanco); }
.footer .redes__link:hover { background: var(--tinta-80); text-decoration: none; }
.footer__legal-fino {
  border-top: 1px solid #25425F; padding-block: 1.5rem 2rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: var(--t-xs); color: #93A6BA;
}
.footer__legal-fino p { max-width: none; }
.footer__edad {
  display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--blanco);
}
.footer__edad b { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--sol); font-size: var(--t-xs); }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- WhatsApp flotante (solo si hay número en js/config.js) ---------- */
.whatsapp-flotante {
  position: fixed; right: 1.25rem; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); z-index: 40;
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: #1FAF55; color: var(--blanco); font-size: 1.75rem; text-decoration: none;
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .4);
}
.whatsapp-flotante:hover { color: var(--blanco); background: #179447; }
.whatsapp-flotante:focus-visible { box-shadow: var(--foco); }
body.tiene-barra-inferior .whatsapp-flotante { bottom: calc(6.25rem + env(safe-area-inset-bottom, 0px)); }
@media print { .whatsapp-flotante { display: none; } }