*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#eef5ff;
    font-family:Arial;
    padding:20px;
    color:#222;
    transition:0.3s;
}

.topo{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.topo h1{
    color:#0077cc;
}

.topo p{
    color:#555;
}

.wifi{
    background:#28a745;
    color:white;
    padding:10px 15px;
    border-radius:30px;
    font-size:14px;
    font-weight:bold;
}

#temaBtn{
    width:100%;
    padding:14px;
    border:none;
    border-radius:15px;
    margin-bottom:20px;
    background:#111;
    color:white;
    font-size:16px;
    cursor:pointer;
}

.status{
    text-align:center;
    padding:18px;
    border-radius:20px;
    color:white;
    font-size:24px;
    font-weight:bold;
    margin-bottom:20px;
    transition:0.3s;
}

.boa{
    background:#28a745;
}

.atencao{
    background:#ff9800;
}

.risco{
    background:#dc3545;
}

.cards{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
}

.card{
    background:white;
    border-radius:20px;
    padding:25px;
    box-shadow:0 5px 15px rgba(0,0,0,0.08);
    transition:0.3s;
}

.card span{
    color:#777;
    font-size:14px;
}

.card h2{
    margin-top:10px;
    font-size:34px;
}

.graficoBox{
    background:white;
    margin-top:20px;
    border-radius:20px;
    padding:20px;
    box-shadow:0 5px 15px rgba(0,0,0,0.08);
    transition:0.3s;
}

.alertas{
    background:white;
    margin-top:20px;
    border-radius:20px;
    padding:20px;
    box-shadow:0 5px 15px rgba(0,0,0,0.08);
    transition:0.3s;
}

.alerta{
    padding:12px;
    border-radius:12px;
    margin-top:10px;
    color:white;
    font-weight:bold;
}

.alertaRisco{
    background:#dc3545;
}

.alertaAtencao{
    background:#ff9800;
}

/* TEMA ESCURO */

.dark{
    background:#121212;
    color:white;
}

.dark .topo h1{
    color:#4da3ff;
}

.dark .topo p{
    color:#bbb;
}

.dark .card{
    background:#1e1e1e;
    color:white;
}

.dark .graficoBox{
    background:#1e1e1e;
    color:white;
}

.dark .alertas{
    background:#1e1e1e;
    color:white;
}

.dark #temaBtn{
    background:#0d6efd;
}

.dark .card span{
    color:#bbb;
}

@media(max-width:700px){

    .cards{
        grid-template-columns:1fr;
    }

}