/* ==========================================================
   PONTO CCP - PREMIUM FINAL
   Referência visual oficial - Pacote 21
   ========================================================== */

:root{
    --pf-navy:#071d35;
    --pf-navy-2:#0b3157;
    --pf-blue:#087bf0;
    --pf-blue-2:#075ebc;
    --pf-text:#0c1e38;
    --pf-muted:#6e8099;
    --pf-border:#dce6f0;
    --pf-bg:#f3f7fb;
    --pf-green:#0ca86b;
    --pf-red:#e43b3b;
    --pf-amber:#efa900;
    --pf-shadow:0 12px 30px rgba(19,52,84,.08);
}

/* evita transparência do cabeçalho */
body.premium-ui .topbar,
body.employee-portal .topbar{
    background:#fff !important;
    opacity:1 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    z-index:1000 !important;
}

/* estrutura */
body.premium-ui{
    background:var(--pf-bg);
}

body.premium-ui main{
    max-width:none;
    padding:20px 24px 40px;
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(31,132,231,.06),
            transparent 26%
        ),
        var(--pf-bg);
}

/* SIDEBAR */
body.premium-ui .sidebar{
    background:
        linear-gradient(
            180deg,
            #061b31 0%,
            #0a2d50 52%,
            #071e37 100%
        ) !important;
}

body.premium-ui .sidebar a{
    border-radius:9px;
    color:#d7e5f4;
}

body.premium-ui .sidebar a.active{
    color:#fff;
    background:
        linear-gradient(
            90deg,
            #087cef,
            #12528d
        ) !important;
    box-shadow:
        0 7px 20px rgba(0,119,238,.22);
}

/* HERO */
.premium-welcome{
    position:relative;
    overflow:hidden;
    min-height:252px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    padding:38px 38px 30px;
    margin-bottom:20px;
    border-radius:18px;
    color:#fff;
    background:
        radial-gradient(
            circle at 78% 50%,
            rgba(19,133,233,.35),
            transparent 28%
        ),
        linear-gradient(
            118deg,
            #082848 0%,
            #07477f 58%,
            #0a67b2 100%
        );
    box-shadow:0 15px 35px rgba(8,46,82,.16);
}

.premium-welcome:after{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    right:-100px;
    bottom:-360px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
    box-shadow:
        0 0 0 75px rgba(255,255,255,.025),
        0 0 0 150px rgba(255,255,255,.02);
}

.premium-welcome-content{
    position:relative;
    z-index:2;
    max-width:720px;
}

.premium-eyebrow{
    display:block;
    margin-bottom:12px;
    color:#7fc6ff;
    font-size:11px;
    font-weight:800;
    letter-spacing:.14em;
}

.premium-welcome h1{
    margin:0;
    color:#fff;
    font-size:31px;
    line-height:1.15;
    letter-spacing:-.025em;
}

.premium-welcome p{
    max-width:620px;
    margin:11px 0 25px;
    color:#d8e8f7;
    font-size:16px;
    line-height:1.55;
}

.premium-values{
    display:flex;
    flex-wrap:wrap;
    gap:13px 28px;
}

.premium-values span{
    display:grid;
    grid-template-columns:29px auto;
    grid-template-rows:auto auto;
    align-items:center;
    column-gap:8px;
    color:#fff;
    font-size:12px;
    font-weight:700;
}

.premium-values b{
    grid-row:1/3;
    display:grid;
    place-items:center;
    width:29px;
    height:29px;
    border-radius:8px;
    background:rgba(10,145,255,.23);
    border:1px solid rgba(74,180,255,.4);
    color:#72c9ff;
}

.premium-values small{
    display:block;
    color:#9fc2df;
    font-size:10px;
    font-weight:500;
}

.premium-date-card{
    position:relative;
    z-index:2;
    min-width:260px;
    padding:20px 22px;
    border-radius:15px;
    background:rgba(5,38,70,.68);
    border:1px solid rgba(132,199,255,.25);
    box-shadow:0 14px 30px rgba(0,0,0,.14);
}

.premium-date-card span,
.premium-date-card small{
    display:block;
    color:#b8d3e9;
    font-size:12px;
}

.premium-date-card strong{
    display:block;
    margin:6px 0 10px;
    color:#fff;
    font-size:17px;
}

/* KPIs */
.premium-kpis{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    margin-bottom:18px;
}

.premium-kpi{
    min-height:126px;
    display:flex;
    align-items:center;
    gap:16px;
    padding:21px;
    border:1px solid var(--pf-border);
    border-radius:16px;
    background:#fff;
    color:var(--pf-text);
    box-shadow:var(--pf-shadow);
    text-decoration:none;
    transition:.18s ease;
}

.premium-kpi:hover{
    transform:translateY(-2px);
    border-color:#bed3e7;
    box-shadow:0 16px 35px rgba(19,52,84,.12);
}

.premium-kpi-icon{
    flex:0 0 48px;
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:14px;
    font-size:24px;
    font-weight:900;
}

.premium-kpi.blue .premium-kpi-icon{
    background:#e9f3ff;
    color:#087bf0;
}

.premium-kpi.green .premium-kpi-icon{
    background:#e7f8f0;
    color:#08a66a;
}

.premium-kpi.amber .premium-kpi-icon{
    background:#fff5d9;
    color:#e9a400;
}

.premium-kpi.red .premium-kpi-icon{
    background:#ffeaea;
    color:#e83b46;
}

.premium-kpi span{
    display:block;
    margin-bottom:4px;
    color:#263b55;
    font-size:12px;
    font-weight:800;
}

.premium-kpi strong{
    display:block;
    color:#071b34;
    font-size:31px;
    line-height:1;
}

.premium-kpi small{
    display:block;
    margin-top:8px;
    color:var(--pf-muted);
    font-size:11px;
}

/* GRID PRINCIPAL */
.premium-dashboard-row{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:18px;
    margin-bottom:18px;
}

.premium-dashboard-main{
    grid-template-columns:1.25fr 1fr;
}

.premium-panel{
    min-width:0;
    padding:21px;
    border:1px solid var(--pf-border);
    border-radius:16px;
    background:#fff;
    box-shadow:var(--pf-shadow);
}

.premium-panel-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    margin-bottom:18px;
}

.premium-panel-head h2{
    margin:0;
    color:var(--pf-text);
    font-size:18px;
    letter-spacing:-.015em;
}

.premium-panel-head p{
    margin:3px 0 0;
    color:var(--pf-muted);
    font-size:12px;
}

.premium-panel-head a{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:7px 12px;
    border:1px solid #d9e7f5;
    border-radius:9px;
    background:#f6faff;
    color:#0870d7;
    font-size:11px;
    font-weight:800;
    text-decoration:none;
}

.premium-real-data{
    padding:6px 10px;
    border-radius:999px;
    background:#eef7ff;
    color:#3175ad;
    font-size:10px;
    font-weight:800;
}

/* GRÁFICO */
.premium-chart{
    height:220px;
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:12px;
    align-items:end;
    padding:10px 8px 0;
    border-bottom:1px solid #dce7f1;
    background:
        repeating-linear-gradient(
            to top,
            transparent 0,
            transparent 43px,
            #edf2f7 44px
        );
}

.premium-chart-day{
    height:100%;
    display:grid;
    grid-template-rows:1fr auto auto auto;
    align-items:end;
    text-align:center;
}

.premium-chart-track{
    width:100%;
    height:145px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
}

.premium-chart-bar{
    width:16px;
    min-height:3px;
    border-radius:7px 7px 2px 2px;
    background:
        linear-gradient(
            180deg,
            #0b8bf6,
            #0861bd
        );
    box-shadow:0 4px 10px rgba(8,123,240,.2);
}

.premium-chart-day strong{
    margin-top:8px;
    font-size:10px;
    color:#4d6279;
}

.premium-chart-day span,
.premium-chart-day small{
    font-size:9px;
    color:#8999aa;
}

/* BANCO */
.premium-bank-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.premium-bank{
    min-height:126px;
    display:flex;
    align-items:center;
    gap:15px;
    padding:18px;
    border:1px solid #e3ebf3;
    border-radius:13px;
    background:#fbfdff;
}

.premium-bank > span{
    width:45px;
    height:45px;
    flex:0 0 45px;
    display:grid;
    place-items:center;
    border-radius:50%;
    font-size:27px;
    font-weight:900;
}

.premium-bank.positive > span{
    background:#d9f6e7;
    color:#08a361;
}

.premium-bank.negative > span{
    background:#ffe4e4;
    color:#df3535;
}

.premium-bank small,
.premium-bank em{
    display:block;
    color:#6f8298;
    font-size:11px;
    font-style:normal;
}

.premium-bank strong{
    display:block;
    margin:4px 0;
    font-size:29px;
}

.premium-bank.positive strong{
    color:#079452;
}

.premium-bank.negative strong{
    color:#d62e2e;
}

.premium-mini-status{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:13px;
}

.premium-mini-status span{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
    border-radius:9px;
    background:#f6f9fc;
    color:#64768b;
    font-size:10px;
}

.premium-mini-status strong{
    color:#142b46;
    font-size:14px;
}

/* OCORRÊNCIAS */
.premium-empty{
    min-height:140px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:1px dashed #ccdbea;
    border-radius:12px;
    background:#fbfdff;
    text-align:center;
}

.premium-empty > span{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    margin-bottom:8px;
    border-radius:50%;
    background:#e3f8ee;
    color:#08a76a;
    font-weight:900;
}

.premium-empty strong{
    color:#4d627c;
    font-size:13px;
}

.premium-empty small{
    margin-top:4px;
    color:#8999ab;
}

.premium-occurrences{
    display:grid;
    gap:8px;
}

.premium-occurrence{
    display:flex;
    justify-content:space-between;
    gap:15px;
    padding:11px 13px;
    border:1px solid #e3ebf3;
    border-radius:10px;
    color:#142a44;
    text-decoration:none;
}

.premium-occurrence strong,
.premium-occurrence small{
    display:block;
}

.premium-occurrence small,
.premium-occurrence > span{
    color:#7a8da3;
    font-size:10px;
}

/* AÇÕES */
.premium-actions{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.premium-actions a{
    min-height:58px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:12px;
    border:1px solid #dce7f1;
    border-radius:10px;
    background:#fbfdff;
    color:#18304c;
    font-size:11px;
    font-weight:700;
    text-decoration:none;
    transition:.16s ease;
}

.premium-actions a:hover{
    background:#f0f7ff;
    border-color:#bcd7f1;
    color:#0869c6;
}

.premium-actions b{
    color:#087bf0;
    font-size:19px;
}

.premium-device-note{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-top:13px;
    padding:10px 13px;
    border-radius:9px;
    background:#fff7ed;
    color:#9b5a15;
    font-size:10px;
}

.premium-device-note strong{
    color:#b5620b;
}

/* SAÚDE DO SISTEMA */
body.premium-ui .health-grid{
    gap:15px;
}

body.premium-ui .health-card{
    min-height:140px;
    padding:21px;
    border-radius:15px;
    border:1px solid var(--pf-border);
    box-shadow:var(--pf-shadow);
}

body.premium-ui .health-card strong{
    font-size:24px;
}

body.premium-ui .health-label{
    color:#253a54;
    font-weight:800;
}

body.premium-ui .health-service,
body.premium-ui .ops-card{
    border-radius:13px;
    box-shadow:none;
}

body.premium-ui .health-card,
body.premium-ui .panel{
    background:#fff;
}

/* BOTÕES: nunca ocupar largura inteira sem necessidade */
body.premium-ui .btn-primary,
body.premium-ui .btn-secondary{
    width:auto;
}

body.premium-ui form .btn-primary{
    width:auto;
}

/* LOGIN */
body.login-body{
    min-height:100vh;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:42px max(7vw,42px);
    background:
        radial-gradient(
            circle at 24% 22%,
            rgba(13,127,226,.38),
            transparent 26%
        ),
        radial-gradient(
            circle at 36% 72%,
            rgba(6,88,157,.48),
            transparent 32%
        ),
        linear-gradient(
            116deg,
            #061d37 0%,
            #073963 55%,
            #eef4fa 55%,
            #f8fafc 100%
        ) !important;
}

body.login-body:before{
    content:"COLÉGIO CRISTÃO PLENITUDE";
    position:absolute;
    left:7vw;
    top:11vh;
    width:auto !important;
    height:auto !important;
    color:#fff;
    background:none !important;
    font-size:18px;
    font-weight:900;
    letter-spacing:.02em;
}

body.login-body:after{
    content:"Ponto CCP\A Gestão de ponto com segurança,\A organização e transparência.";
    white-space:pre;
    position:absolute;
    left:7vw;
    top:34vh;
    color:#fff;
    font-size:18px;
    line-height:1.55;
    font-weight:400;
}

body.login-body .login-card{
    position:relative;
    z-index:2;
    width:min(100%,480px);
    margin:0 !important;
    padding:48px 44px 38px;
    border:1px solid #e0e8f0;
    border-radius:23px;
    background:#fff;
    box-shadow:0 25px 70px rgba(15,42,69,.16);
}

body.login-body .login-card h1{
    margin:0;
    color:#071d38;
    font-size:34px;
    letter-spacing:-.035em;
}

body.login-body .login-card .subtitle,
body.login-body .login-card > p{
    color:#6f8198;
}

body.login-body .login-access-type{
    display:inline-flex;
    margin-top:9px;
    padding:6px 10px;
    border-radius:999px;
    background:#eaf5ff;
    color:#116eae;
    font-size:10px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
}

body.login-body .login-card label{
    color:#20324b;
    font-size:12px;
    font-weight:800;
}

body.login-body .login-card input{
    width:100%;
    height:52px;
    border:1px solid #ccd9e7;
    border-radius:10px;
    background:#fff;
    box-shadow:none;
}

body.login-body .login-card input:focus{
    border-color:#1684e8;
    box-shadow:0 0 0 3px rgba(22,132,232,.1);
}

body.login-body .login-card button{
    width:100% !important;
    min-height:53px;
    border:0;
    border-radius:10px;
    background:
        linear-gradient(
            90deg,
            #07599e,
            #087ccf
        );
    color:#fff;
    box-shadow:0 9px 22px rgba(5,104,179,.18);
}

body.login-body .login-note{
    color:#8998aa;
}

/* PORTAL */
body.employee-portal main{
    background:var(--pf-bg);
}

/* RESPONSIVO */
@media(max-width:1180px){

    .premium-kpis{
        grid-template-columns:repeat(2,1fr);
    }

    .premium-dashboard-row,
    .premium-dashboard-main{
        grid-template-columns:1fr;
    }

}

@media(max-width:800px){

    body.premium-ui main{
        padding:16px;
    }

    .premium-welcome{
        min-height:auto;
        flex-direction:column;
        align-items:flex-start;
        padding:28px 22px;
    }

    .premium-date-card{
        width:100%;
        min-width:0;
    }

    .premium-values{
        gap:12px;
    }

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

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

    body.login-body{
        justify-content:center;
        padding:25px 15px;
        background:
            linear-gradient(
                180deg,
                #071f39 0,
                #0a3b67 225px,
                #f2f6fa 225px,
                #f2f6fa 100%
            ) !important;
    }

    body.login-body:before{
        left:25px;
        top:48px;
        font-size:15px;
    }

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

    body.login-body .login-card{
        margin-top:135px !important;
        padding:34px 25px;
    }

}

@media(max-width:520px){

    .premium-kpis,
    .premium-bank-grid,
    .premium-mini-status,
    .premium-actions{
        grid-template-columns:1fr;
    }

    .premium-chart{
        gap:5px;
        padding-left:0;
        padding-right:0;
    }

    .premium-welcome h1{
        font-size:26px;
    }

}


/* ==========================================================
   PONTO CCP - ACABAMENTO FINAL PACOTE 21
   ========================================================== */

/*
 * Sidebar definitiva.
 * Objetivo:
 * - marca institucional mais legível
 * - aproveitar melhor a altura disponível
 * - reduzir necessidade de rolagem interna
 * - manter status operacional visível
 */

body.premium-ui .sidebar{
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
}

/* área superior da marca */
body.premium-ui .sidebar .brand,
body.premium-ui .sidebar .sidebar-brand,
body.premium-ui .sidebar .brand-area{
    flex:0 0 auto !important;
    min-height:118px !important;
    padding:20px 18px 16px !important;
}

/* logo oficial */
body.premium-ui .sidebar .brand img,
body.premium-ui .sidebar .sidebar-brand img,
body.premium-ui .sidebar .brand-area img{
    width:58px !important;
    height:58px !important;
    max-width:58px !important;
    max-height:58px !important;
    object-fit:contain !important;
}

/* textos da marca */
body.premium-ui .sidebar .brand strong,
body.premium-ui .sidebar .sidebar-brand strong,
body.premium-ui .sidebar .brand-area strong{
    font-size:15px !important;
    line-height:1.12 !important;
}

body.premium-ui .sidebar .brand small,
body.premium-ui .sidebar .sidebar-brand small,
body.premium-ui .sidebar .brand-area small{
    margin-top:4px !important;
    font-size:9px !important;
    line-height:1.2 !important;
}

/*
 * Menu ocupa apenas a área necessária.
 * Se uma tela tiver altura realmente pequena,
 * a rolagem continua disponível, mas muito menor.
 */
body.premium-ui .sidebar nav,
body.premium-ui .sidebar .sidebar-nav{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;

    padding:
        9px
        12px
        8px
        !important;

    scrollbar-width:thin;
    scrollbar-color:
        rgba(148,190,224,.36)
        transparent;
}

body.premium-ui .sidebar nav::-webkit-scrollbar,
body.premium-ui .sidebar .sidebar-nav::-webkit-scrollbar{
    width:5px;
}

body.premium-ui .sidebar nav::-webkit-scrollbar-track,
body.premium-ui .sidebar .sidebar-nav::-webkit-scrollbar-track{
    background:transparent;
}

body.premium-ui .sidebar nav::-webkit-scrollbar-thumb,
body.premium-ui .sidebar .sidebar-nav::-webkit-scrollbar-thumb{
    border-radius:10px;
    background:rgba(148,190,224,.32);
}

/* itens compactos */
body.premium-ui .sidebar nav a,
body.premium-ui .sidebar .sidebar-nav a{
    min-height:38px !important;
    margin:1px 0 !important;
    padding:7px 11px !important;
    gap:10px !important;

    border-radius:9px !important;

    font-size:11px !important;
    line-height:1.1 !important;
}

/* ícones */
body.premium-ui .sidebar nav a svg,
body.premium-ui .sidebar .sidebar-nav a svg{
    width:17px !important;
    height:17px !important;
    min-width:17px !important;
}

/* divisores / títulos */
body.premium-ui .sidebar .nav-section-title,
body.premium-ui .sidebar .sidebar-section-title,
body.premium-ui .sidebar .nav-label{
    margin:
        10px
        8px
        5px
        !important;

    font-size:9px !important;
    line-height:1 !important;

    letter-spacing:.14em !important;
}

/* status operacional */
body.premium-ui .sidebar .system-status,
body.premium-ui .sidebar .sidebar-status{
    flex:0 0 auto !important;

    margin:
        7px
        12px
        12px
        !important;

    padding:
        10px
        11px
        !important;

    min-height:50px !important;

    border-radius:11px !important;
}

body.premium-ui .sidebar .system-status strong,
body.premium-ui .sidebar .sidebar-status strong{
    font-size:10px !important;
}

body.premium-ui .sidebar .system-status small,
body.premium-ui .sidebar .sidebar-status small{
    font-size:8px !important;
}


/* ==========================================================
   TOPBAR - ACABAMENTO
   ========================================================== */

body.premium-ui .topbar{
    min-height:76px !important;
    height:76px !important;

    border-bottom:
        1px solid
        #dfe7ef !important;

    box-shadow:
        0 2px 10px
        rgba(21,53,82,.04)
        !important;
}

body.premium-ui .topbar .topbar-title strong{
    font-size:17px !important;
}

body.premium-ui .topbar .topbar-title small{
    font-size:10px !important;
}

body.premium-ui .topbar .search-box,
body.premium-ui .topbar .top-search{
    height:40px !important;
}


/* ==========================================================
   DASHBOARD - MICROACABAMENTO
   SEM ALTERAR ESTRUTURA OU DADOS
   ========================================================== */

body.premium-ui .premium-welcome{
    margin-top:0 !important;
}

body.premium-ui .premium-kpis{
    align-items:stretch;
}

body.premium-ui .premium-kpi{
    height:100%;
}

body.premium-ui .premium-panel{
    height:100%;
}

body.premium-ui .premium-actions a{
    justify-content:flex-start;
}

/*
 * Evita textos quebrando de maneira exagerada
 * nas ações rápidas.
 */
body.premium-ui .premium-actions{
    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );
}

body.premium-ui .premium-actions a{
    min-width:0;
}


/* ==========================================================
   LOGIN - SOMENTE PROPORÇÕES
   Não reconstruir a página novamente.
   ========================================================== */

@media(min-width:1000px){

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

}


/* ==========================================================
   NOTEBOOKS / TELAS COM MENOR ALTURA
   ========================================================== */

@media(max-height:820px) and (min-width:900px){

    body.premium-ui .sidebar .brand,
    body.premium-ui .sidebar .sidebar-brand,
    body.premium-ui .sidebar .brand-area{
        min-height:98px !important;
        padding:
            14px
            16px
            11px
            !important;
    }

    body.premium-ui .sidebar .brand img,
    body.premium-ui .sidebar .sidebar-brand img,
    body.premium-ui .sidebar .brand-area img{
        width:48px !important;
        height:48px !important;
    }

    body.premium-ui .sidebar nav a,
    body.premium-ui .sidebar .sidebar-nav a{
        min-height:34px !important;
        padding:
            5px
            10px
            !important;
    }

    body.premium-ui .sidebar .nav-section-title,
    body.premium-ui .sidebar .sidebar-section-title,
    body.premium-ui .sidebar .nav-label{
        margin:
            7px
            8px
            4px
            !important;
    }

    body.premium-ui .sidebar .system-status,
    body.premium-ui .sidebar .sidebar-status{
        margin:
            5px
            12px
            8px
            !important;
    }

}


/* ==========================================================
   CELULAR
   ========================================================== */

@media(max-width:800px){

    body.premium-ui .sidebar{
        overflow-y:auto !important;
    }

    body.premium-ui .sidebar nav,
    body.premium-ui .sidebar .sidebar-nav{
        overflow:visible !important;
    }

    body.premium-ui .premium-actions{
        grid-template-columns:1fr 1fr;
    }

}

@media(max-width:520px){

    body.premium-ui .premium-actions{
        grid-template-columns:1fr;
    }

}


/* ==========================================================
   PONTO CCP - LOGO LOGIN
   Ajuste de legibilidade da identidade institucional
   ========================================================== */

@media (min-width: 900px){

    body.login-body .login-visual-brand img,
    body.login-body .login-brand img,
    body.login-body .brand-area img,
    body.login-body .brand img{
        width:92px !important;
        height:92px !important;
        max-width:92px !important;
        max-height:92px !important;
        object-fit:contain !important;
        flex:0 0 92px !important;
    }

    body.login-body .login-visual-brand,
    body.login-body .login-brand,
    body.login-body .brand-area,
    body.login-body .brand{
        gap:18px !important;
    }

}

/* notebook */
@media (min-width:900px) and (max-height:800px){

    body.login-body .login-visual-brand img,
    body.login-body .login-brand img,
    body.login-body .brand-area img,
    body.login-body .brand img{
        width:78px !important;
        height:78px !important;
        max-width:78px !important;
        max-height:78px !important;
        flex-basis:78px !important;
    }

}


/* ==========================================================
   PONTO CCP
   IDENTIDADE INSTITUCIONAL - PADRAO GLOBAL DEFINITIVO
   ========================================================== */


/* ----------------------------------------------------------
   BASE

   A imagem oficial possui transparência e deve sempre manter
   sua proporção original.
   ---------------------------------------------------------- */

img.ccp-logo{
    object-fit:contain !important;
    object-position:center !important;
}


/* ==========================================================
   1. SIDEBAR ADMINISTRATIVA
   ========================================================== */

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

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

    gap:15px !important;

    padding:
        18px
        18px
        16px
        !important;
}

.premium-sidebar-brand .premium-sidebar-logo,
img.ccp-logo.premium-sidebar-logo{
    width:64px !important;
    height:64px !important;

    min-width:64px !important;
    min-height:64px !important;

    max-width:64px !important;
    max-height:64px !important;

    flex:
        0
        0
        64px
        !important;

    object-fit:contain !important;
}

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

.premium-sidebar-brand strong{
    font-size:14px !important;
    line-height:1.18 !important;
}

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

    margin-top:5px !important;

    font-size:8px !important;
    line-height:1.2 !important;
}


/* ==========================================================
   2. LOGIN ADMINISTRATIVO
   3. LOGIN DO FUNCIONARIO

   Ambos usam premium-login-brand-top.
   ========================================================== */

body.login-body .premium-login-brand-top{
    display:flex !important;
    align-items:center !important;

    gap:20px !important;
}

body.login-body .premium-login-brand-top > img{
    width:96px !important;
    height:96px !important;

    min-width:96px !important;
    min-height:96px !important;

    max-width:96px !important;
    max-height:96px !important;

    flex:
        0
        0
        96px
        !important;

    object-fit:contain !important;
}

body.login-body .premium-login-brand-top > div{
    min-width:0 !important;
}

body.login-body .premium-login-brand-top strong{
    font-size:18px !important;
    line-height:1.18 !important;
}

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

    margin-top:5px !important;

    font-size:11px !important;
}


/*
 * Continua proibido exibir o logo acima de
 * "Ponto CCP" dentro do card de autenticação.
 */

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


/* ==========================================================
   4. PORTAL DO FUNCIONARIO - CABECALHO INTERNO
   ========================================================== */

body.employee-portal .topbar .brand-area{
    display:flex !important;
    align-items:center !important;

    gap:14px !important;
}

body.employee-portal .topbar .header-logo,
body.employee-portal .topbar img.ccp-logo.header-logo{
    width:60px !important;
    height:60px !important;

    min-width:60px !important;
    min-height:60px !important;

    max-width:60px !important;
    max-height:60px !important;

    object-fit:contain !important;
}

body.employee-portal .topbar .brand-text strong{
    font-size:17px !important;
    line-height:1.15 !important;
}

body.employee-portal .topbar .brand-text span{
    font-size:10px !important;
}


/* ==========================================================
   5. RELATORIOS
   ========================================================== */

.report-institutional-brand{
    display:flex !important;
    align-items:center !important;

    gap:16px !important;
}

.report-institutional-brand .report-logo,
img.ccp-logo.report-logo{
    width:76px !important;
    height:76px !important;

    min-width:76px !important;
    min-height:76px !important;

    max-width:76px !important;
    max-height:76px !important;

    object-fit:contain !important;
}


/* ==========================================================
   6. ESPELHO DE PONTO / DOCUMENTOS
   ========================================================== */

.sheet-brand img,
.sheet-brand img.ccp-logo{
    width:76px !important;
    height:76px !important;

    min-width:76px !important;
    min-height:76px !important;

    max-width:76px !important;
    max-height:76px !important;

    object-fit:contain !important;
}


/* ==========================================================
   7. LOGOS GENERICOS DO SISTEMA
   Só vale quando não existe uma classe contextual específica.
   ========================================================== */

.ccp-logo.header-logo{
    width:58px !important;
    height:58px !important;

    max-width:58px !important;
    max-height:58px !important;

    object-fit:contain !important;
}


/* ==========================================================
   NOTEBOOKS COM MENOR ALTURA
   ========================================================== */

@media (min-width:900px) and (max-height:800px){

    .premium-sidebar-brand{
        min-height:92px !important;

        padding:
            12px
            15px
            10px
            !important;
    }

    .premium-sidebar-brand .premium-sidebar-logo,
    img.ccp-logo.premium-sidebar-logo{
        width:54px !important;
        height:54px !important;

        min-width:54px !important;
        min-height:54px !important;

        max-width:54px !important;
        max-height:54px !important;

        flex-basis:54px !important;
    }

    body.login-body .premium-login-brand-top > img{
        width:82px !important;
        height:82px !important;

        min-width:82px !important;
        min-height:82px !important;

        max-width:82px !important;
        max-height:82px !important;

        flex-basis:82px !important;
    }

}


/* ==========================================================
   CELULAR
   ========================================================== */

@media (max-width:800px){

    body.login-body .premium-login-brand-top > img{
        width:72px !important;
        height:72px !important;

        min-width:72px !important;
        min-height:72px !important;

        max-width:72px !important;
        max-height:72px !important;

        flex-basis:72px !important;
    }

    body.employee-portal .topbar .header-logo,
    body.employee-portal .topbar img.ccp-logo.header-logo{
        width:48px !important;
        height:48px !important;

        min-width:48px !important;
        min-height:48px !important;

        max-width:48px !important;
        max-height:48px !important;
    }

}


/* ==========================================================
   IMPRESSAO

   Mantém o logo institucional visível e legível em
   relatórios e espelhos.
   ========================================================== */

@media print{

    .report-institutional-brand .report-logo,
    img.ccp-logo.report-logo,
    .sheet-brand img,
    .sheet-brand img.ccp-logo{
        width:22mm !important;
        height:22mm !important;

        min-width:22mm !important;
        min-height:22mm !important;

        max-width:22mm !important;
        max-height:22mm !important;

        object-fit:contain !important;
    }

}



/* ==========================================================
   PONTO CCP - ESCALA FINAL DA MARCA
   Aplicado após correção da transparência do PNG
   ========================================================== */


/* LOGIN ADMINISTRATIVO + LOGIN DO FUNCIONÁRIO */

body.login-body .premium-login-brand-top > img{
    width:116px !important;
    height:116px !important;

    min-width:116px !important;
    min-height:116px !important;

    max-width:116px !important;
    max-height:116px !important;

    flex:
        0
        0
        116px
        !important;

    object-fit:contain !important;
}


/* SIDEBAR ADMINISTRATIVA */

.premium-sidebar-brand .premium-sidebar-logo,
img.ccp-logo.premium-sidebar-logo{
    width:74px !important;
    height:74px !important;

    min-width:74px !important;
    min-height:74px !important;

    max-width:74px !important;
    max-height:74px !important;

    flex:
        0
        0
        74px
        !important;

    object-fit:contain !important;
}


/* PORTAL DO FUNCIONÁRIO - CABEÇALHO */

body.employee-portal .topbar .header-logo,
body.employee-portal .topbar img.ccp-logo.header-logo{
    width:68px !important;
    height:68px !important;

    min-width:68px !important;
    min-height:68px !important;

    max-width:68px !important;
    max-height:68px !important;

    object-fit:contain !important;
}


/* NOTEBOOKS COM ALTURA REDUZIDA */

@media (min-width:900px) and (max-height:760px){

    body.login-body .premium-login-brand-top > img{
        width:100px !important;
        height:100px !important;

        min-width:100px !important;
        min-height:100px !important;

        max-width:100px !important;
        max-height:100px !important;

        flex-basis:100px !important;
    }

    .premium-sidebar-brand .premium-sidebar-logo,
    img.ccp-logo.premium-sidebar-logo{
        width:64px !important;
        height:64px !important;

        min-width:64px !important;
        min-height:64px !important;

        max-width:64px !important;
        max-height:64px !important;

        flex-basis:64px !important;
    }

}


/* CELULAR */

@media (max-width:800px){

    body.login-body .premium-login-brand-top > img{
        width:82px !important;
        height:82px !important;

        min-width:82px !important;
        min-height:82px !important;

        max-width:82px !important;
        max-height:82px !important;

        flex-basis:82px !important;
    }

}


/* ==========================================================
   PONTO CCP - PACOTE 23 - DOCUMENTO CONGELADO
   ========================================================== */

.sheet-document-state{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;

    margin:0 0 18px;
    padding:13px 16px;

    border:1px solid #dbe5ee;
    border-radius:12px;

    background:#f8fafc;
}

.sheet-document-state > div{
    min-width:0;
}

.sheet-document-state strong{
    display:block;
    color:#18354d;
    font-size:12px;
    line-height:1.3;
}

.sheet-document-state span{
    display:block;
    margin-top:3px;
    color:#687d8e;
    font-size:10px;
    line-height:1.4;
}

.sheet-document-state code{
    flex:0 0 auto;
    padding:6px 9px;
    border-radius:8px;
    background:#eef3f7;
    color:#415b70;
    font-size:9px;
}

.sheet-document-state.is-frozen{
    border-color:#b8dcca;
    background:#f1faf5;
}

.sheet-document-state.is-frozen strong{
    color:#17643c;
}

@media(max-width:700px){

    .sheet-document-state{
        align-items:flex-start;
        flex-direction:column;
    }

}

@media print{

    .sheet-document-state{
        border:1px solid #cfd8df !important;
        background:#fff !important;
        break-inside:avoid;
    }

}


/* ==========================================================
   PONTO CCP - IDENTIDADE INSTITUCIONAL REAL
   Regra definitiva.
   Não utiliza placeholder CCP.
   Não escreve o nome do colégio ao lado do arquivo.
   ========================================================== */


/* SIDEBAR */

.premium-sidebar-brand{
    min-height:112px !important;
    height:auto !important;

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

    padding:14px 16px !important;

    overflow:visible !important;
}

.premium-sidebar-brand > div{
    display:none !important;
}

.premium-sidebar-brand .premium-sidebar-logo,
img.ccp-logo.premium-sidebar-logo{
    display:block !important;

    width:auto !important;
    height:88px !important;

    min-width:0 !important;
    min-height:0 !important;

    max-width:190px !important;
    max-height:88px !important;

    flex:none !important;

    object-fit:contain !important;
}


/* LOGIN ADMINISTRATIVO E FUNCIONÁRIO */

body.login-body .premium-login-brand-top{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;

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

    overflow:visible !important;
}

body.login-body .premium-login-brand-top > div{
    display:none !important;
}

body.login-body .premium-login-brand-top > img{
    display:block !important;

    width:auto !important;
    height:150px !important;

    min-width:0 !important;
    min-height:0 !important;

    max-width:260px !important;
    max-height:150px !important;

    flex:none !important;

    object-fit:contain !important;
}


/* PORTAL DO FUNCIONÁRIO */

body.employee-portal .topbar .header-logo,
body.employee-portal .topbar img.ccp-logo.header-logo{
    display:block !important;

    width:auto !important;
    height:76px !important;

    min-width:0 !important;
    min-height:0 !important;

    max-width:160px !important;
    max-height:76px !important;

    object-fit:contain !important;
}


/* RELATÓRIOS */

.report-institutional-brand .report-logo,
img.ccp-logo.report-logo{
    width:auto !important;
    height:92px !important;

    min-width:0 !important;
    min-height:0 !important;

    max-width:190px !important;
    max-height:92px !important;

    object-fit:contain !important;
}


/* TELAS MENORES */

@media (max-width:800px){

    .premium-sidebar-brand .premium-sidebar-logo,
    img.ccp-logo.premium-sidebar-logo{
        height:78px !important;
        max-height:78px !important;
    }

    body.login-body .premium-login-brand-top > img{
        height:112px !important;
        max-height:112px !important;
        max-width:210px !important;
    }

}


/* IMPRESSÃO */

@media print{

    .report-institutional-brand .report-logo,
    img.ccp-logo.report-logo,
    .sheet-brand img,
    .sheet-brand img.ccp-logo{
        width:auto !important;
        height:25mm !important;

        min-width:0 !important;
        min-height:0 !important;

        max-width:45mm !important;
        max-height:25mm !important;

        object-fit:contain !important;
    }

}