/* Estilo inspirado en la captura, pero original */
:root{
  --bg1:#9fd0ff;
  --bg2:#f7c58a;
  --card:#ffffffcc;
  --card2:#ffffffb3;
  --text:#0b1220;
  --muted:#334155;
  --shadow: 0 10px 30px rgba(15,23,42,.18);
  --radius: 26px;
}

*{box-sizing:border-box}
html,body{
  font-weight: 400;
height:100%}
body{
  font-weight: 400;

  margin:0;
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
  color:var(--text);
  background: linear-gradient(180deg,var(--bg1), #e9e9e9 35%, var(--bg2));
}

.app{
  max-width:420px;
  margin:0 auto;
  min-height:100%;
  display:flex;
  flex-direction:column;
}

.topbar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 14px 10px;
}

.iconbtn{
  border:none;
  background:transparent;
  font-size:20px;
  color:var(--text);
  width:44px;height:44px;
  display:grid;place-items:center;
  border-radius:16px;
}
.iconbtn:active{transform:translateY(1px)}
.iconbtn:hover{background:rgba(255,255,255,.35)}
.chev{font-size:22px}

.titlewrap{flex:1; min-width:0}
.place{
  font-weight: 400;
  font-size:18px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.subtitle{font-size:12px;color:var(--muted)}

.content{
  padding:0 14px 96px;
  flex:1;
}

.hero{
  text-align:center;
  padding:8px 6px 16px;
}
.cond{
  font-size:22px;
  letter-spacing:.2px;
  margin-top:10px;
  font-weight: 400;
}
.big{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:10px 0 6px;
}

.temp{
  font-size:100px;
  font-weight:300;
  letter-spacing:-2px;
  line-height:1;
}

.wxicon{font-size:56px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.12));}
.meta{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:var(--muted);
  font-size:16px;
}


.card{
  padding: 20px 0;
  margin: 30px 0;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}


.cardhead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:10px;
  gap:12px;
}
.cardtitle{
  font-weight: 400;
  font-size:18px;
  display:flex;
  align-items:center;
  gap:8px;
}

.small{font-size:12px;color:var(--muted); white-space:nowrap}


.daily{display:flex;flex-direction:column;gap:10px}

.day{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
  background: transparent;
}

.day .left{display:flex;align-items:center;gap:10px}
.day .name{font-weight:700}
.day .di{font-size:22px}
.day .temps{font-weight:800}
.day .temps span{color:var(--muted); font-weight:700}

.row{display:flex; gap:10px; align-items:center}
.row2{justify-content:space-between; margin-top:10px}
.input{
  flex:1;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.10);
  outline:none;
  background:rgba(255,255,255,.8);
  font-size:14px;
}
.btn{
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.10);
  background:#0b1220;
  color:#fff;
  font-weight: 400;
  cursor:pointer;
}
.btn:active{transform:translateY(1px)}
.btn.ghost{
  background:rgba(255,255,255,.75);
  color:var(--text);
}


.bottombar{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:18px;
  width:min(420px, calc(100% - 40px));
  background:rgba(255,255,255,.25);
  backdrop-filter: blur(20px);
  border:none;
  box-shadow:none;
  border-radius:30px;
  padding:10px;
  display:flex;
  gap:10px;
}

.navitem{
  flex:1;
  border:none;
  background:transparent;
  padding:10px 12px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight: 400;
  cursor:pointer;
  color:var(--muted);
}
.navitem.active{
  background:rgba(15,23,42,.08);
  color:var(--text);
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto; animation:none !important; transition:none !important;}
}


/* Temas según clima (se aplican vía JS con body[data-theme="..."]) */
body[data-theme="clear"]{ --bg1:#9fd0ff; --bg2:#f7c58a; }
body[data-theme="partly"]{ --bg1:#b9d8ff; --bg2:#f0d2b0; }
body[data-theme="cloudy"]{ --bg1:#cbd5e1; --bg2:#9aa5b1; }
body[data-theme="fog"]{ --bg1:#d6dde6; --bg2:#aab6c4; }
body[data-theme="rain"]{ --bg1:#93a5b5; --bg2:#4b5563; }
body[data-theme="storm"]{ --bg1:#6b7280; --bg2:#111827; }
body[data-theme="snow"]{ --bg1:#e6f1ff; --bg2:#bcd7ff; }
body[data-theme="drizzle"]{ --bg1:#a3b9cf; --bg2:#64748b; }
body[data-theme="default"]{ --bg1:#9fd0ff; --bg2:#f7c58a; }


/* Minimal elegance tweaks */
.cond{
  font-weight:300;
  opacity:.8;
  letter-spacing:.5px;
}

.place{
  font-weight:400;
  font-size:20px;
}

.day .name{
  font-weight:400;
}

.day .temps{
  font-weight:400;
}

.meta{
  opacity:.7;
}

.cardtitle{
  font-weight:300;
  font-size:20px;
  margin-bottom:10px;
}

/* SVG icons (monocromo, premium) */
.svgicon{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: rgba(11,18,32,.78);
}
.svgicon svg{ width:100%; height:100%; }

.iconbtn .svgicon{ width:22px; height:22px; }

/* Icono grande del clima */
.wxicon{
  width:72px;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(11,18,32,.65);
}
.wxicon svg{ width:100%; height:100%; }

/* Navegación */
.navitem{ gap:10px; }
.navitem.active 
/* Premium feel */
.bottombar{ background: rgba(255,255,255,.18); }
.topbar{ padding-top:18px; }

.day .di{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(11,18,32,.55);
}
.day .di svg{ width:100%; height:100%; }

/* Fondo premium con crossfade entre degradés */
body{ background: #0b1220; } /* base, el degradé lo maneja bgStage */

#bgStage{
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.bgLayer{
  position: absolute;
  inset: -20px;
  filter: blur(0px);
  transform: scale(1.02);
  opacity: 0;
  transition: opacity 700ms ease;
  will-change: opacity;
  background: linear-gradient(180deg,var(--bg1), #e9e9e9 35%, var(--bg2));
}

.bgLayer.on{ opacity: 1; }

/* Temas aplicables a body o a capas de fondo */
.bgLayer[data-theme="clear"]{ --bg1:#9fd0ff; --bgbg:#000; --bg2:#f7c58a; }
.bgLayer[data-theme="partly"]{ --bg1:#b9d8ff; --bg2:#f0d2b0; }
.bgLayer[data-theme="cloudy"]{ --bg1:#cbd5e1; --bg2:#9aa5b1; }
.bgLayer[data-theme="fog"]{ --bg1:#d6dde6; --bg2:#aab6c4; }
.bgLayer[data-theme="drizzle"]{ --bg1:#a3b9cf; --bg2:#64748b; }
.bgLayer[data-theme="rain"]{ --bg1:#93a5b5; --bg2:#4b5563; }
.bgLayer[data-theme="snow"]{ --bg1:#e6f1ff; --bg2:#bcd7ff; }
.bgLayer[data-theme="storm"]{ --bg1:#6b7280; --bg2:#111827; }
.bgLayer[data-theme="default"]{ --bg1:#9fd0ff; --bg2:#f7c58a; }

/* Animaciones sutiles de íconos */
@keyframes wxFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-4px); }
}
@keyframes wxSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
@keyframes wxRain{
  0%{ transform: translateY(0); opacity: .9; }
  60%{ opacity:.9; }
  100%{ transform: translateY(6px); opacity: .55; }
}
@keyframes wxPulse{
  0%,100%{ opacity:.85; }
  50%{ opacity:.55; }
}

.wx{
  animation: wxFloat 3.2s ease-in-out infinite;
}
.wx-sun{
  animation: wxSpin 18s linear infinite;
  transform-origin: 50% 50%;
}
.wx-cloud, .wx-fog, .wx-thermo, .wx-partly, .wx-snow{
  animation: wxFloat 3.8s ease-in-out infinite;
}
.wx-rain, .wx-drizzle{
  animation: wxRain 1.4s ease-in-out infinite;
}
.wx-storm{
  animation: wxPulse 1.6s ease-in-out infinite;
}

/* Daily icons slightly smaller */
.day .di .wx{ animation-duration: 4.2s; }

/* Barra de búsqueda arriba (premium, limpia) */
.searchbar{
  margin: 6px 0 14px;
  padding: 0;
}
.searchbar .row{
  gap: 12px;
}
.searchbar .input{
  border-radius: 22px;
  padding: 14px 16px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.searchbar .btn, .searchbar .btn.ghost{ display:none; }
.searchbar .row2{ display:none; }

/* Botón instalar (aparece cuando el navegador lo permite) */
#btnInstall{ opacity:.9; }
#btnInstall:hover{ opacity:1; }