:root{
    --bg:#eef3f7;
    --surface:#ffffff;
    --surface-2:#f7fafc;
    --text:#12263a;
    --muted:#5b6b7a;
    --line:#d7e0e8;
    --blue:#0057b8;
    --blue-dark:#003a78;
    --blue-soft:#e8f1fb;
    --success:#1f8f5f;
    --warning:#d97706;
    --danger:#cf3341;
    --sidebar:#0d2742;
    --sidebar-2:#12385d;
    --shadow:0 10px 30px rgba(9, 30, 66, 0.08);
    --radius:18px;
    --radius-sm:14px;
}

*{
    box-sizing:border-box;
}

html,body{
    margin:0;
    padding:0;
}

body{
    font-family: Arial, Helvetica, sans-serif;
    background:var(--bg);
    color:var(--text);
}

a{
    text-decoration:none;
}

.site-shell{
    min-height:100vh;
    display:flex;
}

.sidebar{
    width:290px;
    background:linear-gradient(180deg, var(--sidebar), var(--sidebar-2));
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:22px 18px;
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    z-index:1040;
}

.sidebar-top{
    margin-bottom:24px;
}

.brand-block{
    display:flex;
    align-items:center;
    gap:14px;
    color:#fff;
    padding:10px 8px 22px;
    border-bottom:1px solid rgba(255,255,255,0.12);
}

.brand-mark{
    width:52px;
    height:52px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.22);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    background:rgba(255,255,255,0.08);
}

.brand-name{
    font-size:22px;
    font-weight:700;
    letter-spacing:.2px;
}

.brand-desc{
    font-size:12px;
    color:rgba(255,255,255,0.74);
    margin-top:3px;
    letter-spacing:.4px;
    text-transform:uppercase;
}

.nav-menu,
.sidebar-bottom{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.nav-item{
    display:flex;
    align-items:center;
    gap:12px;
    color:rgba(255,255,255,0.9);
    padding:13px 14px;
    border-radius:12px;
    transition:.2s ease;
    font-size:15px;
    font-weight:600;
}

.nav-item:hover,
.nav-item.active{
    background:rgba(255,255,255,0.1);
    color:#fff;
}

.nav-item i{
    font-size:18px;
}

.nav-item-logout:hover{
    background:rgba(207,51,65,0.18);
}

.content-shell{
    margin-left:290px;
    width:calc(100% - 290px);
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

.topbar{
    background:var(--surface);
    border-bottom:1px solid var(--line);
    padding:20px 28px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    position:sticky;
    top:0;
    z-index:1030;
}

.topbar-left{
    display:flex;
    align-items:center;
    gap:16px;
}

.eyebrow{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.7px;
    color:var(--blue);
    font-weight:700;
    margin-bottom:6px;
}

.page-heading{
    margin:0;
    font-size:30px;
    font-weight:700;
    color:var(--blue-dark);
}

.topbar-right{
    display:flex;
    align-items:center;
}

.user-pill{
    display:flex;
    align-items:center;
    gap:12px;
    background:var(--surface-2);
    border:1px solid var(--line);
    padding:8px 12px;
    border-radius:999px;
}

.user-avatar{
    width:40px;
    height:40px;
    border-radius:50%;
    background:var(--blue);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
}

.user-meta{
    display:flex;
    flex-direction:column;
    line-height:1.15;
}

.user-meta strong{
    font-size:14px;
}

.user-meta span{
    font-size:12px;
    color:var(--muted);
}

.mobile-menu-btn{
    display:none;
    border:1px solid var(--line);
    background:#fff;
    width:42px;
    height:42px;
    border-radius:10px;
    color:var(--blue-dark);
    font-size:22px;
}

.main-area{
    padding:28px;
}

.hero-panel{
    background:linear-gradient(135deg, #ffffff, #f6faff);
    border:1px solid var(--line);
    border-radius:24px;
    box-shadow:var(--shadow);
    padding:28px;
    margin-bottom:24px;
}

.hero-grid{
    display:grid;
    grid-template-columns: 1.3fr .7fr;
    gap:24px;
}

.hero-title{
    font-size:32px;
    line-height:1.15;
    margin:0 0 10px;
    color:var(--blue-dark);
    font-weight:700;
    max-width:700px;
}

.hero-text{
    color:var(--muted);
    font-size:15px;
    line-height:1.7;
    max-width:760px;
}

.hero-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:22px;
}

.btn-onu{
    border:none;
    border-radius:999px;
    padding:13px 18px;
    font-weight:700;
    font-size:14px;
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.btn-onu-primary{
    background:var(--blue);
    color:#fff;
}

.btn-onu-primary:hover{
    background:var(--blue-dark);
    color:#fff;
}

.btn-onu-light{
    background:#fff;
    color:var(--blue-dark);
    border:1px solid var(--line);
}

.quick-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.stat-box{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:18px;
}

.stat-label{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.7px;
    color:var(--muted);
    margin-bottom:8px;
    font-weight:700;
}

.stat-value{
    font-size:30px;
    font-weight:700;
    color:var(--blue-dark);
    line-height:1;
}

.grid-2{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap:24px;
}

.card-panel{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:var(--shadow);
    padding:22px;
}

.section-title{
    font-size:20px;
    font-weight:700;
    color:var(--blue-dark);
    margin:0 0 16px;
}

.table-wrap{
    overflow-x:auto;
}

.table-observa{
    width:100%;
    border-collapse:collapse;
    min-width:720px;
}

.table-observa th{
    text-align:left;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.6px;
    color:var(--muted);
    padding:12px 10px;
    border-bottom:1px solid var(--line);
}

.table-observa td{
    padding:14px 10px;
    border-bottom:1px solid #ecf1f5;
    font-size:14px;
    vertical-align:middle;
}

.protocol{
    font-weight:700;
    color:var(--blue-dark);
}

.badge-soft{
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    padding:7px 11px;
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
}

.badge-pendente{
    background:#fff4db;
    color:#8a5a00;
}

.badge-encaminhado{
    background:#dff3e8;
    color:#16613f;
}

.badge-andamento{
    background:#e3f0fb;
    color:#0f4c81;
}

.badge-alta{
    background:#f9dfe2;
    color:#9f2030;
}

.badge-media{
    background:#fff4db;
    color:#8a5a00;
}

.badge-baixa{
    background:#dff3e8;
    color:#16613f;
}

.regions{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.region-row{
    background:var(--surface-2);
    border:1px solid var(--line);
    border-radius:14px;
    padding:14px 16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}

.region-name{
    font-weight:600;
}

.side-note{
    margin-top:18px;
    padding:16px;
    border-left:4px solid var(--blue);
    background:#f4f9ff;
    border-radius:0 12px 12px 0;
    color:var(--muted);
    line-height:1.6;
    font-size:14px;
}

.mobile-overlay{
    display:none;
}

@media (max-width: 1100px){
    .hero-grid,
    .grid-2{
        grid-template-columns:1fr;
    }
}

@media (max-width: 991.98px){
    .sidebar{
        transform:translateX(-100%);
        transition:.25s ease;
    }

    .sidebar.show{
        transform:translateX(0);
    }

    .content-shell{
        margin-left:0;
        width:100%;
    }

    .mobile-menu-btn{
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .mobile-overlay{
        display:block;
        position:fixed;
        inset:0;
        background:rgba(0,0,0,.28);
        opacity:0;
        visibility:hidden;
        transition:.25s ease;
        z-index:1035;
    }

    .mobile-overlay.show{
        opacity:1;
        visibility:visible;
    }

    .topbar{
        padding:16px 18px;
    }

    .page-heading{
        font-size:24px;
    }

    .user-meta{
        display:none;
    }
}

@media (max-width: 767.98px){
    .main-area{
        padding:16px;
    }

    .hero-panel,
    .card-panel{
        padding:18px;
        border-radius:18px;
    }

    .hero-title{
        font-size:24px;
    }

    .quick-stats{
        grid-template-columns:1fr;
    }

    .hero-actions{
        flex-direction:column;
    }

    .btn-onu{
        width:100%;
        justify-content:center;
    }
}

.form-label{
    font-weight:700;
    color:var(--blue-dark);
    margin-bottom:8px;
}

.form-control,
.form-select,
textarea{
    border:1px solid var(--line);
    border-radius:14px;
    padding:14px 16px;
    box-shadow:none !important;
}

.form-control:focus,
.form-select:focus,
textarea:focus{
    border-color:var(--blue);
    box-shadow:0 0 0 4px rgba(0, 87, 184, 0.08) !important;
}

.alert{
    border:none;
    border-radius:16px;
    padding:16px 18px;
}

.leaflet-container{
    border-radius:18px;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger{
    border-radius:999px;
    padding:.45rem .9rem;
    font-weight:600;
}

.form-control[readonly],
.form-control[disabled]{
    background:#f7fafc;
}

canvas{
    max-width:100%;
}

@media (max-width: 767.98px){
    .hero-grid{
        gap:18px;
    }
}