/* ==========================================================
   NOXIS — Página de inicio pública (index.html)
   Usa los tokens de color/fuente de styleshared.css (:root,
   reset, .gold-link, .btn, .visually-hidden). Esta hoja solo
   agrega la barra de navegación, el héroe vacío y el footer.

   A diferencia de login/registro (que son una "tarjeta" de
   tamaño fijo posicionada con cqw), esta es una página completa
   de ancho libre, así que se construye con flujo normal
   (flexbox) en vez de posiciones absolutas calculadas desde SVG.
   ========================================================== */

body.home-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
  font-family: var(--font-body);
  color: var(--color-white);
}

/* ----------------------------------------------------------
   Preloader (solo index.html): tapa el flash del contenido de
   respaldo del héroe mientras se cargan los datos reales.
   ---------------------------------------------------------- */
.noxis-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background-color: var(--color-bg);
  transition: opacity 0.4s ease;
}

.noxis-preloader-oculto {
  opacity: 0;
  pointer-events: none;
}

.noxis-preloader-logo {
  width: 64px;
  height: auto;
}

.noxis-preloader-barra {
  width: 220px;
  height: 6px;
  border-radius: 999px;
  background-color: rgba(190, 138, 68, 0.18);
  overflow: hidden;
}

.noxis-preloader-relleno {
  width: 0%;
  height: 100%;
  background-color: var(--color-gold);
  border-radius: 999px;
  transition: width 0.35s ease;
}

.noxis-preloader-texto {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold);
}

/* ----------------------------------------------------------
   Barra de navegación
   ---------------------------------------------------------- */
.home-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background-color: var(--color-bg);
  border-bottom: 1px solid rgba(190, 138, 68, 0.25);
}

.home-logo-link {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.home-logo-link img {
  height: 36px;
  width: auto;
  display: block;
}

/* Botón hamburguesa (solo visible en móvil) */
.home-nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-gold);
  border-radius: 6px;
  width: 40px;
  height: 36px;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  cursor: pointer;
  flex-shrink: 0;
}
.home-nav-toggle svg { width: 20px; height: 20px; }

.home-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

/* En escritorio el header pasa a grid de 3 columnas iguales en los
   extremos (1fr ... 1fr) para que el nav quede SIEMPRE centrado,
   sin importar si .home-actions está oculto (display:none) — con
   flex + space-between, al ocultar .home-actions el nav quedaba
   pegado a la derecha en vez de centrado. Mobile sigue igual (flex). */
@media (min-width: 881px) {
  .home-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .home-logo-link { justify-self: start; }
  .home-nav { justify-self: center; }
  .home-actions { justify-self: end; }
}

.home-nav-link {
  position: relative;
  color: var(--color-white);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.85;
}
.home-nav-link:hover,
.home-nav-link:focus {
  opacity: 1;
  color: var(--color-gold);
}

/* ----------------------------------------------------------
   Dropdown de "PRODUCCIONES": al pasar el mouse (escritorio) o
   al hacer click (cualquier dispositivo) se abre una lista con
   las 5 subcategorías, cada una lleva a su propia página.
   ---------------------------------------------------------- */
.home-nav-dropdown { position: relative; }

.home-nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 14px;
  opacity: 0.85;
  cursor: pointer;
}
.home-nav-dropdown-trigger:hover,
.home-nav-dropdown.is-open .home-nav-dropdown-trigger {
  opacity: 1;
  color: var(--color-gold);
}

.home-nav-caret {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.home-nav-dropdown.is-open .home-nav-caret { transform: rotate(180deg); }

.home-nav-dropdown-menu {
  display: none;
  position: absolute;
  /* Pegado al trigger, sin hueco entre los dos: con una separación
     (ej. top: calc(100% + 14px)) el mouse salía del área de :hover
     al bajar del botón hacia el menú y la lista se cerraba antes de
     poder hacer clic en una subcategoría. */
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 175px;
  flex-direction: column;
  gap: 2px;
  background-color: var(--color-panel-dark);
  border: 1px solid var(--color-gold);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  z-index: 30;
}
.home-nav-dropdown.is-open .home-nav-dropdown-menu { display: flex; }

@media (min-width: 881px) {
  .home-nav-dropdown:hover .home-nav-dropdown-menu { display: flex; }
}

.home-nav-dropdown-item {
  display: block;
  padding: 8px 14px;
  border-radius: 6px;
  color: var(--color-white);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
.home-nav-dropdown-item:hover,
.home-nav-dropdown-item.activo {
  background-color: rgba(190, 138, 68, 0.15);
  color: var(--color-gold);
}

/* Enlace "Blog": requiere sesión, lleva un candado + tooltip */
.home-nav-link.is-locked {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.home-nav-link.is-locked svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.home-nav-link.is-locked .lock-tooltip {
  position: absolute;
  top: 130%;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-panel-dark);
  border: 1px solid var(--color-gold);
  color: var(--color-white);
  font-size: 11px;
  line-height: 1.3;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.home-nav-link.is-locked:hover .lock-tooltip,
.home-nav-link.is-locked:focus .lock-tooltip {
  opacity: 1;
  visibility: visible;
}

.home-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.btn-iniciar-sesion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 20px;
  background-color: var(--color-panel);
  border: 1px solid var(--color-gold);
  border-radius: 8px;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn-iniciar-sesion:hover { background-color: #341a4d; }

/* El atributo [hidden] debe ganar siempre, sin importar qué otra
   clase también fije "display" en este mismo elemento (si no, el
   botón "INICIAR SESIÓN" se queda visible aunque JS le ponga hidden).
   Se agrega .home-nav-link[hidden] porque "BLOG" usa la clase
   .is-locked, que fija display:inline-flex con más especificidad
   que [hidden] y lo dejaba visible aunque tuviera el atributo. */
.btn-iniciar-sesion[hidden],
.home-user-widget[hidden],
.home-nav-link[hidden] {
  display: none !important;
}

/* ----------------------------------------------------------
   Widget de sesión activa (avatar + nombre + estado + salir)
   Sustituye al botón "INICIAR SESIÓN" cuando hay sesión Firebase.
   ---------------------------------------------------------- */
.home-user-widget {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar-circle {
  position: relative;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--color-gold);
  background-color: var(--color-panel);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-body);
}

.user-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Punto de estado "en línea", anclado a la esquina del avatar */
.user-status-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: #3ECF6E;
  border: 2px solid var(--color-bg);
}

/* Contenedor relativo para poder anclar el desplegable debajo del nombre */
.user-menu {
  position: relative;
}

.user-menu-trigger {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.3;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
}

.user-nickname {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-white);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-status-text { font-size: 11px; color: #3ECF6E; }

/* Menú: Perfil / Configuración / Cerrar sesión */
.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background-color: var(--color-panel-dark);
  border: 1px solid var(--color-gold);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  z-index: 30;
}
/* El atributo [hidden] debe ganar siempre, sin importar "display: flex"
   fijado arriba ni el toggle por JS (mismo motivo que en .home-user-widget). */
.user-dropdown[hidden] {
  display: none !important;
}

.user-dropdown-item {
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-white);
  padding: 9px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.user-dropdown-item:hover { background-color: #341a4d; }

.user-dropdown-item-danger { color: #FF6B6B; }
.user-dropdown-item-danger:hover { background-color: rgba(255, 107, 107, 0.15); }

/* ----------------------------------------------------------
   Contenedor de todo el contenido entre el header y el footer
   ---------------------------------------------------------- */
.home-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ----------------------------------------------------------
   Héroe: mensaje estático de respaldo (home-hero-fallback) o,
   si hay imágenes de slide guardadas desde la pestaña "Inicio"
   del CMS, un carrusel a todo el ancho (home-slider). Los dos
   viven en el DOM desde el HTML; el JS solo decide cuál mostrar.
   ---------------------------------------------------------- */
.home-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.home-hero-fallback {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px;
  gap: 16px;
}
.home-hero-fallback[hidden] { display: none; }
.home-hero-fallback img { width: 140px; height: auto; opacity: 0.9; }
.home-hero-fallback h1 { font-size: 24px; font-weight: 700; letter-spacing: 0.04em; }
.home-hero-fallback p { font-size: 14px; color: rgba(255,255,255,0.6); max-width: 420px; }

/* El ancho siempre es el 100% de la pantalla; el alto se calcula solo,
   en la misma proporción 800x420 con la que se diseña el slide en el
   CMS (aspect-ratio hace alto = ancho * 420/800, sin necesidad de fijar
   un valor en px). */
.home-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 800 / 420;
  overflow: hidden;
  background-color: var(--color-panel-dark);
  cursor: grab;
  touch-action: pan-y;
}
.home-slider[hidden] { display: none; }
.home-slider.is-dragging { cursor: grabbing; }

/* Pista horizontal: un slide al lado del otro, se desplaza con
   transform: translateX(...) ya sea al arrastrar con el mouse/dedo o
   al avanzar sola (autoplay) / con los puntos de abajo. */
.home-slider-track {
  display: flex;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.home-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}
.home-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}

.home-slider-dots {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.home-slider-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--color-gold);
  background-color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  padding: 0;
}
.home-slider-dot.is-active { background-color: var(--color-gold); }

/* ----------------------------------------------------------
   Secciones alimentadas desde el CMS: Próximos Eventos y
   Nuestro Universo. Ocultas por defecto; se muestran solo si
   llegó al menos una imagen desde CMS/imagenes_publico.php.
   ---------------------------------------------------------- */
.home-section {
  padding: 48px 24px;
}
.home-section[hidden] { display: none; }

.home-section-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  margin-bottom: 24px;
}

.home-universo-text {
  max-width: 640px;
  margin: 0 auto 28px;
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}

.home-universo-link {
  display: inline-block;
  margin-top: 6px;
  color: var(--color-gold);
  font-weight: 600;
  text-decoration: none;
}
.home-universo-link:hover { text-decoration: underline; }

.home-grid-eventos,
.home-grid-universo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
}

.home-card-img {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(190, 138, 68, 0.35);
  flex-shrink: 0;
}
.home-grid-eventos .home-card-img { width: 280px; height: 180px; }

/* Tarjetas de eventos conectadas a la BD del CMS */
.home-evento-card {
  display: flex;
  flex-direction: column;
  width: 280px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(190, 138, 68, 0.35);
  background-color: var(--color-panel-dark);
  text-decoration: none;
  flex-shrink: 0;
  transition: border-color 0.15s ease;
}
.home-evento-card:hover { border-color: var(--color-gold); }
.home-evento-img {
  width: 100%;
  overflow: hidden;
  background-color: var(--color-panel);
}
.home-evento-img img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}
.home-evento-card:hover .home-evento-img img { transform: scale(1.05); }
.home-evento-body {
  padding: 10px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.home-evento-nombre {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.3;
}
.home-evento-fecha {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}
.home-grid-universo .home-card-img { width: 200px; }

.home-card-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* ----------------------------------------------------------
   Footer: redes sociales
   ---------------------------------------------------------- */
.home-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px;
  border-top: 1px solid rgba(190, 138, 68, 0.25);
}

.home-footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

/* Logo + copyright + crédito, todo al 50% de opacidad */
.home-footer-credito {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0.5;
}

.home-footer-logo {
  height: 26px;
  width: auto;
}

.home-footer-copy,
.home-footer-dev {
  font-size: 12px;
  color: var(--color-white);
  text-align: center;
}

.home-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-gold);
  color: var(--color-white);
}
.home-social-link svg { width: 18px; height: 18px; }
.home-social-link:hover {
  background-color: var(--color-panel);
  color: var(--color-gold);
}

/* ----------------------------------------------------------
   Responsive: menú hamburguesa por debajo de 880px
   ---------------------------------------------------------- */
@media (max-width: 880px) {
  .home-nav-toggle { display: flex; }

  .home-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background-color: var(--color-bg);
    border-bottom: 1px solid rgba(190, 138, 68, 0.25);
    padding: 8px 24px 16px;
    display: none;
  }
  .home-nav.is-open { display: flex; }

  .home-nav-link { padding: 8px 0; width: 100%; }

  /* En mobile el dropdown ya no flota: se expande en línea, dentro
     del propio menú vertical (no tiene sentido el hover en touch). */
  .home-nav-dropdown { width: 100%; }
  .home-nav-dropdown-trigger { padding: 8px 0; width: 100%; justify-content: space-between; }
  .home-nav-dropdown-menu {
    position: static;
    transform: none;
    margin: 0 0 4px 14px;
    border: none;
    background: none;
    box-shadow: none;
    padding: 0;
  }
  .home-nav-dropdown-item { padding: 6px 0; }

  .home-nav-link.is-locked .lock-tooltip {
    position: static;
    display: block;
    margin-top: 4px;
    opacity: 1;
    visibility: visible;
    transform: none;
    white-space: normal;
  }
}

/* Tarjetas de Eventos/Universo: rangos 481-600px y <480px */
@media (max-width: 600px) {
  .home-grid-eventos .home-card-img { width: 100%; max-width: 280px; }
  .home-grid-universo .home-card-img { width: 46vw; max-width: 200px; }
  .home-evento-card { width: 100%; max-width: 340px; }
}
@media (max-width: 480px) {
  .home-grid-eventos .home-card-img { width: 100%; max-width: 320px; }
  .home-grid-universo .home-card-img { width: 42vw; max-width: 160px; }
  .home-evento-card { width: 100%; max-width: 100%; }
}