/* ===== Tokens ===== */
:root{
  --space: clamp(14px, 2.2vw, 26px);
  --font-ui: "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-display: "Manrope", var(--font-ui);

  --day-bg:#eef4f7;
  --day-ink:#0c1d24;
  --day-ink-weak:#4a5e69;

  --night-bg:#0b1116;
  --night-ink:#e7eff4;
  --night-ink-weak:#9fb1bc;

  --accent:#0e7a8a;
  --accent-cyan:#22d3ee;

  --shadow-strong: 0 12px 28px rgba(0,0,0,.25);
}

/* ===== Base ===== */
*{ box-sizing:border-box; }
body{
  margin:0; min-height:100dvh; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-ui);
  background: var(--night-bg);
  color: var(--night-ink);
}
html.theme-day body{ background:var(--day-bg); color:var(--day-ink); }

/* ===== Sidebar ===== */
.menu-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.55); opacity:0; transition:.25s; z-index:2500; }
.menu-backdrop.show{ opacity:1; }
.sidebar{ position:fixed; top:clamp(12px,2vh,20px); left:clamp(12px,2vw,20px); z-index:2600; display:flex; flex-direction:column; gap:14px; }
.burger{
  width:60px;height:60px;border:0;border-radius:18px;cursor:pointer;
  background:#ffffff;
  box-shadow:0 10px 18px rgba(0,0,0,.08), 0 0 0 2px rgba(8,109,125,.34);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
}
.burger span{
  display:block;
  width:28px;
  height:2.5px;
  border-radius:2px;
  background:#086d7d;
  transition:transform .25s ease, opacity .25s ease;
  transform-origin:center;
}
html.theme-night .burger{ background:#0f1e28; box-shadow:0 10px 20px rgba(0,0,0,.35),0 0 0 2px rgba(34,211,238,.45); }
html.theme-night .burger span{ background:#22d3ee; }

.sidebar.open .burger span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.sidebar.open .burger span:nth-child(2){ opacity:0; }
.sidebar.open .burger span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

.side-items{ margin-top:6px; display:flex; flex-direction:column; gap:12px; opacity:0; transform:translateX(-10px); pointer-events:none; transition:.22s; }
.sidebar.open .side-items{ opacity:1; transform:none; pointer-events:auto; }

.side-btn{
  display:flex; align-items:center; gap:14px; height:60px;
  padding:10px 18px 10px 12px; min-width:clamp(240px,44vw,370px);
  border:0;border-radius:18px;cursor:pointer; transition:.18s;
}

html.theme-night .side-btn{
  background:#0b1217;
  color:#ffffff;
  box-shadow:0 6px 18px rgba(0,0,0,.45), 0 0 0 2px rgba(34,211,238,.32);
}
html.theme-night .side-btn:hover{ background:#111820; box-shadow:0 6px 18px rgba(0,0,0,.5), 0 0 0 2px rgba(34,211,238,.5); }

html.theme-day .side-btn{
  background:#ffffff;
  color:#111;
  border:1.6px solid rgba(8,109,125,.28);
  box-shadow:0 8px 16px rgba(0,0,0,.06);
}
html.theme-day .side-btn:hover{ background:#f6f8f9; border-color: rgba(8,109,125,.42); box-shadow:0 10px 18px rgba(0,0,0,.08); }

.side-btn svg,.side-btn svg *{ stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.side-btn svg{ width:22px;height:22px; padding:12px; border-radius:14px; }
.side-label{ font:800 17px/1 var(--font-ui); white-space:nowrap; }

/* ===== Layout ===== */
.futurista-wrapper{
  width:100%; max-width:1500px; min-height:100dvh;
  padding: calc(var(--space) + env(safe-area-inset-top,0px)) var(--space) calc(90px + env(safe-area-inset-bottom,0px));
  display:grid; grid-template-columns: .9fr 1.1fr; align-items:center; gap:min(6vw,60px);
}
.mascot{ width: clamp(220px, 34vw, 400px); filter: drop-shadow(0 10px 24px rgba(0,0,0,.45)); }

/* ===== Typography ===== */
.hud-title{
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: 1.04;
  text-transform: none;
  color: currentColor;
  font-size: clamp(2.6rem, 7vw, 6rem);
  margin: .1em 0 .2em;
}
.hud-sub{
  display:block;
  font: 700 clamp(1rem, 2.2vw, 1.6rem)/1.35 var(--font-ui);
  color: var(--night-ink-weak);
  margin:.1em 0 .3em;
  white-space: pre-line;
}
html.theme-day .hud-sub{ color: var(--day-ink-weak); }

.hud-temp{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.2rem, 13vw, 10rem);
  color: currentColor;
  margin-top:.05em;
}

/* ===== Overlays ===== */
.overlay{
  position:fixed; inset:0; z-index:3000;
  background:rgba(0,0,0,.55); color:#111;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:var(--space);
}
.overlay-content{
  max-width:92%; padding:28px; border-radius:16px;
  background:#fff; color:#111;
  box-shadow:0 14px 34px rgba(0,0,0,.18);
  border:1px solid rgba(0,0,0,.08);
}
.language-buttons button, .accept-button{
  background:#fff; border:1.5px solid #0e7a8a; color:#0e7a8a;
  padding:12px 20px; margin:10px;
  font:700 1.05rem var(--font-ui);
  border-radius:10px; cursor:pointer; transition:.18s;
}
.language-buttons button:hover, .accept-button:hover{ background:#0e7a8a; color:#fff; }

html.theme-night .overlay{ background:rgba(0,0,0,.88); }
html.theme-night .overlay .overlay-content{
  background:#0d1822; color:#eafcff;
  box-shadow:var(--shadow-strong), 0 0 0 1.5px rgba(97,233,255,.45);
  border:none;
}
html.theme-night .overlay .language-buttons button,
html.theme-night .overlay .accept-button{
  background:#102532; border:1.5px solid rgba(97,233,255,.55); color:#eafcff;
}

/* ===== Overlay Info ===== */
#disclaimer-text, .info-body, .info-about { white-space:pre-line; }
.info-card{ max-width:min(92vw,640px); text-align:left; }
.info-body .info-sep{ border:none; border-top:1px solid rgba(255,255,255,.15); margin:10px 0 12px; opacity:.9; }
html.theme-day .info-body .info-sep{ border-top-color:rgba(0,0,0,.12); opacity:.8; }
.info-link{ text-decoration:none; font-weight:700; border-bottom:1px dashed currentColor; }
.info-link:hover{ opacity:.85; }
html.theme-night .info-link{ color:#61e9ff; }
html.theme-day .info-link{ color:#0e7a8a; }
.info-about{ font:500 0.98rem/1.45 var(--font-ui); opacity:.95; }
.footer-credit{ margin-top:10px; font:700 0.95rem/1.25 var(--font-ui); opacity:.9; }
html.theme-night .footer-credit{ color:#cfefff; }
html.theme-day .footer-credit{ color:#0e7a8a; }
.info-body p { margin:4px 0; }
.info-body p:first-child{ margin-top:0; }
.info-body p:last-child{ margin-bottom:0; }

/* Texto izquierda + logo derecha */
.info-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:12px;
}
.info-right{ flex:1; }
.info-left{ flex:0 0 auto; }
.info-logo{
  max-width:90px;
  height:auto;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}

/* ===== Temp Overlay ===== */
.temp-card .temp-chooser{ display:grid; grid-template-rows:auto auto auto auto; row-gap:14px; justify-items:center; min-width:min(92vw,520px); }
.temp-card .picker-row{ display:grid; grid-auto-flow:column; align-items:center; column-gap:14px; }
.temp-card .mini{ width:48px; height:42px; border-radius:10px; font:800 22px/1 var(--font-ui,system-ui); display:grid; place-items:center; transition:.15s ease; cursor:pointer; }
html.theme-day .temp-card .mini{ background:#fff; color:#0e7a8a; border:1.5px solid #0e7a8a; box-shadow:0 1px 4px rgba(0,0,0,.08); }
html.theme-day .temp-card .mini:hover{ background:#0e7a8a; color:#fff; }
html.theme-night .temp-card .mini{ background:#102532; color:#eafcff; border:1.5px solid rgba(97,233,255,.55); }
html.theme-night .temp-card .mini:hover{ filter:brightness(1.08); }
.temp-card .picked{ min-width:118px; height:44px; padding:0 18px; border-radius:12px; font:800 20px/44px var(--font-display,system-ui); text-align:center; }
html.theme-day .temp-card .picked{ background:#fff; color:#111; border:1.5px solid #0e7a8a; box-shadow:0 6px 20px rgba(14,122,138,.12); }
html.theme-night .temp-card .picked{ background:#0f1e28; color:#eafcff; border:1.5px solid rgba(97,233,255,.45); }
.temp-card .neon-range{ --range-pct:50%; --track:#e6eef2; --fill:#0e7a8a; --glow:rgba(14,122,138,.18); width:100%; max-width:520px; height:32px; background:transparent; -webkit-appearance:none; appearance:none; }
.temp-card .neon-range::-webkit-slider-runnable-track{ height:10px; border-radius:999px; background:linear-gradient(90deg,var(--fill) 0 var(--range-pct),var(--track) var(--range-pct) 100%); box-shadow:0 0 0 1px rgba(0,0,0,.06),0 6px 16px var(--glow); }
.temp-card .neon-range::-moz-range-track{ height:10px; border-radius:999px; background:linear-gradient(90deg,var(--fill) 0 var(--range-pct),var(--track) var(--range-pct) 100%); box-shadow:0 0 0 1px rgba(0,0,0,.06),0 6px 16px var(--glow); }
.temp-card .neon-range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:26px; height:26px; margin-top:-8px; border-radius:50%; background:var(--fill); border:3px solid #fff; box-shadow:0 2px 10px rgba(0,0,0,.25); cursor:pointer; }
.temp-card .neon-range::-moz-range-thumb{ width:26px; height:26px; border-radius:50%; background:var(--fill); border:3px solid #fff; box-shadow:0 2px 10px rgba(0,0,0,.25); cursor:pointer; }
html.theme-night .temp-card .neon-range{ --track:#15222b; --fill:#22d3ee; --glow:rgba(34,211,238,.22); }
html.theme-night .temp-card .neon-range::-webkit-slider-thumb,
html.theme-night .temp-card .neon-range::-moz-range-thumb{ border-color:#0a141a; }
.temp-card .unit-row{ display:grid; grid-auto-flow:column; gap:12px; }
.temp-card .unit-btn{ min-width:58px; height:38px; border-radius:10px; font:800 14px/38px var(--font-ui,system-ui); transition:.15s ease; }
html.theme-day .temp-card .unit-btn{ background:#fff; color:#0e7a8a; border:1.5px solid #0e7a8a; }
html.theme-day .temp-card .unit-btn.active{ background:#0e7a8a; color:#fff; box-shadow:0 6px 16px rgba(14,122,138,.22); }
html.theme-night .temp-card .unit-btn{ background:#0f1e28; color:#eafcff; border:1.5px solid rgba(97,233,255,.45); }
html.theme-night .temp-card .unit-btn.active{ background:#22d3ee; color:#03222a; box-shadow:0 6px 16px rgba(34,211,238,.25); }
.temp-card .actions-row{ display:grid; grid-auto-flow:column; gap:18px; }
.temp-card .accept-button{ min-width:150px; height:44px; border-radius:12px; }
html.theme-day .temp-card .accept-button{ background:#fff; color:#0e7a8a; border:1.5px solid #0e7a8a; }
html.theme-day .temp-card .accept-button:hover{ background:#0e7a8a; color:#fff; }
html.theme-night .temp-card .accept-button{ background:#102532; color:#eafcff; border:1.5px solid rgba(97,233,255,.55); }
html.theme-night .temp-card .accept-button.ghost{ background:#0f1e28; color:#eafcff; }

/* ===== Animal Overlay ===== */
.animal-card{ max-width:min(92vw,640px); }
.animal-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap:18px; margin:20px 0; }
.animal-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#1c1f26; border:1.5px solid rgba(97,233,255,.45);
  padding:12px; border-radius:12px; cursor:pointer; transition:.2s;
}
.animal-btn img{ max-width:100%; height:120px; object-fit:contain; margin-bottom:8px; }
.animal-btn span{ font:700 1rem var(--font-ui); color:#eafcff; }
.animal-btn:hover{ filter:brightness(1.15); }
.animal-btn.selected{ border-color:#22d3ee; box-shadow:0 0 0 2px #22d3ee; }

/* Ajuste responsivo */
.overlay .overlay-content.animal-card{
  max-width:min(96vw,720px);
  max-height:92vh;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding:22px;
}
@media (max-height:780px){
  .animal-grid{ grid-template-columns:repeat(2,minmax(120px,1fr)); gap:12px; }
  .animal-btn img{ height:96px; }
}
@media (max-height:660px){
  .animal-grid{ grid-template-columns:repeat(2,minmax(110px,1fr)); gap:10px; }
  .animal-btn img{ height:84px; }
}
@media (max-height:560px){
  .animal-grid{ grid-template-columns:repeat(2,minmax(100px,1fr)); gap:8px; }
  .animal-btn img{ height:72px; }
  .actions-row{ gap:12px; }
}
@media (max-width:420px){
  .animal-grid{ grid-template-columns:repeat(2,minmax(110px,1fr)); }
}

/* ===== Snow OFF ===== */
#snow-container{ display:none!important; }
.snowflake{ display:none!important; }

/* === Language grid (selector por regiones) === */
.language-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  text-align:left;
  margin-top:6px;
}
.language-grid .region h3{
  margin: 4px 10px 6px;
  font: 800 1.05rem/1 var(--font-ui);
  opacity:.9;
}
.language-grid .region{
  padding: 6px 4px;
  border-left: 1px solid rgba(0,0,0,.08);
}
html.theme-night .language-grid .region{
  border-left-color: rgba(97,233,255,.25);
}

/* Botón deshabilitado (placeholders) */
.language-buttons .disabled{
  opacity:.55;
  pointer-events:none;
  border-style:dashed;
}

/* === Fix: overlays que no se corten en pantallas bajas / navegador de auto === */
body{ min-height:100svh; }                 /* evita "salto" por barras del navegador */
.futurista-wrapper{ min-height:100svh; }   /* mismo criterio para el layout principal */

/* El fondo del overlay puede scrollear si hace falta */
.overlay{
  padding: clamp(10px, 2vh, 24px);
  overflow: auto;
}

/* La tarjeta se limita de alto y hace scroll interno si se llena */
.overlay-content{
  width: min(920px, 92vw);
  max-height: min(88svh, 92dvh);
  overflow: auto;
  margin: env(safe-area-inset-top) auto env(safe-area-inset-bottom);
}

/* Selector por regiones: compactar un poco márgenes en pantallas bajas */
.language-grid{ row-gap: 8px; }
.language-grid .region h3{ margin: 2px 8px 6px; }

.language-buttons button{ margin: 8px; }

/* Aún más compacto cuando la altura es muy corta (p. ej. display del auto) */
@media (max-height: 560px){
  .overlay-content{ padding: 16px; max-height: 90svh; }
  .language-buttons button{ padding: 10px 14px; margin: 6px; font-size: 0.95rem; }
  .footer-credit{ font-size: .9rem; }
}

/* Ultra-compacto si es necesario */
@media (max-height: 460px){
  .language-grid{ gap: 8px; }
  .language-buttons button{ padding: 8px 12px; margin: 4px; font-size: .9rem; }
}

/* nuevo ✅ (comentario cerrado correctamente) */

/* --- Info card: header limpio --- */
.info-header{
  display:flex; align-items:center; gap:16px;
  margin: 6px 0 10px;
}
.info-mark{
  width:64px; height:auto; border-radius:12px;
  box-shadow:0 6px 14px rgba(0,0,0,.18);
}
.info-meta{ display:flex; flex-direction:column; gap:8px; }

.byline{ margin:0; opacity:.85; font-weight:600; }

.link-row{
  display:flex; flex-wrap:wrap; gap:10px;
}
.pill-link{
  display:inline-block;
  padding:10px 14px; border-radius:10px;
  border:1.5px solid #0e7a8a; color:#0e7a8a; text-decoration:none;
  font-weight:700; line-height:1;
  background:#fff;
  transition:.18s ease;
}
.pill-link:hover{ background:#0e7a8a; color:#fff; }

.version{ margin:0; opacity:.7; font-weight:600; }

/* Día/Noche coherente */
html.theme-night .pill-link{
  background:#102532; color:#eafcff; border-color:rgba(97,233,255,.55);
}
html.theme-night .pill-link:hover{
  background:#22d3ee; color:#03222a;
}
html.theme-night .byline, 
html.theme-night .version{ color:#cfefff; opacity:.85; }

/* Párrafo más legible sin cambiar tu copy */
.info-about{
  max-width: 62ch;
  line-height: 1.55;
  font-weight: 500;
}

/* === Botón Close centrado dentro del modal de info === */
#info-overlay .overlay-content{ 
  display: flex; 
  flex-direction: column;
}

#info-overlay #infoClose{
  align-self: center;     /* centrado horizontal */
  min-width: 160px;
  margin-top: 20px;
}