/*
 * PONTO CCP
 * Portal do Funcionário Premium 2026
 * Camada exclusivamente visual.
 */

:root {
    --portal-blue-900:#06477e;
    --portal-blue-800:#075b99;
    --portal-blue-700:#0872b8;
    --portal-blue-600:#168fd4;
    --portal-blue-500:#27a9ea;
    --portal-blue-100:#eaf6fd;
    --portal-blue-50:#f5fbff;

    --portal-green:#16a36a;
    --portal-green-bg:#ecfbf4;

    --portal-yellow:#c78316;
    --portal-yellow-bg:#fff8e7;

    --portal-red:#cf4a4a;
    --portal-red-bg:#fff0f0;

    --portal-text:#17324a;
    --portal-muted:#6d8294;
    --portal-line:#dce7ef;
    --portal-bg:#f4f8fb;
    --portal-card:#ffffff;

    --portal-radius:18px;
    --portal-shadow:0 8px 28px rgba(24,75,112,.08);
}

/* ====================================================
   ESTRUTURA GERAL
==================================================== */

body.employee-portal {
    background:
        radial-gradient(circle at 100% 0,
            rgba(39,169,234,.08),
            transparent 30%),
        var(--portal-bg);
    color:var(--portal-text);
    min-height:100vh;
}

body.employee-portal .topbar {
    height:78px;
    background:#fff;
    border-bottom:1px solid var(--portal-line);
    box-shadow:0 2px 14px rgba(27,74,108,.05);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 28px;
    position:sticky;
    top:0;
    z-index:100;
}

body.employee-portal .brand-area {
    display:flex;
    align-items:center;
    gap:14px;
}

body.employee-portal .header-logo img,
body.employee-portal .brand-area img {
    max-height:54px;
    width:auto;
}

body.employee-portal .brand-text {
    display:flex;
    flex-direction:column;
    line-height:1.15;
}

body.employee-portal .brand-text strong {
    color:var(--portal-blue-900);
    font-size:18px;
    font-weight:800;
}

body.employee-portal .brand-text span {
    margin-top:4px;
    color:var(--portal-muted);
    font-size:12px;
    font-weight:600;
}

body.employee-portal .account {
    display:grid;
    grid-template-columns:auto auto;
    align-items:center;
    column-gap:12px;
    color:var(--portal-text);
    font-weight:700;
    text-align:right;
}

body.employee-portal .account small {
    grid-column:1;
    display:block;
    color:var(--portal-muted);
    font-size:11px;
    font-weight:600;
}

body.employee-portal .account > a {
    grid-column:2;
    grid-row:1 / span 2;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:0 15px;
    border:1px solid var(--portal-line);
    border-radius:11px;
    color:var(--portal-blue-800);
    background:#fff;
    font-size:13px;
    text-decoration:none;
    transition:.2s ease;
}

body.employee-portal .account > a:hover {
    background:var(--portal-blue-50);
    border-color:#bddced;
}

/* ====================================================
   LAYOUT
==================================================== */

body.employee-portal .layout {
    display:grid;
    grid-template-columns:245px minmax(0,1fr);
    min-height:calc(100vh - 78px);
}

body.employee-portal .sidebar {
    background:
        linear-gradient(
            180deg,
            #27a9ea 0%,
            #168fd4 18%,
            #0c76bc 52%,
            #085e9f 75%,
            #06477e 100%
        );
    padding:24px 16px;
    display:flex;
    flex-direction:column;
    gap:7px;
    min-height:calc(100vh - 78px);
    position:sticky;
    top:78px;
    align-self:start;
}

body.employee-portal .sidebar a {
    display:flex;
    align-items:center;
    min-height:46px;
    padding:0 16px;
    border-radius:12px;
    color:rgba(255,255,255,.88);
    text-decoration:none;
    font-size:14px;
    font-weight:650;
    transition:.18s ease;
    position:relative;
}

body.employee-portal .sidebar a:hover {
    background:rgba(255,255,255,.11);
    color:#fff;
    transform:translateX(2px);
}

body.employee-portal .sidebar a.active {
    background:#fff;
    color:var(--portal-blue-800);
    box-shadow:0 7px 20px rgba(0,49,86,.18);
    font-weight:800;
}

body.employee-portal main {
    min-width:0;
    padding:30px clamp(20px,3vw,42px) 48px;
    max-width:1500px;
    width:100%;
    margin:0 auto;
}

/* ====================================================
   TITULOS
==================================================== */

body.employee-portal .page-title {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:22px;
}

body.employee-portal .page-title h1 {
    margin:0;
    color:var(--portal-blue-900);
    font-size:clamp(25px,2.4vw,34px);
    line-height:1.12;
    letter-spacing:-.6px;
    font-weight:850;
}

body.employee-portal .page-title p {
    margin:8px 0 0;
    color:var(--portal-muted);
    font-size:14px;
    line-height:1.55;
}

/* ====================================================
   CARDS DE RESUMO
==================================================== */

body.employee-portal .ops-cards {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    margin:0 0 22px;
}

body.employee-portal .ops-card {
    background:#fff;
    border:1px solid var(--portal-line);
    border-radius:var(--portal-radius);
    padding:21px 22px;
    box-shadow:var(--portal-shadow);
    min-height:112px;
    position:relative;
    overflow:hidden;
}

body.employee-portal .ops-card::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    background:
        linear-gradient(
            90deg,
            var(--portal-blue-500),
            var(--portal-blue-700)
        );
}

body.employee-portal .ops-card span {
    display:block;
    color:var(--portal-muted);
    font-size:12px;
    font-weight:750;
    text-transform:uppercase;
    letter-spacing:.45px;
}

body.employee-portal .ops-card strong {
    display:block;
    margin-top:11px;
    color:var(--portal-blue-900);
    font-size:27px;
    line-height:1;
    font-weight:850;
}

/* ====================================================
   PAINEIS
==================================================== */

body.employee-portal .panel {
    background:#fff;
    border:1px solid var(--portal-line);
    border-radius:var(--portal-radius);
    padding:23px;
    margin-bottom:20px;
    box-shadow:var(--portal-shadow);
}

body.employee-portal .panel h2 {
    color:var(--portal-blue-900);
    font-size:18px;
    margin:0 0 18px;
    font-weight:800;
}

body.employee-portal .panel p {
    color:var(--portal-muted);
    line-height:1.6;
}

/* ====================================================
   AVISO DE SEGURANCA
==================================================== */

body.employee-portal .security-notice {
    position:relative;
    background:
        linear-gradient(
            135deg,
            #edf8ff,
            #f8fcff
        );
    border:1px solid #cce7f6;
    border-left:5px solid var(--portal-blue-500);
    border-radius:15px;
    padding:17px 20px;
    margin-bottom:21px;
    color:#456477;
    line-height:1.55;
    box-shadow:0 5px 18px rgba(24,105,158,.05);
}

body.employee-portal .security-notice strong {
    color:var(--portal-blue-900);
}

/* ====================================================
   ACOES RAPIDAS
==================================================== */

body.employee-portal .portal-actions {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

body.employee-portal .portal-actions a {
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    border-radius:13px;
    font-weight:750;
    text-decoration:none;
}

/* ====================================================
   BOTOES
==================================================== */

body.employee-portal .btn-primary,
body.employee-portal button.btn-primary {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:43px;
    padding:0 18px;
    border:0;
    border-radius:11px;
    background:
        linear-gradient(
            135deg,
            var(--portal-blue-500),
            var(--portal-blue-700)
        );
    color:#fff;
    font-weight:750;
    font-size:13px;
    text-decoration:none;
    box-shadow:0 6px 16px rgba(14,126,190,.18);
    cursor:pointer;
    transition:.18s ease;
}

body.employee-portal .btn-primary:hover {
    transform:translateY(-1px);
    box-shadow:0 9px 20px rgba(14,126,190,.24);
}

body.employee-portal .btn-secondary,
body.employee-portal button.btn-secondary {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:0 17px;
    border:1px solid #cfe0eb;
    border-radius:11px;
    background:#fff;
    color:var(--portal-blue-800);
    font-size:13px;
    font-weight:750;
    text-decoration:none;
    cursor:pointer;
    transition:.18s ease;
}

body.employee-portal .btn-secondary:hover {
    background:var(--portal-blue-50);
    border-color:#a9d1e8;
}

/* ====================================================
   FORMULARIOS
==================================================== */

body.employee-portal form label {
    color:#405d70;
    font-size:13px;
    font-weight:750;
}

body.employee-portal input[type="text"],
body.employee-portal input[type="password"],
body.employee-portal input[type="date"],
body.employee-portal input[type="month"],
body.employee-portal input[type="email"],
body.employee-portal input[type="number"],
body.employee-portal select,
body.employee-portal textarea {
    width:100%;
    min-height:44px;
    padding:10px 13px;
    border:1px solid #cfdee8;
    border-radius:11px;
    background:#fff;
    color:var(--portal-text);
    font:inherit;
    outline:none;
    transition:.18s ease;
}

body.employee-portal textarea {
    min-height:120px;
    resize:vertical;
}

body.employee-portal input:focus,
body.employee-portal select:focus,
body.employee-portal textarea:focus {
    border-color:var(--portal-blue-500);
    box-shadow:0 0 0 3px rgba(39,169,234,.11);
}

body.employee-portal form {
    gap:12px;
}

body.employee-portal .checkbox-line {
    display:flex;
    align-items:flex-start;
    gap:9px;
    line-height:1.5;
    margin:15px 0;
}

body.employee-portal .checkbox-line input {
    margin-top:3px;
}

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

body.employee-portal .table-wrap {
    overflow:auto;
    border:1px solid var(--portal-line);
    border-radius:14px;
}

body.employee-portal table {
    width:100%;
    border-collapse:collapse;
    background:#fff;
}

body.employee-portal thead th {
    background:#f4f9fc;
    color:#4c697b;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.4px;
    padding:13px 14px;
    border-bottom:1px solid var(--portal-line);
    white-space:nowrap;
}

body.employee-portal tbody td {
    padding:14px;
    border-bottom:1px solid #edf2f5;
    color:#385569;
    font-size:13px;
    vertical-align:middle;
}

body.employee-portal tbody tr:last-child td {
    border-bottom:0;
}

body.employee-portal tbody tr:hover {
    background:#fbfdff;
}

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

body.employee-portal .ops-status {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:27px;
    padding:4px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    white-space:nowrap;
}

body.employee-portal .ops-ok {
    color:#08794e;
    background:var(--portal-green-bg);
    border:1px solid #bdebd7;
}

body.employee-portal .ops-warning {
    color:#94610d;
    background:var(--portal-yellow-bg);
    border:1px solid #f0d89e;
}

/* ====================================================
   ESPELHO DOCUMENTAL
==================================================== */

body.employee-portal .sheet-document-state {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    background:#fff;
    border:1px solid var(--portal-line);
    border-radius:15px;
    padding:16px 19px;
    margin-bottom:18px;
    box-shadow:var(--portal-shadow);
}

body.employee-portal .sheet-document-state strong {
    display:block;
    color:var(--portal-blue-900);
    font-size:14px;
}

body.employee-portal .sheet-document-state span {
    display:block;
    color:var(--portal-muted);
    font-size:12px;
    margin-top:4px;
}

body.employee-portal .sheet-document-state code {
    padding:7px 10px;
    background:#f1f6f9;
    border-radius:8px;
    color:#577083;
    font-size:11px;
}

body.employee-portal .sheet-document-state.is-frozen {
    border-left:5px solid var(--portal-green);
}

/* ====================================================
   DIAGNOSTIC GRID / RESUMO ESPELHO
==================================================== */

body.employee-portal .diagnostic-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}

body.employee-portal .diagnostic-grid > div {
    padding:17px;
    background:#f7fafc;
    border:1px solid #e2ebf1;
    border-radius:13px;
}

body.employee-portal .diagnostic-grid span {
    display:block;
    color:var(--portal-muted);
    font-size:11px;
    font-weight:750;
    text-transform:uppercase;
}

body.employee-portal .diagnostic-grid strong {
    display:block;
    margin-top:8px;
    color:var(--portal-blue-900);
    font-size:21px;
}

/* ====================================================
   FLASH
==================================================== */

body.employee-portal .flash {
    border-radius:12px;
    padding:13px 15px;
    margin-bottom:15px;
    font-size:13px;
    line-height:1.5;
}

body.employee-portal .flash.success {
    background:var(--portal-green-bg);
    border:1px solid #bdebd7;
    color:#08794e;
}

body.employee-portal .flash.error {
    background:var(--portal-red-bg);
    border:1px solid #f0c6c6;
    color:#a23b3b;
}

/* ====================================================
   LOGIN DO FUNCIONARIO
==================================================== */

body.premium-login-body .premium-login-brand {
    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(255,255,255,.18),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #27a9ea 0%,
            #168fd4 28%,
            #0c76bc 58%,
            #06477e 100%
        );
}

body.premium-login-body .premium-login-brand-top img {
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.10));
}

body.premium-login-body .login-card {
    border-radius:20px;
    box-shadow:0 18px 55px rgba(28,73,106,.12);
}

body.premium-login-body .portal-login-notice {
    margin-top:18px;
    padding:14px 15px;
    border-radius:12px;
    background:#f1f8fc;
    border:1px solid #d7e9f3;
    color:#577184;
    font-size:12px;
    line-height:1.55;
}

/* ====================================================
   TABLET
==================================================== */

@media (max-width:1050px) {

    body.employee-portal .layout {
        grid-template-columns:205px minmax(0,1fr);
    }

    body.employee-portal .portal-actions {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}

/* ====================================================
   MOBILE
==================================================== */

@media (max-width:760px) {

    body.employee-portal {
        padding-bottom:76px;
    }

    body.employee-portal .topbar {
        height:66px;
        padding:0 15px;
    }

    body.employee-portal .header-logo img,
    body.employee-portal .brand-area img {
        max-height:43px;
        max-width:100px;
    }

    body.employee-portal .brand-area {
        gap:9px;
    }

    body.employee-portal .brand-text strong {
        font-size:15px;
    }

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

    body.employee-portal .account {
        display:flex;
        align-items:center;
        gap:7px;
        max-width:44%;
        font-size:11px;
    }

    body.employee-portal .account small {
        display:none;
    }

    body.employee-portal .account > a {
        min-height:34px;
        padding:0 10px;
        font-size:11px;
    }

    body.employee-portal .layout {
        display:block;
        min-height:auto;
    }

    /*
     * Navegação móvel inferior.
     * Mantém os mesmos links e permissões PHP.
     */
    body.employee-portal .sidebar {
        position:fixed;
        z-index:500;
        left:0;
        right:0;
        bottom:0;
        top:auto;
        min-height:0;
        height:auto;
        padding:7px 7px calc(7px + env(safe-area-inset-bottom));
        display:flex;
        flex-direction:row;
        align-items:stretch;
        overflow-x:auto;
        gap:4px;
        background:
            linear-gradient(
                90deg,
                #075b99,
                #0872b8
            );
        box-shadow:0 -5px 22px rgba(7,72,121,.18);
    }

    body.employee-portal .sidebar a {
        flex:1 0 auto;
        min-width:70px;
        min-height:50px;
        padding:5px 9px;
        border-radius:10px;
        justify-content:center;
        text-align:center;
        font-size:10px;
        line-height:1.15;
        color:rgba(255,255,255,.9);
        white-space:nowrap;
    }

    body.employee-portal .sidebar a:hover {
        transform:none;
    }

    body.employee-portal .sidebar a.active {
        background:#fff;
        color:var(--portal-blue-800);
    }

    body.employee-portal main {
        padding:20px 14px 24px;
    }

    body.employee-portal .page-title {
        margin-bottom:17px;
        gap:12px;
        flex-direction:column;
    }

    body.employee-portal .page-title h1 {
        font-size:25px;
    }

    body.employee-portal .page-title p {
        font-size:13px;
        margin-top:5px;
    }

    body.employee-portal .page-title > a {
        width:100%;
    }

    body.employee-portal .ops-cards {
        grid-template-columns:1fr;
        gap:10px;
        margin-bottom:15px;
    }

    body.employee-portal .ops-card {
        min-height:88px;
        padding:17px 18px;
        border-radius:15px;
    }

    body.employee-portal .ops-card strong {
        font-size:23px;
    }

    body.employee-portal .panel {
        padding:17px;
        border-radius:15px;
        margin-bottom:14px;
    }

    body.employee-portal .security-notice {
        padding:14px 15px;
        font-size:12px;
        margin-bottom:15px;
    }

    body.employee-portal .portal-actions {
        grid-template-columns:1fr 1fr;
        gap:9px;
    }

    body.employee-portal .portal-actions a {
        min-height:53px;
        padding:8px;
        font-size:11px;
    }

    body.employee-portal .diagnostic-grid {
        grid-template-columns:1fr;
        gap:8px;
    }

    body.employee-portal .sheet-document-state {
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
        padding:14px;
    }

    body.employee-portal .table-wrap {
        border-radius:11px;
    }

    body.employee-portal table {
        min-width:620px;
    }

    body.employee-portal thead th {
        padding:11px 10px;
        font-size:10px;
    }

    body.employee-portal tbody td {
        padding:12px 10px;
        font-size:12px;
    }

    body.employee-portal input[type="text"],
    body.employee-portal input[type="password"],
    body.employee-portal input[type="date"],
    body.employee-portal input[type="month"],
    body.employee-portal input[type="email"],
    body.employee-portal input[type="number"],
    body.employee-portal select,
    body.employee-portal textarea {
        font-size:16px;
    }

    body.employee-portal .btn-primary,
    body.employee-portal .btn-secondary,
    body.employee-portal button.btn-primary,
    body.employee-portal button.btn-secondary {
        min-height:45px;
    }

}

/* ====================================================
   CELULARES PEQUENOS
==================================================== */

@media (max-width:430px) {

    body.employee-portal .brand-text span {
        display:none;
    }

    body.employee-portal .account {
        max-width:48%;
    }

    body.employee-portal .portal-actions {
        grid-template-columns:1fr;
    }

    body.employee-portal .panel {
        padding:15px;
    }

}

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

@media print {

    body.employee-portal .topbar,
    body.employee-portal .sidebar,
    body.employee-portal .page-title .btn-primary,
    body.employee-portal .page-title .btn-secondary {
        display:none !important;
    }

    body.employee-portal {
        background:#fff;
        padding:0;
    }

    body.employee-portal .layout {
        display:block;
    }

    body.employee-portal main {
        padding:0;
        max-width:none;
    }

    body.employee-portal .panel,
    body.employee-portal .sheet-document-state {
        box-shadow:none;
        break-inside:avoid;
    }

}