:root {
    --brand: #0d47a1;
    --brand-2: #1976d2;
}
body { background: #f4f6fa; font-family: 'Segoe UI', system-ui, sans-serif; }
.navbar-brand strong { letter-spacing: .5px; }
.navbar { background: linear-gradient(90deg, var(--brand), var(--brand-2)) !important; }
.navbar .nav-link, .navbar-brand { color: #fff !important; }
.navbar .nav-link:hover { color: #bbdefb !important; }
.card-kpi .value { font-size: 2.4rem; font-weight: 700; color: var(--brand); }
.card-kpi .label { color: #666; }
.nivel-tag { padding: 3px 10px; border-radius: 12px; font-size: .78rem; font-weight: 700; color: #fff; }
.nivel-NORMAL, .nivel-BAIXO  { background: #388e3c; }
.nivel-ATENCAO, .nivel-MEDIO { background: #fbc02d; color: #333; }
.nivel-ALERTA, .nivel-ALTO   { background: #f57c00; }
.nivel-CRITICO               { background: #d32f2f; }
.nivel-INFO                  { background: #0288d1; }
.login-bg { min-height: 100vh; background: linear-gradient(135deg,#0d47a1,#1976d2); }
.login-card { width: 100%; max-width: 420px; }

/* ========== Dashboard estilo painel de controle ========== */
.board {
    background: #0a1929;
    color: #e3f2fd;
    min-height: 100vh;
    padding: 20px 30px;
    font-family: 'Segoe UI', system-ui, sans-serif;
}
.board .board-header {
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 2px solid #1565c0; padding-bottom: 15px; margin-bottom: 25px;
}
.board h1 { color: #fff; font-size: 2rem; margin: 0; font-weight: 700; letter-spacing: 1px; }
.board h1 small { color: #64b5f6; font-weight: 400; font-size: 1rem; }
.board .relogio { font-size: 2.4rem; font-weight: 300; color: #90caf9; font-variant-numeric: tabular-nums; }
.board .relogio small { display: block; font-size: 1rem; color: #64b5f6; text-align: right; }

.board-status {
    text-align: center; padding: 20px; border-radius: 16px; margin-bottom: 25px;
    font-weight: 700; font-size: 1.8rem; letter-spacing: 2px;
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.board-status.status-NORMAL   { background: linear-gradient(135deg,#1b5e20,#388e3c); color:#fff; }
.board-status.status-ATENCAO  { background: linear-gradient(135deg,#e65100,#fbc02d); color:#fff; }
.board-status.status-ALERTA   { background: linear-gradient(135deg,#bf360c,#f57c00); color:#fff;
                                 animation: pulse 2s ease-in-out infinite; }
.board-status.status-CRITICO  { background: linear-gradient(135deg,#7f0000,#d32f2f); color:#fff;
                                 animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(211,47,47,.6); }
                   50% { box-shadow: 0 0 0 30px rgba(211,47,47,0); } }

.board-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 25px; }
.board-kpi {
    background: linear-gradient(180deg, #1a2f45, #142740);
    border: 1px solid #1e3a5f; border-radius: 12px; padding: 25px;
    text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.board-kpi .value { font-size: 3.8rem; font-weight: 700; color: #42a5f5; line-height: 1; }
.board-kpi .label { color: #90caf9; font-size: 1rem; text-transform: uppercase;
                    letter-spacing: 1px; margin-top: 8px; }
.board-kpi.critico .value { color: #ff5252; }
.board-kpi.alerta .value  { color: #ffa726; }
.board-kpi.ok .value      { color: #66bb6a; }

.board-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; }
.board-card {
    background: linear-gradient(180deg, #1a2f45, #142740);
    border: 1px solid #1e3a5f; border-radius: 12px; overflow: hidden;
}
.board-card h2 {
    font-size: 1.1rem; color: #64b5f6; margin: 0; padding: 15px 20px;
    border-bottom: 1px solid #1e3a5f; background: #0f233a;
    text-transform: uppercase; letter-spacing: 2px;
}
.board-card .inner { padding: 15px 20px; }
.board table { width: 100%; color: #e3f2fd; border-collapse: collapse; }
.board table th, .board table td { padding: 12px 15px; text-align: left;
                                     border-bottom: 1px solid #1e3a5f; }
.board table th { background: #0f233a; color: #64b5f6; text-transform: uppercase;
                   font-size: .8rem; letter-spacing: 1px; font-weight: 600; }
.board table tr:hover td { background: #1a2f45; }

.barra-chuva { display: inline-block; background: #0f233a; border-radius: 4px;
               width: 100px; height: 20px; overflow: hidden; vertical-align: middle; }
.barra-chuva .preencher { height: 100%; background: linear-gradient(90deg,#29b6f6,#1976d2); }

.board .nivel-tag { font-size: 0.9rem; padding: 6px 14px; }

.board-footer { margin-top: 30px; padding-top: 15px; border-top: 1px solid #1e3a5f;
                display: flex; justify-content: space-between; color: #64b5f6; font-size: .9rem; }
.board-footer a { color: #90caf9; text-decoration: none; }
.board-footer a:hover { color: #fff; }

@media (max-width: 1280px) {
    .board-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .board-grid { grid-template-columns: 1fr; }
}
@media (min-width: 1920px) {
    .board h1 { font-size: 2.6rem; }
    .board .relogio { font-size: 3rem; }
    .board-kpi .value { font-size: 5rem; }
    .board-status { font-size: 2.4rem; padding: 30px; }
    .board table th, .board table td { font-size: 1.1rem; padding: 16px 20px; }
}

/* ========== Card de clima no board ========== */
.board-clima {
    background: linear-gradient(135deg, #0d47a1 0%, #1565c0 50%, #1976d2 100%);
    border: 1px solid #1e3a5f; border-radius: 12px; padding: 25px;
    color: #fff; position: relative; overflow: hidden;
}
.board-clima .clima-hora {
    position: absolute; top: 10px; right: 15px;
    font-size: .8rem; color: #bbdefb;
}
.board-clima .clima-main {
    display: flex; align-items: center; gap: 20px;
}
.board-clima .clima-icone { font-size: 5rem; line-height: 1; color: #ffd54f; }
.board-clima .clima-temp { font-size: 4rem; font-weight: 700; line-height: 1; }
.board-clima .clima-desc { font-size: 1.2rem; color: #bbdefb; text-transform: uppercase; letter-spacing: 1px; }
.board-clima .clima-sensacao { font-size: .9rem; color: #bbdefb; }
.board-clima .clima-metrics {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 20px;
    padding-top: 20px; border-top: 1px solid rgba(255,255,255,.2);
}
.board-clima .clima-metric { text-align: center; }
.board-clima .clima-metric-val { font-size: 1.5rem; font-weight: 700; color: #fff; }
.board-clima .clima-metric-lbl { font-size: .75rem; color: #bbdefb; text-transform: uppercase; letter-spacing: 1px; }

.board-card.radar iframe { border: 0; width: 100%; }