body { margin:0; font-family:"Poppins", sans-serif; background:#f5f6fa; }
#map { height:100vh; width:100%; position:relative; z-index:0; }
header { position:fixed; top:0; left:0; width:100%; background: linear-gradient(135deg, #0072ff, #4cafef); color:white; font-weight:600; font-size:18px; text-align:center; padding:12px; z-index:1100; box-shadow:0 4px 10px rgba(0,0,0,0.15); }

.controls { position:fixed; top:70px; left:50%; transform:translateX(-50%); background:rgba(255,255,255,0.95); padding:15px 20px; z-index:1000; display:flex; flex-wrap:wrap; gap:10px; box-shadow:0 6px 18px rgba(0,0,0,0.15); border-radius:14px; backdrop-filter:blur(8px); max-width:90%; justify-content:center; }
input[type="text"] { padding:10px 12px; border:1px solid #ddd; border-radius:8px; font-size:14px; min-width:180px; }
button { padding:10px 14px; border:none; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; background:linear-gradient(135deg, #4cafef, #0072ff); color:white; transition:all 0.3s ease; }
button:hover { transform:translateY(-2px); box-shadow:0 4px 10px rgba(0,114,255,0.3); }
button.arbovirose { background: linear-gradient(135deg, #ff7043, #e53935); }
button.terreno { background: linear-gradient(135deg, #43a047, #2e7d32); }
input[type="file"] { display:none; }
.tooltip-img { width:160px; max-height:120px; object-fit:cover; border-radius:6px; margin-top:6px; }

#weather-bar {
  position: fixed; bottom:0; left:0; width:100%; background: linear-gradient(135deg, #4cafef, #0072ff); display:flex;
  justify-content:center; align-items:center; padding:10px 0; font-size:14px; box-shadow:0 -2px 6px rgba(0,0,0,0.2); z-index:1100; overflow-x:auto;
}
.weather-day {
  display:flex; flex-direction:column; align-items:center;
  background:rgba(255,255,255,0.9); border-radius:12px; padding:10px; margin:0 6px;
  box-shadow:0 4px 8px rgba(0,0,0,0.15); transition: transform 0.3s, box-shadow 0.3s;
  min-width:90px; text-align:center;
}
.weather-day:hover { transform:translateY(-6px); box-shadow:0 10px 18px rgba(0,0,0,0.25); }
.weather-icon { width:50px; height:50px; margin:4px 0; animation: float 3s ease-in-out infinite; }
.temp { font-weight:600; font-size:18px; margin:2px 0; color:#333; }
.condition { font-size:12px; color:#555; }

@keyframes float {0%{transform:translateY(0px);}50%{transform:translateY(-6px);}100%{transform:translateY(0px);}}

.sun { width:60px; height:60px; border-radius:50%; background:yellow; position:absolute; top:80px; left:20px; z-index:1001; box-shadow:0 0 20px rgba(255,255,0,0.6); animation:rotateSun 20s linear infinite; }
@keyframes rotateSun {0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}

.cloud, .cloud2 { position:absolute; background:rgba(255,255,255,0.8); border-radius:50%; z-index:1001; opacity:0.8; }
.cloud { width:100px; height:60px; top:100px; left:50px; animation:cloudMove linear infinite; }
.cloud2 { width:140px; height:80px; top:150px; left:200px; animation:cloudMove2 linear infinite; }

@keyframes cloudMove {0%{transform:translateX(0);}100%{transform:translateX(400px);}}
@keyframes cloudMove2 {0%{transform:translateX(0);}100%{transform:translateX(-500px);}}

.rain-container { position:absolute; width:100%; height:100%; top:0; left:0; pointer-events:none; z-index:1000; }
.rain-drop { width:2px; height:12px; background:rgba(0,0,255,0.6); position:absolute; animation:fall linear infinite; border-radius:50%; }
@keyframes fall {0%{transform:translateY(0);}100%{transform:translateY(100vh);}}

@media(max-width:600px){ .controls{flex-direction:column;align-items:stretch;gap:8px;padding:12px} input[type="text"],button{width:100%} }