/*
  home.css — Estilos especificos del HOME: globo 3D, fondo de estrellas, pantalla
  de carga inicial, topbar/buscador flotante, drawer movil de lista alfabetica y
  vista "Mis favoritos". Traducido de sistema-diseno.md secciones 6.7, 6.8, 8 y 9.
  (Migrado desde el bloque <style> inline que index.html traia como placeholder.)
*/

.home {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg-void);
  overflow: hidden;
}

/* ============ Globo 3D (sistema-diseno.md 8.1/8.2) ============ */

/* top y height los calcula js/globe.js (layoutGlobe): el globo arranca debajo
   de la barra superior y ocupa el resto de la pantalla, sin cortarse. */
#globe-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  z-index: var(--z-globe);
  cursor: grab;
  touch-action: none; /* evita que el navegador capture el gesto de arrastre/pinch como scroll */
}
#globe-container:active {
  cursor: grabbing;
}

/* Pie de pagina fijo y discreto: el HOME es una pantalla inmersiva a pantalla
   completa (overflow:hidden en .home), asi que va superpuesto abajo en vez de
   en flujo normal, sin tapar el globo ni la interaccion. */
.home__footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-overlay-ui);
  padding: 0.5rem 1rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-tertiary, rgba(244, 245, 249, 0.55));
  background: linear-gradient(to top, rgba(6, 8, 20, 0.65), transparent);
  pointer-events: none;
}
.home__footer-sep {
  margin: 0 0.4em;
}
/* En movil el boton flotante dorado (.mobile-list-toggle, 56px a 16px del
   borde) ocupa la esquina inferior derecha: se le reserva ese ancho para que
   no tape los enlaces legales del pie ni el texto de copyright. */
@media (max-width: 639px) {
  .home__footer {
    padding-right: 84px;
  }
}

/* "Cartel" de hover sobre un pais del globo (contenido HTML del pointLabel
   de globe.gl, ver js/globe.js). globe.gl posiciona este div flotando junto
   al cursor; aca solo se define su apariencia. */
.globe-tooltip {
  padding: 0.45rem 0.9rem;
  border-radius: 12px;
  background: rgba(20, 20, 25, 0.78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-ui, inherit);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

/* Cartel flotante del globo (ver showTooltip en js/globe.js): vidrio oscuro,
   sin flecha, aparece con un fundido corto y se ubica sobre la aguja. */
.globe-tooltip--flotante {
  position: fixed;
  z-index: var(--z-overlay-ui);
  transform: translate(-50%, calc(-100% - 10px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  animation: globe-tooltip-in 0.18s ease-out;
}
.globe-tooltip--flotante[hidden] {
  display: none;
}
@keyframes globe-tooltip-in {
  from { opacity: 0; transform: translate(-50%, calc(-100% - 4px)); }
  to { opacity: 1; transform: translate(-50%, calc(-100% - 10px)); }
}
@media (prefers-reduced-motion: reduce) {
  .globe-tooltip--flotante { animation: none; }
}
.globe-tooltip__hint {
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
}

/* Botones de zoom: grandes (48px) para dedos y mouse. */
.globe-zoom {
  position: fixed;
  right: 16px;
  bottom: 88px;
  z-index: var(--z-overlay-ui);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.globe-zoom__btn {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-circle, 50%);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
  color: var(--text-primary);
  font-size: 1.5rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
}
.globe-zoom__btn:hover { background: var(--bg-surface-hover); }
.globe-zoom__btn:active { transform: scale(0.96); }
.globe-zoom__btn:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
@media (min-width: 640px) {
  .globe-zoom { bottom: 48px; right: 24px; }
}


/* Fundido a --bg-void como puente entre el zoom del globo y la navegacion a
   pais.html (sistema-diseno.md 8.3), creado dinamicamente por globe.js. */
.globe-transition-veil {
  position: fixed;
  inset: 0;
  z-index: var(--z-loading-screen);
  background: var(--bg-void);
  opacity: 0;
  pointer-events: none;
  transition-property: opacity;
  transition-timing-function: ease-in-out;
}
.globe-transition-veil.is-visible {
  opacity: 1;
}

/* ============ Fondo de estrellas (sistema-diseno.md 8.4) ============ */

#starfield {
  position: absolute;
  inset: 0;
  z-index: var(--z-starfield);
  overflow: hidden;
}

.starfield__layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
  transition: transform var(--transition-slow);
}
.starfield__layer--far {
  opacity: 0.6;
}
.starfield__layer--near {
  opacity: 0.9;
}
.starfield__twinkle {
  animation: star-twinkle 3.6s ease-in-out infinite;
}
@keyframes star-twinkle {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}
/* Bajo movimiento reducido, reset.css ya achica animation-duration globalmente
   a ~0, asi que el titileo queda estatico sin codigo adicional. */

/* ============ UI flotante sobre el globo (buscador, wordmark, botones) ============ */

.home__overlay-ui {
  position: relative;
  z-index: var(--z-overlay-ui);
  transition: opacity var(--transition-base);
}
.home__overlay-ui.is-fading {
  opacity: 0;
  pointer-events: none;
}

.home__topbar {
  position: relative;
  z-index: var(--z-overlay-ui);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--container-padding-mobile);
}
@media (max-width: 639px) {
  /* Bug real encontrado en QA visual (2026-09-13): el selector de idioma
     (.home__lang-selector) es `position: fixed` en la esquina superior
     derecha del viewport, independiente del flujo de .home__topbar. En
     escritorio/tablet el wordmark + beta-badge nunca llegan tan lejos a la
     derecha, pero en movil, con flex-wrap y el wordmark empujando todo con
     `margin-right: auto`, el beta-badge terminaba exactamente debajo del
     selector de idioma fijo (superpuestos, ambos ilegibles). Se reserva
     espacio a la derecha del topbar (ancho aproximado del selector de
     idioma + su offset `right`) para que el badge quede siempre a la
     izquierda de esa zona en vez de competir por el mismo lugar. */
  .home__topbar {
    gap: var(--space-3);
  }
  /* El espacio del selector de idioma se reserva solo en la primera fila
     (a la derecha del badge), asi el buscador y los botones usan todo el ancho. */
  .home__topbar .beta-badge {
    margin-right: 104px;
  }
  /* El buscador va en su propia fila y los dos botones comparten la
     siguiente: la barra queda mas baja y el globo gana espacio. */
  .home__topbar .search-bar {
    flex: 1 1 100%;
    max-width: none;
  }
  #random-country-btn,
  #favorites-nav-btn {
    flex: 1 1 0;
    min-height: 44px;
    justify-content: center;
    padding-inline: var(--space-3);
    white-space: nowrap;
    font-size: var(--fs-sm);
  }
}
@media (min-width: 640px) {
  .home__topbar { padding-inline: var(--container-padding-tablet); }
}
@media (min-width: 1024px) {
  .home__topbar { padding-inline: var(--container-padding-desktop); }
}
/* El selector de idioma es fijo arriba a la derecha: se reserva su lugar
   para que no tape el buscador (tablet) ni el boton de favoritos (escritorio). */
@media (min-width: 640px) {
  .home__topbar { padding-right: 150px; }
}

.home__wordmark {
  font-family: var(--font-display), var(--font-ui);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: var(--ls-heading-lg);
  margin-right: auto;
}

/* Selector de idioma: posicion flotante fija en la esquina superior derecha del HOME. */
.home__lang-selector {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: var(--z-header);
}

/* ============ Pantalla de carga inicial (sistema-diseno.md 8.5) ============ */

#loading-screen {
  position: fixed;
  inset: 0;
  z-index: var(--z-loading-screen);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  background: var(--bg-void);
  transition: opacity var(--transition-slow);
}
#loading-screen.is-hidden {
  display: none;
}

.loading-screen__wordmark {
  font-family: var(--font-display), var(--font-ui);
  font-size: var(--fs-3xl);
  font-weight: 600;
  color: var(--gold-500);
  letter-spacing: var(--ls-heading-lg);
}

.loading-screen__ring {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-subtle);
  border-top-color: var(--gold-500);
  border-radius: var(--radius-circle);
  animation: loading-ring-spin 900ms linear infinite;
}
@keyframes loading-ring-spin {
  to { transform: rotate(360deg); }
}

.loading-screen__progress {
  width: 200px;
  height: 3px;
  background: var(--border-subtle);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.loading-screen__progress-bar {
  height: 100%;
  width: 40%;
  background: var(--gold-500);
  animation: loading-bar-sweep 1.2s ease-in-out infinite;
}
@keyframes loading-bar-sweep {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(350%); }
}

@media (prefers-reduced-motion: reduce) {
  .loading-screen__ring { animation: none; }
  .loading-screen__progress-bar { animation: none; width: 60%; }
}

/* ============ Boton flotante "ver lista de paises" (solo movil, sistema-diseno.md 6.8) ============ */

.mobile-list-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-circle);
  background: var(--gold-500);
  color: var(--text-on-gold);
  box-shadow: var(--shadow-gold-glow);
  z-index: var(--z-drawer);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast);
}
.mobile-list-toggle:active {
  transform: scale(0.96);
}
@media (min-width: 640px) {
  .mobile-list-toggle { display: none; }
}

/* ============ Drawer movil de lista alfabetica (sistema-diseno.md 6.8) ============ */

.drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: var(--z-drawer-scrim);
}
.drawer-scrim[hidden] { display: none; }

.country-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 85vw;
  max-width: 360px;
  background: var(--bg-surface);
  border-top-left-radius: var(--radius-xl);
  border-bottom-left-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-drawer);
  overflow-y: auto;
  padding: var(--space-4);
}
.country-drawer[hidden] { display: none; }

.country-drawer__header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-3);
}

.country-drawer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.country-drawer__letter {
  position: sticky;
  top: 0;
  background: var(--bg-surface);
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-uppercase-sm);
  text-transform: uppercase;
  padding: var(--space-2) var(--space-2) var(--space-1);
}

.country-drawer__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 48px;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  text-align: left;
  transition: background-color var(--transition-fast);
}
.country-drawer__item:hover,
.country-drawer__item:focus-visible {
  background: var(--bg-surface-hover);
}
.country-drawer__item:active {
  transform: scale(0.98);
}
.country-drawer__item img {
  width: 24px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
}

/* ============ Vista "Mis favoritos" ============ */

.favorites-view {
  padding-block: var(--space-16) var(--space-12);
  position: relative;
  z-index: var(--z-overlay-ui);
}
.favorites-view[hidden] { display: none; }

.favorites-view__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}
.favorites-view__header h1, .favorites-view__header h2 {
  font-family: var(--font-display), var(--font-ui);
  font-size: var(--fs-2xl);
  color: var(--text-primary);
}

.favorites-view__count {
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-4);
}
.favorites-view__count[hidden] { display: none; }

/* Tarjeta de pais dentro de "Mis favoritos": reutiliza .card-country (components.css)
   y agrega el link de "Ver pais" al pie, que ahi no existe por defecto. */
.card-country__link {
  margin-top: var(--space-4);
}

/* Logo (assets/img/logo.webp) en lugar del wordmark de texto. */
.home__wordmark { line-height: 0; }
.home__wordmark img { display: block; height: 60px; width: auto; }
.loading-screen__wordmark { line-height: 0; }
.loading-screen__wordmark img { display: block; width: min(260px, 65vw); height: auto; }
@media (max-width: 639px) {
  .home__wordmark img { height: 40px; }
}

/* Botones del globo con estilo vidrio oscuro (glassmorphism). */
#favorites-nav-btn,
#random-country-btn {
  background: rgba(12, 14, 22, 0.42);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.92);
  font-weight: 400;
  letter-spacing: 0.01em;
}
#favorites-nav-btn:hover,
#random-country-btn:hover {
  background: rgba(20, 22, 32, 0.6);
  border-color: rgba(212, 175, 55, 0.45);
}
#favorites-nav-btn .icon { color: var(--gold-500); }

/* "Mis favoritos" va junto al logo (arriba a la izquierda); en movil vuelve a la fila de botones. */
.home__wordmark { margin: 0; }
.beta-badge { margin-right: auto; }
@media (max-width: 639px) {
  #favorites-nav-btn { order: 10; }
}

/* Tooltip del globo con miniatura del pais, bandera y capital. */
.globe-tooltip--flotante { padding: 0; overflow: hidden; width: 220px; white-space: normal; align-items: stretch; gap: 0; }
.globe-tooltip__photo { display: block; width: 100%; height: 110px; object-fit: cover; background: rgba(255, 255, 255, 0.04); }
.globe-tooltip__body { display: flex; flex-direction: column; gap: 2px; padding: 0.55rem 0.8rem 0.6rem; text-align: left; }
.globe-tooltip__name { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; }
.globe-tooltip__flag { border-radius: 2px; flex: none; }
.globe-tooltip__capital { font-size: 0.75rem; font-weight: 400; color: rgba(255, 255, 255, 0.6); }
@media (max-width: 639px) {
  .globe-tooltip--flotante { width: 180px; }
  .globe-tooltip__photo { height: 90px; }
}
.globe-tooltip--flotante.globe-tooltip--below { transform: translate(-50%, 0); animation: none; }

/* Estrellas fugaces (js/cielo.js): sobre el fondo de estrellas, debajo del globo. */
.comet-layer { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: var(--z-starfield); }
#globe-mode { display: grid; place-items: center; }
#globe-mode .icon { width: 20px; height: 20px; color: var(--gold-500); }

/* Barra superior en una sola fila en escritorio: el buscador se adapta al espacio libre. */
@media (min-width: 900px) {
  .home__topbar { flex-wrap: nowrap; }
  .home__topbar .search-bar { flex: 1 1 320px; min-width: 220px; }
}
/* Selector de idioma alineado con el centro de la barra (logo de 60 px). */
@media (min-width: 640px) {
  .home__lang-selector { top: calc(var(--space-6) + 8px); }
}

/* Fondo con vida: nebulosas tenues y una franja de Via Lactea que se mueven muy lento. */
#starfield::before,
#starfield::after {
  content: '';
  position: absolute;
  inset: -20%;
  pointer-events: none;
}
#starfield::before {
  background:
    radial-gradient(38% 30% at 18% 28%, rgba(88, 70, 160, 0.22), transparent 70%),
    radial-gradient(32% 26% at 82% 72%, rgba(30, 110, 150, 0.18), transparent 70%),
    radial-gradient(26% 22% at 70% 18%, rgba(170, 120, 60, 0.1), transparent 70%),
    radial-gradient(30% 24% at 30% 82%, rgba(120, 50, 110, 0.12), transparent 70%);
  filter: blur(8px);
  animation: nebula-drift 140s ease-in-out infinite alternate;
}
#starfield::after {
  /* Via Lactea: franja diagonal de polvo luminoso. */
  background: linear-gradient(118deg, transparent 32%, rgba(190, 200, 255, 0.05) 44%, rgba(255, 236, 205, 0.08) 50%, rgba(190, 200, 255, 0.05) 56%, transparent 68%);
  filter: blur(18px);
  animation: nebula-drift 200s ease-in-out infinite alternate-reverse;
}
@keyframes nebula-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to { transform: translate3d(2%, 1.5%, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  #starfield::before, #starfield::after { animation: none; }
}

/* Brujula del globo (abajo a la izquierda). */
.globe-compass {
  position: fixed; left: 16px; bottom: 88px; z-index: var(--z-overlay-ui);
  width: 104px; height: 104px; border-radius: 50%; pointer-events: none;
  background: rgba(12, 14, 22, 0.42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.globe-compass svg { width: 100%; height: 100%; overflow: visible; }
.globe-compass__ring { fill: none; stroke: rgba(242, 210, 122, 0.35); stroke-width: 1; }
.globe-compass__ring--inner { stroke: rgba(255, 255, 255, 0.08); }
.globe-compass__north { fill: #f2d27a; }
.globe-compass__south { fill: rgba(255, 255, 255, 0.55); }
.globe-compass__side { fill: rgba(255, 255, 255, 0.22); }
.globe-compass__hub { fill: #0b0c10; stroke: #f2d27a; stroke-width: 1.2; }
.globe-compass__label { font: 600 9px/1 var(--font-ui, sans-serif); fill: rgba(255, 255, 255, 0.7); text-anchor: middle; }
.globe-compass__label--n { fill: #f2d27a; font-size: 10.5px; }
.globe-compass__rose { transition: transform 0.12s linear; }
@media (max-width: 639px) {
  .globe-compass { width: 80px; height: 80px; left: 12px; bottom: 120px; }
}

/* Celular: "Cosmos" solo con su icono (circulo de 44 px) para que la barra entre en una fila. */
@media (max-width: 639px) {
  #cosmos-nav-btn { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
  #cosmos-nav-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .beta-badge { margin-right: auto; }
}

/* Logo RutaVibe (mas ancho que el anterior): botones en una linea y barra del celular en una fila. */
.home__topbar .btn { white-space: nowrap; }
.home__wordmark img { height: 52px; }
@media (max-width: 639px) {
  .home__wordmark img { height: 34px; }
  .home__topbar .beta-badge { margin-right: 96px; }
}
/* Sin el badge de version: el logo del celular gana espacio. */
@media (max-width: 639px) {
  .home__wordmark img { height: 40px; }
  #cosmos-nav-btn { margin-right: auto; }
}