@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap');

:root{
  --bg1:#0f172a;
  --bg2:#1e293b;
  --card: rgba(30, 41, 59, 0.70);
  --card-border: rgba(255,255,255,0.15);
  --text-main:#ffffff;
  --text-muted:#94a3b8;
  --accent:#38bdf8;
  --accent-glow: rgba(56,189,248,0.25);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:'Outfit', system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(circle at 10% 20%, rgba(56, 189, 248, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(168, 85, 247, 0.15) 0%, transparent 40%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  color:var(--text-main);
  min-height:100vh;
  padding:18px;
}

.container{max-width:1180px; margin:0 auto;}

/* Header */
.header{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px;}
.header h1{margin:0; font-size:30px; font-weight:700; background:linear-gradient(to right,#fff,#cbd5e1); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.subtitle{margin:6px 0 0; color:var(--text-muted); font-size:13px;}
.pill{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid var(--card-border); background:rgba(255,255,255,0.04); color:var(--text-muted); font-size:13px;}

/* Dashboard */
.dash{display:grid; grid-template-columns:280px 1fr 340px; gap:14px;}
.col{display:flex; flex-direction:column; gap:14px;}

/* Panels */
.panel{background:var(--card); border:1px solid var(--card-border); border-radius:18px; padding:16px;}
.panel-title{color:var(--text-muted); font-size:13px;}
.panel-value{margin-top:8px; font-size:34px; font-weight:700;}
.panel-metric .unit,.row-v .unit{font-size:18px; font-weight:400; opacity:0.8;}
.deg{font-size:32px; vertical-align:top; opacity:0.8;}
.hero-feels .deg{font-size:18px;}

.btn{background:var(--accent); color:#0f172a; border:none; padding:8px 14px; border-radius:10px; cursor:pointer; font-weight:700; font-size:13px; box-shadow:0 2px 10px var(--accent-glow);}
.btn:hover{filter:brightness(1.08); transform:translateY(-1px);}

/* Hero central */
.panel-hero{padding:18px;}
.hero-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
.hero-location{font-size:26px; font-weight:650;}
.hero-desc{margin-top:4px; color:var(--accent); font-size:16px; font-weight:500; text-transform:capitalize;}
.hero-icon{width:88px; height:88px; filter:drop-shadow(0 0 15px var(--accent-glow));}
.hero-temp{text-align:center; margin-top:10px; font-size:76px; font-weight:800; letter-spacing:-2px; line-height:1;}
.hero-chart{margin-top:16px; padding:12px 0; border-top:1px solid rgba(255,255,255,0.08);}
#tempChart{width:100%; height:80px; border-radius:12px; background:rgba(255,255,255,0.03);}

/* Row */
.panel-row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.row-item{background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:14px; padding:12px;}
.row-k{color:var(--text-muted); font-size:12px;}
.row-v{margin-top:6px; font-size:20px; font-weight:700;}

/* Noticias */
.news{background:rgba(15,23,42,0.40);}
.news-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;}
.news h2{margin:0; font-size:18px; font-weight:650; color:#e2e8f0;}
.news-status{text-align:center; padding:8px; color:var(--text-muted); font-size:13px;}
.news-list{display:flex; flex-direction:column; gap:12px;}
.news-list--scroll{max-height:100vh; overflow:auto; padding-right:4px;}
.news-item{display:flex; gap:12px; padding:12px; background:rgba(255,255,255,0.03); border-radius:12px; border:1px solid rgba(255,255,255,0.05);}
.news-item:hover{background:rgba(255,255,255,0.07);}
.news-thumb{width:84px; height:84px; border-radius:10px; object-fit:cover; border:1px solid var(--card-border); flex-shrink:0; background:#334155;}
.news-body{display:flex; flex-direction:column; justify-content:space-between; overflow:hidden;}
.news-body a{color:#f1f5f9; text-decoration:none; font-size:14px; font-weight:600; line-height:1.35; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.news-meta{font-size:12px; color:var(--text-muted); margin-top:6px;}

/* Responsive */
@media (max-width:1050px){.dash{grid-template-columns:260px 1fr;}.col-right{display:contents;}}
@media (max-width:720px){.dash{grid-template-columns:1fr;}.panel-row{grid-template-columns:1fr;}.body{padding:16px;}}