/* ==========================================================
   PONTO CCP
   PREMIUM UI 2026
   PACOTE 21
   ========================================================== */

:root{
    --premium-navy:#071d35;
    --premium-navy-2:#0c2948;
    --premium-navy-3:#12395f;
    --premium-blue:#1769aa;
    --premium-blue-2:#2584cc;
    --premium-sky:#eaf5ff;

    --premium-bg:#f4f7fb;
    --premium-card:#ffffff;
    --premium-soft:#f8fafc;
    --premium-line:#e4eaf1;

    --premium-text:#172033;
    --premium-muted:#748196;

    --premium-green:#15945b;
    --premium-green-bg:#eaf8f1;

    --premium-red:#d04b4b;
    --premium-red-bg:#fff0f0;

    --premium-yellow:#d68a16;
    --premium-yellow-bg:#fff7e8;

    --premium-radius:18px;
    --premium-radius-sm:12px;

    --premium-shadow:
        0 8px 30px rgba(15,35,60,.055);

    --premium-shadow-hover:
        0 16px 38px rgba(15,35,60,.095);

    --sidebar-width:268px;
    --topbar-height:76px;
}

/* ==========================================================
   BASE
   ========================================================== */

*{
    box-sizing:border-box;
}

html{
    background:var(--premium-bg);
}

body{
    margin:0;
    color:var(--premium-text);
    background:var(--premium-bg);
    font-family:
        Inter,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
    font-size:14px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
}

a{
    color:var(--premium-blue);
}

button,
input,
select,
textarea{
    font:inherit;
}

/* ==========================================================
   TOPO
   ========================================================== */

body:not(.login-body) .topbar{
    position:fixed !important;
    top:0;
    right:0;
    left:var(--sidebar-width);
    z-index:1000;

    display:flex;
    align-items:center;
    justify-content:space-between;

    height:var(--topbar-height);
    min-height:var(--topbar-height);

    padding:0 34px;

    background:#fff !important;
    border-bottom:1px solid var(--premium-line);
    box-shadow:0 2px 12px rgba(15,35,60,.035);

    backdrop-filter:none !important;
}

.topbar .brand-area{
    display:flex;
    align-items:center;
    gap:12px;
}

.topbar .header-logo{
    display:none !important;
}

.topbar .brand-text{
    display:flex;
    flex-direction:column;
}

.topbar .brand-text strong{
    color:var(--premium-navy);
    font-size:20px;
    font-weight:800;
    letter-spacing:-.025em;
}

.topbar .brand-text span{
    margin-top:1px;
    color:var(--premium-muted);
    font-size:12px;
    font-weight:600;
}

.account{
    display:flex;
    align-items:center;
    gap:10px;
    color:#344157;
    font-size:13px;
    font-weight:700;
}

.account small{
    display:inline-flex;
    align-items:center;

    min-height:27px;
    padding:4px 10px;

    color:#35658e;
    background:#edf6fd;
    border-radius:999px;

    font-size:11px;
    font-weight:800;
}

.account a{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:37px;
    padding:7px 13px;

    color:#3c4a60;
    background:#fff;
    border:1px solid #dce4ec;
    border-radius:10px;

    text-decoration:none;
    font-size:12px;
    font-weight:750;
}

.account a:hover{
    color:var(--premium-navy);
    background:#f7f9fc;
}

/* ==========================================================
   SIDEBAR PREMIUM
   ========================================================== */

.layout{
    display:block !important;
    min-height:100vh;
}

.sidebar{
    position:fixed !important;
    z-index:1100;

    top:0;
    bottom:0;
    left:0;

    width:var(--sidebar-width) !important;

    padding:112px 14px 28px !important;

    overflow-y:auto;
    overflow-x:hidden;

    background:
        linear-gradient(
            180deg,
            #071d35 0%,
            #09233f 48%,
            #071a30 100%
        ) !important;

    border:0 !important;
    box-shadow:
        12px 0 36px rgba(5,25,45,.08);
}

.sidebar:before{
    content:"PONTO CCP";
    position:absolute;
    top:27px;
    left:25px;

    color:#fff;

    font-size:20px;
    line-height:1;
    font-weight:850;
    letter-spacing:-.025em;
}

.sidebar:after{
    content:"Colégio Cristão Plenitude";
    position:absolute;
    top:54px;
    left:25px;

    color:#7795b3;

    font-size:10px;
    font-weight:700;
    letter-spacing:.03em;
}

.sidebar a{
    position:relative;

    display:flex !important;
    align-items:center;

    min-height:44px;
    margin:3px 0 !important;
    padding:10px 13px 10px 44px !important;

    color:#b7c8d9 !important;
    background:transparent !important;
    border-radius:11px !important;

    text-decoration:none;
    font-size:13px !important;
    font-weight:650 !important;

    transition:
        background .16s ease,
        color .16s ease,
        transform .16s ease;
}

/* ícone premium simples, sem dependência externa */

.sidebar a:before{
    content:"";
    position:absolute;
    left:16px;

    width:16px;
    height:16px;

    border:1.8px solid currentColor;
    border-radius:5px;

    opacity:.8;
}

.sidebar a:hover{
    color:#fff !important;
    background:rgba(255,255,255,.065) !important;
    transform:translateX(2px);
}

.sidebar a.active{
    color:#fff !important;

    background:
        linear-gradient(
            90deg,
            rgba(42,126,194,.30),
            rgba(42,126,194,.12)
        ) !important;

    box-shadow:
        inset 3px 0 0 #45a1e5 !important;
}

.sidebar a.active:before{
    background:#4c9edc;
    border-color:#4c9edc;
    box-shadow:
        inset 0 0 0 4px rgba(7,29,53,.65);
}

.sidebar .menu-title{
    margin:25px 13px 9px !important;

    color:#65829e !important;

    font-size:9px !important;
    font-weight:850 !important;
    letter-spacing:.14em !important;
    text-transform:uppercase;
}

/* ==========================================================
   CONTEÚDO
   ========================================================== */

body:not(.login-body) main{
    width:auto !important;
    max-width:none !important;

    margin:0 0 0 var(--sidebar-width) !important;

    padding:
        calc(var(--topbar-height) + 34px)
        38px
        55px !important;

    background:var(--premium-bg);
}

/* ==========================================================
   TÍTULOS
   ========================================================== */

.page-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;

    margin:0 0 26px !important;
}

.page-title h1{
    margin:0;

    color:var(--premium-navy) !important;

    font-size:28px !important;
    line-height:1.16;
    font-weight:820 !important;
    letter-spacing:-.035em !important;
}

.page-title p{
    margin:6px 0 0;

    color:var(--premium-muted) !important;

    font-size:13px;
}

.dashboard-date{
    display:inline-flex;
    align-items:center;

    padding:8px 12px;

    color:#66758a;
    background:#fff;

    border:1px solid var(--premium-line);
    border-radius:10px;

    box-shadow:0 3px 12px rgba(15,35,60,.03);
}

/* ==========================================================
   PAINÉIS
   ========================================================== */

.panel{
    background:#fff !important;

    border:1px solid var(--premium-line) !important;
    border-radius:var(--premium-radius) !important;

    box-shadow:var(--premium-shadow) !important;

    padding:22px !important;
}

.panel h2,
.panel h3{
    color:var(--premium-navy);
    letter-spacing:-.02em;
}

.panel-heading{
    padding-bottom:14px;
    margin-bottom:14px;

    border-bottom:1px solid #edf1f5;
}

.section-heading{
    color:var(--premium-navy);
    font-weight:800;
}

/* ==========================================================
   CARDS
   ========================================================== */

.management-grid,
.ops-cards,
.health-grid,
.system-count-grid,
.import-summary-grid{
    gap:16px !important;
}

.management-card,
.ops-card,
.health-card{
    position:relative;

    min-height:128px;

    padding:20px 21px !important;

    background:#fff !important;

    border:1px solid var(--premium-line) !important;
    border-radius:var(--premium-radius) !important;

    box-shadow:var(--premium-shadow) !important;

    overflow:hidden;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.management-card:after,
.ops-card:after,
.health-card:after{
    content:"";

    position:absolute;
    top:18px;
    right:18px;

    width:39px;
    height:39px;

    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            #e9f5ff,
            #f3f9ff
        );

    border:1px solid #deedf8;
}

.management-card:hover,
.ops-card:hover,
.health-card:hover{
    transform:translateY(-2px);

    border-color:#d5e1eb !important;

    box-shadow:var(--premium-shadow-hover) !important;
}

.management-card span,
.ops-card span,
.health-label{
    color:var(--premium-muted) !important;

    font-size:10px !important;
    font-weight:850 !important;

    text-transform:uppercase;
    letter-spacing:.065em;
}

.management-card strong,
.ops-card strong{
    display:block;

    margin:6px 0 2px;

    color:var(--premium-navy) !important;

    font-size:30px !important;
    line-height:1.1;
    font-weight:850 !important;
    letter-spacing:-.04em;
}

.health-card strong{
    color:var(--premium-navy);
    font-size:23px !important;
    font-weight:850 !important;
}

/* ==========================================================
   BANCO DE HORAS
   ========================================================== */

.dashboard-bank-grid{
    gap:16px !important;
}

.dashboard-bank-card{
    padding:21px !important;

    border-radius:var(--premium-radius) !important;
    border:1px solid var(--premium-line) !important;

    box-shadow:var(--premium-shadow) !important;
}

.dashboard-bank-card.positive{
    background:
        linear-gradient(
            135deg,
            #f0fbf5,
            #fff
        ) !important;
}

.dashboard-bank-card.negative{
    background:
        linear-gradient(
            135deg,
            #fff3f3,
            #fff
        ) !important;
}

/* ==========================================================
   TABELAS PREMIUM
   ========================================================== */

.table-wrap,
.schedule-table-wrap{
    overflow:auto;

    background:#fff;

    border:1px solid var(--premium-line) !important;
    border-radius:14px !important;
}

table{
    width:100%;
    border-collapse:collapse;
}

table thead th{
    padding:12px 14px !important;

    color:#66748a !important;
    background:#f8fafc !important;

    border-bottom:1px solid var(--premium-line) !important;

    font-size:10px !important;
    font-weight:850 !important;
    text-transform:uppercase;
    letter-spacing:.055em;
}

table tbody td{
    padding:13px 14px !important;

    color:#334057;

    border-bottom:1px solid #edf1f5 !important;
}

table tbody tr:last-child td{
    border-bottom:0 !important;
}

table tbody tr{
    transition:background .13s ease;
}

table tbody tr:hover{
    background:#f9fbfd !important;
}

.table-sub{
    display:block;
    margin-top:3px;

    color:var(--premium-muted);
    font-size:11px;
}

/* ==========================================================
   FORMULÁRIOS
   ========================================================== */

label{
    color:#354258 !important;

    font-size:12px !important;
    font-weight:750 !important;
}

input,
select,
textarea{
    width:100%;

    color:#25334a !important;
    background:#fff !important;

    border:1px solid #d7e0e9 !important;
    border-radius:11px !important;

    box-shadow:none !important;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

input,
select{
    min-height:44px;
}

input:focus,
select:focus,
textarea:focus{
    outline:0 !important;

    border-color:#6aa4d2 !important;

    box-shadow:
        0 0 0 3px rgba(41,126,191,.10) !important;
}

.form-section{
    padding:20px;

    background:#fff;

    border:1px solid var(--premium-line);
    border-radius:15px;
}

.search-bar,
.report-filter,
.occurrence-filters,
.ponto-filter,
.sheet-filter{
    padding:16px !important;

    background:#f9fbfd !important;

    border:1px solid var(--premium-line) !important;
    border-radius:14px !important;
}

/* ==========================================================
   BOTÕES
   ========================================================== */

.btn-primary,
.btn-secondary,
button,
a.btn-primary,
a.btn-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:auto !important;
    min-height:42px;

    padding:9px 15px !important;

    border-radius:10px !important;

    font-size:12px !important;
    font-weight:800 !important;

    text-decoration:none;

    cursor:pointer;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}

.btn-primary,
a.btn-primary,
button.btn-primary{
    color:#fff !important;

    background:
        linear-gradient(
            180deg,
            #1769aa,
            #13598f
        ) !important;

    border:1px solid #13598f !important;

    box-shadow:
        0 5px 13px rgba(23,105,170,.16) !important;
}

.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover{
    transform:translateY(-1px);

    box-shadow:
        0 8px 18px rgba(23,105,170,.22) !important;
}

.btn-secondary,
a.btn-secondary,
button.btn-secondary{
    color:#35455b !important;

    background:#fff !important;

    border:1px solid #d5dfe9 !important;
}

.btn-secondary:hover{
    background:#f7f9fc !important;
}

/* ==========================================================
   STATUS
   ========================================================== */

.status-pill,
.ops-status{
    display:inline-flex;
    align-items:center;

    min-height:25px;
    padding:4px 9px;

    border-radius:999px;

    font-size:10px;
    font-weight:850;
}

.status-ok,
.ops-ok{
    color:#137648 !important;
    background:var(--premium-green-bg) !important;
}

.status-warning,
.ops-warning{
    color:#9a650d !important;
    background:var(--premium-yellow-bg) !important;
}

.status-critical,
.ops-critical{
    color:#ad3636 !important;
    background:var(--premium-red-bg) !important;
}

/* ==========================================================
   DASHBOARD
   ========================================================== */

.dashboard-columns{
    gap:20px !important;
}

.dashboard-columns .panel{
    min-height:100%;
}

.dashboard-list > a{
    padding:13px 0 !important;
}

.report-shortcuts{
    gap:8px !important;
}

.report-shortcuts a{
    padding:12px 13px !important;

    color:#34435a !important;
    background:#f9fbfd !important;

    border:1px solid var(--premium-line) !important;
    border-radius:10px !important;

    font-weight:700 !important;
}

.report-shortcuts a:hover{
    color:var(--premium-blue) !important;
    background:#f1f7fc !important;
}

/* ==========================================================
   SAÚDE DO SISTEMA
   ========================================================== */

.health-service,
.health-data-grid > div,
.health-device-grid > div{
    background:#f9fbfd !important;

    border:1px solid var(--premium-line) !important;
    border-radius:12px !important;
}

.health-service{
    padding:14px !important;
}

.health-security-note,
.security-notice{
    padding:15px 17px !important;

    color:#526277 !important;
    background:#eef6fc !important;

    border:1px solid #d7e8f5 !important;
    border-radius:13px !important;
}

/* ==========================================================
   RELATÓRIOS
   ========================================================== */

.report-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:7px !important;

    padding:5px !important;

    background:#fff !important;

    border:1px solid var(--premium-line) !important;
    border-radius:13px !important;

    box-shadow:var(--premium-shadow) !important;
}

.report-tabs a{
    padding:9px 13px !important;

    color:#5b687a !important;

    border-radius:9px !important;

    font-size:11px !important;
    font-weight:750 !important;
}

.report-tabs a.active{
    color:#fff !important;
    background:var(--premium-navy) !important;
}

.report-institutional-header{
    background:#fff !important;

    border:1px solid var(--premium-line) !important;
    border-radius:14px !important;

    box-shadow:var(--premium-shadow) !important;
}

/* ==========================================================
   ESPELHO / DOCUMENTOS
   ========================================================== */

.sheet-document{
    padding:30px !important;

    background:#fff !important;

    border:1px solid var(--premium-line) !important;
    border-radius:16px !important;

    box-shadow:var(--premium-shadow) !important;
}

.sheet-header{
    padding-bottom:17px !important;

    border-bottom:2px solid var(--premium-navy) !important;
}

.sheet-brand img{
    display:block !important;

    width:66px !important;
    height:66px !important;

    object-fit:contain;
}

/* ==========================================================
   LOGIN PREMIUM
   ========================================================== */

body.login-body{
    position:relative;

    display:flex !important;
    align-items:center;
    justify-content:flex-end;

    min-height:100vh !important;

    padding:40px max(7vw,40px) !important;

    overflow:auto;

    background:
        radial-gradient(
            circle at 73% 15%,
            rgba(37,132,204,.10),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #eef3f8 0%,
            #f8fafc 65%,
            #edf3f8 100%
        ) !important;
}

body.login-body:before{
    content:"COLÉGIO CRISTÃO PLENITUDE\A\A Ponto CCP\A Gestão de jornada e frequência";
    white-space:pre;

    position:fixed !important;
    inset:0 auto 0 0 !important;

    display:flex;
    align-items:flex-start;

    width:48vw !important;
    height:100vh !important;

    padding:
        clamp(80px,14vh,145px)
        clamp(42px,6vw,100px) !important;

    color:#fff;

    background:
        radial-gradient(
            circle at 18% 16%,
            rgba(55,148,218,.25),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #061b31 0%,
            #0a2948 58%,
            #0c355b 100%
        ) !important;

    font-size:13px;
    line-height:2.35;
    font-weight:750;
    letter-spacing:.04em;

    z-index:0 !important;
}

body.login-body:after{
    content:"Segurança, clareza e controle para a rotina do Colégio.";

    position:fixed;

    left:clamp(42px,6vw,100px);
    top:calc(clamp(80px,14vh,145px) + 155px);

    width:min(390px,33vw);

    color:#9eb7ce;

    font-size:15px;
    line-height:1.6;
    font-weight:500;

    z-index:1;
}

.login-card{
    position:relative !important;
    z-index:2 !important;

    width:min(450px,92vw) !important;

    margin:0 !important;
    padding:42px 42px 34px !important;

    background:#fff !important;

    border:1px solid rgba(219,228,237,.95) !important;
    border-radius:22px !important;

    box-shadow:
        0 28px 70px rgba(18,39,62,.13) !important;
}

/* solicitado: remover logo acima de Ponto CCP */

.login-card > .login-logo,
.login-card > .ccp-logo,
.login-card .login-logo{
    display:none !important;
}

.login-card h1{
    margin:0 0 7px !important;

    color:var(--premium-navy) !important;

    text-align:left !important;

    font-size:31px !important;
    line-height:1.1;
    font-weight:850 !important;
    letter-spacing:-.045em !important;
}

.login-card .subtitle,
.login-card > p{
    margin:0 0 28px !important;

    color:var(--premium-muted) !important;

    text-align:left !important;
    line-height:1.5;
}

.login-access-type{
    display:inline-flex !important;

    margin-top:7px !important;
    padding:5px 9px;

    color:#286da5 !important;
    background:#eef7fe;

    border-radius:999px;

    font-size:9px !important;
    font-weight:850 !important;
    letter-spacing:.08em !important;
}

.login-card label{
    display:block;

    margin:15px 0 6px !important;
}

.login-card input{
    height:48px !important;
}

.login-card button{
    width:100% !important;
    min-height:49px !important;

    margin-top:22px !important;

    color:#fff !important;

    background:
        linear-gradient(
            180deg,
            #1769aa,
            #12578e
        ) !important;

    border:0 !important;
    border-radius:11px !important;

    font-weight:850 !important;

    box-shadow:
        0 7px 17px rgba(23,105,170,.20) !important;
}

.login-note,
.portal-login-notice{
    margin-top:22px !important;
    padding-top:17px !important;

    color:#8a95a5 !important;
    background:transparent !important;

    border:0 !important;
    border-top:1px solid #edf1f5 !important;

    text-align:center !important;
    font-size:10px !important;
}

/* ==========================================================
   PORTAL DO COLABORADOR
   ========================================================== */

.employee-portal .sidebar:after{
    content:"Portal do Colaborador";
}

.employee-portal .ops-card{
    background:#fff !important;
}

.portal-actions{
    gap:9px !important;
}

/* ==========================================================
   EMPTY STATE
   ========================================================== */

.empty-state{
    padding:36px !important;

    color:var(--premium-muted) !important;
    background:#fafcfe !important;

    border:1px dashed #ccd8e4 !important;
    border-radius:14px !important;

    text-align:center;
}

/* ==========================================================
   RESPONSIVIDADE
   ========================================================== */

@media(max-width:1100px){

    :root{
        --sidebar-width:225px;
    }

    body:not(.login-body) main{
        padding-left:25px !important;
        padding-right:25px !important;
    }

}

@media(max-width:780px){

    :root{
        --sidebar-width:0px;
        --topbar-height:68px;
    }

    body:not(.login-body) .topbar{
        position:relative !important;
        left:0 !important;

        height:auto;
        min-height:68px;

        padding:10px 14px !important;
    }

    .sidebar{
        position:relative !important;

        width:100% !important;
        height:auto !important;

        display:flex !important;
        gap:5px;

        padding:9px 10px !important;

        overflow-x:auto;
        overflow-y:hidden;
    }

    .sidebar:before,
    .sidebar:after,
    .menu-title{
        display:none !important;
    }

    .sidebar a{
        flex:0 0 auto;

        min-height:39px;

        padding:8px 12px !important;

        white-space:nowrap;
    }

    .sidebar a:before{
        display:none;
    }

    body:not(.login-body) main{
        margin:0 !important;

        padding:
            23px
            14px
            38px !important;
    }

    .page-title{
        align-items:flex-start;
        flex-direction:column;
    }

    .management-grid,
    .ops-cards,
    .health-grid,
    .dashboard-columns,
    .dashboard-bank-grid{
        grid-template-columns:1fr !important;
    }

    body.login-body{
        justify-content:center;

        padding:35px 18px !important;

        background:
            linear-gradient(
                145deg,
                #071d35 0,
                #0c3154 230px,
                #f3f6f9 230px
            ) !important;
    }

    body.login-body:before{
        content:"PONTO CCP\A Colégio Cristão Plenitude";

        position:absolute !important;

        width:auto !important;
        height:auto !important;

        inset:40px 25px auto !important;

        padding:0 !important;

        background:transparent !important;

        font-size:13px;
        line-height:1.7;
    }

    body.login-body:after{
        display:none;
    }

    .login-card{
        margin-top:115px !important;

        padding:34px 25px 28px !important;
    }

}

@media(max-width:480px){

    .topbar .brand-text strong{
        font-size:17px !important;
    }

    .topbar .brand-text span,
    .account small{
        display:none !important;
    }

    .account{
        font-size:11px;
    }

    .page-title h1{
        font-size:24px !important;
    }

    .panel{
        padding:17px !important;
    }

}

/* ==========================================================
   IMPRESSÃO
   ========================================================== */

@media print{

    .topbar,
    .sidebar,
    .no-print{
        display:none !important;
    }

    body,
    html{
        background:#fff !important;
    }

    body:not(.login-body) main{
        width:100% !important;

        margin:0 !important;
        padding:0 !important;
    }

    .panel,
    .sheet-document,
    .report-institutional-header{
        box-shadow:none !important;
    }

    .sheet-document{
        padding:0 !important;

        border:0 !important;
        border-radius:0 !important;
    }

    .sheet-brand img,
    .report-logo{
        display:block !important;
    }

    table thead{
        display:table-header-group;
    }

    tr{
        break-inside:avoid;
    }

}

/* ==========================================================
   DASHBOARD - ACABAMENTO ESPECÍFICO
   ========================================================== */

.premium-admin main > .page-title:first-child{
    position:relative;

    padding:25px 27px !important;

    background:
        radial-gradient(
            circle at 92% 20%,
            rgba(44,135,202,.13),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #ffffff,
            #f8fbfe
        );

    border:1px solid var(--premium-line);
    border-radius:20px;

    box-shadow:var(--premium-shadow);
}

.premium-admin main > .page-title:first-child:before{
    content:"";

    position:absolute;
    left:0;
    top:22px;
    bottom:22px;

    width:4px;

    background:
        linear-gradient(
            #2584cc,
            #0f5d99
        );

    border-radius:0 5px 5px 0;
}

.premium-admin .management-grid{
    margin-bottom:20px;
}

.premium-admin .management-card:nth-child(1):after{
    background:#edf7ff;
}

.premium-admin .management-card:nth-child(2):after{
    background:#edf9f3;
}

.premium-admin .management-card:nth-child(3):after{
    background:#fff7e8;
}

.premium-admin .management-card:nth-child(4):after{
    background:#fff0f0;
}


.premium-admin .health-grid{
    margin-bottom:20px;
}

.premium-admin .health-card{
    min-height:145px;
}

.premium-admin .health-card small{
    position:relative;
    z-index:2;

    color:var(--premium-muted);
}

.premium-admin .health-service-grid{
    gap:12px !important;
}

.premium-admin .health-data-grid,
.premium-admin .health-device-grid{
    gap:12px !important;
}


/* ==========================================================
   PONTO CCP - PACOTE 21.2
   CORRECAO ESTRUTURAL
   ========================================================== */

:root{
    --p21-sidebar:274px;
    --p21-topbar:78px;
    --p21-navy:#071e36;
    --p21-navy2:#0a2948;
    --p21-blue:#1774b9;
    --p21-blue2:#238ad2;
    --p21-bg:#f4f7fb;
    --p21-line:#e3eaf2;
    --p21-muted:#748198;
    --p21-text:#17243a;
}

.premium-admin{
    min-height:100vh;
    background:var(--p21-bg);
}

/* TOPBAR */

.premium-admin .topbar{
    display:none !important;
}

.premium-topbar{
    position:fixed;
    z-index:1000;
    top:0;
    right:0;
    left:var(--p21-sidebar);

    height:var(--p21-topbar);

    display:grid;
    grid-template-columns:
        minmax(210px,.8fr)
        minmax(300px,1.4fr)
        minmax(300px,.9fr);

    align-items:center;
    gap:25px;

    padding:0 30px;

    background:#fff;

    border-bottom:
        1px solid var(--p21-line);

    box-shadow:
        0 3px 15px
        rgba(16,40,65,.035);
}

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

.premium-topbar-left{
    gap:15px;
}

.premium-menu-button{
    width:39px !important;
    height:39px !important;
    min-height:39px !important;

    padding:0 !important;

    color:#53657a !important;
    background:#f8fafc !important;

    border:1px solid #e1e8ef !important;
    border-radius:10px !important;

    box-shadow:none !important;
}

.premium-menu-button .ui-icon{
    width:19px;
    height:19px;
}

.premium-product{
    display:flex;
    flex-direction:column;
}

.premium-product strong{
    color:var(--p21-navy);

    font-size:17px;
    line-height:1.1;
    font-weight:850;
    letter-spacing:-.025em;
}

.premium-product span{
    margin-top:4px;

    color:#8390a1;

    font-size:10px;
    font-weight:650;
}

.premium-topbar-center{
    display:flex;
    justify-content:center;
}

.premium-search{
    width:min(510px,100%);
    height:42px;

    display:flex;
    align-items:center;
    gap:10px;

    padding:0 12px;

    background:#f7f9fc;

    border:1px solid #e2e8ef;
    border-radius:11px;
}

.premium-search .ui-icon{
    width:17px;
    height:17px;
    flex:0 0 17px;

    color:#8390a1;
}

.premium-search input{
    min-height:0 !important;
    height:auto !important;

    padding:0 !important;

    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;

    color:#35455b !important;

    font-size:12px !important;
}

.premium-search > span{
    flex:0 0 auto;

    padding:3px 6px;

    color:#98a4b3;
    background:#fff;

    border:1px solid #e2e8ef;
    border-radius:6px;

    font-size:8px;
    font-weight:800;
}

.premium-topbar-right{
    justify-content:flex-end;
    gap:14px;
}

.premium-notification{
    width:39px;
    height:39px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#607086;
    background:#fff;

    border:1px solid #e1e8ef;
    border-radius:10px;
}

.premium-notification .ui-icon{
    width:18px;
    height:18px;
}

.premium-user{
    display:flex;
    align-items:center;
    gap:10px;

    min-width:0;
}

.premium-avatar{
    width:39px;
    height:39px;
    flex:0 0 39px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #1774b9,
            #0b3c66
        );

    border-radius:50%;

    font-size:11px;
    font-weight:850;
}

.premium-user-info{
    display:flex;
    flex-direction:column;
    min-width:0;
}

.premium-user-info strong{
    max-width:145px;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    color:#26354a;

    font-size:11px;
    font-weight:800;
}

.premium-user-info span{
    margin-top:2px;

    color:#2c74a9;

    font-size:9px;
    font-weight:800;
}

.premium-logout{
    display:flex;
    align-items:center;
    gap:6px;

    padding:7px 9px;

    color:#68778b;

    border-radius:9px;

    text-decoration:none;

    font-size:10px;
    font-weight:750;
}

.premium-logout:hover{
    color:#b43d3d;
    background:#fff3f3;
}

.premium-logout .ui-icon{
    width:16px;
    height:16px;
}

/* SIDEBAR */

.premium-admin .sidebar{
    display:none !important;
}

.premium-sidebar{
    position:fixed;
    z-index:1100;
    inset:0 auto 0 0;

    width:var(--p21-sidebar);

    display:flex;
    flex-direction:column;

    background:
        linear-gradient(
            180deg,
            #071e36 0%,
            #082540 55%,
            #06192d 100%
        );

    box-shadow:
        10px 0 32px
        rgba(5,22,39,.10);
}

.premium-sidebar-brand{
    min-height:108px;

    display:flex;
    align-items:center;
    gap:12px;

    padding:20px 18px;

    border-bottom:
        1px solid
        rgba(255,255,255,.065);
}

.premium-sidebar-logo{
    width:52px !important;
    height:52px !important;
    max-width:52px !important;
    max-height:52px !important;

    object-fit:contain;

    flex:0 0 52px;
}

.premium-sidebar-brand > div{
    min-width:0;
}

.premium-sidebar-brand strong{
    display:block;

    color:#fff;

    font-size:13px;
    line-height:1.22;
    font-weight:820;
    letter-spacing:-.015em;
}

.premium-sidebar-brand span{
    display:block;

    margin-top:5px;

    color:#7f9bb5;

    font-size:8px;
    font-weight:700;
}

.premium-nav{
    flex:1;

    padding:13px 12px 18px;

    overflow-y:auto;
}

.premium-nav a{
    position:relative;

    display:flex;
    align-items:center;
    gap:12px;

    min-height:43px;

    margin:2px 0;
    padding:8px 12px;

    color:#b4c6d8;

    border-radius:10px;

    text-decoration:none;

    font-size:11px;
    font-weight:680;

    transition:
        background .15s ease,
        color .15s ease,
        transform .15s ease;
}

.premium-nav a .ui-icon{
    width:17px;
    height:17px;
    flex:0 0 17px;

    color:#7898b6;
}

.premium-nav a:hover{
    color:#fff;

    background:
        rgba(255,255,255,.055);

    transform:
        translateX(2px);
}

.premium-nav a:hover .ui-icon{
    color:#a8d7f8;
}

.premium-nav a.active{
    color:#fff;

    background:
        linear-gradient(
            90deg,
            #1774b9,
            #125d96
        );

    box-shadow:
        0 7px 17px
        rgba(0,0,0,.12);
}

.premium-nav a.active .ui-icon{
    color:#fff;
}

.premium-nav a.search-hidden{
    display:none;
}

.premium-nav-title{
    margin:
        21px 12px
        7px;

    color:#597894;

    font-size:8px;
    font-weight:850;

    letter-spacing:.15em;
}

.premium-sidebar-status{
    display:flex;
    align-items:center;
    gap:10px;

    margin:0 12px 14px;
    padding:12px;

    background:
        rgba(255,255,255,.045);

    border:
        1px solid
        rgba(255,255,255,.065);

    border-radius:12px;
}

.premium-status-dot{
    width:9px;
    height:9px;
    flex:0 0 9px;

    background:#31c879;

    border-radius:50%;

    box-shadow:
        0 0 0 4px
        rgba(49,200,121,.10);
}

.premium-sidebar-status div{
    display:flex;
    flex-direction:column;
}

.premium-sidebar-status strong{
    color:#d6e3ee;

    font-size:9px;
    font-weight:800;
}

.premium-sidebar-status span:not(
    .premium-status-dot
){
    margin-top:2px;

    color:#718da7;

    font-size:8px;
}

/* MAIN */

.premium-main{
    width:auto !important;
    max-width:none !important;

    min-height:100vh;

    margin-left:
        var(--p21-sidebar) !important;

    padding:
        calc(var(--p21-topbar) + 30px)
        34px
        50px !important;

    background:var(--p21-bg);
}

/* neutraliza pseudo sidebar anterior */

.premium-admin
.premium-sidebar:before,
.premium-admin
.premium-sidebar:after{
    content:none !important;
}

/* Page title refinado */

.premium-main > .page-title:first-child{
    padding:0 !important;

    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

.premium-main >
.page-title:first-child:before{
    display:none !important;
}

.premium-main .page-title h1{
    font-size:27px !important;
}

/* mobile */

.premium-mobile-overlay{
    display:none;
}

@media(max-width:1050px){

    .premium-topbar{
        grid-template-columns:
            minmax(180px,.8fr)
            minmax(200px,1fr)
            minmax(230px,.8fr);

        padding:0 20px;
    }

    .premium-user-info{
        display:none;
    }

}

@media(max-width:800px){

    :root{
        --p21-sidebar:260px;
        --p21-topbar:66px;
    }

    .premium-topbar{
        left:0;

        grid-template-columns:
            1fr auto;

        gap:10px;

        padding:0 12px;
    }

    .premium-topbar-center{
        display:none;
    }

    .premium-product span,
    .premium-notification,
    .premium-logout span{
        display:none;
    }

    .premium-sidebar{
        transform:
            translateX(-102%);

        transition:
            transform .2s ease;
    }

    .premium-sidebar.mobile-open{
        transform:
            translateX(0);
    }

    .premium-mobile-overlay.visible{
        position:fixed;
        z-index:1050;
        inset:0;

        display:block;

        background:
            rgba(3,15,27,.55);
    }

    .premium-main{
        margin-left:0 !important;

        padding:
            calc(var(--p21-topbar) + 22px)
            14px
            35px !important;
    }

}

@media print{

    .premium-topbar,
    .premium-sidebar,
    .premium-mobile-overlay{
        display:none !important;
    }

    .premium-main{
        margin:0 !important;
        padding:0 !important;
    }

}

/* ==========================================================
   LOGIN ESTRUTURAL 21.2
   ========================================================== */

.premium-login-body{
    display:block !important;

    min-height:100vh !important;

    padding:0 !important;

    background:#f4f7fb !important;
}

.premium-login-body:before,
.premium-login-body:after{
    display:none !important;
}

.premium-login-shell{
    min-height:100vh;

    display:grid;

    grid-template-columns:
        minmax(480px,58%)
        minmax(420px,42%);
}

.premium-login-brand{
    position:relative;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    padding:
        clamp(36px,5vw,72px)
        clamp(45px,7vw,105px);

    color:#fff;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 82% 14%,
            rgba(44,145,219,.24),
            transparent 28%
        ),
        radial-gradient(
            circle at 18% 80%,
            rgba(22,116,185,.18),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #061a30 0%,
            #082b4c 58%,
            #0b3b65 100%
        );
}

.premium-login-brand:after{
    content:"";

    position:absolute;
    width:440px;
    height:440px;

    right:-170px;
    bottom:-170px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:50%;

    box-shadow:
        0 0 0 70px
        rgba(255,255,255,.018),
        0 0 0 140px
        rgba(255,255,255,.012);
}

.premium-login-brand-top{
    position:relative;
    z-index:2;

    display:flex;
    align-items:center;
    gap:16px;
}

.premium-login-brand-top img{
    width:70px;
    height:70px;

    object-fit:contain;
}

.premium-login-brand-top div{
    display:flex;
    flex-direction:column;
}

.premium-login-brand-top strong{
    font-size:17px;
    line-height:1.2;
    font-weight:850;
}

.premium-login-brand-top span{
    margin-top:5px;

    color:#94b0c9;

    font-size:10px;
    font-weight:650;
}

.premium-login-message{
    position:relative;
    z-index:2;

    max-width:650px;

    margin-bottom:4vh;
}

.premium-login-kicker{
    display:block;

    margin-bottom:11px;

    color:#67b8ef;

    font-size:10px;
    font-weight:850;

    letter-spacing:.13em;
}

.premium-login-message h2{
    margin:0;

    color:#fff;

    font-size:
        clamp(45px,5vw,68px);

    line-height:.98;

    font-weight:880;

    letter-spacing:-.055em;
}

.premium-login-message > p{
    max-width:530px;

    margin:20px 0 32px;

    color:#a9bfd2;

    font-size:
        clamp(15px,1.5vw,19px);

    line-height:1.6;
}

.premium-login-features{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:12px;

    max-width:570px;
}

.premium-login-features > div{
    padding:15px 16px;

    background:
        rgba(255,255,255,.055);

    border:
        1px solid
        rgba(255,255,255,.075);

    border-radius:13px;

    backdrop-filter:
        blur(5px);
}

.premium-login-features strong{
    display:block;

    color:#fff;

    font-size:11px;
    font-weight:800;
}

.premium-login-features span{
    display:block;

    margin-top:4px;

    color:#88a5bd;

    font-size:9px;
}

.premium-login-access{
    display:flex;
    align-items:center;
    justify-content:center;

    padding:40px;

    background:
        radial-gradient(
            circle at 50% 12%,
            rgba(42,128,193,.09),
            transparent 32%
        ),
        #f5f8fb;
}

.premium-login-access .login-card{
    width:min(470px,100%) !important;

    margin:0 !important;

    padding:44px 44px 35px !important;

    background:#fff !important;

    border:
        1px solid #dfe7ef !important;

    border-radius:22px !important;

    box-shadow:
        0 25px 70px
        rgba(15,35,60,.12) !important;
}

.premium-login-access
.login-card h1{
    margin:0 0 8px !important;

    color:#071e36 !important;

    text-align:left !important;

    font-size:32px !important;
    font-weight:880 !important;

    letter-spacing:-.045em !important;
}

.premium-login-access
.login-card .subtitle,
.premium-login-access
.login-card > p{
    text-align:left !important;
}

@media(max-width:900px){

    .premium-login-shell{
        grid-template-columns:1fr;
    }

    .premium-login-brand{
        min-height:330px;

        padding:35px 30px;
    }

    .premium-login-message{
        margin:
            60px 0 0;
    }

    .premium-login-message h2{
        font-size:45px;
    }

    .premium-login-features{
        display:none;
    }

    .premium-login-access{
        padding:30px 18px 45px;
    }

}