/* =========================================================
   CAMVIO — STYLE.CSS
   Base geral + Login + Loader + Topbar + Notificações
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Segoe UI", Arial, sans-serif;
}

html {
    width: 100%;
    min-height: 100%;
}

body {
    width: 100%;
    min-height: 106vh;

    background: #f5f7fb;
    color: #1f2937;
}


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

.login-page {
    position: relative;

    width: 100%;
    min-height: 100vh;

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

    overflow: hidden;

    color: #031330;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(0, 102, 255, 0.18),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(53, 160, 255, 0.16),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #edf4ff 0%,
            #f8fbff 48%,
            #eaf2ff 100%
        );
}


/* Grade tecnológica */

.login-page::before {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    opacity: 0.42;

    background-image:
        linear-gradient(
            rgba(0, 102, 255, 0.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0, 102, 255, 0.045) 1px,
            transparent 1px
        );

    background-size: 42px 42px;
}


/* Glow */

.login-page::after {
    content: "";

    position: fixed;

    width: 430px;
    height: 430px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    pointer-events: none;

    border-radius: 50%;

    background: rgba(0, 102, 255, 0.10);

    filter: blur(95px);
}


/* =========================================================
   CONTAINER LOGIN
========================================================= */

.login-page .container {
    position: relative;

    z-index: 2;

    width: 100%;
    min-height: 100vh;

    padding: 32px;

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


/* =========================================================
   CARD LOGIN
========================================================= */

.login-page .login-card {
    position: relative;

    width: min(385px, 100%);

    padding: 30px 28px 26px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.84);

    border:
        1px solid
        rgba(255, 255, 255, 0.86);

    border-radius: 22px;

    box-shadow:
        0 24px 70px
        rgba(3, 19, 48, 0.14),
        inset 0 1px 0
        rgba(255, 255, 255, 0.86);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}


/* Linha superior */

.login-page .login-card::before {
    content: "";

    position: absolute;

    left: 36px;
    right: 36px;
    top: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #0066ff,
            #35a0ff,
            transparent
        );
}


/* Glow do card */

.login-page .login-card::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -90px;
    top: -90px;

    pointer-events: none;

    border-radius: 50%;

    background:
        rgba(0, 102, 255, 0.12);

    filter: blur(42px);
}


/* =========================================================
   LOGO LOGIN
========================================================= */

.login-page .logo {
    position: relative;

    z-index: 1;

    display: flex;
    justify-content: center;

    margin-bottom: 22px;
}


.login-page .logo img {
    display: block;

    width: 170px;
    max-width: 100%;

    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 8px 18px
            rgba(3, 19, 48, 0.08)
        );
}


/* =========================================================
   FORM LOGIN
========================================================= */

.login-page #loginForm {
    position: relative;

    z-index: 1;
}


/* =========================================================
   CAMPOS
========================================================= */

.login-page .campo {
    position: relative;

    width: 100%;
    height: 50px;

    margin-bottom: 12px;

    padding: 0 15px;

    display: flex;
    align-items: center;

    gap: 12px;

    background:
        rgba(248, 251, 255, 0.94);

    border:
        1px solid #dbe6f5;

    border-radius: 12px;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.85);

    transition:
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease,
        transform 0.22s ease;
}


.login-page .campo:hover {
    border-color:
        rgba(0, 102, 255, 0.38);

    background: #ffffff;
}


.login-page .campo:focus-within {
    transform:
        translateY(-1px);

    border-color:
        #0066ff;

    background:
        #ffffff;

    box-shadow:
        0 0 0 4px
        rgba(0, 102, 255, 0.10),
        0 10px 24px
        rgba(3, 19, 48, 0.06);
}


.login-page .campo > i {
    flex: 0 0 auto;

    width: 18px;

    color: #75849a;

    font-size: 14px;
    text-align: center;
}


.login-page .campo:focus-within > i:first-child {
    color: #0066ff;

    transform:
        scale(1.06);
}


.login-page .campo input {
    min-width: 0;

    flex: 1;

    border: none !important;
    outline: none !important;

    background:
        transparent;

    color:
        #031330;

    font-size:
        13px;

    font-weight:
        500;

    box-shadow:
        none !important;
}


.login-page .campo input::placeholder {
    color:
        #8a98aa;

    font-weight:
        400;
}


/* Olho senha */

.login-page #olho {
    margin-left: auto;

    cursor: pointer;

    color:
        #7c8ba0;
}


.login-page #olho:hover {
    color:
        #0066ff;
}


/* =========================================================
   ERRO LOGIN
========================================================= */

.login-page #mensagemErro {
    display: none;

    width: 100%;

    margin:
        2px 0 14px;

    padding:
        10px 12px;

    border:
        1px solid
        rgba(220, 38, 38, 0.20);

    border-radius:
        10px;

    background:
        rgba(254, 226, 226, 0.72);

    color:
        #b42318;

    font-size:
        11px;

    line-height:
        1.45;

    font-weight:
        600;
}


.login-page #mensagemErro:not(:empty) {
    display: block;
}


/* =========================================================
   BOTÃO ENTRAR
========================================================= */

.entrar-btn,
.login-page .entrar-btn {
    position: relative;

    width: 100%;
    height: 46px;

    margin-top: 2px;

    overflow: hidden;

    border: none;

    border-radius:
        12px;

    background:
        linear-gradient(
            90deg,
            #031330 0%,
            #0a2d66 52%,
            #0066ff 100%
        );

    color:
        #ffffff;

    font-size:
        12px;

    line-height:
        1;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    cursor: pointer;

    box-shadow:
        0 12px 24px
        rgba(3, 19, 48, 0.18);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        filter 0.22s ease;
}


.login-page .entrar-btn::before {
    content: "";

    position: absolute;

    inset: 0;

    left: -120%;

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255, 255, 255, 0.24) 48%,
            transparent 72%
        );

    transition:
        left 0.5s ease;
}


.login-page .entrar-btn:hover {
    transform:
        translateY(-2px);

    filter:
        brightness(1.05);

    box-shadow:
        0 16px 30px
        rgba(0, 102, 255, 0.28);
}


.login-page .entrar-btn:hover::before {
    left: 120%;
}


/* =========================================================
   TEMA LOGIN
========================================================= */

.login-page #themeToggle,
body.dark-mode.login-page #themeToggle {
    position: fixed;

    top: 22px;
    right: 22px;

    z-index: 9999;

    width: auto;
    height: auto;

    padding: 4px;

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

    border: none;

    background:
        transparent;

    color:
        #031330;

    font-size:
        19px;

    cursor: pointer;

    box-shadow:
        none;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


.login-page #themeToggle:hover {
    color:
        #0066ff;

    transform:
        scale(1.08);
}


body.dark-mode.login-page #themeToggle {
    color:
        #ffffff;
}


body.dark-mode.login-page #themeToggle:hover {
    color:
        #63a7ff;
}


/* =========================================================
   DARK LOGIN
========================================================= */

body.dark-mode.login-page {
    color:
        #f7faff;

    background:
        radial-gradient(
            circle at 15% 18%,
            rgba(0, 102, 255, 0.20),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 82%,
            rgba(23, 83, 164, 0.20),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #050b16 0%,
            #081224 52%,
            #050b16 100%
        );
}


body.dark-mode.login-page .container {
    background:
        transparent !important;
}


body.dark-mode.login-page .login-card {
    background:
        rgba(10, 20, 37, 0.82);

    border-color:
        rgba(255, 255, 255, 0.08);

    box-shadow:
        0 28px 80px
        rgba(0, 0, 0, 0.45);
}


body.dark-mode.login-page .campo {
    background:
        rgba(6, 14, 28, 0.84);

    border-color:
        rgba(255, 255, 255, 0.09);
}


body.dark-mode.login-page .campo:hover {
    border-color:
        rgba(0, 102, 255, 0.45);

    background:
        rgba(10, 22, 42, 0.94);
}


body.dark-mode.login-page .campo:focus-within {
    border-color:
        #0066ff;

    background:
        #0b1729;

    box-shadow:
        0 0 0 4px
        rgba(0, 102, 255, 0.14);
}


body.dark-mode.login-page .campo input {
    color:
        #f8fbff;
}


body.dark-mode.login-page .campo input::placeholder {
    color:
        #7788a0;
}


body.dark-mode.login-page .campo > i {
    color:
        #8091a9;
}


/* =========================================================
   LOADER
========================================================= */

#loadingScreen,
#loader {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

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

    background:
        radial-gradient(
            circle at center,
            rgba(0, 102, 255, 0.10),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #edf4ff,
            #ffffff
        );

    z-index: 999999;

    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}


body.dark-mode #loadingScreen,
body.dark-mode #loader {
    background:
        radial-gradient(
            circle at center,
            rgba(0, 102, 255, 0.16),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #050b16,
            #081224
        );
}


#loadingScreen.hide,
#loader.hide {
    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}


.loading-content,
.loader-content {
    width: 220px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.loading-logo,
.loader-logo {
    display: block;

    width: 165px;
    max-width: 165px;

    height: auto;
    max-height: 90px;

    object-fit: contain;

    animation:
        pulseLogo
        1.4s
        infinite
        ease-in-out;

    filter:
        drop-shadow(
            0 10px 22px
            rgba(3, 19, 48, 0.10)
        );
}


.loading-bar,
.loader-bar {
    width: 165px;
    height: 4px;

    margin-top: 18px;

    overflow: hidden;

    background:
        #d9e6f7;

    border-radius:
        20px;
}


.loading-progress,
.loader-progress {
    width: 45%;
    height: 100%;

    border-radius:
        20px;

    background:
        linear-gradient(
            90deg,
            #031330,
            #0066ff,
            #35a0ff,
            #0066ff
        );

    animation:
        loadingMove
        1.2s
        infinite
        ease-in-out;
}


@keyframes loadingMove {

    0% {
        transform:
            translateX(-120%);
    }

    100% {
        transform:
            translateX(320%);
    }

}


@keyframes pulseLogo {

    0% {
        transform:
            scale(1);

        opacity:
            0.82;
    }

    50% {
        transform:
            scale(1.05);

        opacity:
            1;
    }

    100% {
        transform:
            scale(1);

        opacity:
            0.82;
    }

}


/* =========================================================
   TOPBAR GERAL
========================================================= */

.topbar {
    position: relative;

    z-index: 1000;

    width: 100%;
    height: 50px;

    padding:
        0 22px;

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

    background:
        #070b1a;

    color:
        #ffffff;

    box-shadow:
        0 3px 14px
        rgba(0, 0, 0, 0.22);
}


.top-logo {
    width: auto;

    height: 26px;

    object-fit:
        contain;
}


.top-right {
    display: flex;
    align-items: center;

    gap: 8px;
}


/* =========================================================
   ÍCONES TOPBAR
========================================================= */

.icon-button {
    position: relative;

    width: 32px;
    height: 32px;

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

    border-radius:
        8px;

    color:
        #e5e7eb;

    cursor:
        pointer;

    font-size:
        13px;

    transition:
        0.2s ease;
}


.icon-button:hover {
    color:
        #ffffff;

    background:
        rgba(255, 255, 255, 0.08);
}


/* =========================================================
   PERFIL / SAIR
========================================================= */

.profile-wrapper {
    display: flex;
    align-items: center;

    gap: 12px;
}


.cliente-logado {
    color:
        #e5e7eb;

    font-size:
        13px;

    font-weight:
        600;

    white-space:
        nowrap;
}


.btn-sair-topo {
    padding:
        8px 10px;

    display: flex;
    align-items: center;

    gap: 7px;

    border:
        none;

    border-radius:
        8px;

    background:
        transparent;

    color:
        #e5e7eb;

    font-size:
        13px;

    font-weight:
        600;

    cursor:
        pointer;

    transition:
        0.2s;
}


.btn-sair-topo:hover {
    color:
        #ffffff;

    background:
        rgba(255, 255, 255, 0.08);
}


/* =========================================================
   NOTIFICAÇÕES
========================================================= */

.notification-wrapper {
    position:
        relative;
}


.notification-count {
    position:
        absolute;

    top:
        1px;

    right:
        1px;

    width:
        15px;

    height:
        15px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #f59e0b;

    color:
        #ffffff;

    font-size:
        9px;

    font-weight:
        700;
}


.notification-menu {
    position:
        absolute;

    top:
        40px;

    right:
        0;

    z-index:
        9999;

    display:
        none;

    width:
        320px;

    max-height:
        430px;

    overflow-y:
        auto;

    border-radius:
        12px;

    background:
        #ffffff;

    color:
        #111827;

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.22);
}


.notification-menu.active,
.notification-menu.show {
    display:
        block;
}


.notification-header {
    padding:
        14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    border-bottom:
        1px solid #e5e7eb;
}


.notification-header h4 {
    margin:
        0;

    font-size:
        14px;
}


.notification-header button {
    border:
        none;

    background:
        transparent;

    color:
        #2563eb;

    font-size:
        11px;

    cursor:
        pointer;
}


.notification-list {
    width:
        100%;
}


.notification-item {
    display:
        flex;

    gap:
        12px;

    padding:
        13px 14px;

    border-bottom:
        1px solid #f1f5f9;
}


.notification-content {
    flex:
        1;

    min-width:
        0;
}


.notification-title {
    display:
        flex;

    align-items:
        center;

    gap:
        6px;
}


.notification-item strong {
    font-size:
        13px;
}


.notification-item p {
    margin:
        3px 0;

    color:
        #64748b;

    font-size:
        12px;

    line-height:
        1.45;
}


.notification-date {
    color:
        #94a3b8;

    font-size:
        11px;
}


.notification-status {
    flex:
        0 0 9px;

    width:
        9px;

    height:
        9px;

    margin-top:
        5px;

    border-radius:
        50%;
}


.unread-status {
    background:
        #2563eb;
}


.read-status {
    background:
        #cbd5e1;
}


.notification-new {
    padding:
        2px 5px;

    border-radius:
        5px;

    background:
        #dbeafe;

    color:
        #2563eb !important;

    font-size:
        9px !important;

    font-weight:
        700;
}


.notification-empty {
    min-height:
        100px;

    padding:
        20px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    color:
        #94a3b8;

    text-align:
        center;
}


.notification-empty p {
    margin:
        0;

    font-size:
        12px;
}


/* =========================================================
   DARK TOPBAR MENUS
========================================================= */

body.dark-mode {
    background:
        #050b16;

    color:
        #e5e7eb;
}


body.dark-mode .notification-menu {
    background:
        #0f172a;

    color:
        #e5e7eb;

    border:
        1px solid #1e293b;
}


body.dark-mode .notification-header,
body.dark-mode .notification-item {
    border-color:
        #1e293b;
}


body.dark-mode .notification-item p,
body.dark-mode .notification-date {
    color:
        #94a3b8;
}


/* =========================================================
   LOGIN RESPONSIVO
========================================================= */

@media (max-width: 560px) {

    .login-page {
        overflow-y:
            auto;
    }


    .login-page .container {
        min-height:
            100vh;

        padding:
            78px 18px 92px;
    }


    .login-page .login-card {
        padding:
            28px 22px 24px;

        border-radius:
            18px;
    }


    .login-page .logo img {
        width:
            155px;
    }


    .login-page #themeToggle {
        top:
            16px;

        right:
            16px;
    }


    .loading-content,
    .loader-content {
        width:
            190px;
    }


    .loading-logo,
    .loader-logo {
        width:
            145px;

        max-width:
            145px;
    }


    .loading-bar,
    .loader-bar {
        width:
            145px;
    }

}
/* =========================================================
   SUPORTE FLUTUANTE
========================================================= */

.support-menu,
.support-wrapper {
    position: fixed;

    right: 22px;
    bottom: 22px;

    z-index: 9999;
}


.support-btn {
    width: 52px;
    height: 52px;

    padding: 0;

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

    border: 1px solid
        rgba(255, 255, 255, 0.20);

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #031330,
            #0066ff
        );

    color: #ffffff;

    font-size: 18px;

    cursor: pointer;

    box-shadow:
        0 14px 28px
        rgba(0, 102, 255, 0.28);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease;
}


.support-btn span {
    display: none;
}


.support-btn i {
    color: #ffffff;

    font-size: 18px;

    line-height: 1;
}


.support-btn:hover {
    transform:
        translateY(-3px)
        scale(1.04);

    box-shadow:
        0 18px 34px
        rgba(0, 102, 255, 0.35);
}


.support-dropdown {
    position: absolute;

    right: 0;
    bottom: 64px;

    width: 205px;

    padding: 8px;

    display: none;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.96);

    border:
        1px solid
        rgba(3, 19, 48, 0.08);

    border-radius:
        14px;

    box-shadow:
        0 18px 44px
        rgba(3, 19, 48, 0.16);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);
}


.support-dropdown.show,
.support-dropdown.active {
    display: block;
}


.support-dropdown a {
    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        12px 13px;

    border-radius:
        9px;

    color:
        #031330;

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        600;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


.support-dropdown a:hover {
    background:
        #eef5ff;

    color:
        #0066ff;
}


body.dark-mode
.support-dropdown {
    background:
        rgba(10, 20, 37, 0.96);

    border-color:
        rgba(255, 255, 255, 0.08);
}


body.dark-mode
.support-dropdown a {
    color:
        #eaf2ff;
}


body.dark-mode
.support-dropdown a:hover {
    background:
        rgba(0, 102, 255, 0.12);

    color:
        #63a7ff;
}


/* =========================================================
   MENU DO CLIENTE
========================================================= */

body.menu-page {
    min-height: 100vh;

    overflow-x: hidden;

    color: #031330;

    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(0, 102, 255, 0.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 88%,
            rgba(53, 160, 255, 0.08),
            transparent 30%
        ),
        #f5f8fc;
}


/* =========================================================
   CONTAINER MENU
========================================================= */

.menu-container {
    width:
        min(
            1280px,
            calc(100% - 48px)
        );

    margin:
        0 auto;

    padding:
        28px 0 60px;
}


/* =========================================================
   HERO
========================================================= */

.menu-hero {
    position: relative;

    min-height: 130px;

    margin-bottom: 26px;

    padding:
        26px 34px;

    display: flex;

    align-items: center;

    overflow: hidden;

    border:
        1px solid
        rgba(3, 19, 48, 0.06);

    border-radius:
        20px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98),
            rgba(245, 249, 255, 0.96)
        );

    box-shadow:
        0 12px 35px
        rgba(3, 19, 48, 0.06);
}


.menu-hero::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    top: -120px;
    right: -70px;

    border-radius:
        50%;

    background:
        rgba(0, 102, 255, 0.08);
}


.menu-hero::after {
    content: "";

    position: absolute;

    left: 34px;
    bottom: 0;

    width: 72px;
    height: 3px;

    border-radius:
        20px;

    background:
        linear-gradient(
            90deg,
            #031330,
            #0066ff
        );
}


.menu-hero > div {
    position: relative;

    z-index: 1;
}


.menu-boas-vindas {
    display: inline-flex;

    margin-bottom: 8px;

    color:
        #0066ff;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        0.16em;
}


.menu-hero h1 {
    margin:
        4px 0;

    color:
        #031330;

    font-size:
        clamp(
            34px,
            3vw,
            46px
        );

    font-weight:
        800;

    line-height:
        1.05;

    letter-spacing:
        -1.3px;
}


.menu-hero h1 strong {
    color:
        #0066ff;
}


.menu-hero p {
    margin-top:
        8px;

    color:
        #64748b;

    font-size:
        15px;

    line-height:
        1.5;
}


/* =========================================================
   GRID DOS DASHBOARDS
========================================================= */

.menu-dashboards {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                240px,
                1fr
            )
        );

    gap:
        18px;

    align-items:
        stretch;
}


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

.dashboard-menu-card {
    position: relative;

    min-height:
        220px;

    height:
        100%;

    padding:
        22px;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    border:
        1px solid
        rgba(3, 19, 48, 0.08);

    border-radius:
        20px;

    background:
        rgba(255, 255, 255, 0.95);

    box-shadow:
        0 12px 30px
        rgba(3, 19, 48, 0.06);

    cursor:
        pointer;

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


.dashboard-menu-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 22px;
    right: 22px;

    height:
        3px;

    border-radius:
        0 0 10px 10px;

    background:
        linear-gradient(
            90deg,
            #031330,
            #0066ff,
            #35a0ff
        );

    opacity:
        0;

    transform:
        scaleX(0.6);

    transition:
        0.25s ease;
}


.dashboard-menu-card::after {
    content: "";

    position:
        absolute;

    width:
        120px;

    height:
        120px;

    right:
        -70px;

    bottom:
        -70px;

    border-radius:
        50%;

    background:
        rgba(0, 102, 255, 0.08);

    transition:
        0.25s ease;
}


.dashboard-menu-card:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(0, 102, 255, 0.22);

    box-shadow:
        0 18px 38px
        rgba(0, 102, 255, 0.12);
}


.dashboard-menu-card:hover::before {
    opacity: 1;

    transform:
        scaleX(1);
}


.dashboard-menu-card:hover::after {
    transform:
        scale(1.2);
}


/* =========================================================
   ÍCONE CARD
========================================================= */

.dashboard-menu-icon {
    width:
        50px;

    height:
        50px;

    margin-bottom:
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(0, 102, 255, 0.12);

    border-radius:
        15px;

    background:
        linear-gradient(
            135deg,
            rgba(3, 19, 48, 0.05),
            rgba(0, 102, 255, 0.12)
        );

    color:
        #0066ff;

    font-size:
        20px;

    transition:
        0.25s ease;
}


.dashboard-menu-card:hover
.dashboard-menu-icon {
    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #031330,
            #0066ff
        );
}


/* =========================================================
   TEXTO CARD
========================================================= */

.dashboard-menu-card h2 {
    margin:
        0 0 8px;

    color:
        #031330;

    font-size:
        19px;

    font-weight:
        700;
}


.dashboard-menu-card p {
    flex:
        1;

    margin:
        0 0 16px;

    color:
        #64748b;

    font-size:
        13px;

    line-height:
        1.55;
}


.dashboard-menu-action {
    margin-top:
        auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    color:
        #0066ff;

    font-size:
        13px;

    font-weight:
        700;
}


.dashboard-menu-action i {
    transition:
        transform 0.2s ease;
}


.dashboard-menu-card:hover
.dashboard-menu-action i {
    transform:
        translateX(4px);
}


/* =========================================================
   MENU VAZIO
========================================================= */

.menu-empty {
    grid-column:
        1 / -1;

    min-height:
        180px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    border:
        1px dashed
        rgba(3, 19, 48, 0.12);

    border-radius:
        18px;

    background:
        rgba(255, 255, 255, 0.70);

    color:
        #64748b;
}


/* =========================================================
   DARK MODE — MENU
========================================================= */

body.dark-mode.menu-page {
    color:
        #f8fafc;

    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(0, 102, 255, 0.16),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 88%,
            rgba(0, 67, 153, 0.16),
            transparent 30%
        ),
        #050b16;
}


body.dark-mode.menu-page
.menu-hero {
    border-color:
        rgba(255, 255, 255, 0.08);

    background:
        linear-gradient(
            135deg,
            rgba(10, 20, 37, 0.96),
            rgba(8, 18, 36, 0.95)
        );

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.30);
}


body.dark-mode.menu-page
.menu-hero h1 {
    color:
        #f8fafc;
}


body.dark-mode.menu-page
.menu-hero h1 strong {
    color:
        #3b82f6;
}


body.dark-mode.menu-page
.menu-hero p {
    color:
        #94a3b8;
}


body.dark-mode.menu-page
.menu-boas-vindas {
    color:
        #60a5fa;
}


body.dark-mode.menu-page
.dashboard-menu-card {
    border-color:
        rgba(255, 255, 255, 0.08);

    background:
        rgba(10, 20, 37, 0.94);

    box-shadow:
        0 14px 35px
        rgba(0, 0, 0, 0.26);
}


body.dark-mode.menu-page
.dashboard-menu-card:hover {
    border-color:
        rgba(59, 130, 246, 0.42);

    background:
        #0c192d;

    box-shadow:
        0 20px 45px
        rgba(0, 102, 255, 0.18);
}


body.dark-mode.menu-page
.dashboard-menu-card h2 {
    color:
        #f8fafc;
}


body.dark-mode.menu-page
.dashboard-menu-card p {
    color:
        #94a3b8;
}


body.dark-mode.menu-page
.dashboard-menu-action {
    color:
        #60a5fa;
}


body.dark-mode.menu-page
.dashboard-menu-icon {
    border-color:
        rgba(96, 165, 250, 0.18);

    background:
        linear-gradient(
            135deg,
            rgba(0, 102, 255, 0.12),
            rgba(37, 99, 235, 0.18)
        );

    color:
        #60a5fa;
}


body.dark-mode.menu-page
.dashboard-menu-card:hover
.dashboard-menu-icon {
    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #031330,
            #0066ff
        );
}


body.dark-mode.menu-page
.menu-empty {
    border-color:
        rgba(255, 255, 255, 0.10);

    background:
        rgba(10, 20, 37, 0.68);

    color:
        #94a3b8;
}


/* =========================================================
   CENTRAL DE SUPORTE
========================================================= */

.suporte-layout {
    width:
        100%;

    min-height:
        calc(100vh - 50px);

    background:
        #f5f7fb;
}


.support-main,
.suporte-main {
    width:
        100%;

    max-width:
        1480px;

    margin:
        0 auto;

    padding:
        26px 28px 50px;
}


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

.cards-admin {
    display:
        grid;

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

    gap:
        15px;

    margin-bottom:
        20px;
}


.card-admin {
    min-width:
        0;

    padding:
        20px;

    border:
        1px solid
        #e5eaf2;

    border-radius:
        16px;

    background:
        #ffffff;

    box-shadow:
        0 8px 22px
        rgba(3, 19, 48, 0.05);
}


.card-label {
    color:
        #64748b;

    font-size:
        12px;

    font-weight:
        600;
}


.card-admin h2 {
    margin-top:
        8px;

    color:
        #031330;

    font-size:
        28px;

    font-weight:
        750;
}


/* =========================================================
   BOX CLIENTES
========================================================= */

.clientes-box {
    padding:
        20px;

    margin-bottom:
        20px;

    border:
        1px solid
        #e5eaf2;

    border-radius:
        16px;

    background:
        #ffffff;

    box-shadow:
        0 8px 22px
        rgba(3, 19, 48, 0.05);
}


.clientes-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    margin-bottom:
        16px;
}


.clientes-header h2,
.clientes-header h3 {
    color:
        #031330;
}


.novo-cliente-btn {
    padding:
        10px 17px;

    border:
        none;

    border-radius:
        10px;

    background:
        #1762b8;

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        0.2s ease;
}


.novo-cliente-btn:hover {
    transform:
        translateY(-1px);

    background:
        #14539c;
}


/* =========================================================
   LISTA DE CLIENTES
========================================================= */

#listaClientes {
    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                260px,
                1fr
            )
        );

    gap:
        12px;
}


.cliente-item {
    padding:
        16px;

    border:
        1px solid
        #e5eaf2;

    border-radius:
        14px;

    background:
        #ffffff;

    box-shadow:
        0 5px 16px
        rgba(3, 19, 48, 0.04);
}


.cliente-card-top {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        10px;
}


.cliente-info {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;
}


.cliente-info strong {
    color:
        #031330;

    font-size:
        14px;
}


.cliente-info small {
    color:
        #64748b;

    font-size:
        11px;
}


.cliente-card-metas {
    margin-top:
        8px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        5px;
}


.cliente-total-dashboards,
.usuario-status {
    padding:
        4px 7px;

    border-radius:
        7px;

    background:
        #f1f5f9;

    color:
        #64748b;

    font-size:
        9px;

    font-weight:
        700;
}


.usuario-status.ativo {
    background:
        #dcfce7;

    color:
        #15803d;
}


.usuario-status.inativo {
    background:
        #fee2e2;

    color:
        #b91c1c;
}


.usuario-status.primeiro-acesso {
    background:
        #fef3c7;

    color:
        #a16207;
}


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

.btn-gerenciar-cliente,
.btn-dashboard {
    border:
        none;

    cursor:
        pointer;

    transition:
        0.2s ease;
}


.btn-gerenciar-cliente {
    width:
        34px;

    height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        9px;

    background:
        #f1f5f9;

    color:
        #64748b;
}


.btn-gerenciar-cliente:hover {
    color:
        #1762b8;

    background:
        #eaf2fc;
}


.acoes-cliente {
    margin-top:
        13px;
}


.btn-dashboard {
    width:
        100%;

    height:
        36px;

    padding:
        0 12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    border-radius:
        9px;

    background:
        #f5f8fc;

    color:
        #1557a4;

    font-size:
        11px;

    font-weight:
        700;
}


.btn-dashboard:hover {
    background:
        #eaf2fc;
}


/* =========================================================
   EMPTY STATES
========================================================= */

.empty-state,
.clientes-loading,
.usuario-empty {
    width:
        100%;

    min-height:
        120px;

    padding:
        20px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    color:
        #64748b;

    text-align:
        center;
}


.empty-state h3,
.usuario-empty strong {
    color:
        #334155;
}


.empty-state p,
.usuario-empty p {
    font-size:
        12px;

    line-height:
        1.5;
}


/* =========================================================
   DARK — SUPORTE
========================================================= */

body.dark-mode
.suporte-layout {
    background:
        #050b16;
}


body.dark-mode
.card-admin,
body.dark-mode
.clientes-box,
body.dark-mode
.cliente-item {
    background:
        #0a1425;

    border-color:
        rgba(255, 255, 255, 0.08);

    box-shadow:
        0 10px 28px
        rgba(0, 0, 0, 0.22);
}


body.dark-mode
.card-admin h2,
body.dark-mode
.clientes-header h2,
body.dark-mode
.clientes-header h3,
body.dark-mode
.cliente-info strong {
    color:
        #f8fafc;
}


body.dark-mode
.card-label,
body.dark-mode
.cliente-info small {
    color:
        #94a3b8;
}


/* =========================================================
   RESPONSIVO — MENU / SUPORTE
========================================================= */

@media (max-width: 1000px) {

    .cards-admin {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }

}


@media (max-width: 700px) {

    .menu-container {
        width:
            calc(100% - 28px);
    }


    .menu-hero {
        padding:
            22px;
    }


    .menu-hero h1 {
        font-size:
            30px;
    }


    .cards-admin {
        grid-template-columns:
            1fr;
    }


    .clientes-header {
        flex-direction:
            column;

        align-items:
            stretch;
    }


    .support-main,
    .suporte-main {
        padding:
            18px 14px 40px;
    }

}


@media (max-width: 560px) {

    .support-menu,
    .support-wrapper {
        right:
            16px;

        bottom:
            16px;
    }

}
/* =========================================================
   CAMVIO — CLIENTE.HTML
   ESTILO TOTALMENTE ISOLADO
========================================================= */

body.cliente-page {
    width: 100%;
    height: 100vh;

    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background:
        #f5f7fb;

    color:
        #1f2937;
}


/* =========================================================
   TOPBAR — CLIENTE
========================================================= */

.cliente-page .topbar {
    flex: 0 0 50px;

    width: 100%;
    height: 50px;

    padding:
        0 20px;

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

    background:
        #070b1a;

    color:
        #ffffff;

    box-shadow:
        0 2px 12px
        rgba(0, 0, 0, 0.20);

    z-index:
        1000;
}


.cliente-page .top-logo {
    width: auto !important;

    height: 25px !important;

    max-width:
        150px !important;

    object-fit:
        contain;
}


.cliente-page .top-right {
    display:
        flex;

    align-items:
        center;

    gap:
        6px;
}


/* =========================================================
   ÍCONES — CLIENTE
========================================================= */

.cliente-page .icon-button {
    flex:
        0 0 32px;

    width:
        32px;

    height:
        32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        8px;

    color:
        #d8e0eb;

    font-size:
        12px;

    cursor:
        pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


.cliente-page .icon-button:hover {
    background:
        rgba(255, 255, 255, 0.08);

    color:
        #ffffff;

    transform:
        translateY(-1px);
}


/* =========================================================
   PERFIL
========================================================= */

.cliente-page .profile-wrapper {
    margin-left:
        4px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.cliente-page .cliente-logado {
    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        650;

    white-space:
        nowrap;
}


.cliente-page .btn-sair-topo {
    padding:
        7px 9px;

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    border:
        none;

    border-radius:
        8px;

    background:
        transparent;

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        600;

    cursor:
        pointer;
}


.cliente-page .btn-sair-topo:hover {
    background:
        rgba(255, 255, 255, 0.08);
}


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

.cliente-page
.cliente-dashboard-layout {
    flex:
        1 1 auto;

    width:
        100%;

    min-width:
        0;

    min-height:
        0;

    margin:
        0;

    padding:
        0;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    background:
        #ffffff;
}


/* =========================================================
   NAVEGAÇÃO DOS TÓPICOS
========================================================= */

.cliente-page
.dashboard-navigation {
    flex:
        0 0 62px;

    width:
        100%;

    min-width:
        0;

    padding:
        8px 18px;

    display:
        flex;

    align-items:
        center;

    gap:
        22px;

    background:
        #ffffff;

    border-bottom:
        1px solid #e6ebf2;

    box-shadow:
        0 2px 7px
        rgba(3, 19, 48, 0.035);

    z-index:
        20;
}


/* =========================================================
   TÍTULO
========================================================= */

.cliente-page
.dashboard-navigation-info {
    flex:
        0 0 auto;

    min-width:
        190px;
}


.cliente-page
.dashboard-navigation-label {
    display:
        block;

    margin-bottom:
        2px;

    color:
        #1762b8;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;
}


.cliente-page
#dashboardTitle {
    margin:
        0;

    color:
        #031330;

    font-size:
        18px;

    font-weight:
        750;

    line-height:
        1.1;

    letter-spacing:
        -0.35px;
}


/* =========================================================
   CONTAINER DAS ABAS
========================================================= */

.cliente-page
.dashboard-tabs {
    flex:
        1;

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        7px;

    padding:
        3px 0;

    overflow-x:
        auto;

    overflow-y:
        hidden;

    scrollbar-width:
        thin;

    scrollbar-color:
        #cbd5e1 transparent;
}


.cliente-page
.dashboard-tabs::-webkit-scrollbar {
    height:
        4px;
}


.cliente-page
.dashboard-tabs::-webkit-scrollbar-track {
    background:
        transparent;
}


.cliente-page
.dashboard-tabs::-webkit-scrollbar-thumb {
    background:
        #cbd5e1;

    border-radius:
        20px;
}


/* =========================================================
   ABA / TÓPICO
========================================================= */

.cliente-page
.dashboard-tab {
    position:
        relative;

    flex:
        0 0 auto;

    height:
        34px;

    padding:
        0 12px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    border:
        1px solid #dde5ef;

    border-radius:
        9px;

    background:
        #f8fafc;

    color:
        #64748b;

    font-size:
        11px;

    font-weight:
        650;

    white-space:
        nowrap;

    cursor:
        pointer;

    box-shadow:
        0 1px 2px
        rgba(3, 19, 48, 0.02);

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.cliente-page
.dashboard-tab i {
    color:
        #8492a6;

    font-size:
        10px;

    transition:
        color 0.2s ease;
}


.cliente-page
.dashboard-tab:hover {
    transform:
        translateY(-1px);

    color:
        #1557a4;

    background:
        #f1f6fc;

    border-color:
        #bcd1ea;

    box-shadow:
        0 5px 12px
        rgba(3, 19, 48, 0.06);
}


.cliente-page
.dashboard-tab:hover i {
    color:
        #3278d7;
}


/* =========================================================
   ABA ATIVA
========================================================= */

.cliente-page
.dashboard-tab.ativo {
    color:
        #ffffff;

    border-color:
        transparent;

    background:
        linear-gradient(
            135deg,
            #12345f,
            #1762b8
        );

    box-shadow:
        0 6px 14px
        rgba(20, 85, 160, 0.20);
}


.cliente-page
.dashboard-tab.ativo i {
    color:
        #ffffff;
}


.cliente-page
.dashboard-tab:focus {
    outline:
        none;
}


.cliente-page
.dashboard-tab:focus-visible {
    outline:
        2px solid #3b82f6;

    outline-offset:
        2px;
}


/* =========================================================
   LOADING DOS TÓPICOS
========================================================= */

.cliente-page
.dashboard-tabs-loading,
.cliente-page
.dashboard-tabs-empty {
    min-height:
        34px;

    padding:
        0 10px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        #64748b;

    font-size:
        11px;

    font-weight:
        600;
}


.cliente-page
.dashboard-tabs-loading i {
    color:
        #3b82f6;
}


.cliente-page
.dashboard-tabs-empty {
    border:
        1px dashed #d8e0eb;

    border-radius:
        9px;

    background:
        #fafcff;
}


/* =========================================================
   POWER BI
========================================================= */

.cliente-page
.dashboard-frame-container {
    position:
        relative;

    flex:
        1 1 auto;

    width:
        100%;

    min-width:
        0;

    min-height:
        0;

    margin:
        0;

    padding:
        0;

    overflow:
        hidden;

    background:
        #ffffff;
}


.cliente-page
#dashboardFrame {
    position:
        absolute;

    inset:
        0;

    display:
        block;

    width:
        100% !important;

    height:
        100% !important;

    min-width:
        100% !important;

    min-height:
        100% !important;

    max-width:
        none !important;

    max-height:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    outline:
        0 !important;

    border-radius:
        0 !important;

    background:
        #ffffff;

    box-shadow:
        none !important;
}


/* =========================================================
   NOTIFICAÇÕES — CLIENTE
========================================================= */

.cliente-page
.notification-wrapper {
    position:
        relative;
}


.cliente-page
.notification-menu {
    top:
        40px;

    right:
        0;

    width:
        320px;

    max-height:
        430px;

    overflow-y:
        auto;
}


/* =========================================================
   SUPORTE FLUTUANTE — CLIENTE
========================================================= */

.cliente-page
.support-wrapper {
    position:
        fixed;

    right:
        16px;

    bottom:
        16px;

    z-index:
        5000;
}


.cliente-page
.support-wrapper
.support-btn {
    width:
        46px;

    height:
        46px;

    border-radius:
        13px;

    background:
        linear-gradient(
            135deg,
            #12345e,
            #1762b8
        );

    box-shadow:
        0 9px 20px
        rgba(15, 58, 110, 0.24);
}


.cliente-page
.support-wrapper
.support-dropdown {
    right:
        0;

    bottom:
        56px;
}


/* =========================================================
   DARK MODE — CLIENTE
========================================================= */

body.dark-mode.cliente-page {
    background:
        #050b16;
}


body.dark-mode.cliente-page
.cliente-dashboard-layout {
    background:
        #050b16;
}


body.dark-mode.cliente-page
.dashboard-navigation {
    background:
        #081224;

    border-bottom-color:
        rgba(255, 255, 255, 0.07);

    box-shadow:
        0 2px 12px
        rgba(0, 0, 0, 0.22);
}


body.dark-mode.cliente-page
.dashboard-navigation-label {
    color:
        #60a5fa;
}


body.dark-mode.cliente-page
#dashboardTitle {
    color:
        #f8fafc;
}


body.dark-mode.cliente-page
.dashboard-tab {
    color:
        #9faec2;

    border-color:
        rgba(255, 255, 255, 0.08);

    background:
        rgba(255, 255, 255, 0.035);

    box-shadow:
        none;
}


body.dark-mode.cliente-page
.dashboard-tab i {
    color:
        #8293aa;
}


body.dark-mode.cliente-page
.dashboard-tab:hover {
    color:
        #dceaff;

    border-color:
        rgba(96, 165, 250, 0.24);

    background:
        rgba(59, 130, 246, 0.10);
}


body.dark-mode.cliente-page
.dashboard-tab:hover i {
    color:
        #60a5fa;
}


body.dark-mode.cliente-page
.dashboard-tab.ativo {
    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #12345f,
            #1e63b5
        );

    border-color:
        rgba(96, 165, 250, 0.22);
}


body.dark-mode.cliente-page
.dashboard-tab.ativo i {
    color:
        #ffffff;
}


body.dark-mode.cliente-page
.dashboard-frame-container,
body.dark-mode.cliente-page
#dashboardFrame {
    background:
        #050b16;
}


/* =========================================================
   MODAIS — BASE
========================================================= */

.modal-admin,
.modal-overlay,
.modal-sucesso {
    position:
        fixed;

    inset:
        0;

    z-index:
        10000;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    background:
        rgba(15, 23, 42, 0.68);

    backdrop-filter:
        blur(6px);

    -webkit-backdrop-filter:
        blur(6px);
}


.modal-admin.ativo,
.modal-admin.show,
.modal-admin.active,
.modal-overlay.ativo,
.modal-overlay.show,
.modal-overlay.active,
.modal-sucesso.ativo,
.modal-sucesso.show,
.modal-sucesso.active {
    display:
        flex;
}


/* =========================================================
   CARD DOS MODAIS
========================================================= */

.modal-admin-card,
.modal-content,
.modal-card {
    width:
        min(760px, 100%);

    max-height:
        calc(100vh - 40px);

    overflow-y:
        auto;

    border:
        1px solid #e5eaf2;

    border-radius:
        18px;

    background:
        #ffffff;

    box-shadow:
        0 24px 70px
        rgba(3, 19, 48, 0.22);
}


/* =========================================================
   CABEÇALHO MODAL
========================================================= */

.modal-admin-header,
.modal-header {
    padding:
        18px 20px;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        15px;

    border-bottom:
        1px solid #edf1f6;
}


.modal-admin-header h2,
.modal-header h2 {
    margin:
        0;

    color:
        #031330;

    font-size:
        18px;

    font-weight:
        750;
}


.modal-admin-header p,
.modal-header p {
    margin-top:
        4px;

    color:
        #64748b;

    font-size:
        12px;
}


.modal-close,
.btn-fechar-modal {
    width:
        32px;

    height:
        32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        none;

    border-radius:
        8px;

    background:
        #f1f5f9;

    color:
        #64748b;

    cursor:
        pointer;
}


.modal-close:hover,
.btn-fechar-modal:hover {
    color:
        #b91c1c;

    background:
        #fee2e2;
}


/* =========================================================
   CORPO MODAL
========================================================= */

.modal-admin-body,
.modal-body {
    padding:
        20px;
}


/* =========================================================
   GRID MODAL
========================================================= */

.modal-admin-grid {
    display:
        grid;

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

    gap:
        14px;
}


.campo-admin {
    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;
}


.campo-admin-full {
    grid-column:
        1 / -1;
}


.campo-admin label {
    color:
        #475569;

    font-size:
        11px;

    font-weight:
        700;
}


.campo-admin input,
.campo-admin select,
.campo-admin textarea {
    width:
        100%;

    min-height:
        42px;

    padding:
        9px 11px;

    border:
        1px solid #dce4ee;

    border-radius:
        9px;

    outline:
        none;

    background:
        #ffffff;

    color:
        #1f2937;

    font-size:
        12px;

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


.campo-admin textarea {
    min-height:
        110px;

    resize:
        vertical;
}


.campo-admin input:focus,
.campo-admin select:focus,
.campo-admin textarea:focus {
    border-color:
        #3b82f6;

    box-shadow:
        0 0 0 3px
        rgba(59, 130, 246, 0.10);
}


/* =========================================================
   RODAPÉ MODAL
========================================================= */

.modal-admin-footer,
.modal-footer {
    padding:
        15px 20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        9px;

    border-top:
        1px solid #edf1f6;
}


/* =========================================================
   BOTÕES DE MODAL
========================================================= */

.btn-modal,
.btn-primary,
.btn-secondary,
.btn-danger {
    min-height:
        38px;

    padding:
        0 14px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    border:
        none;

    border-radius:
        9px;

    font-size:
        11px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        0.2s ease;
}


.btn-primary {
    background:
        #1762b8;

    color:
        #ffffff;
}


.btn-primary:hover {
    background:
        #14539c;
}


.btn-secondary {
    background:
        #f1f5f9;

    color:
        #475569;
}


.btn-secondary:hover {
    background:
        #e2e8f0;
}


.btn-danger {
    background:
        #dc2626;

    color:
        #ffffff;
}


.btn-danger:hover {
    background:
        #b91c1c;
}


/* =========================================================
   DASHBOARDS — GERENCIAMENTO
========================================================= */

.dashboard-form-item,
.dashboard-gerenciar-item {
    margin-bottom:
        12px;

    padding:
        14px;

    border:
        1px solid #e5eaf2;

    border-radius:
        12px;

    background:
        #f9fbfd;
}


.dashboard-form-top,
.dashboard-gerenciar-top {
    margin-bottom:
        12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;
}


.dashboard-form-top strong,
.dashboard-gerenciar-top strong {
    color:
        #031330;

    font-size:
        12px;
}


.btn-remover-dashboard,
.btn-remover-dashboard-existente {
    width:
        30px;

    height:
        30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        none;

    border-radius:
        8px;

    background:
        #fee2e2;

    color:
        #b91c1c;

    cursor:
        pointer;
}


/* =========================================================
   ABAS DO GERENCIAMENTO
========================================================= */

.gerenciar-tabs {
    display:
        flex;

    gap:
        6px;

    padding:
        12px 20px 0;

    overflow-x:
        auto;
}


.gerenciar-tab {
    min-height:
        34px;

    padding:
        0 12px;

    border:
        1px solid #e2e8f0;

    border-radius:
        9px;

    background:
        #f8fafc;

    color:
        #64748b;

    font-size:
        11px;

    font-weight:
        700;

    cursor:
        pointer;
}


.gerenciar-tab.ativo {
    color:
        #ffffff;

    border-color:
        #1762b8;

    background:
        #1762b8;
}


.gerenciar-tab-content {
    display:
        none;
}


.gerenciar-tab-content.ativo {
    display:
        block;
}


/* =========================================================
   USUÁRIOS DO CLIENTE
========================================================= */

.usuario-cliente-item {
    padding:
        12px;

    margin-bottom:
        8px;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    border:
        1px solid #e5eaf2;

    border-radius:
        12px;

    background:
        #ffffff;
}


.usuario-cliente-avatar {
    flex:
        0 0 38px;

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        11px;

    background:
        #eef5ff;

    color:
        #1762b8;
}


.usuario-cliente-info {
    flex:
        1;

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}


.usuario-cliente-info strong {
    color:
        #031330;

    font-size:
        12px;
}


.usuario-cliente-login {
    color:
        #64748b;

    font-size:
        10px;
}


.usuario-cliente-topicos {
    margin-top:
        5px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        4px;
}


.usuario-topico-tag {
    padding:
        3px 6px;

    border-radius:
        6px;

    background:
        #f1f5f9;

    color:
        #64748b;

    font-size:
        9px;

    font-weight:
        700;
}


.usuario-topico-tag.todos {
    background:
        #dbeafe;

    color:
        #1557a4;
}


.usuario-cliente-acoes {
    display:
        flex;

    align-items:
        center;

    gap:
        6px;
}


.btn-editar-usuario {
    width:
        32px;

    height:
        32px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        none;

    border-radius:
        8px;

    background:
        #f1f5f9;

    color:
        #64748b;

    cursor:
        pointer;
}


.btn-editar-usuario:hover {
    color:
        #1762b8;

    background:
        #eaf2fc;
}


/* =========================================================
   PERMISSÕES
========================================================= */

.topico-permissao-item {
    padding:
        10px;

    margin-bottom:
        6px;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        9px;

    border:
        1px solid #e5eaf2;

    border-radius:
        10px;

    background:
        #ffffff;

    cursor:
        pointer;
}


.topico-permissao-checkbox {
    margin-top:
        3px;
}


.topico-permissao-info {
    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.topico-permissao-info strong {
    color:
        #031330;

    font-size:
        11px;
}


.topico-permissao-info span {
    color:
        #64748b;

    font-size:
        10px;
}


/* =========================================================
   COMUNICADOS
========================================================= */

.cliente-comunicado-item {
    padding:
        9px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    border:
        1px solid #e5eaf2;

    border-radius:
        9px;

    background:
        #ffffff;

    font-size:
        11px;

    cursor:
        pointer;
}


/* =========================================================
   HISTÓRICO
========================================================= */

.historico-acesso-item {
    padding:
        11px 12px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    border-bottom:
        1px solid #edf1f6;
}


.historico-acesso-icon {
    flex:
        0 0 34px;

    width:
        34px;

    height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        9px;

    background:
        #eef5ff;

    color:
        #1762b8;
}


.historico-acesso-info {
    flex:
        1;

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.historico-acesso-info strong {
    color:
        #031330;

    font-size:
        11px;
}


.historico-acesso-usuario {
    color:
        #64748b;

    font-size:
        10px;
}


.historico-acesso-data {
    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    color:
        #94a3b8;

    font-size:
        9px;
}


/* =========================================================
   DARK — MODAIS / SUPORTE
========================================================= */

body.dark-mode
.modal-admin-card,
body.dark-mode
.modal-content,
body.dark-mode
.modal-card {
    background:
        #0a1425;

    border-color:
        rgba(255, 255, 255, 0.08);

    color:
        #e5e7eb;
}


body.dark-mode
.modal-admin-header,
body.dark-mode
.modal-header,
body.dark-mode
.modal-admin-footer,
body.dark-mode
.modal-footer {
    border-color:
        rgba(255, 255, 255, 0.07);
}


body.dark-mode
.modal-admin-header h2,
body.dark-mode
.modal-header h2,
body.dark-mode
.dashboard-form-top strong,
body.dark-mode
.dashboard-gerenciar-top strong,
body.dark-mode
.usuario-cliente-info strong,
body.dark-mode
.topico-permissao-info strong,
body.dark-mode
.historico-acesso-info strong {
    color:
        #f8fafc;
}


body.dark-mode
.campo-admin label {
    color:
        #cbd5e1;
}


body.dark-mode
.campo-admin input,
body.dark-mode
.campo-admin select,
body.dark-mode
.campo-admin textarea {
    color:
        #f8fafc;

    background:
        #081224;

    border-color:
        rgba(255, 255, 255, 0.09);
}


body.dark-mode
.dashboard-form-item,
body.dark-mode
.dashboard-gerenciar-item,
body.dark-mode
.usuario-cliente-item,
body.dark-mode
.topico-permissao-item,
body.dark-mode
.cliente-comunicado-item {
    background:
        #081224;

    border-color:
        rgba(255, 255, 255, 0.08);
}


/* =========================================================
   RESPONSIVO — CLIENTE
========================================================= */

@media (max-width: 900px) {

    .cliente-page
    .dashboard-navigation {
        gap:
            12px;

        padding:
            8px 12px;
    }


    .cliente-page
    .dashboard-navigation-info {
        min-width:
            145px;
    }


    .cliente-page
    #dashboardTitle {
        font-size:
            16px;
    }


    .cliente-page
    .dashboard-tab {
        height:
            32px;

        padding:
            0 10px;

        font-size:
            10px;
    }

}


@media (max-width: 650px) {

    .cliente-page
    .dashboard-navigation {
        flex:
            0 0 auto;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            6px;
    }


    .cliente-page
    .dashboard-navigation-info {
        min-width:
            0;
    }


    .cliente-page
    .dashboard-tabs {
        justify-content:
            flex-start;
    }


    .cliente-page
    .cliente-logado {
        display:
            none;
    }


    .modal-admin-grid {
        grid-template-columns:
            1fr;
    }


    .campo-admin-full {
        grid-column:
            auto;
    }

}


/* =========================================================
   RESPONSIVO — MUITO PEQUENO
========================================================= */

@media (max-width: 480px) {

    .cliente-page
    .dashboard-navigation-info {
        display:
            none;
    }


    .cliente-page
    .dashboard-navigation {
        padding:
            7px 9px;
    }


    .cliente-page
    .dashboard-tab {
        height:
            31px;

        font-size:
            9.5px;
    }


    .notification-menu {
        right:
            -50px;

        width:
            290px;
    }


    .modal-admin,
    .modal-overlay,
    .modal-sucesso {
        padding:
            10px;
    }

}


/* =========================================================
   FIM STYLE.CSS CAMVIO
========================================================= */

/* =========================================================
   CAMVIO — POWER BI AMPLIADO 150%
========================================================= */

.cliente-page .dashboard-frame-container {
    position: relative;
    overflow: hidden;
}

.cliente-page #dashboardFrame {
    position: absolute;

    width: 120% !important;
    height: 120% !important;

    min-width: 120% !important;
    min-height: 120% !important;

    max-width: none !important;
    max-height: none !important;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

    background: #ffffff;
}
/* =========================================================
   CAMVIO — MENU DE TÓPICOS NA LATERAL
   MANTENDO O POWER BI NO TAMANHO ATUAL
========================================================= */

/* Estrutura principal */
.cliente-page .cliente-dashboard-layout {
    flex: 1;
    min-height: 0;

    display: grid;

    grid-template-columns:
        155px
        minmax(0, 1fr);

    grid-template-rows:
        minmax(0, 1fr);

    overflow: hidden;
}


/* =========================================================
   MENU LATERAL
========================================================= */

.cliente-page .dashboard-navigation {
    grid-column: 1;
    grid-row: 1;

    width: 155px;
    height: 100%;

    min-width: 155px;
    min-height: 0;

    padding: 14px 8px;

    display: flex;
    flex-direction: column;

    align-items: stretch;
    justify-content: flex-start;

    gap: 12px;

    overflow: hidden;

    background: #ffffff;

    border-right:
        1px solid #e5eaf2;

    border-bottom: 0;

    box-shadow:
        3px 0 10px
        rgba(3, 19, 48, 0.04);

    z-index: 30;
}


/* =========================================================
   TÍTULO NO TOPO DA LATERAL
========================================================= */

.cliente-page .dashboard-navigation-info {
    width: 100%;
    min-width: 0;

    padding:
        3px 7px 10px;

    border-bottom:
        1px solid #edf1f6;
}


.cliente-page .dashboard-navigation-label {
    display: block;

    margin-bottom: 3px;

    color: #1762b8;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


.cliente-page #dashboardTitle {
    margin: 0;

    color: #031330;

    font-size: 13px;
    font-weight: 750;

    line-height: 1.2;

    letter-spacing: -0.2px;
}


/* =========================================================
   LISTA DE BOTÕES
========================================================= */

.cliente-page .dashboard-tabs {
    flex: 1;

    width: 100%;

    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    align-items: stretch;
    justify-content: flex-start;

    gap: 6px;

    padding: 0;

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


/* =========================================================
   BOTÕES DOS TÓPICOS
========================================================= */

.cliente-page .dashboard-tab {
    width: 100%;

    min-height: 38px;
    height: auto;

    padding:
        8px 9px;

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

    gap: 8px;

    border:
        1px solid transparent;

    border-radius: 9px;

    background: transparent;

    color: #64748b;

    font-size: 9.5px;
    font-weight: 650;

    line-height: 1.25;

    text-align: left;
    white-space: normal;

    cursor: pointer;

    box-shadow: none;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}


.cliente-page .dashboard-tab i {
    flex: 0 0 15px;

    width: 15px;

    color: #8291a5;

    font-size: 10px;

    text-align: center;
}


/* HOVER */

.cliente-page .dashboard-tab:hover {
    transform: none;

    color: #1557a4;

    background: #f1f6fc;

    border-color: #dbe7f4;

    box-shadow: none;
}


.cliente-page .dashboard-tab:hover i {
    color: #3278d7;
}


/* ATIVO */

.cliente-page .dashboard-tab.ativo {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #12345f,
            #1762b8
        );

    border-color: transparent;

    box-shadow:
        0 4px 10px
        rgba(20, 85, 160, 0.16);
}


.cliente-page .dashboard-tab.ativo i {
    color: #ffffff;
}


/* =========================================================
   POWER BI
   MANTER O ZOOM / TAMANHO ATUAL
========================================================= */

.cliente-page .dashboard-frame-container {
    grid-column: 2;
    grid-row: 1;

    position: relative;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: #ffffff;
}


/* IMPORTANTE:
   mantém o zoom que você já está usando hoje */

.cliente-page #dashboardFrame {
    position: absolute;

    width: 120% !important;
    height: 120% !important;

    min-width: 120% !important;
    min-height: 120% !important;

    max-width: none !important;
    max-height: none !important;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

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

    border: 0 !important;
}


/* =========================================================
   LOADING
========================================================= */

.cliente-page .dashboard-tabs-loading,
.cliente-page .dashboard-tabs-empty {
    width: 100%;

    min-height: 38px;

    padding: 8px;

    display: flex;
    align-items: center;

    gap: 7px;

    color: #64748b;

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


/* =========================================================
   DARK MODE
========================================================= */

body.dark-mode.cliente-page
.dashboard-navigation {
    background: #081224;

    border-right-color:
        rgba(255, 255, 255, 0.07);

    box-shadow:
        3px 0 12px
        rgba(0, 0, 0, 0.20);
}


body.dark-mode.cliente-page
.dashboard-navigation-info {
    border-bottom-color:
        rgba(255, 255, 255, 0.07);
}


body.dark-mode.cliente-page
#dashboardTitle {
    color: #f8fafc;
}


body.dark-mode.cliente-page
.dashboard-navigation-label {
    color: #60a5fa;
}


body.dark-mode.cliente-page
.dashboard-tab {
    color: #9faec2;
}


body.dark-mode.cliente-page
.dashboard-tab:hover {
    color: #dbeafe;

    background:
        rgba(59, 130, 246, 0.10);

    border-color:
        rgba(96, 165, 250, 0.18);
}


body.dark-mode.cliente-page
.dashboard-tab.ativo {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #12345f,
            #1e63b5
        );
}
/* =========================================================
   CAMVIO — SIDEBAR PREMIUM DE TÓPICOS
========================================================= */

.cliente-page .cliente-dashboard-layout {
    display: grid;

    grid-template-columns:
        92px
        minmax(0, 1fr);

    grid-template-rows:
        minmax(0, 1fr);

    flex: 1;

    min-height: 0;

    overflow: hidden;
}


/* =========================================================
   LATERAL
========================================================= */

.cliente-page .dashboard-navigation {
    grid-column: 1;
    grid-row: 1;

    width: 92px;
    height: 100%;

    min-width: 92px;
    min-height: 0;

    padding:
        16px 8px;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 12px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fafc 100%
        );

    border-right:
        1px solid #e5eaf2;

    border-bottom: 0;

    box-shadow:
        4px 0 14px
        rgba(3, 19, 48, 0.035);

    z-index: 20;
}


/* =========================================================
   ESCONDER CABEÇALHO DA LATERAL
========================================================= */

.cliente-page .dashboard-navigation-info {
    display: none;
}


/* =========================================================
   LISTA DE TÓPICOS
========================================================= */

.cliente-page .dashboard-tabs {
    width: 100%;

    flex: 1;

    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    align-items: stretch;
    justify-content: flex-start;

    gap: 9px;

    padding: 2px 0;

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

    scrollbar-width: none;
}


.cliente-page .dashboard-tabs::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   BOTÃO DO TÓPICO
========================================================= */

.cliente-page .dashboard-tab {
    position: relative;

    width: 100%;

    min-height: 68px;
    height: auto;

    padding:
        9px 5px;

    display: flex;
    flex-direction: column;

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

    gap: 7px;

    border:
        1px solid transparent;

    border-radius:
        14px;

    background:
        transparent;

    color:
        #64748b;

    font-size:
        9px;
    font-weight:
        650;

    line-height:
        1.15;

    text-align:
        center;

    white-space:
        normal;

    cursor: pointer;

    box-shadow: none;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* =========================================================
   ÍCONE
========================================================= */

.cliente-page .dashboard-tab i {
    width: 32px;
    height: 32px;

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

    border-radius:
        10px;

    background:
        #f1f5f9;

    color:
        #64748b;

    font-size:
        13px;

    transition:
        0.2s ease;
}


/* =========================================================
   TEXTO
========================================================= */

.cliente-page .dashboard-tab span {
    display: -webkit-box;

    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    max-width: 72px;
}


/* =========================================================
   HOVER
========================================================= */

.cliente-page .dashboard-tab:hover {
    transform:
        translateY(-1px);

    background:
        #f4f8fd;

    border-color:
        #e2ebf5;

    color:
        #1557a4;
}


.cliente-page .dashboard-tab:hover i {
    background:
        #e8f1fc;

    color:
        #1762b8;
}


/* =========================================================
   TÓPICO ATIVO
========================================================= */

.cliente-page .dashboard-tab.ativo {
    color:
        #1557a4;

    background:
        linear-gradient(
            180deg,
            #edf5ff,
            #f4f8fd
        );

    border-color:
        #cfe0f5;

    box-shadow:
        0 5px 14px
        rgba(23, 98, 184, 0.08);
}


.cliente-page .dashboard-tab.ativo i {
    background:
        linear-gradient(
            135deg,
            #12345f,
            #1762b8
        );

    color:
        #ffffff;

    box-shadow:
        0 5px 12px
        rgba(23, 98, 184, 0.20);
}


/* BARRA INDICADORA */

.cliente-page .dashboard-tab.ativo::before {
    content: "";

    position: absolute;

    left: -8px;

    top: 15px;
    bottom: 15px;

    width: 3px;

    border-radius:
        0 4px 4px 0;

    background:
        #1762b8;
}


/* =========================================================
   POWER BI
========================================================= */

.cliente-page .dashboard-frame-container {
    grid-column: 2;
    grid-row: 1;

    position: relative;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    background: #ffffff;
}


/* =========================================================
   MANTER SEU ZOOM ATUAL
========================================================= */

.cliente-page #dashboardFrame {
    position: absolute;

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

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

    max-width: none !important;
    max-height: none !important;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    border: 0 !important;
}


/* =========================================================
   DARK MODE
========================================================= */

body.dark-mode.cliente-page
.dashboard-navigation {
    background:
        linear-gradient(
            180deg,
            #081224,
            #07101f
        );

    border-right-color:
        rgba(255, 255, 255, 0.06);
}


body.dark-mode.cliente-page
.dashboard-tab {
    color:
        #94a3b8;
}


body.dark-mode.cliente-page
.dashboard-tab i {
    background:
        rgba(255, 255, 255, 0.05);

    color:
        #8ea0b8;
}


body.dark-mode.cliente-page
.dashboard-tab:hover {
    background:
        rgba(59, 130, 246, 0.08);

    border-color:
        rgba(96, 165, 250, 0.16);

    color:
        #dbeafe;
}


body.dark-mode.cliente-page
.dashboard-tab:hover i {
    background:
        rgba(59, 130, 246, 0.12);

    color:
        #60a5fa;
}


body.dark-mode.cliente-page
.dashboard-tab.ativo {
    color:
        #dbeafe;

    background:
        rgba(59, 130, 246, 0.10);

    border-color:
        rgba(96, 165, 250, 0.20);
}


body.dark-mode.cliente-page
.dashboard-tab.ativo i {
    background:
        linear-gradient(
            135deg,
            #12345f,
            #1e63b5
        );

    color:
        #ffffff;
}
/* =========================================================
   PÁGINA INICIAL — MESMO PADRÃO DOS TÓPICOS
========================================================= */

.cliente-page .dashboard-home {
    position: relative;

    width: 100%;
    min-height: 68px;

    padding: 9px 5px;

    display: flex;
    flex-direction: column;

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

    gap: 7px;

    border: 1px solid transparent;
    border-radius: 14px;

    background: transparent;

    color: #64748b;

    font-size: 9px;
    font-weight: 650;

    line-height: 1.15;

    text-align: center;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


/* ÍCONE */

.cliente-page .dashboard-home i {
    width: 32px;
    height: 32px;

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

    border-radius: 10px;

    background: #f1f5f9;

    color: #64748b;

    font-size: 13px;

    transition: 0.2s ease;
}


/* TEXTO */

.cliente-page .dashboard-home span {
    display: -webkit-box;

    max-width: 72px;

    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    color: inherit;

    font-size: 9px;
    font-weight: 650;

    line-height: 1.15;

    text-align: center;
}


/* HOVER */

.cliente-page .dashboard-home:hover {
    transform: translateY(-1px);

    background: #f4f8fd;

    border-color: #e2ebf5;

    color: #1557a4;
}


.cliente-page .dashboard-home:hover i {
    background: #e8f1fc;

    color: #1762b8;
}
/* =========================================================
   CAMVIO — FULLSCREEN SOMENTE POWER BI
========================================================= */

/* Quando a página estiver em tela cheia */
:fullscreen .topbar,
:fullscreen .dashboard-navigation,
:fullscreen .support-wrapper {
    display: none !important;
}


/* Layout vira somente o BI */
:fullscreen .cliente-dashboard-layout {
    display: block !important;

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

    min-width: 100vw !important;
    min-height: 100vh !important;

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

    overflow: hidden !important;
}


/* Container do BI ocupa tudo */
:fullscreen .dashboard-frame-container {
    position: relative !important;

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

    min-width: 100vw !important;
    min-height: 100vh !important;

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

    overflow: hidden !important;
}


/* Mantém sua ampliação atual */
:fullscreen #dashboardFrame {
    position: absolute !important;

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

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

    max-width: none !important;
    max-height: none !important;

    left: 50% !important;
    top: 50% !important;

    transform: translate(-50%, -50%) !important;

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

    border: 0 !important;
}


/* Compatibilidade Chrome / Edge / Safari */
:-webkit-full-screen .topbar,
:-webkit-full-screen .dashboard-navigation,
:-webkit-full-screen .support-wrapper {
    display: none !important;
}

:-webkit-full-screen .cliente-dashboard-layout,
:-webkit-full-screen .dashboard-frame-container {
    width: 100vw !important;
    height: 100vh !important;

    margin: 0 !important;
    padding: 0 !important;
}
/* =========================================================
   ESCONDER MENU LATERAL QUANDO MOUSE ESTIVER NO POWER BI
========================================================= */

/* animação da lateral */
.cliente-page .dashboard-navigation {
    transition:
        width 0.20s ease,
        min-width 0.20s ease,
        opacity 0.15s ease,
        transform 0.20s ease;
}






/* =========================================================
   CAMVIO — PADRONIZAÇÃO DOS ÍCONES DO MENU
========================================================= */

.dashboard-menu-card .dashboard-menu-icon,
.dashboard-menu-card:first-child .dashboard-menu-icon {
    width: 48px !important;
    height: 48px !important;

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

    background: #f2f6fc !important;

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

    color: #2563eb !important;

    box-shadow: none !important;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


/* ÍCONE INTERNO */

.dashboard-menu-card .dashboard-menu-icon i,
.dashboard-menu-card:first-child .dashboard-menu-icon i {
    color: #2563eb !important;

    font-size: 19px !important;
}


/* =========================================================
   HOVER DO CARD
========================================================= */

.dashboard-menu-card:hover .dashboard-menu-icon,
.dashboard-menu-card:first-child:hover .dashboard-menu-icon {
    background: #eaf1fb !important;

    border-color: #c7d8ef !important;

    color: #174ea6 !important;

    transform: translateY(-1px);
}


.dashboard-menu-card:hover .dashboard-menu-icon i,
.dashboard-menu-card:first-child:hover .dashboard-menu-icon i {
    color: #174ea6 !important;
}


/* =========================================================
   REMOVER QUALQUER GRADIENTE DO PRIMEIRO ÍCONE
========================================================= */

.menu-dashboards
.dashboard-menu-card:first-child
.dashboard-menu-icon {
    background-image: none !important;

    background-color: #f2f6fc !important;

    color: #2563eb !important;
}


.menu-dashboards
.dashboard-menu-card:first-child
.dashboard-menu-icon i {
    color: #2563eb !important;
}


/* =========================================================
   SUPORTE FLUTUANTE — VISUAL MAIS CLEAN
========================================================= */

.support-menu .support-btn,
#supportBtn {
    background: #ffffff !important;

    color: #2563eb !important;

    border: 1px solid #dbe5f1 !important;

    box-shadow:
        0 10px 28px
        rgba(15, 23, 42, 0.12) !important;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* ÍCONE DO SUPORTE */

.support-menu .support-btn i,
#supportBtn i {
    color: #2563eb !important;
}


/* HOVER */

.support-menu .support-btn:hover,
#supportBtn:hover {
    background: #f2f6fc !important;

    border-color: #c7d8ef !important;

    color: #174ea6 !important;

    transform: translateY(-2px);

    box-shadow:
        0 13px 32px
        rgba(15, 23, 42, 0.15) !important;
}


.support-menu .support-btn:hover i,
#supportBtn:hover i {
    color: #174ea6 !important;
}


/* =========================================================
   DARK MODE
========================================================= */

body.dark-mode
.dashboard-menu-card .dashboard-menu-icon,
body.dark-mode
.dashboard-menu-card:first-child .dashboard-menu-icon {
    background: rgba(37, 99, 235, 0.10) !important;

    border-color: rgba(96, 165, 250, 0.18) !important;

    color: #60a5fa !important;
}


body.dark-mode
.dashboard-menu-card .dashboard-menu-icon i,
body.dark-mode
.dashboard-menu-card:first-child .dashboard-menu-icon i {
    color: #60a5fa !important;
}


body.dark-mode
.support-menu .support-btn,
body.dark-mode
#supportBtn {
    background: #0f172a !important;

    border-color: rgba(148, 163, 184, 0.18) !important;

    color: #60a5fa !important;
}


body.dark-mode
.support-menu .support-btn i,
body.dark-mode
#supportBtn i {
    color: #60a5fa !important;
}
/* =========================================================
   CAMVIO — AUTH UI PREMIUM
   INDEX + PRIMEIRO ACESSO
========================================================= */

/* =========================================================
   CABEÇALHO
========================================================= */

.login-page .auth-intro {
    margin:
        4px 0
        18px;

    text-align:
        center;
}


/* pequeno identificador */

.login-page .auth-kicker {
    display:
        inline-block;

    margin-bottom:
        6px;

    color:
        #1762b8;

    font-size:
        7.5px;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;
}


/* título */

.login-page .auth-intro h1 {
    margin:
        0 0
        5px;

    color:
        #071936;

    font-size:
        17px;

    font-weight:
        750;

    line-height:
        1.15;

    letter-spacing:
        -0.35px;
}


/* descrição */

.login-page .auth-intro p {
    max-width:
        270px;

    margin:
        0 auto;

    color:
        #718198;

    font-size:
        9px;

    font-weight:
        400;

    line-height:
        1.45;
}


/* =========================================================
   DICA DE SENHA
========================================================= */

.login-page .auth-password-hint {
    margin:
        -1px 0
        10px;

    padding:
        0 3px;

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    color:
        #77889f;

    font-size:
        8px;

    line-height:
        1.3;
}


.login-page
.auth-password-hint i {
    color:
        #2d7fe5;

    font-size:
        8px;
}


.login-page
.auth-password-hint strong {
    color:
        #1762b8;

    font-weight:
        750;
}


/* =========================================================
   SEGURANÇA — RODAPÉ
========================================================= */

.login-page .auth-security {
    position:
        relative;

    margin-top:
        13px;

    padding-top:
        12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    border-top:
        1px solid
        rgba(3, 19, 48, 0.07);

    color:
        #7d8ca0;

    font-size:
        8px;

    line-height:
        1.3;
}


/* Ícone sem parecer botão */

.login-page
.auth-security-icon {
    width:
        18px;

    height:
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        6px;

    background:
        rgba(0, 102, 255, 0.07);

    color:
        #1762b8;

    flex-shrink:
        0;
}


.login-page
.auth-security-icon i {
    font-size:
        7px;
}


/* =========================================================
   LOGO — REFINAMENTO
========================================================= */

body.index-login-page
.index-login-logo,
body.primeiro-acesso-page
.primeiro-acesso-logo {
    margin-bottom:
        15px !important;
}


body.index-login-page
.index-login-logo img,
body.primeiro-acesso-page
.primeiro-acesso-logo img {
    width:
        100px !important;

    max-width:
        100px !important;

    filter:
        none !important;
}


/* =========================================================
   CAMPOS — MAIS PREMIUM
========================================================= */

body.index-login-page
.campo,
body.primeiro-acesso-page
.primeiro-acesso-campo {
    border-color:
        #d8e3f1 !important;

    background:
        #fafcff !important;

    box-shadow:
        0 1px 2px
        rgba(3, 19, 48, 0.015) !important;
}


body.index-login-page
.campo:hover,
body.primeiro-acesso-page
.primeiro-acesso-campo:hover {
    border-color:
        #c2d3e8 !important;

    background:
        #ffffff !important;
}


body.index-login-page
.campo:focus-within,
body.primeiro-acesso-page
.primeiro-acesso-campo:focus-within {
    border-color:
        #4388e5 !important;

    background:
        #ffffff !important;

    box-shadow:
        0 0 0 3px
        rgba(0, 102, 255, 0.07) !important;
}


/* =========================================================
   BOTÃO — MENOS "GRADIENTÃO"
========================================================= */

body.index-login-page
.entrar-btn,
body.primeiro-acesso-page
.primeiro-acesso-submit {
    background:
        linear-gradient(
            100deg,
            #17365f 0%,
            #1556ad 48%,
            #0867f2 100%
        ) !important;

    box-shadow:
        0 8px 18px
        rgba(19, 67, 128, 0.18) !important;
}


/* =========================================================
   REMOVER ESTILOS ANTIGOS DOS BLOCOS
========================================================= */

body.index-login-page
.index-login-header,

body.index-login-page
.index-login-badge,

body.index-login-page
.index-login-footer,

body.primeiro-acesso-page
.primeiro-acesso-header,

body.primeiro-acesso-page
.primeiro-acesso-badge,

body.primeiro-acesso-page
.primeiro-acesso-regra,

body.primeiro-acesso-page
.primeiro-acesso-footer {
    /* os novos blocos substituem estes */
}


/* =========================================================
   DARK MODE
========================================================= */

body.dark-mode.login-page
.auth-intro h1 {
    color:
        #f8fafc;
}


body.dark-mode.login-page
.auth-intro p,
body.dark-mode.login-page
.auth-password-hint,
body.dark-mode.login-page
.auth-security {
    color:
        #91a0b5;
}


body.dark-mode.login-page
.auth-security {
    border-top-color:
        rgba(255, 255, 255, 0.07);
}


body.dark-mode.login-page
.auth-security-icon {
    background:
        rgba(59, 130, 246, 0.10);

    color:
        #60a5fa;
}
/* =========================================================
   CAMVIO — AUTH FINAL
   INDEX + PRIMEIRO ACESSO
========================================================= */


/* =========================================================
   CARD — MESMA PROPORÇÃO
========================================================= */

body.index-login-page .index-login-card,
body.primeiro-acesso-page .primeiro-acesso-card {
    width: 390px !important;
    max-width: calc(100vw - 36px) !important;

    padding:
        26px
        28px
        22px !important;

    border-radius: 20px !important;
}

/* =========================================================
   LOGO — SEM ÁREA VAZIA GIGANTE
========================================================= */

body.index-login-page .index-login-logo,
body.primeiro-acesso-page .primeiro-acesso-logo {
    margin: 0 0 18px !important;
    padding: 0 !important;
}


/* =========================================================
   LOGO — INDEX
========================================================= */

body.index-login-page .index-login-logo img,
body.index-login-page #logo {
    width: 108px !important;
    max-width: 108px !important;

    height: auto !important;

    margin: 0 auto !important;

    display: block !important;

    filter: none !important;
}


/* =========================================================
   LOGO — PRIMEIRO ACESSO
========================================================= */

body.primeiro-acesso-page .primeiro-acesso-logo img,
body.primeiro-acesso-page #logo {
    width: 150px !important;
    max-width: 150px !important;

    height: auto !important;

    margin: 0 auto !important;

    display: block !important;

    filter: none !important;
}
/* =========================================================
   INTRO
========================================================= */

body.index-login-page .auth-intro,
body.primeiro-acesso-page .auth-intro {
    margin:
        0 0
        20px !important;

    padding: 0 !important;

    text-align: center;
}


/* =========================================================
   IDENTIFICADOR
========================================================= */

body.index-login-page .auth-kicker,
body.primeiro-acesso-page .auth-kicker {
    display: block;

    margin:
        0 0
        7px;

    padding: 0;

    background: transparent !important;

    color: #1762b8;

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

    line-height: 1.1;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


/* =========================================================
   TÍTULO
========================================================= */

body.index-login-page .auth-intro h1,
body.primeiro-acesso-page .auth-intro h1 {
    margin:
        0 0
        6px !important;

    color: #071936;

    font-size: 20px !important;
    font-weight: 760 !important;

    line-height: 1.15;

    letter-spacing: -0.4px;
}


/* =========================================================
   SUBTÍTULO
========================================================= */

body.index-login-page .auth-intro p,
body.primeiro-acesso-page .auth-intro p {
    width: auto;
    max-width: 285px;

    margin: 0 auto !important;

    color: #6f8097;

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

    line-height: 1.45;
}


/* =========================================================
   FORM
========================================================= */

body.index-login-page #loginForm,
body.primeiro-acesso-page #primeiroAcessoForm {
    width: 100%;
}


/* =========================================================
   INPUTS
========================================================= */

body.index-login-page .campo,
body.primeiro-acesso-page .primeiro-acesso-campo {
    width: 100%;

    height: 48px !important;

    margin-bottom: 11px !important;

    padding:
        0
        14px !important;

    gap: 11px;

    border:
        1px solid #d8e3f1 !important;

    border-radius:
        11px !important;

    background:
        #fafcff !important;

    box-shadow:
        none !important;
}


body.index-login-page .campo:hover,
body.primeiro-acesso-page .primeiro-acesso-campo:hover {
    background:
        #ffffff !important;

    border-color:
        #c2d3e8 !important;
}


body.index-login-page .campo:focus-within,
body.primeiro-acesso-page .primeiro-acesso-campo:focus-within {
    transform:
        none !important;

    background:
        #ffffff !important;

    border-color:
        #3b82f6 !important;

    box-shadow:
        0 0 0 3px
        rgba(59, 130, 246, 0.08) !important;
}


/* =========================================================
   ÍCONES DOS CAMPOS
========================================================= */

body.index-login-page .campo > i:first-child,
body.primeiro-acesso-page
.primeiro-acesso-campo > i:first-child {
    width: 17px;

    flex: 0 0 17px;

    color: #8293a9;

    font-size: 13px !important;

    text-align: center;
}


/* =========================================================
   INPUT REAL
========================================================= */

body.index-login-page .campo input,
body.primeiro-acesso-page
.primeiro-acesso-campo input {
    flex: 1;

    min-width: 0;

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

    border: 0 !important;
    outline: 0 !important;

    background:
        transparent !important;

    color:
        #0f213d !important;

    font-size:
        12px !important;

    font-weight:
        500;

    box-shadow:
        none !important;
}


body.index-login-page .campo input::placeholder,
body.primeiro-acesso-page
.primeiro-acesso-campo input::placeholder {
    color:
        #91a0b4 !important;
}


/* =========================================================
   OLHO — INDEX
========================================================= */

body.index-login-page #olho {
    margin-left: auto;

    padding: 7px;

    border-radius: 7px;

    color: #7d8da3;

    font-size: 12px;

    cursor: pointer;
}


body.index-login-page #olho:hover {
    background: #edf4ff;

    color: #1762b8;
}


/* =========================================================
   OLHO — PRIMEIRO ACESSO
   REMOVE BOTÃO QUADRADO PADRÃO
========================================================= */

body.primeiro-acesso-page
.toggle-senha {
    appearance: none;
    -webkit-appearance: none;

    flex: 0 0 30px;

    width: 30px !important;
    height: 30px !important;

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

    margin:
        0 0 0 auto !important;

    padding: 0 !important;

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

    border:
        0 !important;

    outline:
        0 !important;

    border-radius:
        7px !important;

    background:
        transparent !important;

    color:
        #7d8da3 !important;

    box-shadow:
        none !important;

    cursor: pointer;
}


body.primeiro-acesso-page
.toggle-senha:hover {
    background:
        #edf4ff !important;

    color:
        #1762b8 !important;
}


body.primeiro-acesso-page
.toggle-senha i {
    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;

    font-size: 12px !important;
}


/* =========================================================
   REGRA DA SENHA
========================================================= */

body.primeiro-acesso-page
.auth-password-hint {
    width: 100%;

    margin:
        -1px 0
        11px !important;

    padding:
        1px 2px;

    display: flex;
    align-items: center;

    gap: 6px;

    color:
        #718198;

    font-size:
        8.5px !important;

    line-height:
        1.3;
}


body.primeiro-acesso-page
.auth-password-hint i {
    color:
        #3b82f6;

    font-size:
        8px;
}


body.primeiro-acesso-page
.auth-password-hint strong {
    color:
        #1762b8;

    font-weight:
        750;
}


/* =========================================================
   BOTÃO
========================================================= */

body.index-login-page .entrar-btn,
body.primeiro-acesso-page
.primeiro-acesso-submit {
    width: 100%;

    height: 46px !important;

    margin-top:
        2px !important;

    display: flex;

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

    gap: 8px;

    border: 0 !important;

    border-radius:
        10px !important;

    background:
        linear-gradient(
            100deg,
            #1f3b63 0%,
            #1354ad 48%,
            #0867f2 100%
        ) !important;

    color:
        #ffffff !important;

    font-size:
        10.5px !important;

    font-weight:
        800 !important;

    letter-spacing:
        0.055em !important;

    box-shadow:
        0 8px 18px
        rgba(18, 69, 137, 0.17) !important;
}


/* =========================================================
   SEGURANÇA — RODAPÉ
========================================================= */

body.index-login-page .auth-security,
body.primeiro-acesso-page .auth-security {
    width: 100%;

    margin-top:
        14px !important;

    padding-top:
        13px !important;

    display: flex;

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

    gap: 7px;

    border-top:
        1px solid #edf1f6;

    color:
        #7b8ba0;

    font-size:
        8.5px !important;

    line-height:
        1.2;
}


/* ícone sem parecer botão */

body.index-login-page
.auth-security-icon,
body.primeiro-acesso-page
.auth-security-icon {
    width: auto !important;
    height: auto !important;

    padding: 0;

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

    border: 0;

    border-radius: 0;

    background:
        transparent !important;

    color:
        #3b82f6;

    font-size:
        8px;
}


body.index-login-page
.auth-security-icon i,
body.primeiro-acesso-page
.auth-security-icon i {
    font-size:
        8px !important;
}


/* =========================================================
   ERRO
========================================================= */

body.index-login-page #mensagemErro,
body.primeiro-acesso-page #mensagemErro {
    display: none;

    width: 100%;

    margin:
        0 0
        9px;

    padding:
        8px
        10px;

    border:
        1px solid rgba(220, 38, 38, 0.16);

    border-radius:
        8px;

    background:
        #fff5f5;

    color:
        #b42318;

    font-size:
        9px;

    line-height:
        1.35;
}


body.index-login-page
#mensagemErro:not(:empty),
body.primeiro-acesso-page
#mensagemErro:not(:empty) {
    display: block;
}


/* =========================================================
   DARK
========================================================= */

body.dark-mode.index-login-page
.auth-intro h1,
body.dark-mode.primeiro-acesso-page
.auth-intro h1 {
    color:
        #f8fafc;
}


body.dark-mode.index-login-page
.auth-intro p,
body.dark-mode.primeiro-acesso-page
.auth-intro p,
body.dark-mode.index-login-page
.auth-security,
body.dark-mode.primeiro-acesso-page
.auth-security {
    color:
        #91a0b5;
}


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

@media (max-width: 460px) {

    body.index-login-page
    .index-login-card,

    body.primeiro-acesso-page
    .primeiro-acesso-card {
        width:
            calc(100vw - 28px) !important;

        padding:
            24px
            21px
            20px !important;
    }

}
/* =========================================================
   CAMVIO — AUTH MASTER CLEAN
   INDEX + PRIMEIRO ACESSO
========================================================= */


/* CARD */

body.index-login-page .login-card,
body.primeiro-acesso-page .login-card {
    width: 385px !important;
    max-width: calc(100vw - 36px) !important;

    padding: 28px 28px 22px !important;

    border-radius: 20px !important;

    background: rgba(255,255,255,.90) !important;

    border: 1px solid rgba(255,255,255,.90) !important;

    box-shadow:
        0 24px 60px rgba(3,19,48,.13),
        inset 0 1px 0 rgba(255,255,255,.85) !important;
}


/* =========================================================
   LOGO
========================================================= */

body.index-login-page .logo,
body.primeiro-acesso-page .logo {
    margin: 0 0 22px !important;

    padding: 0 !important;
}


body.index-login-page .logo img,
body.primeiro-acesso-page .logo img {
    width: 125px !important;
    max-width: 125px !important;

    height: auto !important;

    margin: 0 auto !important;

    filter: none !important;
}


/* =========================================================
   CABEÇALHO LIMPO
========================================================= */

.login-page .auth-intro {
    margin: 0 0 20px !important;

    padding: 0 !important;

    text-align: center;
}


.login-page .auth-kicker {
    display: none !important;
}


.login-page .auth-intro h1 {
    margin: 0 0 5px !important;

    color: #071936;

    font-size: 20px !important;
    font-weight: 750;

    line-height: 1.15;

    letter-spacing: -.4px;
}


.login-page .auth-intro p {
    margin: 0 auto !important;

    color: #718198;

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

    line-height: 1.4;
}


/* =========================================================
   CAMPOS
========================================================= */

body.index-login-page .campo,
body.primeiro-acesso-page .primeiro-acesso-campo {
    width: 100%;

    height: 48px !important;

    margin-bottom: 11px !important;

    padding: 0 14px !important;

    gap: 11px;

    border: 1px solid #d9e3ef !important;

    border-radius: 11px !important;

    background: #fafcff !important;

    box-shadow: none !important;
}


body.index-login-page .campo:hover,
body.primeiro-acesso-page .primeiro-acesso-campo:hover {
    border-color: #c4d4e7 !important;

    background: #ffffff !important;
}


body.index-login-page .campo:focus-within,
body.primeiro-acesso-page .primeiro-acesso-campo:focus-within {
    transform: none !important;

    border-color: #3b82f6 !important;

    background: #ffffff !important;

    box-shadow:
        0 0 0 3px rgba(59,130,246,.07) !important;
}


/* INPUT */

body.index-login-page .campo input,
body.primeiro-acesso-page .primeiro-acesso-campo input {
    flex: 1;

    min-width: 0;

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

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    color: #0d203c !important;

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

    box-shadow: none !important;
}


body.index-login-page .campo input::placeholder,
body.primeiro-acesso-page .primeiro-acesso-campo input::placeholder {
    color: #91a0b4 !important;
}


/* ÍCONES */

body.index-login-page .campo > i:first-child,
body.primeiro-acesso-page
.primeiro-acesso-campo > i:first-child {
    width: 17px;

    color: #8293a9 !important;

    font-size: 13px !important;

    text-align: center;
}


/* =========================================================
   OLHO PRIMEIRO ACESSO
========================================================= */

body.primeiro-acesso-page .toggle-senha {
    appearance: none;
    -webkit-appearance: none;

    width: 28px !important;
    height: 28px !important;

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

    margin: 0 0 0 auto !important;
    padding: 0 !important;

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

    border: 0 !important;
    outline: 0 !important;

    border-radius: 7px !important;

    background: transparent !important;

    color: #7f8fa4 !important;

    box-shadow: none !important;

    cursor: pointer;
}


body.primeiro-acesso-page .toggle-senha:hover {
    background: #eef4fb !important;

    color: #1762b8 !important;
}


body.primeiro-acesso-page .toggle-senha i {
    margin: 0 !important;

    font-size: 12px !important;

    color: inherit !important;
}


/* =========================================================
   OLHO INDEX
========================================================= */

body.index-login-page #olho {
    margin-left: auto;

    color: #7f8fa4;

    font-size: 12px;

    cursor: pointer;
}


body.index-login-page #olho:hover {
    color: #1762b8;
}


/* =========================================================
   DICA PRIMEIRO ACESSO
========================================================= */

body.primeiro-acesso-page .auth-password-hint {
    margin: -1px 0 12px !important;

    padding: 0 2px !important;

    display: flex;
    align-items: center;

    gap: 6px;

    color: #77889e;

    font-size: 8.5px !important;

    line-height: 1.2;
}


body.primeiro-acesso-page .auth-password-hint i {
    color: #2f7bd8;

    font-size: 8px;
}


body.primeiro-acesso-page .auth-password-hint strong {
    color: #1762b8;

    font-weight: 750;
}


/* =========================================================
   BOTÃO
========================================================= */

body.index-login-page .entrar-btn,
body.primeiro-acesso-page .primeiro-acesso-submit {
    width: 100%;

    height: 46px !important;

    margin-top: 2px !important;

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

    gap: 8px;

    border: 0 !important;

    border-radius: 10px !important;

    background:
        linear-gradient(
            100deg,
            #203a61 0%,
            #1454aa 48%,
            #0867f2 100%
        ) !important;

    color: #ffffff !important;

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

    letter-spacing: .055em !important;

    box-shadow:
        0 8px 18px rgba(22,69,130,.17) !important;
}


/* =========================================================
   SEGURANÇA
========================================================= */

body.index-login-page .auth-security,
body.primeiro-acesso-page .auth-security {
    margin-top: 14px !important;

    padding-top: 12px !important;

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

    gap: 6px;

    border-top: 1px solid #edf1f5;

    color: #8492a5;

    font-size: 8.5px !important;
}


body.index-login-page .auth-security-icon,
body.primeiro-acesso-page .auth-security-icon {
    width: auto !important;
    height: auto !important;

    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

    color: #2f7bd8;

    font-size: 8px;
}


body.index-login-page .auth-security-icon i,
body.primeiro-acesso-page .auth-security-icon i {
    font-size: 8px !important;
}


/* =========================================================
   ERRO
========================================================= */

body.index-login-page #mensagemErro,
body.primeiro-acesso-page #mensagemErro {
    display: none;

    margin: 0 0 9px;

    padding: 8px 10px;

    border: 1px solid rgba(220,38,38,.16);

    border-radius: 8px;

    background: #fff6f6;

    color: #b42318;

    font-size: 9px;

    line-height: 1.35;
}


body.index-login-page #mensagemErro:not(:empty),
body.primeiro-acesso-page #mensagemErro:not(:empty) {
    display: block;
}


/* =========================================================
   DARK
========================================================= */

body.dark-mode.login-page .auth-intro h1 {
    color: #f8fafc;
}


body.dark-mode.login-page .auth-intro p,
body.dark-mode.login-page .auth-security,
body.dark-mode.login-page .auth-password-hint {
    color: #91a0b5;
}
/* =========================================================
   AJUSTE DE PROPORÇÃO — INDEX + PRIMEIRO ACESSO
========================================================= */

body.index-login-page .login-card,
body.primeiro-acesso-page .login-card {
    width: 355px !important;

    padding:
        30px
        28px
        24px !important;

    border-radius: 20px !important;
}


/* LOGO */

body.index-login-page .logo,
body.primeiro-acesso-page .logo {
    margin-bottom: 26px !important;
}

body.index-login-page .logo img,
body.primeiro-acesso-page .logo img {
    width: 118px !important;
    max-width: 118px !important;
}


/* CABEÇALHO */

body.index-login-page .auth-intro,
body.primeiro-acesso-page .auth-intro {
    margin-bottom: 24px !important;
}

body.index-login-page .auth-intro h1,
body.primeiro-acesso-page .auth-intro h1 {
    font-size: 19px !important;

    margin-bottom: 6px !important;
}

body.index-login-page .auth-intro p,
body.primeiro-acesso-page .auth-intro p {
    font-size: 9.5px !important;
}


/* CAMPOS */

body.index-login-page .campo,
body.primeiro-acesso-page .primeiro-acesso-campo {
    height: 50px !important;

    margin-bottom: 12px !important;
}


/* DICA PRIMEIRO ACESSO */

body.primeiro-acesso-page .auth-password-hint {
    margin:
        1px
        0
        13px !important;
}


/* BOTÃO */

body.index-login-page .entrar-btn,
body.primeiro-acesso-page .primeiro-acesso-submit {
    height: 47px !important;

    margin-top: 3px !important;
}


/* RODAPÉ */

body.index-login-page .auth-security,
body.primeiro-acesso-page .auth-security {
    margin-top: 17px !important;

    padding-top: 15px !important;
}
/* =========================================================
   TOPO PREMIUM — PRIMEIRO ACESSO
========================================================= */

body.primeiro-acesso-page
.primeiro-acesso-topo {
    margin-bottom: 24px;

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

    gap: 16px;
}


body.primeiro-acesso-page
.primeiro-acesso-logo-premium {
    width: 132px !important;
    max-width: 132px !important;

    height: auto !important;

    margin: 0 !important;

    display: block;

    object-fit: contain;
}


body.primeiro-acesso-page
.primeiro-acesso-status {
    color: #1762b8;

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

    letter-spacing: 0.14em;

    white-space: nowrap;
}


/* INTRO DO FORM */

body.primeiro-acesso-page
.primeiro-acesso-form-intro {
    margin-bottom: 16px;

    text-align: left;
}


body.primeiro-acesso-page
.primeiro-acesso-form-intro h1 {
    margin: 0 0 4px;

    color: #071936;

    font-size: 18px;
    font-weight: 750;

    line-height: 1.15;

    letter-spacing: -0.3px;
}


body.primeiro-acesso-page
.primeiro-acesso-form-intro p {
    margin: 0;

    color: #718198;

    font-size: 9.5px;
    font-weight: 400;

    line-height: 1.4;
}
/* =========================================================
   AJUSTE FINO DOS TEXTOS — PRIMEIRO ACESSO
========================================================= */

/* Texto abaixo do BEM-VINDO A CAMVIO */
body.primeiro-acesso-page
.primeiro-acesso-form-intro p {
    font-size: 11px !important;
    line-height: 1.45;
}


/* Mínimo de 8 caracteres */
body.primeiro-acesso-page
.auth-password-hint {
    font-size: 10px !important;
}

body.primeiro-acesso-page
.auth-password-hint span {
    font-size: 10px !important;
}

body.primeiro-acesso-page
.auth-password-hint strong {
    font-size: 10px !important;
}


/* Ambiente protegido pela CAMVIO */
body.primeiro-acesso-page
.auth-security span {
    font-size: 10px !important;
}


/* Ícone do rodapé um pouquinho maior */
body.primeiro-acesso-page
.auth-security-icon {
    font-size: 10px !important;
}
/* =========================================================
   INDEX — MESMO PADRÃO DO PRIMEIRO ACESSO
========================================================= */

body.index-login-page
.index-login-card {
    width: 355px !important;

    padding:
        30px
        28px
        24px !important;

    border-radius:
        20px !important;
}


/* =========================================================
   LOGO
========================================================= */

body.index-login-page
.index-login-logo {
    margin-bottom:
        28px !important;
}


body.index-login-page
.index-login-logo img,
body.index-login-page
#logo {
    width:
        138px !important;

    max-width:
        138px !important;

    height:
        auto !important;

    margin:
        0 auto !important;

    filter:
        none !important;
}


/* =========================================================
   INTRO
========================================================= */

body.index-login-page
.index-login-form-intro {
    margin-bottom:
        18px;

    text-align:
        left;
}


body.index-login-page
.index-login-form-intro h1 {
    margin:
        0 0
        4px;

    color:
        #071936;

    font-size:
        18px;

    font-weight:
        750;

    line-height:
        1.15;

    letter-spacing:
        -0.3px;
}


body.index-login-page
.index-login-form-intro p {
    margin:
        0;

    color:
        #718198;

    font-size:
        11px;

    font-weight:
        400;

    line-height:
        1.4;
}


/* =========================================================
   CAMPOS
========================================================= */

body.index-login-page
.campo {
    height:
        50px !important;

    margin-bottom:
        12px !important;

    padding:
        0 14px !important;

    border-radius:
        11px !important;

    background:
        #fafcff !important;

    border:
        1px solid
        #d9e3ef !important;

    box-shadow:
        none !important;
}


body.index-login-page
.campo:focus-within {
    transform:
        none !important;

    background:
        #ffffff !important;

    border-color:
        #3b82f6 !important;

    box-shadow:
        0 0 0 3px
        rgba(59, 130, 246, 0.08) !important;
}


body.index-login-page
.campo input {
    font-size:
        12px !important;
}


/* =========================================================
   BOTÃO
========================================================= */

body.index-login-page
.index-login-submit {
    height:
        47px !important;

    margin-top:
        3px !important;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    border-radius:
        10px !important;

    background:
        linear-gradient(
            100deg,
            #203a61 0%,
            #1454aa 48%,
            #0867f2 100%
        ) !important;

    box-shadow:
        0 8px 18px
        rgba(22, 69, 130, 0.17) !important;
}


/* =========================================================
   SEGURANÇA
========================================================= */

body.index-login-page
.auth-security {
    margin-top:
        17px !important;

    padding-top:
        15px !important;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    border-top:
        1px solid
        #edf1f5;

    color:
        #8492a5;

    font-size:
        10px !important;
}


body.index-login-page
.auth-security-icon {
    width:
        auto !important;

    height:
        auto !important;

    padding:
        0 !important;

    background:
        transparent !important;

    color:
        #2f7bd8;
}


body.index-login-page
.auth-security-icon i {
    font-size:
        9px !important;
}


/* =========================================================
   DARK
========================================================= */

body.dark-mode.index-login-page
.index-login-form-intro h1 {
    color:
        #f8fafc;
}


body.dark-mode.index-login-page
.index-login-form-intro p {
    color:
        #91a0b5;
}
/* =========================================================
   MODAL RESET DE SENHA — CAMVIO
========================================================= */

.modal-confirmar-reset {
    position: relative;

    width: min(440px, calc(100vw - 32px));
    padding: 30px;

    border-radius: 20px;
    border: 1px solid rgba(15, 42, 82, 0.08);

    background: #ffffff;

    box-shadow:
        0 24px 70px rgba(15, 42, 82, 0.20),
        0 4px 14px rgba(15, 42, 82, 0.06);
}


/* FECHAR */

.modal-confirmar-reset .modal-admin-close {
    position: absolute;

    top: 20px;
    right: 20px;

    width: 34px;
    height: 34px;

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

    padding: 0;

    border: 1px solid #e3eaf4;
    border-radius: 10px;

    background: #ffffff;
    color: #8190a6;

    font-size: 13px;

    cursor: pointer;

    transition: 0.2s ease;
}

.modal-confirmar-reset .modal-admin-close:hover {
    background: #f5f8fc;
    color: #0d2342;
    border-color: #d3deed;
}


/* =========================================================
   CABEÇALHO
========================================================= */

.reset-senha-topo {
    display: flex;
    align-items: center;

    gap: 14px;

    padding-right: 45px;
    margin-bottom: 22px;
}


/* ÍCONE */

.reset-senha-icon {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

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

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #edf5ff 0%,
            #e5efff 100%
        );

    color: #0867d8;

    font-size: 17px;
}


/* TÍTULO */

.reset-senha-titulo {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.reset-senha-titulo .modal-admin-label {
    margin: 0;

    color: #0872e8;

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

    letter-spacing: 1.3px;
}

.reset-senha-titulo h2 {
    margin: 0;

    color: #0b203d;

    font-size: 21px;
    font-weight: 750;

    line-height: 1.2;
}


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

.reset-senha-conteudo {
    margin: 0;
}

.reset-senha-conteudo > p {
    margin: 0 0 18px;

    color: #64748b;

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

.reset-senha-conteudo > p strong {
    color: #10233f;
    font-weight: 700;
}


/* AVISO */

.reset-senha-aviso {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    padding: 12px 14px;

    border: 1px solid #dce9fa;
    border-radius: 11px;

    background: #f7faff;

    color: #63748c;

    font-size: 11px;
    line-height: 1.5;
}

.reset-senha-aviso i {
    margin-top: 2px;

    color: #1677ea;

    font-size: 12px;
}


/* =========================================================
   AÇÕES
========================================================= */

.reset-senha-actions {
    display: grid;

    grid-template-columns: 120px 1fr;

    gap: 10px;

    margin-top: 22px;
    padding-top: 20px;

    border-top: 1px solid #edf1f6;
}


/* CANCELAR */

.reset-senha-actions .btn-admin-secundario {
    height: 44px;

    border: 1px solid #dfe6ef;
    border-radius: 10px;

    background: #ffffff;
    color: #53647b;

    font-size: 12px;
    font-weight: 650;

    cursor: pointer;

    transition: 0.2s ease;
}

.reset-senha-actions .btn-admin-secundario:hover {
    background: #f7f9fc;
    border-color: #cfd9e6;
    color: #142b49;
}


/* CONFIRMAR */

.btn-resetar-senha-confirmar {
    height: 44px;

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

    gap: 8px;

    border: 0;
    border-radius: 10px;

    background:
        linear-gradient(
            110deg,
            #18365f 0%,
            #086df0 100%
        );

    color: #ffffff;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 8px 18px rgba(0, 102, 255, 0.16);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.btn-resetar-senha-confirmar:hover {
    transform: translateY(-1px);

    box-shadow:
        0 11px 24px rgba(0, 102, 255, 0.22);
}

.btn-resetar-senha-confirmar:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}


/* =========================================================
   RESPONSIVO
========================================================= */

@media (max-width: 520px) {

    .modal-confirmar-reset {
        padding: 24px 20px;
        border-radius: 17px;
    }

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

}
/* =========================================================
   HISTÓRICO DE ACESSOS — PREMIUM
========================================================= */

.historico-acesso-item {
    position: relative;

    width: 100%;

    min-height: 92px;

    padding:
        16px
        18px;

    display: grid;

    grid-template-columns:
        46px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 14px;

    border:
        1px solid
        #dbe6f5;

    border-radius:
        14px;

    background:
        #ffffff;

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


.historico-acesso-item:hover {
    transform:
        translateY(-1px);

    border-color:
        #bcd4f5;

    box-shadow:
        0 8px 22px
        rgba(3, 19, 48, 0.06);
}


/* ÍCONE */

.historico-acesso-icon {
    width: 40px;
    height: 40px;

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

    border-radius:
        11px;

    background:
        #edf5ff;

    color:
        #0873f9;

    font-size:
        14px;
}


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

.historico-acesso-principal {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 9px;
}


.historico-acesso-identidade {
    display: flex;

    align-items: baseline;

    gap: 9px;

    min-width: 0;
}


.historico-acesso-identidade strong {
    color:
        #071936;

    font-size:
        13px;

    font-weight:
        750;

    white-space:
        nowrap;
}


.historico-acesso-identidade span {
    min-width: 0;

    color:
        #718198;

    font-size:
        10px;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* =========================================================
   DETALHES
========================================================= */

.historico-acesso-detalhes {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap:
        8px
        16px;
}


.historico-acesso-detalhe {
    display: flex;

    align-items: center;

    gap: 6px;

    min-width: 0;

    color:
        #718198;

    font-size:
        9.5px;
}


.historico-acesso-detalhe i {
    color:
        #4c8ee8;

    font-size:
        9px;
}


.historico-acesso-navegador {
    min-width: 0;

    max-width:
        620px;
}


.historico-acesso-navegador span {
    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* =========================================================
   DATA/HORA
========================================================= */

.historico-acesso-data {
    display: flex;

    align-items: center;

    gap: 7px;

    padding-left:
        14px;

    color:
        #61748d;

    font-size:
        10px;

    white-space:
        nowrap;
}


.historico-acesso-data i {
    color:
        #0873f9;

    font-size:
        10px;
}


/* =========================================================
   DARK MODE
========================================================= */

body.dark-mode
.historico-acesso-item {
    border-color:
        rgba(255, 255, 255, 0.08);

    background:
        #0b1627;
}


body.dark-mode
.historico-acesso-identidade strong {
    color:
        #f8fafc;
}


body.dark-mode
.historico-acesso-identidade span,
body.dark-mode
.historico-acesso-detalhe,
body.dark-mode
.historico-acesso-data {
    color:
        #91a0b5;
}


/* =========================================================
   RESPONSIVO
========================================================= */

@media (max-width: 760px) {

    .historico-acesso-item {
        grid-template-columns:
            40px
            1fr;
    }


    .historico-acesso-data {
        grid-column:
            2;

        padding-left:
            0;
    }


    .historico-acesso-identidade {
        flex-direction:
            column;

        gap:
            2px;
    }

}
.historico-acesso-login {
    color: #7c8da5;
    font-size: 9px;
    font-weight: 500;
}
/* =========================================================
   DARK MODE FINAL — INDEX + PRIMEIRO ACESSO
   CAMVIO
========================================================= */

/* FUNDO */

body.dark-mode.index-login-page,
body.dark-mode.primeiro-acesso-page {
    background:
        linear-gradient(
            135deg,
            #06111f 0%,
            #0a1830 50%,
            #0d203d 100%
        ) !important;

    color: #f8fafc !important;
}


/* =========================================================
   CARD
========================================================= */

body.dark-mode.index-login-page .login-card,
body.dark-mode.primeiro-acesso-page .login-card {
    background:
        rgba(10, 20, 37, 0.94) !important;

    border:
        1px solid
        rgba(255, 255, 255, 0.08) !important;

    box-shadow:
        0 24px 70px
        rgba(0, 0, 0, 0.35),
        inset 0 1px 0
        rgba(255, 255, 255, 0.035) !important;

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}


/* =========================================================
   LOGO
========================================================= */

body.dark-mode.index-login-page .logo img,
body.dark-mode.primeiro-acesso-page .logo img,
body.dark-mode.primeiro-acesso-page .primeiro-acesso-logo-premium {
    filter:
        brightness(0)
        invert(1) !important;
}


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

body.dark-mode.index-login-page
.index-login-form-intro h1,

body.dark-mode.primeiro-acesso-page
.primeiro-acesso-form-intro h1 {
    color:
        #f8fafc !important;
}


/* SUBTÍTULOS */

body.dark-mode.index-login-page
.index-login-form-intro p,

body.dark-mode.primeiro-acesso-page
.primeiro-acesso-form-intro p {
    color:
        #9aa9bd !important;
}


/* PRIMEIRO ACESSO */

body.dark-mode.primeiro-acesso-page
.primeiro-acesso-status {
    color:
        #60a5fa !important;
}


/* =========================================================
   CAMPOS
========================================================= */

body.dark-mode.index-login-page .campo,
body.dark-mode.primeiro-acesso-page .primeiro-acesso-campo {
    background:
        rgba(5, 14, 28, 0.88) !important;

    border:
        1px solid
        rgba(255, 255, 255, 0.09) !important;

    box-shadow:
        none !important;
}


body.dark-mode.index-login-page .campo:hover,
body.dark-mode.primeiro-acesso-page
.primeiro-acesso-campo:hover {
    background:
        rgba(8, 20, 38, 0.98) !important;

    border-color:
        rgba(96, 165, 250, 0.36) !important;
}


body.dark-mode.index-login-page .campo:focus-within,
body.dark-mode.primeiro-acesso-page
.primeiro-acesso-campo:focus-within {
    background:
        #071529 !important;

    border-color:
        #3b82f6 !important;

    box-shadow:
        0 0 0 3px
        rgba(59, 130, 246, 0.11) !important;
}


/* =========================================================
   INPUTS
========================================================= */

body.dark-mode.index-login-page .campo input,
body.dark-mode.primeiro-acesso-page
.primeiro-acesso-campo input {
    color:
        #f8fafc !important;

    background:
        transparent !important;
}


body.dark-mode.index-login-page
.campo input::placeholder,

body.dark-mode.primeiro-acesso-page
.primeiro-acesso-campo input::placeholder {
    color:
        #718096 !important;
}


/* =========================================================
   ÍCONES DOS CAMPOS
========================================================= */

body.dark-mode.index-login-page
.campo > i:first-child,

body.dark-mode.primeiro-acesso-page
.primeiro-acesso-campo > i:first-child {
    color:
        #8295ae !important;
}


body.dark-mode.index-login-page
.campo:focus-within > i:first-child,

body.dark-mode.primeiro-acesso-page
.primeiro-acesso-campo:focus-within > i:first-child {
    color:
        #60a5fa !important;
}


/* =========================================================
   OLHO
========================================================= */

body.dark-mode.index-login-page #olho,
body.dark-mode.primeiro-acesso-page
.toggle-senha {
    color:
        #8295ae !important;

    background:
        transparent !important;
}


body.dark-mode.index-login-page #olho:hover,
body.dark-mode.primeiro-acesso-page
.toggle-senha:hover {
    color:
        #60a5fa !important;

    background:
        rgba(59, 130, 246, 0.10) !important;
}


/* =========================================================
   DICA DA SENHA
========================================================= */

body.dark-mode.primeiro-acesso-page
.auth-password-hint {
    color:
        #91a0b5 !important;
}


body.dark-mode.primeiro-acesso-page
.auth-password-hint i {
    color:
        #60a5fa !important;
}


body.dark-mode.primeiro-acesso-page
.auth-password-hint strong {
    color:
        #79b6ff !important;
}


/* =========================================================
   BOTÃO
========================================================= */

body.dark-mode.index-login-page
.entrar-btn,

body.dark-mode.primeiro-acesso-page
.primeiro-acesso-submit {
    background:
        linear-gradient(
            100deg,
            #16355d 0%,
            #1459b4 45%,
            #0877ff 100%
        ) !important;

    color:
        #ffffff !important;

    box-shadow:
        0 10px 24px
        rgba(0, 102, 255, 0.22) !important;
}


/* =========================================================
   RODAPÉ DE SEGURANÇA
========================================================= */

body.dark-mode.index-login-page
.auth-security,

body.dark-mode.primeiro-acesso-page
.auth-security {
    color:
        #91a0b5 !important;

    border-top-color:
        rgba(255, 255, 255, 0.07) !important;
}


body.dark-mode.index-login-page
.auth-security-icon,

body.dark-mode.primeiro-acesso-page
.auth-security-icon {
    color:
        #60a5fa !important;

    background:
        transparent !important;
}


/* =========================================================
   ERRO
========================================================= */

body.dark-mode.index-login-page
#mensagemErro,

body.dark-mode.primeiro-acesso-page
#mensagemErro {
    border-color:
        rgba(248, 113, 113, 0.18) !important;

    background:
        rgba(127, 29, 29, 0.18) !important;

    color:
        #fca5a5 !important;
}


/* =========================================================
   BOTÃO DE TEMA
========================================================= */

body.dark-mode.index-login-page
#themeToggle,

body.dark-mode.primeiro-acesso-page
#themeToggle {
    background:
        rgba(10, 20, 37, 0.90) !important;

    border:
        1px solid
        rgba(255, 255, 255, 0.09) !important;

    color:
        #dbeafe !important;

    box-shadow:
        0 8px 22px
        rgba(0, 0, 0, 0.20) !important;
}


/* =========================================================
   MODAL SUCESSO — PRIMEIRO ACESSO
========================================================= */

body.dark-mode.primeiro-acesso-page
.modal-card {
    background:
        #0b1627 !important;

    border:
        1px solid
        rgba(255, 255, 255, 0.08) !important;

    color:
        #f8fafc !important;
}


body.dark-mode.primeiro-acesso-page
.modal-card h2 {
    color:
        #f8fafc !important;
}


body.dark-mode.primeiro-acesso-page
.modal-card p {
    color:
        #91a0b5 !important;
}
/* =========================================================
   CAMVIO — SETORES NA TOPBAR
   COT / CSA / CAT
========================================================= */

.topbar {
    position: relative;
}






/* =========================================================
   REMOVE APARÊNCIA NATIVA DO BOTÃO
========================================================= */

.topbar-setor-btn {
    appearance: none !important;
    -webkit-appearance: none !important;
}


/* =========================================================
   HOVER
========================================================= */

.topbar-setor-btn:hover {
    color: #ffffff !important;

    transform: translateY(-1px) !important;
}




/* =========================================================
   EFEITO SUAVE NO ATIVO
========================================================= */

.topbar-setor-btn.ativo {
    text-shadow:
        0 0 16px rgba(0, 102, 255, 0.35) !important;
}


/* =========================================================
   FOCO
========================================================= */

.topbar-setor-btn:focus-visible {
    outline: 2px solid rgba(0, 102, 255, 0.55) !important;
    outline-offset: 4px !important;

    border-radius: 6px !important;
}


/* =========================================================
   RESPONSIVO
========================================================= */

@media (max-width: 900px) {

    .topbar-setores {
        gap: 18px !important;
    }


    .topbar-setor-btn {
        min-width: 36px !important;

        font-size: 11px !important;
    }

}


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

@media (max-width: 650px) {

    .topbar-setores {
        position: static !important;

        transform: none !important;

        margin-left: auto !important;
        margin-right: 12px !important;

        gap: 14px !important;
    }


    .topbar-setor-btn {
        min-width: 32px !important;

        font-size: 10px !important;
    }

}
/* =========================================================
   CAMVIO — SELETOR DE SETORES NA TOPBAR
========================================================= */


/* =========================================================
   WRAPPER
========================================================= */

.setores-topbar-wrapper {
    position: relative !important;

    display: none;

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

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

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

    z-index: 5000 !important;
}


/* quando o JS liberar */
.setores-topbar-wrapper[style*="block"] {
    display: flex !important;
}


/* =========================================================
   BOTÃO PRINCIPAL — MESMO PADRÃO DA TOPBAR
========================================================= */

.setores-topbar-toggle {
    position: relative !important;

    width: 34px !important;
    height: 34px !important;

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

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

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

    background: transparent !important;

    color: #ffffff !important;

    font-size: 14px !important;

    cursor: pointer !important;

    transition:
        background 0.18s ease,
        color 0.18s ease !important;
}


.setores-topbar-toggle:hover {
    background: rgba(255,255,255,0.08) !important;
}


.setores-topbar-wrapper.aberto
.setores-topbar-toggle {
    background: rgba(0,102,255,0.14) !important;

    color: #5c9cff !important;
}


/* =========================================================
   DROPDOWN
========================================================= */

.setores-topbar-dropdown {
    position: absolute !important;

    top: calc(100% + 10px) !important;
    right: 0 !important;
    left: auto !important;

    width: 270px !important;

    display: none !important;

    padding: 10px !important;

    background: #ffffff !important;

    border: 1px solid #e4eaf2 !important;
    border-radius: 16px !important;

    box-shadow:
        0 22px 55px rgba(3,19,48,0.18),
        0 6px 18px rgba(3,19,48,0.08) !important;

    z-index: 99999 !important;
}


.setores-topbar-dropdown.aberto {
    display: block !important;
}


/* =========================================================
   CABEÇALHO
========================================================= */

.setores-topbar-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 16px !important;

    padding: 10px 10px 14px !important;
    margin-bottom: 6px !important;

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


.setores-topbar-header-info {
    display: flex !important;
    flex-direction: column !important;

    gap: 3px !important;
}


.setores-topbar-label {
    color: #0066ff !important;

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

    letter-spacing: 1.4px !important;
}


.setores-topbar-header strong {
    color: #081a3b !important;

    font-size: 14px !important;
    font-weight: 800 !important;
}


.setor-topbar-atual {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

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

    padding: 0 10px !important;

    background: #edf4ff !important;

    border-radius: 999px !important;

    color: #0066ff !important;

    font-size: 10px !important;
    font-weight: 800 !important;
}


/* =========================================================
   IMPORTANTE:
   RESET DO CSS ANTIGO DE .topbar-setores
========================================================= */

.setores-topbar-dropdown .topbar-setores {
    position: static !important;

    top: auto !important;
    left: auto !important;
    right: auto !important;

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

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;

    gap: 4px !important;

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

    transform: none !important;

    background: transparent !important;
}


/* =========================================================
   BOTÃO DE CADA SETOR
========================================================= */

.setores-topbar-dropdown .topbar-setor-btn {
    position: relative !important;

    width: 100% !important;
    min-width: 0 !important;
    height: 54px !important;

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

    gap: 11px !important;

    padding: 7px 10px !important;

    margin: 0 !important;

    background: transparent !important;

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

    color: #33435f !important;

    text-align: left !important;

    cursor: pointer !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    transform: none !important;
    text-shadow: none !important;

    transition:
        background 0.16s ease,
        color 0.16s ease !important;
}


/* REMOVE BARRA AZUL ANTIGA */

.setores-topbar-dropdown
.topbar-setor-btn::after {
    display: none !important;
    content: none !important;
}


/* =========================================================
   HOVER
========================================================= */

.setores-topbar-dropdown
.topbar-setor-btn:hover {
    background: #f5f8fc !important;

    color: #071a3d !important;

    transform: none !important;
}


/* =========================================================
   SETOR ATIVO
========================================================= */

.setores-topbar-dropdown
.topbar-setor-btn.ativo {
    background: #edf4ff !important;

    color: #0066ff !important;

    text-shadow: none !important;
}


/* =========================================================
   ÍCONE
========================================================= */

.topbar-setor-icon {
    width: 34px !important;
    height: 34px !important;

    flex: 0 0 34px !important;

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

    border-radius: 9px !important;

    background: #f2f6fb !important;

    color: #61728e !important;

    font-size: 12px !important;
}


.topbar-setor-btn.ativo
.topbar-setor-icon {
    background: #0066ff !important;

    color: #ffffff !important;
}


/* =========================================================
   NOME + DESCRIÇÃO
========================================================= */

.topbar-setor-info {
    min-width: 0 !important;
    flex: 1 !important;

    display: flex !important;
    flex-direction: column !important;

    gap: 2px !important;
}


.topbar-setor-info strong {
    color: inherit !important;

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

    line-height: 1.2 !important;
}


.topbar-setor-info small {
    color: #8290a6 !important;

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

    line-height: 1.2 !important;
}


/* =========================================================
   CHECK
========================================================= */

.topbar-setor-check {
    width: 22px !important;
    height: 22px !important;

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

    flex: 0 0 22px !important;

    border-radius: 50% !important;

    background: #0066ff !important;

    color: #ffffff !important;

    font-size: 9px !important;
}


/* =========================================================
   DARK MODE
========================================================= */

body.dark-mode
.setores-topbar-dropdown {
    background: #0e1627 !important;

    border-color: #243249 !important;

    box-shadow:
        0 25px 60px rgba(0,0,0,0.50) !important;
}


body.dark-mode
.setores-topbar-header {
    border-bottom-color:
        rgba(255,255,255,0.07) !important;
}


body.dark-mode
.setores-topbar-header strong {
    color: #f4f7fc !important;
}


body.dark-mode
.setor-topbar-atual {
    background: rgba(0,102,255,0.15) !important;
}


body.dark-mode
.setores-topbar-dropdown
.topbar-setor-btn {
    color: #b8c2d2 !important;
}


body.dark-mode
.setores-topbar-dropdown
.topbar-setor-btn:hover {
    background: #151f32 !important;

    color: #ffffff !important;
}


body.dark-mode
.setores-topbar-dropdown
.topbar-setor-btn.ativo {
    background: rgba(0,102,255,0.13) !important;

    color: #6ea6ff !important;
}


body.dark-mode
.topbar-setor-icon {
    background: #172236 !important;

    color: #9baac0 !important;
}


body.dark-mode
.topbar-setor-btn.ativo
.topbar-setor-icon {
    background: #0066ff !important;

    color: #ffffff !important;
}
/* =========================================================
   CAMVIO — RECORTE DA BARRA INFERIOR DO POWER BI
========================================================= */

.cliente-page .dashboard-frame-container {
    overflow: hidden !important;
}

/*
   Mantém o tamanho atual do BI (120%),
   mas desloca o iframe para baixo.

   Com isso, a barra inferior do Power BI
   fica para fora da área visível.
*/
.cliente-page #dashboardFrame {
    top: calc(50% + 25px) !important;
}
/* =========================================================
   LOGO CAMVIO — TOPBAR CLIENTE
========================================================= */

.cliente-page .topbar .top-logo {
    width: 135px !important;
    height: auto !important;

    max-width: 135px !important;
    max-height: 34px !important;

    display: block !important;

    object-fit: contain !important;

    /*
       LOGOTOP é escura.
       Na topbar escura, transforma em branca.
    */
    filter:
        brightness(0)
        invert(1) !important;
}
/* =========================================================
   CAMVIO — LOGO PADRÃO DAS TOPBARS
========================================================= */

.topbar .top-logo {
    width: 130px !important;
    height: 34px !important;

    min-width: 130px !important;
    max-width: 130px !important;

    min-height: 34px !important;
    max-height: 34px !important;

    object-fit: contain !important;

    display: block !important;

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

    filter: none !important;
}
/* =========================================================
   CAMVIO — LOGO PADRÃO DAS TOPBARS
========================================================= */

.topbar .top-logo {
    width: 130px !important;
    height: 34px !important;

    min-width: 130px !important;
    max-width: 130px !important;

    min-height: 34px !important;
    max-height: 34px !important;

    object-fit: contain !important;

    display: block !important;

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

    filter: none !important;
}
/* =========================================================
   LOGO TOPBAR — COR ORIGINAL EM TODAS AS PÁGINAS
========================================================= */

.topbar .top-logo,
.cliente-page .topbar .top-logo,
.menu-page .topbar .top-logo {
    filter: none !important;

    -webkit-filter: none !important;

    opacity: 1 !important;

    mix-blend-mode: normal !important;
}
/* =========================================================
   INDEX — CENTRALIZAR LOGIN
========================================================= */

body.index-login-page .index-login-form-intro {
    text-align: center !important;
}

body.index-login-page .index-login-form-intro h1 {
    text-align: center !important;

    font-weight: 400 !important;

    margin-bottom: 6px !important;
}

body.index-login-page .index-login-form-intro p {
    text-align: center !important;

    margin-left: auto !important;
    margin-right: auto !important;
}
/* =========================================================
   INDEX — TOPO MAIS CLEAN
========================================================= */

body.index-login-page .index-login-logo {
    margin-bottom: 18px !important;
}

body.index-login-page .index-login-logo img,
body.index-login-page #logo {
    width: 165px !important;
    max-width: 165px !important;
}

body.index-login-page .index-login-form-intro {
    margin-bottom: 20px !important;
    text-align: center !important;
}

body.index-login-page .index-login-form-intro p {
    margin: 0 !important;

    color: #718198 !important;

    font-size: 11px !important;
    font-weight: 400 !important;

    text-align: center !important;
}
/* =========================================================
   CAMVIO — LOGIN PREMIUM 2026
========================================================= */

body.index-login-page .index-login-card {
    width: 380px !important;
    max-width: calc(100vw - 32px) !important;

    padding: 34px 32px 26px !important;

    border: 1px solid rgba(3, 19, 48, 0.07) !important;
    border-radius: 24px !important;

    background:
        rgba(255, 255, 255, 0.92) !important;

    box-shadow:
        0 30px 80px rgba(3, 19, 48, 0.12),
        0 8px 24px rgba(3, 19, 48, 0.05) !important;

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}


/* =========================================================
   MARCA
========================================================= */

body.index-login-page .index-login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 0 !important;

    margin-bottom: 28px;
}

body.index-login-page .index-login-brand-label {
    margin-top: -10px !important;

    color: #7c8ca2;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}

body.index-login-page .index-login-logo-img {
    width: 165px !important;
    max-width: 165px !important;

    height: auto !important;

    display: block;

    object-fit: contain;

    filter: none !important;
}


body.index-login-page .index-login-brand-label {
    color: #7c8ca2;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


/* =========================================================
   CABEÇALHO
========================================================= */

body.index-login-page .index-login-form-intro {
    margin-bottom: 25px !important;

    text-align: left !important;
}


body.index-login-page .index-login-form-intro h1 {
    margin: 0 0 6px !important;

    color: #071936;

    font-size: 21px !important;
    font-weight: 650 !important;

    line-height: 1.2;

    letter-spacing: -0.45px;

    text-align: left !important;
}


body.index-login-page .index-login-form-intro p {
    margin: 0 !important;

    color: #7a899d;

    font-size: 11px !important;
    font-weight: 400 !important;

    line-height: 1.5;

    text-align: left !important;
}


/* =========================================================
   GRUPO DE CAMPO
========================================================= */

body.index-login-page .login-field-group {
    margin-bottom: 16px;
}


body.index-login-page .login-field-group label {
    display: block;

    margin-bottom: 7px;

    color: #46566d;

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


/* =========================================================
   CAMPO
========================================================= */

body.index-login-page .campo {
    height: 50px !important;

    margin: 0 !important;

    padding: 0 14px !important;

    display: flex;
    align-items: center;

    gap: 11px;

    border: 1px solid #dbe4ef !important;
    border-radius: 12px !important;

    background: #fbfcfe !important;

    box-shadow: none !important;

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


body.index-login-page .campo:hover {
    background: #ffffff !important;

    border-color: #c8d7e8 !important;
}


body.index-login-page .campo:focus-within {
    transform: none !important;

    background: #ffffff !important;

    border-color: #3b82f6 !important;

    box-shadow:
        0 0 0 4px rgba(59, 130, 246, 0.08) !important;
}


/* =========================================================
   ÍCONE
========================================================= */

body.index-login-page .campo > i:first-child {
    width: 18px;

    color: #8596aa !important;

    font-size: 13px !important;

    text-align: center;
}


/* =========================================================
   INPUT
========================================================= */

body.index-login-page .campo input {
    flex: 1;

    min-width: 0;

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

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    color: #12233e !important;

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

    box-shadow: none !important;
}


body.index-login-page .campo input::placeholder {
    color: #9aa8ba !important;
}


/* =========================================================
   MOSTRAR SENHA
========================================================= */

body.index-login-page .login-password-toggle {
    width: 30px;
    height: 30px;

    padding: 0;

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

    border: 0;
    border-radius: 8px;

    background: transparent;

    color: #8090a4;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease;
}


body.index-login-page .login-password-toggle:hover {
    background: #edf4ff;

    color: #1762b8;
}


body.index-login-page .login-password-toggle i {
    font-size: 12px;
}


/* =========================================================
   BOTÃO
========================================================= */

body.index-login-page .index-login-submit {
    width: 100%;

    height: 48px !important;

    margin-top: 5px !important;

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

    gap: 9px;

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

    background:
        linear-gradient(
            100deg,
            #173862 0%,
            #0c5cca 48%,
            #0873ff 100%
        ) !important;

    color: #ffffff !important;

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

    letter-spacing: 0.02em !important;

    box-shadow:
        0 10px 24px rgba(0, 102, 255, 0.20) !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}


body.index-login-page .index-login-submit:hover {
    transform: translateY(-2px);

    filter: brightness(1.04);

    box-shadow:
        0 14px 30px rgba(0, 102, 255, 0.28) !important;
}


/* =========================================================
   SEGURANÇA
========================================================= */

body.index-login-page .auth-security {
    margin-top: 20px !important;

    padding-top: 17px !important;

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

    gap: 7px;

    border-top: 1px solid #edf1f6;

    color: #8795a8;

    font-size: 9px !important;
}


body.index-login-page .auth-security > i {
    color: #3885e8;

    font-size: 9px;
}


/* =========================================================
   DARK
========================================================= */

body.dark-mode.index-login-page .index-login-card {
    background:
        rgba(10, 20, 37, 0.95) !important;

    border-color:
        rgba(255, 255, 255, 0.07) !important;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.42) !important;
}


body.dark-mode.index-login-page
.index-login-form-intro h1 {
    color: #f8fafc;
}


body.dark-mode.index-login-page
.index-login-form-intro p,
body.dark-mode.index-login-page
.index-login-brand-label,
body.dark-mode.index-login-page
.login-field-group label,
body.dark-mode.index-login-page
.auth-security {
    color: #91a0b5;
}


body.dark-mode.index-login-page .campo {
    background:
        rgba(6, 15, 29, 0.90) !important;

    border-color:
        rgba(255, 255, 255, 0.08) !important;
}


body.dark-mode.index-login-page .campo input {
    color: #f8fafc !important;
}
/* =========================================================
   CAMVIO — LOGIN COMPACTO / PROFISSIONAL
========================================================= */

/* CARD */
body.index-login-page .index-login-card {
    width: 350px !important;
    max-width: calc(100vw - 32px) !important;

    padding: 26px 28px 22px !important;

    border-radius: 20px !important;

    background: rgba(255, 255, 255, 0.96) !important;

    border: 1px solid rgba(3, 19, 48, 0.06) !important;

    box-shadow:
        0 24px 60px rgba(3, 19, 48, 0.10),
        0 4px 14px rgba(3, 19, 48, 0.04) !important;
}


/* LOGO + PORTAL CAMVIO */
body.index-login-page .index-login-brand {
    gap: 0 !important;
    margin-bottom: 20px !important;
}

body.index-login-page .index-login-logo-img {
    width: 150px !important;
    max-width: 150px !important;
}

body.index-login-page .index-login-brand-label {
    margin-top: -10px !important;

    font-size: 8px !important;
    letter-spacing: 0.17em !important;
}


/* TÍTULO */
body.index-login-page .index-login-form-intro {
    margin-bottom: 20px !important;
}

body.index-login-page .index-login-form-intro h1 {
    margin: 0 0 5px !important;

    font-size: 19px !important;
    font-weight: 500 !important;

    text-align: center !important;
}

body.index-login-page .index-login-form-intro p {
    margin: 0 !important;

    font-size: 10px !important;

    text-align: center !important;
}


/* ESPAÇO ENTRE OS CAMPOS */
body.index-login-page .login-field-group {
    margin-bottom: 13px !important;
}

body.index-login-page .login-field-group label {
    margin-bottom: 6px !important;

    font-size: 9px !important;
}


/* INPUTS */
body.index-login-page .campo {
    height: 44px !important;

    padding: 0 13px !important;

    border-radius: 10px !important;
}

body.index-login-page .campo input {
    font-size: 11px !important;
}


/* BOTÃO */
body.index-login-page .index-login-submit {
    height: 44px !important;

    margin-top: 3px !important;

    border-radius: 10px !important;

    font-size: 10px !important;
}


/* SEGURANÇA */
body.index-login-page .auth-security {
    margin-top: 17px !important;
    padding-top: 14px !important;

    font-size: 8px !important;
}
/* =========================================================
   INDEX — FUNDO PREMIUM CAMVIO
========================================================= */

body.index-login-page {
    position: relative;
    overflow: hidden;
}


/* GLOW ATRÁS DO LOGIN */
body.index-login-page::before {
    content: "";

    position: fixed;

    width: 520px;
    height: 520px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    background:
        radial-gradient(
            circle,
            rgba(0, 102, 255, 0.12) 0%,
            rgba(0, 102, 255, 0.05) 35%,
            transparent 70%
        );

    filter: blur(25px);

    pointer-events: none;
    z-index: 0;
}


/* CARD ACIMA DO EFEITO */
body.index-login-page .container {
    position: relative;
    z-index: 1;
}
/* =========================================================
   CAMVIO — ACABAMENTO PREMIUM INDEX
========================================================= */

/* fundo */
body.index-login-page {
    position: relative;
    overflow: hidden;
}


/* glow atrás do card */
body.index-login-page::after {
    content: "";

    position: fixed;

    width: 560px;
    height: 560px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    background:
        radial-gradient(
            circle,
            rgba(0, 102, 255, 0.12) 0%,
            rgba(0, 102, 255, 0.055) 38%,
            transparent 72%
        );

    filter: blur(28px);

    pointer-events: none;

    z-index: 0;
}


/* card acima do efeito */
body.index-login-page .container {
    position: relative;
    z-index: 2;
}


/* deixa título mais refinado */
body.index-login-page .index-login-form-intro h1 {
    font-size: 18px !important;
    font-weight: 600 !important;

    letter-spacing: -0.3px !important;
}


/* subtítulo */
body.index-login-page .index-login-form-intro p {
    margin-top: 5px !important;

    font-size: 9.5px !important;
}


/* rodapé institucional */
.index-footer-brand {
    position: fixed;

    left: 50%;
    bottom: 18px;

    transform: translateX(-50%);

    z-index: 3;

    display: flex;
    flex-direction: column;

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

    gap: 3px;

    color: #8090a5;

    text-align: center;

    pointer-events: none;
}


.index-footer-brand span {
    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.10em;
}


.index-footer-brand small {
    font-size: 8px;

    font-weight: 400;

    opacity: 0.78;
}


/* dark */
body.dark-mode .index-footer-brand {
    color: #91a0b5;
}


/* mobile */
@media (max-width: 560px) {

    .index-footer-brand {
        bottom: 10px;
    }

    .index-footer-brand small {
        display: none;
    }

}

/* =========================================================
   CAMVIO — INDEX LOGIN FINAL CLEAN
   Compatível com o index.html atual
   Este bloco fica no FINAL para neutralizar regras antigas.
========================================================= */

body.index-login-page {
    position: relative;
    min-height: 100vh;
    overflow: hidden;

    background:
        radial-gradient(circle at 18% 18%, rgba(0, 102, 255, 0.11), transparent 30%),
        radial-gradient(circle at 82% 82%, rgba(53, 160, 255, 0.09), transparent 32%),
        linear-gradient(135deg, #eef5ff 0%, #fbfdff 50%, #edf4ff 100%) !important;
}


/* Grade bem sutil */
body.index-login-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    opacity: 0.30;

    background-image:
        linear-gradient(rgba(0, 102, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 102, 255, 0.04) 1px, transparent 1px);

    background-size: 42px 42px;
}


/* Glow central */
body.index-login-page::after {
    content: "";
    position: fixed;

    width: 500px;
    height: 500px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 102, 255, 0.10) 0%,
            rgba(0, 102, 255, 0.035) 42%,
            transparent 72%
        );

    filter: blur(28px);

    pointer-events: none;
    z-index: 0;
}


/* Container */
body.index-login-page .container {
    position: relative;
    z-index: 2;

    width: 100%;
    min-height: 100vh;

    padding: 28px 20px 72px;

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


/* Card */
body.index-login-page .index-login-card {
    position: relative;

    width: 330px !important;
    max-width: calc(100vw - 30px) !important;

    padding: 30px 28px 22px !important;

    overflow: hidden;

    border: 1px solid rgba(3, 19, 48, 0.055) !important;
    border-radius: 18px !important;

    background: rgba(255, 255, 255, 0.965) !important;

    box-shadow:
        0 22px 60px rgba(3, 19, 48, 0.10),
        0 5px 16px rgba(3, 19, 48, 0.035) !important;

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}


/* Linha premium superior */
body.index-login-page .index-login-card::before {
    content: "";

    position: absolute;

    left: 32px;
    right: 32px;
    top: 0;

    height: 1.5px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0, 102, 255, 0.72),
            rgba(53, 160, 255, 0.46),
            transparent
        );
}


/* Remove glow interno antigo do card */
body.index-login-page .index-login-card::after {
    display: none !important;
    content: none !important;
}


/* =========================================================
   MARCA
========================================================= */

body.index-login-page .index-login-brand {
    width: 100%;

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

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


body.index-login-page .index-login-logo-img,
body.index-login-page #logo {
    display: block !important;

    width: 154px !important;
    max-width: 154px !important;
    height: auto !important;

    margin: 0 auto !important;
    padding: 0 !important;

    object-fit: contain !important;

    filter: none !important;
}


/* Se sobrar label antiga em cache/HTML antigo, esconde */
body.index-login-page .index-login-brand-label {
    display: none !important;
}


/* =========================================================
   INTRODUÇÃO
========================================================= */

body.index-login-page .index-login-form-intro {
    margin: 0 0 18px !important;
    padding: 0 !important;

    text-align: center !important;
}


body.index-login-page .index-login-form-intro h1 {
    display: none !important;
}


body.index-login-page .index-login-form-intro p {
    max-width: 250px;

    margin: 0 auto !important;

    color: #718198 !important;

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

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


/* =========================================================
   FORMULÁRIO
========================================================= */

body.index-login-page #loginForm {
    position: relative;
    z-index: 2;

    width: 100%;
}


/* Campos */
body.index-login-page .campo {
    position: relative;

    width: 100%;
    height: 46px !important;

    margin: 0 0 11px !important;
    padding: 0 13px !important;

    display: flex;
    align-items: center;

    gap: 10px;

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

    background: #fbfcfe !important;

    box-shadow: none !important;

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


body.index-login-page .campo:hover {
    background: #ffffff !important;
    border-color: #c8d7e8 !important;
}


body.index-login-page .campo:focus-within {
    transform: none !important;

    background: #ffffff !important;
    border-color: #3b82f6 !important;

    box-shadow:
        0 0 0 3px rgba(59, 130, 246, 0.075) !important;
}


/* Ícones */
body.index-login-page .campo > i:first-child {
    flex: 0 0 17px;

    width: 17px !important;

    color: #8797aa !important;

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


body.index-login-page .campo:focus-within > i:first-child {
    color: #2f7bd8 !important;
    transform: none !important;
}


/* Inputs */
body.index-login-page .campo input {
    flex: 1;
    min-width: 0;

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

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    color: #10233f !important;

    font-size: 11.5px !important;
    font-weight: 500 !important;

    box-shadow: none !important;
}


body.index-login-page .campo input::placeholder {
    color: #97a5b7 !important;
    font-weight: 400 !important;
}


/* Olho */
body.index-login-page .login-password-toggle,
body.index-login-page #olho {
    appearance: none !important;
    -webkit-appearance: none !important;

    flex: 0 0 28px;

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

    margin: 0 0 0 auto !important;
    padding: 0 !important;

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

    border: 0 !important;
    outline: 0 !important;
    border-radius: 7px !important;

    background: transparent !important;

    color: #8292a6 !important;

    box-shadow: none !important;

    cursor: pointer;
}


body.index-login-page .login-password-toggle:hover,
body.index-login-page #olho:hover {
    background: #eef4fb !important;
    color: #1762b8 !important;
}


body.index-login-page .login-password-toggle i,
body.index-login-page #olho i {
    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;

    font-size: 11.5px !important;
}


/* Erro */
body.index-login-page #mensagemErro {
    display: none;

    width: 100%;

    margin: 0 0 10px !important;
    padding: 8px 10px !important;

    border: 1px solid rgba(220, 38, 38, 0.15) !important;
    border-radius: 8px !important;

    background: #fff6f6 !important;

    color: #b42318 !important;

    font-size: 9px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}


body.index-login-page #mensagemErro:not(:empty) {
    display: block;
}


/* Botão */
body.index-login-page .index-login-submit,
body.index-login-page .entrar-btn {
    position: relative;

    width: 100%;
    height: 45px !important;

    margin: 3px 0 0 !important;
    padding: 0 18px !important;

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

    gap: 8px;

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

    background:
        linear-gradient(
            100deg,
            #1d3b63 0%,
            #1457b3 48%,
            #0874ff 100%
        ) !important;

    color: #ffffff !important;

    font-size: 10.5px !important;
    font-weight: 750 !important;

    line-height: 1 !important;
    letter-spacing: 0.025em !important;

    cursor: pointer;

    box-shadow:
        0 9px 20px rgba(20, 84, 170, 0.18) !important;

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


body.index-login-page .index-login-submit:hover,
body.index-login-page .entrar-btn:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.025) !important;

    box-shadow:
        0 12px 24px rgba(20, 84, 170, 0.23) !important;
}


body.index-login-page .index-login-submit::before,
body.index-login-page .entrar-btn::before {
    display: none !important;
    content: none !important;
}


/* Segurança */
body.index-login-page .auth-security {
    width: 100%;

    margin: 16px 0 0 !important;
    padding: 13px 0 0 !important;

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

    gap: 6px;

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

    color: #8996a8 !important;

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


body.index-login-page .auth-security > i {
    color: #3885e8 !important;
    font-size: 8px !important;
}


/* =========================================================
   ASSINATURA EXTERNA
========================================================= */

body.index-login-page .index-footer-brand {
    position: fixed;

    left: 50%;
    bottom: 16px;

    transform: translateX(-50%);

    z-index: 3;

    display: flex;
    flex-direction: column;

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

    gap: 3px;

    color: #7f8fa3;

    text-align: center;

    pointer-events: none;
}


body.index-login-page .index-footer-brand span {
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: .10em !important;
}


body.index-login-page .index-footer-brand small {
    font-size: 8px !important;
    font-weight: 400 !important;
    opacity: .72;
}


/* =========================================================
   DARK MODE — INDEX
========================================================= */

body.dark-mode.index-login-page {
    background:
        radial-gradient(circle at 18% 18%, rgba(0, 102, 255, 0.16), transparent 30%),
        radial-gradient(circle at 82% 82%, rgba(35, 105, 210, 0.12), transparent 32%),
        linear-gradient(135deg, #06111f 0%, #0a1830 52%, #081424 100%) !important;
}


body.dark-mode.index-login-page .index-login-card {
    background: rgba(10, 20, 37, 0.95) !important;

    border-color: rgba(255, 255, 255, 0.075) !important;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.38) !important;
}


/* Mantém a logo original; não transforma o azul em branco */
body.dark-mode.index-login-page .index-login-logo-img,
body.dark-mode.index-login-page #logo {
    filter: none !important;
}


body.dark-mode.index-login-page .index-login-form-intro p {
    color: #95a4b8 !important;
}


body.dark-mode.index-login-page .campo {
    background: rgba(5, 14, 28, 0.88) !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
}


body.dark-mode.index-login-page .campo:hover {
    background: rgba(8, 20, 38, 0.98) !important;
    border-color: rgba(96, 165, 250, 0.30) !important;
}


body.dark-mode.index-login-page .campo:focus-within {
    background: #071529 !important;
    border-color: #3b82f6 !important;

    box-shadow:
        0 0 0 3px rgba(59, 130, 246, 0.11) !important;
}


body.dark-mode.index-login-page .campo input {
    color: #f8fafc !important;
}


body.dark-mode.index-login-page .campo input::placeholder {
    color: #718096 !important;
}


body.dark-mode.index-login-page .auth-security {
    color: #91a0b5 !important;
    border-top-color: rgba(255, 255, 255, 0.07) !important;
}


body.dark-mode.index-login-page .index-footer-brand {
    color: #91a0b5 !important;
}


/* =========================================================
   MOBILE — INDEX
========================================================= */

@media (max-width: 560px) {

    body.index-login-page .container {
        padding:
            70px 15px
            82px !important;
    }


    body.index-login-page .index-login-card {
        width: 100% !important;
        max-width: 340px !important;

        padding:
            27px 22px
            21px !important;

        border-radius:
            17px !important;
    }


    body.index-login-page .index-login-logo-img,
    body.index-login-page #logo {
        width:
            145px !important;

        max-width:
            145px !important;
    }


    body.index-login-page .index-footer-brand {
        bottom:
            10px !important;
    }


    body.index-login-page .index-footer-brand small {
        display:
            none;
    }

}

/* =========================================================
   CAMVIO — INDEX LOGIN FINAL
   AJUSTE DE LEGIBILIDADE
   Mantém layout, proporções e funcionamento existentes.
========================================================= */

/* Texto de apoio abaixo da logo */
body.index-login-page .index-login-form-intro p {
    font-size: 11.5px !important;
    line-height: 1.55 !important;
    color: #667892 !important;
}

/* Texto dos inputs */
body.index-login-page .campo input {
    font-size: 12.5px !important;
}

/* Placeholders */
body.index-login-page .campo input::placeholder {
    font-size: 12.5px !important;
    color: #8797aa !important;
}

/* Botão principal */
body.index-login-page .index-login-submit,
body.index-login-page .entrar-btn {
    font-size: 11.5px !important;
}

/* Segurança dentro do card */
body.index-login-page .auth-security {
    font-size: 9.5px !important;
    gap: 7px !important;
    line-height: 1.4 !important;
}

body.index-login-page .auth-security > i {
    font-size: 9px !important;
}

/* Rodapé institucional externo */
body.index-login-page .index-footer-brand {
    gap: 5px !important;
    bottom: 15px !important;
    line-height: 1.35 !important;
}

body.index-login-page .index-footer-brand span {
    font-size: 9px !important;
    letter-spacing: .11em !important;
}

body.index-login-page .index-footer-brand small {
    font-size: 9px !important;
    opacity: .82 !important;
    white-space: nowrap;
}

/* Dark mode: mantém contraste suficiente */
body.dark-mode.index-login-page .index-login-form-intro p {
    color: #a7b4c5 !important;
}

body.dark-mode.index-login-page .auth-security,
body.dark-mode.index-login-page .index-footer-brand {
    color: #a1afc2 !important;
}

/* Mobile */
@media (max-width: 560px) {

    body.index-login-page .index-login-form-intro p {
        font-size: 11px !important;
    }

    body.index-login-page .campo input,
    body.index-login-page .campo input::placeholder {
        font-size: 12px !important;
    }

    body.index-login-page .auth-security {
        font-size: 9px !important;
    }

    body.index-login-page .index-footer-brand span {
        font-size: 8.5px !important;
    }
}


/* =========================================================
   BOTÃO TEMA — COMPACTO
========================================================= */

#themeToggle {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;

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

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

    border: none !important;
    border-radius: 8px !important;

    background: transparent !important;

    box-shadow: none !important;

    cursor: pointer;
}

#themeToggle i {
    font-size: 14px !important;
}
/* FORÇAR TEXTO PRIMEIRO ACESSO */
body.primeiro-acesso-page .primeiro-acesso-card .auth-intro p {
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 400 !important;
    color: #64748b !important;
}
/* PRIMEIRO ACESSO — TÍTULO MAIS FORTE E COLADO NO CAMPO */
body.primeiro-acesso-page .auth-intro {
    width: 100% !important;
    max-width: 297px !important;

    margin: 0 auto 4px !important;
    padding: 0 !important;

    text-align: left !important;
}

body.primeiro-acesso-page .auth-intro p {
    margin: 0 !important;
    padding: 0 !important;

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

    line-height: 1.2 !important;

    color: #0b1f3a !important;

    text-align: left !important;
}

/* remove espaço extra entre intro e formulário */
body.primeiro-acesso-page #primeiroAcessoForm {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* aproxima primeiro campo do título */
body.primeiro-acesso-page .primeiro-acesso-campo:first-child {
    margin-top: 6px !important;
}
/* =========================================================
   RODAPÉ INSTITUCIONAL — INDEX
========================================================= */

body.index-login-page .index-footer-brand {
    position: fixed;

    left: 50%;
    bottom: 22px;

    transform: translateX(-50%);

    z-index: 3;

    display: flex;
    flex-direction: column;

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

    gap: 4px;

    color: #7f8fa3;

    text-align: center;

    pointer-events: none;
}


body.index-login-page .index-footer-brand span {
    font-size: 9px !important;

    font-weight: 700 !important;

    letter-spacing: 0.10em !important;
}


body.index-login-page .index-footer-brand small {
    font-size: 9px !important;

    font-weight: 400 !important;

    opacity: 0.82;
}
/* =========================================================
   RODAPÉ INSTITUCIONAL — LOGIN / PRIMEIRO ACESSO
========================================================= */

body.index-login-page .index-footer-brand,
body.primeiro-acesso-page .index-footer-brand {
    position: fixed;

    left: 50%;
    bottom: 22px;

    transform: translateX(-50%);

    z-index: 3;

    display: flex;
    flex-direction: column;

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

    gap: 4px;

    color: #7f8fa3;

    text-align: center;

    pointer-events: none;
}


body.index-login-page .index-footer-brand span,
body.primeiro-acesso-page .index-footer-brand span {
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 0.10em !important;
}


body.index-login-page .index-footer-brand small,
body.primeiro-acesso-page .index-footer-brand small {
    font-size: 9px !important;
    font-weight: 400 !important;
    opacity: 0.82;
}
/* =========================================================
   CAMVIO — SIDEBAR DIGITAL MINIMAL
========================================================= */

.cliente-page .cliente-dashboard-layout {
    grid-template-columns:
        88px
        minmax(0, 1fr) !important;
}


/* SIDEBAR */

.cliente-page .dashboard-navigation {
    width: 88px !important;
    min-width: 88px !important;

    padding: 14px 7px !important;

    background: #ffffff !important;

    border-right: 1px solid #edf1f6 !important;

    box-shadow:
        3px 0 16px
        rgba(3, 19, 48, 0.025) !important;
}


/* LISTA */

.cliente-page .dashboard-tabs {
    gap: 4px !important;
}


/* BOTÕES */

.cliente-page .dashboard-tab,
.cliente-page .dashboard-home {
    position: relative;

    width: 100% !important;

    min-height: 58px !important;

    padding: 7px 4px !important;

    gap: 5px !important;

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

    background: transparent !important;

    color: #718198 !important;

    box-shadow: none !important;
}


/* ÍCONES */

.cliente-page .dashboard-tab i,
.cliente-page .dashboard-home i {
    width: auto !important;
    height: auto !important;

    padding: 0 !important;

    background: transparent !important;

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

    color: #73869d !important;

    font-size: 17px !important;

    box-shadow: none !important;
}


/* TEXTO */

.cliente-page .dashboard-tab span,
.cliente-page .dashboard-home span {
    max-width: 76px !important;

    font-size: 8.5px !important;
    font-weight: 650 !important;

    line-height: 1.12 !important;

    color: inherit !important;
}


/* HOVER */

.cliente-page .dashboard-tab:hover,
.cliente-page .dashboard-home:hover {
    transform: none !important;

    background:
        rgba(0, 102, 255, 0.035) !important;

    color: #1762b8 !important;
}


.cliente-page .dashboard-tab:hover i,
.cliente-page .dashboard-home:hover i {
    background: transparent !important;

    color: #0873f9 !important;

    transform: scale(1.08) !important;
}


/* ATIVO */

.cliente-page .dashboard-tab.ativo {
    background:
        rgba(0, 102, 255, 0.055) !important;

    color: #0867e8 !important;

    border: 0 !important;

    box-shadow: none !important;
}


.cliente-page .dashboard-tab.ativo i {
    background: transparent !important;

    color: #0867e8 !important;

    box-shadow: none !important;

    font-size: 18px !important;
}


/* INDICADOR */

.cliente-page .dashboard-tab.ativo::before {
    content: "";

    position: absolute !important;

    left: -7px !important;

    top: 13px !important;
    bottom: 13px !important;

    width: 3px !important;

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

    background: #0873f9 !important;

    box-shadow:
        0 0 8px
        rgba(0, 102, 255, 0.25) !important;
}

/* =========================================================
   CAMVIO — AJUSTES MOBILE 2026-08-16
   Topbar, zoom de inputs, sidebar do BI e rolagem
========================================================= */

/* Evita travas de rolagem herdadas de blocos antigos no mobile */
@media (max-width: 768px) {
    html {
        width: 100% !important;
        min-height: 100% !important;
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-text-size-adjust: 100%;
    }

    body {
        width: 100% !important;
        min-height: 100dvh !important;
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        touch-action: pan-y;
        overscroll-behavior-y: auto;
    }

    /* iOS/Safari aplica zoom automático em campos com fonte < 16px. */
    input,
    select,
    textarea,
    button {
        font-size: 16px;
    }

    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Login também precisa poder rolar em telas pequenas / teclado aberto. */
    body.login-page,
    body.index-login-page,
    body.primeiro-acesso-page {
        min-height: 100dvh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body.login-page .container,
    body.index-login-page .container,
    body.primeiro-acesso-page .container {
        min-height: 100dvh !important;
        height: auto !important;
        padding-top: 72px !important;
        padding-bottom: 92px !important;
    }

    /* TOPBAR MOBILE — compacta sem esmagar os controles. */
    .topbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 10000 !important;
        width: 100% !important;
        height: 50px !important;
        min-height: 50px !important;
        padding: 0 9px !important;
        gap: 5px !important;
    }

    .topbar .top-logo,
    .cliente-page .topbar .top-logo,
    .menu-page .topbar .top-logo {
        width: auto !important;
        height: 21px !important;
        max-width: 104px !important;
        flex: 0 0 auto !important;
        object-fit: contain !important;
    }

    .topbar .top-right {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        justify-content: flex-end !important;
        gap: 2px !important;
    }

    .topbar .icon-button,
    .topbar button.icon-button,
    .setores-topbar-toggle {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        padding: 0 !important;
        border-radius: 7px !important;
        font-size: 12px !important;
        flex: 0 0 30px !important;
    }

    .topbar .profile-wrapper {
        min-width: 0 !important;
        gap: 2px !important;
        margin-left: 1px !important;
    }

    .topbar .cliente-logado {
        display: none !important;
    }

    .topbar .btn-sair-topo {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        padding: 0 !important;
        justify-content: center !important;
        border-radius: 7px !important;
    }

    .topbar .btn-sair-topo span {
        display: none !important;
    }

    .notification-menu {
        position: fixed !important;
        top: 54px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100dvh - 70px) !important;
    }

    .setores-topbar-dropdown {
        position: fixed !important;
        top: 54px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100dvh - 70px) !important;
        overflow-y: auto !important;
    }

    /* POWER BI MOBILE — remove a sidebar e entrega toda a largura ao BI. */
    body.cliente-page {
        min-height: 100dvh !important;
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .cliente-page .dashboard-navigation {
        display: none !important;
    }

    .cliente-page .cliente-dashboard-layout {
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
        height: auto !important;
        min-height: calc(100dvh - 50px) !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .cliente-page .dashboard-frame-container {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
        height: calc(100dvh - 50px) !important;
        min-height: 620px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .cliente-page #dashboardFrame {
        position: absolute !important;
        inset: 0 !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        transform: none !important;
        border: 0 !important;
    }

    /* Conteúdos gerais continuam roláveis. */
    .menu-container,
    .suporte-layout,
    .dashboard-area {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

@media (max-width: 390px) {
    .topbar {
        padding: 0 6px !important;
    }

    .topbar .top-logo,
    .cliente-page .topbar .top-logo,
    .menu-page .topbar .top-logo {
        height: 19px !important;
        max-width: 88px !important;
    }

    .topbar .icon-button,
    .topbar button.icon-button,
    .setores-topbar-toggle,
    .topbar .btn-sair-topo {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        flex-basis: 28px !important;
    }
}


/* =========================================================
   CAMVIO — MOBILE V2
   Logo + menu hambúrguer + páginas do BI + orientação
========================================================= */

.mobile-topbar-menu-button,
.mobile-pages-button,
.mobile-topbar-overlay,
.mobile-topbar-menu,
.mobile-pages-overlay,
.mobile-pages-drawer,
.mobile-orientation-notice {
    display: none;
}


@media (max-width: 768px) {

    /* -----------------------------------------------------
       TOPBAR: no celular fica somente logo + controles mobile.
       O seletor de setor continua visível quando existir.
    ----------------------------------------------------- */

    .topbar {
        height: 58px !important;
        min-height: 58px !important;
        padding: 0 16px !important;
        gap: 10px !important;
        justify-content: space-between !important;
    }


    .topbar .top-logo,
    .cliente-page .topbar .top-logo,
    .menu-page .topbar .top-logo {
        width: auto !important;
        height: 25px !important;
        max-width: 118px !important;
        flex: 0 0 auto !important;
    }


    .topbar .top-right {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        gap: 7px !important;
        overflow: visible !important;
    }


    /* Esconde botões desktop. */
    .topbar .top-right > .icon-button,
    .topbar .top-right > .profile-wrapper,
    .topbar .top-right > .suporte-voltar {
        display: none !important;
    }


    /* Notificação precisa permanecer no DOM porque o menu mobile
       reutiliza o dropdown original. Apenas o sino fica invisível. */
    .topbar .notification-wrapper {
        display: block !important;
        width: 0 !important;
        height: 0 !important;
        flex: 0 0 0 !important;
        overflow: visible !important;
        position: static !important;
    }


    .topbar .notification-wrapper > #notificationBtn {
        display: none !important;
    }


    /* Camila / clientes com setores: manter seletor visível. */
    .topbar .setores-topbar-wrapper {
        flex: 0 0 auto !important;
    }


    .topbar .setores-topbar-wrapper:not(.mobile-setores-visivel) {
        display: none !important;
    }


    .topbar .setores-topbar-wrapper.mobile-setores-visivel {
        display: flex !important;
    }


    .topbar .setores-topbar-toggle,
    .mobile-pages-button,
    .mobile-topbar-menu-button {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;

        padding: 0 !important;

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

        flex: 0 0 38px !important;

        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        border-radius: 10px !important;

        background: rgba(255, 255, 255, 0.055) !important;
        color: #ffffff !important;

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

        cursor: pointer !important;
    }


    .mobile-topbar-menu-button {
        font-size: 17px !important;
    }


    .mobile-pages-button {
        font-size: 14px !important;
    }


    /* Dropdown de setores continua funcional, agora alinhado à topbar. */
    .setores-topbar-dropdown {
        top: 64px !important;
    }


    .notification-menu {
        top: 64px !important;
    }


    /* -----------------------------------------------------
       MENU HAMBÚRGUER
    ----------------------------------------------------- */

    .mobile-topbar-overlay,
    .mobile-pages-overlay {
        position: fixed;
        inset: 0;

        z-index: 19990;

        display: block;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        background: rgba(3, 10, 25, 0.48);

        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);

        transition:
            opacity 0.22s ease,
            visibility 0.22s ease;
    }


    .mobile-topbar-overlay.aberto,
    .mobile-pages-overlay.aberto {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }


    .mobile-topbar-menu {
        position: fixed;

        top: 0;
        right: 0;
        bottom: 0;

        z-index: 20000;

        width: min(86vw, 340px);
        height: 100dvh;

        padding: 0 16px 24px;

        display: flex;
        flex-direction: column;

        overflow-y: auto;

        background:
            linear-gradient(
                180deg,
                #07101f 0%,
                #09172b 100%
            );

        color: #ffffff;

        box-shadow:
            -24px 0 60px
            rgba(0, 0, 0, 0.30);

        transform: translateX(105%);

        transition:
            transform 0.26s ease;
    }


    .mobile-topbar-menu.aberto {
        transform: translateX(0);
    }


    .mobile-topbar-menu-header {
        min-height: 84px;

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

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


    .mobile-topbar-menu-header > div {
        min-width: 0;

        display: flex;
        flex-direction: column;
        gap: 5px;
    }


    .mobile-topbar-menu-header span {
        color: #60a5fa;

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

        letter-spacing: 0.15em;
    }


    .mobile-topbar-menu-header strong {
        overflow: hidden;

        color: #ffffff;

        font-size: 15px;
        font-weight: 750;

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


    .mobile-topbar-menu-close,
    #mobilePagesClose {
        width: 36px;
        height: 36px;

        flex: 0 0 36px;

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

        border: 1px solid rgba(255, 255, 255, 0.10);
        border-radius: 10px;

        background: rgba(255, 255, 255, 0.05);
        color: #ffffff;

        font-size: 15px;
    }


    .mobile-topbar-menu-list {
        padding-top: 14px;

        display: flex;
        flex-direction: column;
        gap: 4px;
    }


    .mobile-topbar-menu-item {
        width: 100%;
        min-height: 52px;

        padding: 0 10px;

        display: grid;
        grid-template-columns: 36px 1fr 20px;
        align-items: center;
        gap: 10px;

        border: none;
        border-radius: 12px;

        background: transparent;
        color: #e7edf8;

        text-align: left;

        font-size: 14px;
        font-weight: 650;

        cursor: pointer;
    }


    .mobile-topbar-menu-item:active {
        background:
            rgba(255, 255, 255, 0.07);
    }


    .mobile-topbar-menu-item-icon {
        width: 36px;
        height: 36px;

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

        border-radius: 10px;

        background:
            rgba(0, 102, 255, 0.12);

        color: #60a5fa;
    }


    .mobile-topbar-menu-chevron {
        justify-self: end;

        color: #64748b;

        font-size: 10px;
    }


    .mobile-topbar-menu-item.perigo {
        margin-top: 8px;

        color: #fecaca;
    }


    .mobile-topbar-menu-item.perigo
    .mobile-topbar-menu-item-icon {
        background:
            rgba(239, 68, 68, 0.10);

        color: #f87171;
    }


    /* -----------------------------------------------------
       CLIENTE.HTML — BI SEM SIDEBAR
    ----------------------------------------------------- */

    body.cliente-page {
        min-height: 100dvh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }


    .cliente-page .dashboard-navigation {
        display: none !important;
    }


    .cliente-page .cliente-dashboard-layout {
        display: block !important;

        width: 100% !important;
        min-width: 100% !important;

        min-height:
            calc(100dvh - 58px) !important;

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


    .cliente-page .dashboard-frame-container {
        width: 100% !important;
        min-width: 100% !important;

        height:
            calc(100dvh - 58px) !important;

        min-height: 560px !important;

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

        overflow: hidden !important;
    }


    .cliente-page #dashboardFrame {
        width: 100% !important;
        height: 100% !important;

        border: 0 !important;
    }


    /* -----------------------------------------------------
       SELETOR DE PÁGINAS
    ----------------------------------------------------- */

    .mobile-pages-drawer {
        position: fixed;

        left: 12px;
        right: 12px;
        bottom: 12px;

        z-index: 20000;

        max-height:
            min(74dvh, 640px);

        padding: 18px;

        display: flex;
        flex-direction: column;

        overflow: hidden;

        border:
            1px solid
            rgba(3, 19, 48, 0.08);

        border-radius: 20px;

        background: #ffffff;
        color: #031330;

        box-shadow:
            0 28px 70px
            rgba(3, 19, 48, 0.28);

        transform:
            translateY(calc(100% + 30px));

        transition:
            transform 0.26s ease;
    }


    .mobile-pages-drawer.aberto {
        transform: translateY(0);
    }


    body.dark-mode
    .mobile-pages-drawer {
        border-color:
            rgba(255, 255, 255, 0.08);

        background: #0a1425;
        color: #f8fafc;
    }


    .mobile-pages-header {
        padding-bottom: 14px;

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

        border-bottom:
            1px solid
            rgba(3, 19, 48, 0.08);
    }


    body.dark-mode
    .mobile-pages-header {
        border-color:
            rgba(255, 255, 255, 0.08);
    }


    .mobile-pages-header > div {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }


    .mobile-pages-header span {
        color: #0066ff;

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

        letter-spacing: 0.15em;
    }


    .mobile-pages-header strong {
        font-size: 18px;
        font-weight: 800;
    }


    #mobilePagesClose {
        border-color:
            rgba(3, 19, 48, 0.08);

        background:
            rgba(3, 19, 48, 0.04);

        color: #031330;
    }


    body.dark-mode
    #mobilePagesClose {
        border-color:
            rgba(255, 255, 255, 0.08);

        background:
            rgba(255, 255, 255, 0.05);

        color: #ffffff;
    }


    .mobile-pages-list {
        padding-top: 12px;

        display: flex;
        flex-direction: column;
        gap: 7px;

        overflow-y: auto;
    }


    .mobile-page-item {
        width: 100%;
        min-height: 50px;

        padding: 0 14px;

        display: grid;
        grid-template-columns: 28px 1fr 18px;
        align-items: center;
        gap: 10px;

        border:
            1px solid
            rgba(3, 19, 48, 0.07);

        border-radius: 12px;

        background: #f8fbff;
        color: #334155;

        text-align: left;

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


    .mobile-page-item > i:first-child {
        color: #64748b;

        text-align: center;
    }


    .mobile-page-item.ativo {
        border-color:
            rgba(0, 102, 255, 0.22);

        background:
            rgba(0, 102, 255, 0.08);

        color: #0066ff;
    }


    .mobile-page-item.ativo
    > i:first-child {
        color: #0066ff;
    }


    .mobile-page-chevron {
        justify-self: end;

        color: #94a3b8;

        font-size: 10px;
    }


    body.dark-mode
    .mobile-page-item {
        border-color:
            rgba(255, 255, 255, 0.07);

        background: #07101e;
        color: #dbe7f7;
    }


    body.dark-mode
    .mobile-page-item.ativo {
        background:
            rgba(0, 102, 255, 0.14);

        color: #60a5fa;
    }


    /* -----------------------------------------------------
       AVISO DE ORIENTAÇÃO
       Aparece novamente em cada entrada no cliente.html.
    ----------------------------------------------------- */

    .mobile-orientation-notice {
        position: fixed;
        inset: 0;

        z-index: 30000;

        padding: 22px;

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

        background:
            rgba(3, 10, 25, 0.62);

        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }


    .mobile-orientation-card {
        width:
            min(100%, 360px);

        padding: 28px 24px 24px;

        display: flex;
        flex-direction: column;
        align-items: center;

        border-radius: 22px;

        background: #ffffff;
        color: #031330;

        text-align: center;

        box-shadow:
            0 30px 80px
            rgba(0, 0, 0, 0.30);
    }


    body.dark-mode
    .mobile-orientation-card {
        border:
            1px solid
            rgba(255, 255, 255, 0.08);

        background: #0a1425;
        color: #f8fafc;
    }


    .mobile-orientation-icon {
        position: relative;

        width: 62px;
        height: 62px;

        margin-bottom: 18px;

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

        border-radius: 18px;

        background:
            rgba(0, 102, 255, 0.10);

        color: #0066ff;

        font-size: 27px;
    }


    .mobile-orientation-icon
    .fa-rotate {
        position: absolute;

        right: -4px;
        bottom: -4px;

        width: 26px;
        height: 26px;

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

        border: 3px solid #ffffff;
        border-radius: 50%;

        background: #0066ff;
        color: #ffffff;

        font-size: 10px;
    }


    body.dark-mode
    .mobile-orientation-icon
    .fa-rotate {
        border-color: #0a1425;
    }


    .mobile-orientation-card > span {
        margin-bottom: 7px;

        color: #0066ff;

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

        letter-spacing: 0.15em;
    }


    .mobile-orientation-card h2 {
        margin: 0 0 10px;

        font-size: 22px;
        font-weight: 800;

        line-height: 1.12;
    }


    .mobile-orientation-card p {
        margin: 0;

        color: #64748b;

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


    body.dark-mode
    .mobile-orientation-card p {
        color: #94a3b8;
    }


    .mobile-orientation-card button {
        width: 100%;
        height: 46px;

        margin-top: 22px;

        border: none;
        border-radius: 12px;

        background:
            linear-gradient(
                90deg,
                #031330,
                #0066ff
            );

        color: #ffffff;

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


/* Landscape no celular: mantém a interface compacta e não exibe o aviso. */
@media (max-width: 932px) and (orientation: landscape) {

    .mobile-orientation-notice {
        display: none !important;
    }


    .cliente-page .dashboard-frame-container {
        min-height:
            calc(100dvh - 58px) !important;
    }
}


@media (max-width: 390px) {

    .topbar {
        padding: 0 12px !important;
    }


    .topbar .top-logo,
    .cliente-page .topbar .top-logo,
    .menu-page .topbar .top-logo {
        height: 23px !important;
        max-width: 108px !important;
    }


    .topbar .setores-topbar-toggle,
    .mobile-pages-button,
    .mobile-topbar-menu-button {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        flex-basis: 36px !important;
    }
}

/* =========================================================
   CAMVIO — AJUSTES FINAIS MOBILE + PRIMEIRO ACESSO
   2026-08-16
========================================================= */

/* ---------------------------------------------------------
   AJUDA VISÍVEL — PRIMEIRO ACESSO
--------------------------------------------------------- */

.primeiro-acesso-suporte {
    margin-top: 14px;
    padding-top: 14px;

    border-top: 1px solid rgba(3, 19, 48, 0.07);

    text-align: center;
}

.primeiro-acesso-suporte > span {
    display: block;
    margin-bottom: 9px;

    color: #7a8ba1;
    font-size: 10px;
    line-height: 1.4;
}

.primeiro-acesso-suporte-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.primeiro-acesso-suporte-links a {
    min-height: 32px;
    padding: 0 11px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    border: 1px solid #dbe5f1;
    border-radius: 9px;

    background: #ffffff;
    color: #52657b;

    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
}

.primeiro-acesso-suporte-links a:hover {
    border-color: rgba(0, 102, 255, 0.30);
    color: #0066ff;
    background: #f7faff;
}

body.dark-mode.primeiro-acesso-page .primeiro-acesso-suporte {
    border-top-color: rgba(255, 255, 255, 0.07);
}

body.dark-mode.primeiro-acesso-page .primeiro-acesso-suporte > span {
    color: #91a0b5;
}

body.dark-mode.primeiro-acesso-page .primeiro-acesso-suporte-links a {
    border-color: rgba(255, 255, 255, 0.09);
    background: #0a1425;
    color: #b5c3d5;
}

body.dark-mode.primeiro-acesso-page .primeiro-acesso-suporte-links a:hover {
    border-color: rgba(96, 165, 250, 0.28);
    color: #60a5fa;
    background: #0d1b30;
}


/* ---------------------------------------------------------
   BOAS-VINDAS APÓS REDEFINIR SENHA
--------------------------------------------------------- */

.modal-boas-vindas-card {
    width: min(420px, 100%) !important;
    padding: 30px 28px 26px !important;
    text-align: center;
}

.modal-boas-vindas-kicker {
    display: block;
    margin: 2px 0 8px;

    color: #0066ff;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.15em;
}

.modal-boas-vindas-card h2 {
    margin-bottom: 9px !important;
    color: #071936;
    font-size: 23px !important;
    line-height: 1.18;
}

.modal-boas-vindas-card h2 strong {
    color: #0066ff;
}

.modal-boas-vindas-card > p {
    max-width: 330px;
    margin: 0 auto !important;
    color: #6f8097;
    font-size: 12px !important;
    line-height: 1.55;
}

.modal-boas-vindas-info {
    margin-top: 17px;
    padding: 12px 13px;

    display: flex;
    align-items: flex-start;
    gap: 9px;

    border: 1px solid rgba(0, 102, 255, 0.10);
    border-radius: 11px;

    background: rgba(0, 102, 255, 0.045);
    color: #60738a;

    text-align: left;
    font-size: 10.5px;
    line-height: 1.5;
}

.modal-boas-vindas-info i {
    margin-top: 2px;
    color: #0066ff;
}

.modal-boas-vindas-card #btnContinuarPortal {
    width: 100%;
    height: 45px;
    margin-top: 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    border: 0;
    border-radius: 11px;

    background: linear-gradient(90deg, #031330, #0066ff);
    color: #ffffff;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    cursor: pointer;
}

body.dark-mode.primeiro-acesso-page .modal-boas-vindas-card h2 {
    color: #f8fafc !important;
}

body.dark-mode.primeiro-acesso-page .modal-boas-vindas-info {
    border-color: rgba(96, 165, 250, 0.13);
    background: rgba(0, 102, 255, 0.07);
    color: #aebed1;
}


/* ---------------------------------------------------------
   BOTÃO VOLTAR DIRETO NA TOPBAR MOBILE
--------------------------------------------------------- */

.mobile-back-button {
    display: none;
}

@media (max-width: 768px) {

    .cliente-page .mobile-back-button {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;

        padding: 0 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 38px !important;

        border: 1px solid rgba(255, 255, 255, 0.10) !important;
        border-radius: 10px !important;

        background: rgba(255, 255, 255, 0.055) !important;
        color: #ffffff !important;

        font-size: 15px !important;
        cursor: pointer;
    }

    /* A regra antiga esconde filhos .icon-button; este é button próprio. */
    .cliente-page .topbar .top-right > .mobile-back-button {
        display: inline-flex !important;
    }
}


/* ---------------------------------------------------------
   LANDSCAPE MOBILE — PROPORÇÃO + ROLAGEM REAL
--------------------------------------------------------- */

@media (max-width: 932px) and (orientation: landscape) {

    html {
        height: auto !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body.cliente-page {
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .cliente-page .topbar {
        position: sticky !important;
        top: 0 !important;
    }

    .cliente-page .cliente-dashboard-layout {
        display: block !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;
    }

    .cliente-page .dashboard-frame-container {
        position: relative !important;

        width: 100% !important;
        height: max(560px, calc(100dvh - 58px)) !important;
        min-height: 560px !important;
        max-height: none !important;

        overflow: hidden !important;
    }

    .cliente-page #dashboardFrame {
        position: absolute !important;
        inset: 0 !important;

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

        transform: none !important;
    }
}

@media (max-width: 480px) {
    .primeiro-acesso-suporte-links {
        flex-direction: column;
    }

    .primeiro-acesso-suporte-links a {
        width: 100%;
    }
}



/* =========================================================
   CAMVIO — MOBILE V3 PROFISSIONAL
   Portrait + Landscape + Topbar + BI + Suporte
   2026-08-18
========================================================= */

/* Evita zoom automático do iOS ao focar campos */
@media (max-width: 932px) {

    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}


/* ---------------------------------------------------------
   TOPBAR MOBILE — ENXUTA E FUNCIONAL
--------------------------------------------------------- */

@media (max-width: 768px) {

    .cliente-page .topbar {
        position: sticky !important;
        top: 0 !important;

        height: 52px !important;
        min-height: 52px !important;
        flex: 0 0 52px !important;

        padding:
            env(safe-area-inset-top, 0px)
            10px
            0 !important;

        gap: 8px !important;

        overflow: visible !important;

        box-shadow:
            0 4px 18px
            rgba(0, 0, 0, 0.22) !important;
    }


    .cliente-page .top-logo {
        width: auto !important;
        height: 22px !important;
        max-width: 105px !important;

        flex: 0 0 auto !important;
    }


    .cliente-page .top-right {
        margin-left: auto !important;

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

        gap: 6px !important;

        min-width: 0 !important;
    }


    /* Floating support deixa de cobrir o BI no celular.
       O suporte fica disponível dentro do menu da topbar. */
    .cliente-page .support-wrapper,
    .cliente-page .support-menu {
        display: none !important;
    }


    /* Troca de setor fica SEMPRE na topbar quando o JS
       disponibilizar setores para o cliente. */
    .cliente-page .setores-topbar-wrapper[style*="flex"],
    .cliente-page .setores-topbar-wrapper[style*="block"],
    .cliente-page .setores-topbar-wrapper.mobile-setores-visivel {
        display: flex !important;

        order: 20 !important;

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

        flex: 0 0 auto !important;
    }


    .cliente-page .setores-topbar-toggle {
        width: auto !important;
        min-width: 64px !important;
        max-width: 92px !important;
        height: 38px !important;

        padding: 0 10px !important;

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

        gap: 7px !important;

        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 10px !important;

        background: rgba(255, 255, 255, 0.06) !important;
        color: #ffffff !important;
    }


    .cliente-page .setores-topbar-toggle:hover,
    .cliente-page .setores-topbar-wrapper.aberto
    .setores-topbar-toggle {
        border-color: rgba(96, 165, 250, 0.55) !important;

        background: rgba(0, 102, 255, 0.16) !important;
    }


    .setor-topbar-mobile-label {
        display: inline-block !important;

        max-width: 52px;

        overflow: hidden;

        color: #ffffff;

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

        line-height: 1;

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


    .cliente-page .setores-topbar-dropdown {
        position: fixed !important;

        top: 58px !important;
        right: 10px !important;
        left: auto !important;

        width: min(320px, calc(100vw - 20px)) !important;
        max-height: min(460px, calc(100dvh - 76px)) !important;

        overflow-y: auto !important;

        border-radius: 14px !important;
    }


    /* Ordem visual dos controles */
    .cliente-page .mobile-back-button {
        order: 10 !important;
    }

    .cliente-page #setoresTopbarWrapper {
        order: 20 !important;
    }

    .cliente-page #mobilePagesBtn {
        order: 30 !important;
    }

    .cliente-page #mobileTopbarMenuBtn {
        order: 40 !important;
    }


    .cliente-page .mobile-back-button,
    .cliente-page .mobile-pages-button,
    .cliente-page .mobile-topbar-menu-button {
        width: 38px !important;
        height: 38px !important;

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

        flex: 0 0 38px !important;

        border-radius: 10px !important;
    }


    /* O conteúdo abaixo da topbar não fica travado. */
    body.cliente-page {
        height: auto !important;
        min-height: 100dvh !important;

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

        -webkit-overflow-scrolling: touch;
    }


    .cliente-page .cliente-dashboard-layout {
        width: 100% !important;
        height: auto !important;
        min-height: calc(100dvh - 52px) !important;

        overflow: visible !important;
    }


    /* Sidebar desktop desaparece; páginas continuam pelo drawer. */
    .cliente-page .dashboard-navigation {
        display: none !important;
    }


    .cliente-page .dashboard-frame-container {
        width: 100% !important;

        margin: 0 !important;

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

        background: #ffffff !important;
    }


    .cliente-page #dashboardFrame {
        display: block !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;

        border: 0 !important;

        transform: none !important;
        transform-origin: center !important;
    }
}


/* ---------------------------------------------------------
   MOBILE EM PÉ
--------------------------------------------------------- */

@media (max-width: 768px) and (orientation: portrait) {

    .cliente-page .dashboard-frame-container {
        height:
            max(
                520px,
                calc(100dvh - 52px)
            ) !important;

        min-height:
            calc(100dvh - 52px) !important;

        overflow: hidden !important;
    }


    .cliente-page #dashboardFrame {
        height: 100% !important;
        min-height: 100% !important;
    }
}


/* ---------------------------------------------------------
   MOBILE DEITADO
   Mantém o relatório inteiro e permite rolar a página.
--------------------------------------------------------- */

@media (max-width: 932px) and (orientation: landscape) {

    html,
    body {
        width: 100% !important;
        height: auto !important;
        min-height: 100% !important;

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


    body.cliente-page {
        min-height: 100dvh !important;
    }


    .cliente-page .topbar {
        height: 48px !important;
        min-height: 48px !important;
        flex-basis: 48px !important;

        padding: 0 10px !important;
    }


    .cliente-page .top-logo {
        height: 20px !important;
        max-width: 96px !important;
    }


    .cliente-page .mobile-back-button,
    .cliente-page .mobile-pages-button,
    .cliente-page .mobile-topbar-menu-button {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        flex-basis: 34px !important;
    }


    .cliente-page .setores-topbar-wrapper[style*="flex"],
    .cliente-page .setores-topbar-wrapper[style*="block"],
    .cliente-page .setores-topbar-wrapper.mobile-setores-visivel {
        height: 34px !important;
    }


    .cliente-page .setores-topbar-toggle {
        height: 34px !important;
        min-width: 60px !important;

        padding: 0 9px !important;
    }


    .cliente-page .cliente-dashboard-layout {
        display: block !important;

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

        overflow: visible !important;
    }


    .cliente-page .dashboard-frame-container {
        position: relative !important;

        width: 100% !important;

        /* Power BI trabalha muito melhor mantendo a proporção
           do canvas ao invés de ser espremido na altura do celular. */
        height: auto !important;
        min-height:
            calc(100dvh - 48px) !important;

        aspect-ratio: 16 / 9 !important;

        overflow: hidden !important;
    }


    .cliente-page #dashboardFrame {
        position: absolute !important;
        inset: 0 !important;

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

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

        overflow: hidden !important;
    }


    .cliente-page .setores-topbar-dropdown {
        top: 52px !important;

        max-height:
            calc(100dvh - 62px) !important;
    }


    .mobile-pages-drawer,
    .mobile-topbar-menu {
        max-height: 100dvh !important;

        overflow-y: auto !important;

        overscroll-behavior: contain;
    }
}


/* ---------------------------------------------------------
   TELAS MUITO ESTREITAS
--------------------------------------------------------- */

@media (max-width: 380px) {

    .cliente-page .topbar {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }


    .cliente-page .top-logo {
        max-width: 90px !important;
    }


    .cliente-page .top-right {
        gap: 4px !important;
    }


    .cliente-page .setores-topbar-toggle {
        min-width: 54px !important;
        max-width: 70px !important;

        padding: 0 7px !important;
    }


    .setor-topbar-mobile-label {
        max-width: 34px !important;
        font-size: 9px !important;
    }
}


/* ---------------------------------------------------------
   MODAL DE ORIENTAÇÃO
--------------------------------------------------------- */

.mobile-orientation-nao-mostrar,
.modal-boas-vindas-nao-mostrar {
    margin-top: 14px;

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

    gap: 8px;

    color: #64748b;

    font-size: 11px;
    line-height: 1.4;

    cursor: pointer;
}


.mobile-orientation-nao-mostrar input,
.modal-boas-vindas-nao-mostrar input {
    width: 15px;
    height: 15px;

    flex: 0 0 15px;

    accent-color: #0066ff;
}


.modal-boas-vindas-nao-mostrar {
    max-width: 330px;

    margin-left: auto;
    margin-right: auto;

    text-align: left;
}


body.dark-mode
.mobile-orientation-nao-mostrar,
body.dark-mode
.modal-boas-vindas-nao-mostrar {
    color: #aab8c9;
}


/* ---------------------------------------------------------
   PRIMEIRO ACESSO NO CELULAR
--------------------------------------------------------- */

@media (max-width: 560px) {

    body.primeiro-acesso-page {
        overflow-y: auto !important;
    }


    body.primeiro-acesso-page
    .primeiro-acesso-container {
        min-height: 100dvh !important;

        padding:
            66px 14px
            84px !important;
    }


    body.primeiro-acesso-page
    .primeiro-acesso-card {
        width: min(100%, 390px) !important;

        padding:
            24px 20px
            22px !important;
    }


    body.primeiro-acesso-page
    .modal-boas-vindas-card {
        width: calc(100% - 24px) !important;
        max-height: calc(100dvh - 24px) !important;

        padding:
            26px 20px
            22px !important;

        overflow-y: auto !important;
    }
}
\n\n/* CAMVIO — MOBILE V6 SEGURO */\n#themeToggle { display:none !important; }\nbody.login-page .campo input, body.login-page input, body.login-page select, body.login-page textarea { font-size:16px !important; }\nbody.login-page .campo:focus-within { transform:none !important; }\nbody.camvio-mobile-device.cliente-page { width:100% !important; height:100dvh !important; min-height:100dvh !important; overflow:hidden !important; }\nbody.camvio-mobile-device.cliente-page .topbar { width:100% !important; height:58px !important; min-height:58px !important; flex:0 0 58px !important; padding:0 12px !important; gap:8px !important; }\nbody.camvio-mobile-device.cliente-page .top-logo { height:25px !important; width:auto !important; max-width:118px !important; }\nbody.camvio-mobile-device.cliente-page .top-right { margin-left:auto !important; display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:6px !important; min-width:0 !important; }\nbody.camvio-mobile-device.cliente-page .top-right > #reloadPowerBI, body.camvio-mobile-device.cliente-page .top-right > #fullscreenBtn, body.camvio-mobile-device.cliente-page .top-right > .profile-wrapper, body.camvio-mobile-device.cliente-page .top-right > .notification-wrapper, body.camvio-mobile-device.cliente-page .top-right > #voltarSuporte { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; opacity:0 !important; pointer-events:none !important; }\nbody.camvio-mobile-device.cliente-page .mobile-back-button, body.camvio-mobile-device.cliente-page .mobile-pages-button, body.camvio-mobile-device.cliente-page .mobile-topbar-menu-button { display:inline-flex !important; align-items:center !important; justify-content:center !important; width:38px !important; height:38px !important; min-width:38px !important; min-height:38px !important; flex:0 0 38px !important; padding:0 !important; border-radius:10px !important; pointer-events:auto !important; opacity:1 !important; }\nbody.camvio-mobile-device.cliente-page #setoresTopbarWrapper.mobile-setores-visivel { display:flex !important; position:relative !important; width:auto !important; height:38px !important; flex:0 0 auto !important; overflow:visible !important; }\nbody.camvio-mobile-device.cliente-page #setoresTopbarWrapper:not(.mobile-setores-visivel) { display:none !important; }\nbody.camvio-mobile-device.cliente-page .setores-topbar-toggle { display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; width:auto !important; min-width:62px !important; max-width:92px !important; height:38px !important; padding:0 9px !important; }\nbody.camvio-mobile-device.cliente-page .dashboard-navigation { display:none !important; }\nbody.camvio-mobile-device.cliente-page .cliente-dashboard-layout { display:block !important; width:100% !important; height:calc(100dvh - 58px) !important; min-height:0 !important; flex:1 1 auto !important; overflow:hidden !important; }\nbody.camvio-mobile-device.cliente-page .dashboard-frame-container { position:relative !important; width:100% !important; height:100% !important; min-width:100% !important; min-height:100% !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; overflow:hidden !important; aspect-ratio:auto !important; }\nbody.camvio-mobile-device.cliente-page #dashboardFrame { position:absolute !important; inset:0 !important; display:block !important; width:100% !important; height:100% !important; min-width:100% !important; min-height:100% !important; max-width:100% !important; max-height:100% !important; margin:0 !important; padding:0 !important; border:0 !important; transform:none !important; zoom:1 !important; }\nbody.camvio-mobile-device.cliente-page .support-wrapper, body.camvio-mobile-device.cliente-page .support-menu { display:none !important; }\n@media (orientation:landscape) { body.camvio-mobile-device.cliente-page .topbar { height:58px !important; min-height:58px !important; flex-basis:58px !important; } body.camvio-mobile-device.cliente-page .top-logo { height:25px !important; max-width:118px !important; } body.camvio-mobile-device.cliente-page .cliente-dashboard-layout { height:calc(100dvh - 58px) !important; } body.camvio-mobile-device.cliente-page .dashboard-frame-container, body.camvio-mobile-device.cliente-page #dashboardFrame { width:100% !important; height:100% !important; aspect-ratio:auto !important; } }\n

/* =========================================================
   CAMVIO — V7 AJUSTES FINAIS
========================================================= */

/* DARK MODE TOTALMENTE REMOVIDO */
#themeToggle {
    display: none !important;
}


/* LOGIN MOBILE — EVITA ZOOM AUTOMÁTICO DO iOS */
@media (max-width: 932px), (hover: none) and (pointer: coarse) {

    body.login-page input,
    body.login-page select,
    body.login-page textarea,
    body.login-page .campo input,
    body.primeiro-acesso-page input,
    body.primeiro-acesso-page select,
    body.primeiro-acesso-page textarea {

        font-size: 16px !important;
        line-height: 1.25 !important;

        -webkit-text-size-adjust: 100% !important;

        transform: none !important;

        touch-action: manipulation;
    }


    body.login-page .campo,
    body.login-page .campo:focus-within,
    body.primeiro-acesso-page .campo,
    body.primeiro-acesso-page .campo:focus-within {

        transform: none !important;
    }
}


/* CLIENTE MOBILE — PADRÃO CONSISTENTE EM PÉ E DEITADO */
body.camvio-mobile-device.cliente-page {

    width: 100% !important;

    min-height: 100dvh !important;

    overflow-x: hidden !important;
}


body.camvio-mobile-device.cliente-page
.topbar {

    position: sticky !important;

    top: 0 !important;

    width: 100% !important;

    height: 58px !important;
    min-height: 58px !important;

    flex: 0 0 58px !important;

    padding:
        0
        max(12px, env(safe-area-inset-right))
        0
        max(12px, env(safe-area-inset-left)) !important;

    z-index: 20000 !important;
}


body.camvio-mobile-device.cliente-page
.top-logo {

    width: auto !important;

    height: 25px !important;

    max-width: 118px !important;

    object-fit: contain !important;
}


body.camvio-mobile-device.cliente-page
.top-right {

    margin-left: auto !important;

    display: flex !important;

    align-items: center !important;

    justify-content: flex-end !important;

    gap: 6px !important;

    min-width: 0 !important;
}


/* CAMILA MOBILE — SOMENTE ÍCONE PARA TROCAR SETOR */
body.camvio-mobile-device.cliente-page
.setor-topbar-mobile-label {

    display: none !important;
}


body.camvio-mobile-device.cliente-page
#setoresTopbarWrapper.mobile-setores-visivel {

    display: flex !important;

    width: 38px !important;
    height: 38px !important;

    flex: 0 0 38px !important;
}


body.camvio-mobile-device.cliente-page
.setores-topbar-toggle {

    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;

    height: 38px !important;

    padding: 0 !important;

    gap: 0 !important;
}


/* Nunca volta sidebar desktop ao girar o aparelho. */
body.camvio-mobile-device.cliente-page
.dashboard-navigation {

    display: none !important;
}


/* Suporte flutuante não cobre o BI. */
body.camvio-mobile-device.cliente-page
.support-wrapper,

body.camvio-mobile-device.cliente-page
.support-menu {

    display: none !important;
}


body.camvio-mobile-device.cliente-page
.cliente-dashboard-layout {

    width: 100% !important;

    min-height:
        calc(100dvh - 58px) !important;
}


body.camvio-mobile-device.cliente-page
.dashboard-frame-container {

    width: 100% !important;

    margin: 0 !important;

    border-radius: 0 !important;
}


body.camvio-mobile-device.cliente-page
#dashboardFrame {

    width: 100% !important;
    max-width: 100% !important;

    transform: none !important;

    zoom: 1 !important;
}


/* MOBILE DEITADO — NÃO CORTA; ROLA SE PRECISAR */
@media (orientation: landscape) {

    body.camvio-mobile-device.cliente-page {

        height: auto !important;

        min-height: 100dvh !important;

        overflow-y: auto !important;

        -webkit-overflow-scrolling: touch;
    }


    body.camvio-mobile-device.cliente-page
    .topbar {

        height: 58px !important;
        min-height: 58px !important;

        flex-basis: 58px !important;
    }


    body.camvio-mobile-device.cliente-page
    .cliente-dashboard-layout {

        display: block !important;

        height: auto !important;

        min-height:
            calc(100dvh - 58px) !important;

        overflow: visible !important;
    }


    body.camvio-mobile-device.cliente-page
    .dashboard-frame-container {

        position: relative !important;

        width: 100% !important;

        height:
            max(
                calc(100dvh - 58px),
                calc(100vw * 0.5625)
            ) !important;

        min-height:
            calc(100dvh - 58px) !important;

        overflow: hidden !important;
    }


    body.camvio-mobile-device.cliente-page
    #dashboardFrame {

        position: absolute !important;

        inset: 0 !important;

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

        min-width: 100% !important;
        min-height: 100% !important;
    }
}


/* BOAS-VINDAS APÓS LOGIN */
body.camvio-modal-aberto {
    overflow: hidden !important;
}


.camvio-welcome-login-overlay {

    position: fixed;

    inset: 0;

    z-index: 999999;

    padding: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(3, 19, 48, 0.42);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);
}


.camvio-welcome-login-card {

    width: min(420px, 100%);

    padding: 30px 28px 26px;

    border:
        1px solid
        rgba(3, 19, 48, 0.08);

    border-radius: 22px;

    background: #ffffff;

    color: #031330;

    text-align: center;

    box-shadow:
        0 26px 80px
        rgba(3, 19, 48, 0.20);
}


.camvio-welcome-login-icon {

    width: 52px;
    height: 52px;

    margin: 0 auto 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 16px;

    background: #eaf3ff;

    color: #0066ff;

    font-size: 18px;
}


.camvio-welcome-login-kicker {

    display: block;

    margin-bottom: 8px;

    color: #0066ff;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 0.16em;
}


.camvio-welcome-login-card h2 {

    margin: 0 0 10px;

    color: #031330;

    font-size: 24px;

    line-height: 1.15;
}


.camvio-welcome-login-card h2 strong {
    color: #0066ff;
}


.camvio-welcome-login-card p {

    margin: 0 auto 20px;

    max-width: 340px;

    color: #64748b;

    font-size: 13px;

    line-height: 1.55;
}


.camvio-welcome-login-check {

    margin-bottom: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    color: #64748b;

    font-size: 11px;

    cursor: pointer;
}


.camvio-welcome-login-check input {

    width: 15px;
    height: 15px;

    accent-color: #0066ff;
}


#camvioWelcomeContinuar {

    width: 100%;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    border: 0;

    border-radius: 12px;

    background:
        linear-gradient(
            90deg,
            #031330,
            #0066ff
        );

    color: #ffffff;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.08em;

    cursor: pointer;
}


@media (max-width: 560px) {

    .camvio-welcome-login-overlay {
        padding: 14px;
    }

    .camvio-welcome-login-card {

        padding: 26px 20px 22px;

        border-radius: 18px;
    }

    .camvio-welcome-login-card h2 {
        font-size: 21px;
    }
}


/* =========================================================
   CAMVIO — FINAL V8
   MOBILE PORTRAIT + LANDSCAPE COM O MESMO PADRÃO
========================================================= */

/* ---------------------------------------------------------
   LOGOS
--------------------------------------------------------- */

.loading-logo {
    object-fit: contain !important;
}


/* ---------------------------------------------------------
   MOBILE REAL — BASE ÚNICA PARA PÉ E DEITADO
--------------------------------------------------------- */

body.camvio-mobile-device.cliente-page {

    width:
        var(
            --camvio-mobile-vw,
            100vw
        ) !important;

    min-width:
        var(
            --camvio-mobile-vw,
            100vw
        ) !important;

    max-width:
        var(
            --camvio-mobile-vw,
            100vw
        ) !important;

    min-height:
        var(
            --camvio-mobile-vh,
            100dvh
        ) !important;

    overflow-x: hidden !important;

    background: #ffffff !important;
}


/* TOPBAR EXATAMENTE IGUAL NAS DUAS ORIENTAÇÕES */

body.camvio-mobile-device.cliente-page
.topbar {

    position: sticky !important;

    top: 0 !important;

    left: 0 !important;

    width:
        var(
            --camvio-mobile-vw,
            100vw
        ) !important;

    max-width:
        var(
            --camvio-mobile-vw,
            100vw
        ) !important;

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

    flex: 0 0 58px !important;

    margin: 0 !important;

    padding:
        0
        max(12px, env(safe-area-inset-right))
        0
        max(12px, env(safe-area-inset-left)) !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 8px !important;

    overflow: visible !important;

    z-index: 50000 !important;

    background: #070b1a !important;
}


body.camvio-mobile-device.cliente-page
.top-logo {

    display: block !important;

    width: auto !important;

    height: 25px !important;

    max-width: 118px !important;

    flex: 0 0 auto !important;

    object-fit: contain !important;
}


body.camvio-mobile-device.cliente-page
.top-right {

    min-width: 0 !important;

    margin-left: auto !important;

    display: flex !important;

    align-items: center !important;

    justify-content: flex-end !important;

    gap: 6px !important;

    overflow: visible !important;
}


/* CONTROLES DESKTOP NÃO APARECEM NO MOBILE,
   MAS CONTINUAM NO DOM PARA O MENU HAMBÚRGUER ACIONAR. */

body.camvio-mobile-device.cliente-page
.top-right > #reloadPowerBI,

body.camvio-mobile-device.cliente-page
.top-right > #fullscreenBtn,

body.camvio-mobile-device.cliente-page
.top-right > #voltarSuporte,

body.camvio-mobile-device.cliente-page
.top-right > .notification-wrapper,

body.camvio-mobile-device.cliente-page
.top-right > .profile-wrapper {

    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

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

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

    overflow: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


/* OS 4 CONTROLES MOBILE FICAM IGUAIS EM PÉ E DEITADO */

body.camvio-mobile-device.cliente-page
.mobile-back-button,

body.camvio-mobile-device.cliente-page
.mobile-pages-button,

body.camvio-mobile-device.cliente-page
.mobile-topbar-menu-button {

    position: relative !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 38px !important;
    height: 38px !important;

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

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

    flex: 0 0 38px !important;

    padding: 0 !important;

    margin: 0 !important;

    border-radius: 10px !important;

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

    z-index: 50002 !important;
}


/* ORDEM SEMPRE:
   VOLTAR > SETOR > PÁGINAS > MENU */

body.camvio-mobile-device.cliente-page
.mobile-back-button {
    order: 10 !important;
}


body.camvio-mobile-device.cliente-page
#setoresTopbarWrapper {
    order: 20 !important;
}


body.camvio-mobile-device.cliente-page
#mobilePagesBtn {
    order: 30 !important;
}


body.camvio-mobile-device.cliente-page
#mobileTopbarMenuBtn {
    order: 40 !important;
}


/* SETOR — SOMENTE ÍCONE NO MOBILE */

body.camvio-mobile-device.cliente-page
#setoresTopbarWrapper.mobile-setores-visivel {

    position: relative !important;

    display: flex !important;

    width: 38px !important;
    height: 38px !important;

    min-width: 38px !important;

    flex: 0 0 38px !important;

    overflow: visible !important;

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;
}


body.camvio-mobile-device.cliente-page
#setoresTopbarWrapper:not(.mobile-setores-visivel) {

    display: none !important;
}


body.camvio-mobile-device.cliente-page
.setores-topbar-toggle {

    width: 38px !important;
    height: 38px !important;

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

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

    padding: 0 !important;

    gap: 0 !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    pointer-events: auto !important;
}


body.camvio-mobile-device.cliente-page
.setor-topbar-mobile-label {

    display: none !important;
}


/* DROPDOWN DO SETOR TAMBÉM FUNCIONA DEITADO */

body.camvio-mobile-device.cliente-page
.setores-topbar-dropdown {

    position: fixed !important;

    top: 64px !important;

    right:
        max(
            10px,
            env(safe-area-inset-right)
        ) !important;

    left: auto !important;

    width:
        min(
            320px,
            calc(
                var(
                    --camvio-mobile-vw,
                    100vw
                ) - 20px
            )
        ) !important;

    max-height:
        calc(
            var(
                --camvio-mobile-vh,
                100dvh
            ) - 76px
        ) !important;

    overflow-y: auto !important;

    z-index: 60000 !important;
}


/* SIDEBAR DESKTOP NUNCA VOLTA NO CELULAR */

body.camvio-mobile-device.cliente-page
.dashboard-navigation {

    display: none !important;
}


/* SUPORTE FLUTUANTE NÃO COBRE O BI */

body.camvio-mobile-device.cliente-page
.support-wrapper,

body.camvio-mobile-device.cliente-page
.support-menu {

    display: none !important;
}


/* ---------------------------------------------------------
   POWER BI — USA A LARGURA REAL DO APARELHO
--------------------------------------------------------- */

body.camvio-mobile-device.cliente-page
.cliente-dashboard-layout {

    display: block !important;

    width:
        var(
            --camvio-mobile-vw,
            100vw
        ) !important;

    min-width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow-x: hidden !important;
}


body.camvio-mobile-device.cliente-page
.dashboard-frame-container {

    position: relative !important;

    width:
        var(
            --camvio-mobile-vw,
            100vw
        ) !important;

    max-width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    border-radius: 0 !important;

    overflow: hidden !important;
}


body.camvio-mobile-device.cliente-page
#dashboardFrame {

    display: block !important;

    width: 100% !important;

    min-width: 100% !important;

    max-width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    transform: none !important;

    zoom: 1 !important;
}


/* PORTRAIT */

@media (orientation: portrait) {

    body.camvio-mobile-device.cliente-page {

        overflow-y: hidden !important;
    }


    body.camvio-mobile-device.cliente-page
    .cliente-dashboard-layout {

        height:
            calc(
                var(
                    --camvio-mobile-vh,
                    100dvh
                ) - 58px
            ) !important;
    }


    body.camvio-mobile-device.cliente-page
    .dashboard-frame-container,

    body.camvio-mobile-device.cliente-page
    #dashboardFrame {

        height: 100% !important;

        min-height: 100% !important;
    }
}


/* LANDSCAPE
   Mantém a MESMA topbar.
   Relatório ganha espaço suficiente e a página rola ao invés de cortar. */

@media (orientation: landscape) {

    body.camvio-mobile-device.cliente-page {

        height: auto !important;

        min-height:
            var(
                --camvio-mobile-vh,
                100dvh
            ) !important;

        overflow-y: auto !important;

        -webkit-overflow-scrolling: touch;
    }


    body.camvio-mobile-device.cliente-page
    .topbar {

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

        flex-basis: 58px !important;
    }


    body.camvio-mobile-device.cliente-page
    .cliente-dashboard-layout {

        height: auto !important;

        min-height:
            calc(
                var(
                    --camvio-mobile-vh,
                    100dvh
                ) - 58px
            ) !important;

        overflow: visible !important;
    }


    body.camvio-mobile-device.cliente-page
    .dashboard-frame-container {

        /*
          16:10 dá espaço para o canvas do relatório +
          barra inferior do Power BI sem cortar.
        */

        height:
            max(
                calc(
                    var(
                        --camvio-mobile-vh,
                        100dvh
                    ) - 58px
                ),
                calc(
                    var(
                        --camvio-mobile-vw,
                        100vw
                    ) * 0.625
                )
            ) !important;

        min-height:
            calc(
                var(
                    --camvio-mobile-vh,
                    100dvh
                ) - 58px
            ) !important;
    }


    body.camvio-mobile-device.cliente-page
    #dashboardFrame {

        position: absolute !important;

        inset: 0 !important;

        width: 100% !important;

        height: 100% !important;

        min-width: 100% !important;

        min-height: 100% !important;
    }
}


/* =========================================================
   CAMVIO — FINAL V9
   TOPBAR MOBILE IDÊNTICA EM PORTRAIT E LANDSCAPE
========================================================= */

/* MESMO VISUAL DOS BOTÕES EM QUALQUER ORIENTAÇÃO */
body.camvio-mobile-device.cliente-page
.mobile-back-button,

body.camvio-mobile-device.cliente-page
.mobile-pages-button,

body.camvio-mobile-device.cliente-page
.mobile-topbar-menu-button,

body.camvio-mobile-device.cliente-page
.setores-topbar-toggle {

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

    width: 38px !important;
    height: 38px !important;

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

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

    flex: 0 0 38px !important;

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

    border:
        1px solid
        rgba(255, 255, 255, 0.10) !important;

    border-radius: 10px !important;

    background:
        rgba(255, 255, 255, 0.055) !important;

    color: #ffffff !important;

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

    box-shadow: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;

    cursor: pointer !important;

    -webkit-tap-highlight-color:
        transparent;

    touch-action:
        manipulation;

    z-index: 70002 !important;
}


body.camvio-mobile-device.cliente-page
.mobile-topbar-menu-button {

    font-size: 17px !important;
}


body.camvio-mobile-device.cliente-page
.mobile-pages-button {

    font-size: 14px !important;
}


/* CAMILA: SETOR CONTINUA SÓ ÍCONE */
body.camvio-mobile-device.cliente-page
.setor-topbar-mobile-label {

    display: none !important;
}


/* =========================================================
   MENU HAMBÚRGUER — FUNCIONA TAMBÉM EM LANDSCAPE
========================================================= */

body.camvio-mobile-device.cliente-page
.mobile-topbar-overlay,

body.camvio-mobile-device.cliente-page
.mobile-pages-overlay {

    position: fixed !important;

    inset: 0 !important;

    display: block !important;

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;

    background:
        rgba(3, 10, 25, 0.48) !important;

    backdrop-filter:
        blur(3px);

    -webkit-backdrop-filter:
        blur(3px);

    transition:
        opacity .22s ease,
        visibility .22s ease;

    z-index: 79990 !important;
}


body.camvio-mobile-device.cliente-page
.mobile-topbar-overlay.aberto,

body.camvio-mobile-device.cliente-page
.mobile-pages-overlay.aberto {

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;
}


body.camvio-mobile-device.cliente-page
.mobile-topbar-menu {

    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    width:
        min(
            86vw,
            340px
        ) !important;

    height:
        var(
            --camvio-mobile-vh,
            100dvh
        ) !important;

    max-height:
        var(
            --camvio-mobile-vh,
            100dvh
        ) !important;

    padding:
        0 16px 24px !important;

    overflow-y:
        auto !important;

    background:
        linear-gradient(
            180deg,
            #07101f 0%,
            #09172b 100%
        ) !important;

    color:
        #ffffff !important;

    box-shadow:
        -24px 0 60px
        rgba(0, 0, 0, 0.30) !important;

    transform:
        translateX(105%) !important;

    transition:
        transform .26s ease !important;

    pointer-events:
        auto !important;

    z-index:
        80000 !important;
}


body.camvio-mobile-device.cliente-page
.mobile-topbar-menu.aberto {

    transform:
        translateX(0) !important;
}


/* =========================================================
   DRAWER DE PÁGINAS — FUNCIONA TAMBÉM EM LANDSCAPE
========================================================= */

body.camvio-mobile-device.cliente-page
.mobile-pages-drawer {

    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    width:
        min(
            88vw,
            350px
        ) !important;

    height:
        var(
            --camvio-mobile-vh,
            100dvh
        ) !important;

    max-height:
        var(
            --camvio-mobile-vh,
            100dvh
        ) !important;

    padding:
        0 16px 24px !important;

    overflow-y:
        auto !important;

    background:
        #ffffff !important;

    color:
        #031330 !important;

    box-shadow:
        24px 0 60px
        rgba(3, 19, 48, 0.22) !important;

    transform:
        translateX(-105%) !important;

    transition:
        transform .26s ease !important;

    pointer-events:
        auto !important;

    z-index:
        80000 !important;
}


body.camvio-mobile-device.cliente-page
.mobile-pages-drawer.aberto {

    transform:
        translateX(0) !important;
}


/* TOPBAR SEMPRE ACIMA DO POWER BI */
body.camvio-mobile-device.cliente-page
.topbar {

    z-index:
        70000 !important;
}


/* O IFRAME NUNCA RECEBE PRIORIDADE SOBRE A TOPBAR */
body.camvio-mobile-device.cliente-page
.dashboard-frame-container,

body.camvio-mobile-device.cliente-page
#dashboardFrame {

    z-index:
        1 !important;
}


/* LANDSCAPE NÃO MUDA O VISUAL DA TOPBAR */
@media (orientation: landscape) {

    body.camvio-mobile-device.cliente-page
    .mobile-back-button,

    body.camvio-mobile-device.cliente-page
    .mobile-pages-button,

    body.camvio-mobile-device.cliente-page
    .mobile-topbar-menu-button,

    body.camvio-mobile-device.cliente-page
    .setores-topbar-toggle {

        width: 38px !important;
        height: 38px !important;

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

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

        flex-basis: 38px !important;

        border:
            1px solid
            rgba(255, 255, 255, 0.10) !important;

        background:
            rgba(255, 255, 255, 0.055) !important;

        color:
            #ffffff !important;
    }
}


/* =========================================================
   CAMVIO — V10
   DRAWERS MOBILE COM O MESMO VISUAL EM QUALQUER ORIENTAÇÃO
========================================================= */

/* ---------------------------------------------------------
   MENU HAMBÚRGUER
--------------------------------------------------------- */

body.camvio-mobile-device.cliente-page
.mobile-topbar-menu-header {

    min-height: 84px;

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

    gap: 16px;

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


body.camvio-mobile-device.cliente-page
.mobile-topbar-menu-header > div {

    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 5px;
}


body.camvio-mobile-device.cliente-page
.mobile-topbar-menu-header span {

    color: #60a5fa;

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

    letter-spacing: 0.15em;
}


body.camvio-mobile-device.cliente-page
.mobile-topbar-menu-header strong {

    overflow: hidden;

    color: #ffffff;

    font-size: 15px;
    font-weight: 750;

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


body.camvio-mobile-device.cliente-page
.mobile-topbar-menu-close {

    width: 36px;
    height: 36px;

    min-width: 36px;
    min-height: 36px;

    flex: 0 0 36px;

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

    padding: 0;

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.05);

    color: #ffffff;

    font-size: 15px;
}


body.camvio-mobile-device.cliente-page
.mobile-topbar-menu-list {

    padding-top: 14px;

    display: flex;
    flex-direction: column;

    gap: 4px;
}


body.camvio-mobile-device.cliente-page
.mobile-topbar-menu-item {

    width: 100%;

    min-height: 52px;

    padding: 0 10px;

    display: grid;

    grid-template-columns:
        36px
        minmax(0, 1fr)
        20px;

    align-items: center;

    gap: 10px;

    border: 0;

    border-radius: 12px;

    background: transparent;

    color: #e7edf8;

    text-align: left;

    font-size: 14px;
    font-weight: 650;

    appearance: none;
    -webkit-appearance: none;

    cursor: pointer;
}


body.camvio-mobile-device.cliente-page
.mobile-topbar-menu-item:hover,

body.camvio-mobile-device.cliente-page
.mobile-topbar-menu-item:active {

    background:
        rgba(255, 255, 255, 0.07);
}


body.camvio-mobile-device.cliente-page
.mobile-topbar-menu-item-icon {

    width: 36px;
    height: 36px;

    display: inline-flex;

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

    border-radius: 10px;

    background:
        rgba(0, 102, 255, 0.12);

    color: #60a5fa;
}


body.camvio-mobile-device.cliente-page
.mobile-topbar-menu-chevron {

    justify-self: end;

    color: #64748b;

    font-size: 10px;
}


body.camvio-mobile-device.cliente-page
.mobile-topbar-menu-item.perigo {

    margin-top: 8px;

    color: #fecaca;
}


body.camvio-mobile-device.cliente-page
.mobile-topbar-menu-item.perigo
.mobile-topbar-menu-item-icon {

    background:
        rgba(239, 68, 68, 0.10);

    color: #f87171;
}


/* ---------------------------------------------------------
   DRAWER DE PÁGINAS
   Mesmo card inferior usado no modo em pé.
--------------------------------------------------------- */

body.camvio-mobile-device.cliente-page
.mobile-pages-drawer {

    position: fixed !important;

    top: auto !important;

    left:
        max(
            12px,
            env(safe-area-inset-left)
        ) !important;

    right:
        max(
            12px,
            env(safe-area-inset-right)
        ) !important;

    bottom:
        max(
            12px,
            env(safe-area-inset-bottom)
        ) !important;

    width: auto !important;

    height: auto !important;

    max-width: none !important;

    max-height:
        min(
            74vh,
            640px
        ) !important;

    padding: 18px !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;

    border:
        1px solid
        rgba(3, 19, 48, 0.08) !important;

    border-radius: 20px !important;

    background: #ffffff !important;

    color: #031330 !important;

    box-shadow:
        0 28px 70px
        rgba(3, 19, 48, 0.28) !important;

    transform:
        translateY(
            calc(100% + 40px)
        ) !important;

    transition:
        transform
        0.26s
        ease !important;

    z-index: 80000 !important;
}


body.camvio-mobile-device.cliente-page
.mobile-pages-drawer.aberto {

    transform:
        translateY(0) !important;
}


body.camvio-mobile-device.cliente-page
.mobile-pages-header {

    padding-bottom: 14px;

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

    gap: 14px;

    border-bottom:
        1px solid
        rgba(3, 19, 48, 0.08);
}


body.camvio-mobile-device.cliente-page
.mobile-pages-header > div {

    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;
}


body.camvio-mobile-device.cliente-page
.mobile-pages-header span {

    color: #0066ff;

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

    letter-spacing: 0.15em;
}


body.camvio-mobile-device.cliente-page
.mobile-pages-header strong {

    color: #031330;

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


body.camvio-mobile-device.cliente-page
#mobilePagesClose {

    width: 36px;
    height: 36px;

    min-width: 36px;
    min-height: 36px;

    flex: 0 0 36px;

    padding: 0;

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

    border:
        1px solid
        rgba(3, 19, 48, 0.08);

    border-radius: 10px;

    background:
        rgba(3, 19, 48, 0.04);

    color: #031330;

    font-size: 15px;

    appearance: none;
    -webkit-appearance: none;
}


body.camvio-mobile-device.cliente-page
.mobile-pages-list {

    padding-top: 12px;

    display: flex;
    flex-direction: column;

    gap: 7px;

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


body.camvio-mobile-device.cliente-page
.mobile-page-item {

    width: 100%;

    min-height: 50px;

    padding: 0 14px;

    display: grid;

    grid-template-columns:
        28px
        minmax(0, 1fr)
        18px;

    align-items: center;

    gap: 10px;

    border:
        1px solid
        rgba(3, 19, 48, 0.07);

    border-radius: 12px;

    background: #f8fbff;

    color: #334155;

    text-align: left;

    font-size: 13px;
    font-weight: 650;

    appearance: none;
    -webkit-appearance: none;
}


body.camvio-mobile-device.cliente-page
.mobile-page-item > i:first-child {

    color: #64748b;

    text-align: center;
}


body.camvio-mobile-device.cliente-page
.mobile-page-item.ativo {

    border-color:
        rgba(0, 102, 255, 0.22);

    background:
        rgba(0, 102, 255, 0.08);

    color: #0066ff;
}


body.camvio-mobile-device.cliente-page
.mobile-page-item.ativo > i:first-child {

    color: #0066ff;
}


body.camvio-mobile-device.cliente-page
.mobile-page-chevron {

    justify-self: end;

    color: #94a3b8;

    font-size: 10px;
}


/* Landscape mantém exatamente o mesmo padrão visual. */
@media (orientation: landscape) {

    body.camvio-mobile-device.cliente-page
    .mobile-pages-drawer {

        max-height:
            calc(
                var(
                    --camvio-mobile-vh,
                    100dvh
                ) - 24px
            ) !important;
    }


    body.camvio-mobile-device.cliente-page
    .mobile-topbar-menu {

        width:
            min(
                42vw,
                340px
            ) !important;
    }
}


/* =========================================================
   CAMVIO V11 — TOPBAR SETORES: SOMENTE ÍCONE
========================================================= */

.cliente-page
#setoresTopbarWrapper
.setores-topbar-toggle
.setor-topbar-mobile-label,

.cliente-page
#setoresTopbarWrapper
.setores-topbar-toggle > span {

    display: none !important;
}


.cliente-page
#setoresTopbarWrapper
.setores-topbar-toggle {

    gap: 0 !important;

    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;

    padding: 0 !important;

    justify-content: center !important;
}


/* =========================================================
   CAMVIO V11 — LOADING: UMA ÚNICA FAVICON
========================================================= */

#loadingScreen .loading-content {

    position: relative;
}


#loadingScreen #loadingLogo {

    display: block !important;

    width: auto;

    opacity: 1 !important;
    visibility: visible !important;
}


#loadingScreen .loading-content > img:not(#loadingLogo),

#loadingScreen .loading-logo:not(#loadingLogo) {

    display: none !important;
}


/* =========================================================
   CAMVIO V12 — AJUDA PARA ACESSAR NA INDEX
========================================================= */

.index-access-help {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(3, 19, 48, 0.08);
}

.index-access-help-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}

.index-access-help-title i {
    color: #0066ff;
}

.index-access-help-actions {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.index-access-help-actions a {
    min-height: 38px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgba(0, 102, 255, 0.14);
    border-radius: 10px;
    background: rgba(0, 102, 255, 0.04);
    color: #334155;
    text-decoration: none;
    font-size: 11px;
    font-weight: 750;
}

.index-access-help-actions .fa-whatsapp {
    color: #16a34a;
}

.index-access-help-actions .fa-envelope {
    color: #0066ff;
}

@media (max-width: 420px) {
    .index-access-help-actions {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   CAMVIO V13 — AVISO PREMIUM DE ZOOM / LANDSCAPE
========================================================= */

.camvio-zoom-landscape-notice {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(3, 19, 48, 0.50);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

.camvio-zoom-landscape-notice.is-visible {
    opacity: 1;
    visibility: visible;
}

.camvio-zoom-landscape-card {
    position: relative;
    width: min(430px, calc(100vw - 36px));
    max-height: calc(100dvh - 28px);
    overflow-y: auto;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 22px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 24px 70px rgba(3, 19, 48, .24);
    text-align: center;
    transform: translateY(8px) scale(.985);
    transition: transform .22s ease;
}

.camvio-zoom-landscape-notice.is-visible
.camvio-zoom-landscape-card {
    transform: translateY(0) scale(1);
}

.camvio-zoom-landscape-close {
    position: absolute;
    top: 13px;
    right: 13px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: #64748b;
    cursor: pointer;
}

.camvio-zoom-landscape-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: rgba(0, 102, 255, .09);
    color: #0066ff;
    font-size: 23px;
}

.camvio-zoom-landscape-kicker {
    display: block;
    margin-bottom: 6px;
    color: #0066ff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .13em;
}

.camvio-zoom-landscape-copy h2 {
    margin: 0;
    color: #031330;
    font-size: 21px;
    line-height: 1.15;
}

.camvio-zoom-landscape-copy p {
    max-width: 350px;
    margin: 10px auto 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.55;
}

.camvio-zoom-landscape-copy strong {
    color: #334155;
}

.camvio-zoom-landscape-demo {
    margin: 18px auto;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 13px;
    background: #f8fafc;
    color: #64748b;
}

.camvio-zoom-landscape-demo > span {
    font-size: 20px;
    line-height: 1;
}

.camvio-zoom-landscape-demo strong {
    min-width: 34px;
    color: #334155;
    font-size: 12px;
}

.camvio-zoom-landscape-track {
    position: relative;
    width: 92px;
    height: 3px;
    border-radius: 999px;
    background: #cbd5e1;
}

.camvio-zoom-landscape-track i {
    position: absolute;
    left: 30%;
    top: 50%;
    width: 12px;
    height: 12px;
    border: 3px solid #0066ff;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
}

.camvio-zoom-landscape-ok {
    width: 100%;
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 12px;
    background: #0066ff;
    color: #fff;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
}

@media (orientation: portrait) {
    .camvio-zoom-landscape-notice {
        display: none !important;
    }
}

/* Landscape baixo: card compacto para não cortar em iPhones. */
@media (orientation: landscape) and (max-height: 500px) {
    .camvio-zoom-landscape-notice {
        padding: 10px;
    }

    .camvio-zoom-landscape-card {
        width: min(600px, calc(100vw - 24px));
        padding: 18px 52px 16px;
        border-radius: 18px;
    }

    .camvio-zoom-landscape-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 8px;
        border-radius: 12px;
        font-size: 17px;
    }

    .camvio-zoom-landscape-copy h2 {
        font-size: 18px;
    }

    .camvio-zoom-landscape-copy p {
        margin-top: 6px;
        font-size: 11px;
        line-height: 1.4;
    }

    .camvio-zoom-landscape-demo {
        margin: 10px auto;
        padding: 7px 12px;
    }

    .camvio-zoom-landscape-ok {
        min-height: 36px;
    }
}


/* =========================================================
   CAMVIO V14 — HISTÓRICO / NOTIFICAÇÕES
========================================================= */

.historico-acessos-filtros-v14 {

    display: grid !important;

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

    align-items: end;

    gap: 12px;
}


.historico-acessos-acoes-v14 {

    grid-column:
        1 / -1;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 8px;
}


.btn-historico-secundario,
.btn-historico-perigo {

    min-height: 38px;

    padding: 0 13px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    border-radius: 10px;

    font-size: 11px;

    font-weight: 800;

    cursor: pointer;
}


.btn-historico-secundario {

    border:
        1px solid
        #dce5ef;

    background:
        #ffffff;

    color:
        #52647a;
}


.btn-historico-perigo {

    border:
        1px solid
        #f2cbd0;

    background:
        #ffffff;

    color:
        #dc3545;
}


.btn-historico-perigo:hover {

    background:
        #fff5f5;
}


.notification-header {

    gap: 7px;
}


.notification-header
#markReadBtn,

.notification-header
.notification-clear-btn {

    white-space: nowrap;
}


.notification-clear-btn {

    min-height: 28px;

    padding: 0 8px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    border:
        1px solid
        rgba(220, 53, 69, 0.16);

    border-radius: 8px;

    background:
        rgba(220, 53, 69, 0.04);

    color:
        #dc3545;

    font-size: 9px;

    font-weight: 800;

    cursor: pointer;
}


.notification-clear-btn:hover {

    background:
        rgba(220, 53, 69, 0.09);
}


@media (max-width: 900px) {

    .historico-acessos-filtros-v14 {

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


@media (max-width: 560px) {

    .historico-acessos-filtros-v14 {

        grid-template-columns:
            1fr;
    }


    .historico-acessos-acoes-v14 {

        flex-direction: column;

        align-items: stretch;
    }


    .btn-historico-secundario,
    .btn-historico-perigo {

        width: 100%;
    }


    .notification-header {

        flex-wrap: wrap;
    }
}


/* =========================================================
   CAMVIO V15 — NÃO MOSTRAR NOVAMENTE / AVISO DE ZOOM
========================================================= */

.camvio-zoom-landscape-check {
    margin: 4px 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.4;
    cursor: pointer;
}

.camvio-zoom-landscape-check input {
    width: 15px;
    height: 15px;
    accent-color: #0066ff;
}


/* =========================================================
   CAMVIO V16 — VIOX
   Assistente virtual CAMVIO
========================================================= */

body.viox-aberto {
    overflow: hidden !important;
}


/* ---------------------------------------------------------
   LAUNCHER
--------------------------------------------------------- */

.viox-launcher {
    position: fixed;

    right: 20px;
    bottom: 20px;

    z-index: 95000;

    min-width: 166px;
    min-height: 54px;

    padding:
        6px 13px
        6px 7px;

    display: inline-grid;

    grid-template-columns:
        40px
        minmax(0, 1fr)
        8px;

    align-items: center;

    gap: 9px;

    border:
        1px solid
        rgba(0, 102, 255, 0.13);

    border-radius: 16px;

    background:
        rgba(255, 255, 255, 0.96);

    color: #031330;

    box-shadow:
        0 18px 45px
        rgba(3, 19, 48, 0.17);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    cursor: pointer;

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


.viox-launcher:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(0, 102, 255, 0.28);

    box-shadow:
        0 22px 52px
        rgba(3, 19, 48, 0.21);
}


.viox-launcher-mark,
.viox-brand-mark {
    position: relative;

    display: inline-grid;

    place-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #031330 0%,
            #0066ff 100%
        );

    color: #ffffff;

    font-weight: 950;

    font-style: italic;

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, 0.11);
}


.viox-launcher-mark {
    width: 40px;
    height: 40px;

    border-radius: 12px;

    font-size: 15px;
}


.viox-launcher-mark::after,
.viox-brand-mark::after {
    content: "";

    position: absolute;

    width: 22px;
    height: 2px;

    background:
        rgba(255, 255, 255, 0.35);

    transform:
        rotate(-38deg);

    right: -6px;
    bottom: 8px;
}


.viox-launcher-copy {
    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 1px;
}


.viox-launcher-copy strong {
    color: #031330;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 0.08em;
}


.viox-launcher-copy small {
    color: #64748b;

    font-size: 9px;

    font-weight: 700;
}


.viox-launcher-status {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #22c55e;

    box-shadow:
        0 0 0 4px
        rgba(34, 197, 94, 0.10);
}


/* ---------------------------------------------------------
   OVERLAY / PANEL
--------------------------------------------------------- */

.viox-overlay {
    position: fixed;

    inset: 0;

    z-index: 96000;

    padding: 18px;

    display: flex;

    align-items: flex-end;

    justify-content: flex-end;

    background:
        rgba(3, 19, 48, 0);

    visibility: hidden;

    pointer-events: none;

    transition:
        background .22s ease,
        visibility .22s ease;
}


.viox-overlay.aberto {
    background:
        rgba(3, 19, 48, 0.38);

    visibility: visible;

    pointer-events: auto;
}


.viox-panel {
    width:
        min(
            420px,
            calc(100vw - 28px)
        );

    max-height:
        min(
            720px,
            calc(100dvh - 28px)
        );

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, 0.68);

    border-radius: 24px;

    background: #ffffff;

    box-shadow:
        0 32px 90px
        rgba(3, 19, 48, 0.30);

    opacity: 0;

    transform:
        translateY(16px)
        scale(0.98);

    transition:
        opacity .22s ease,
        transform .22s ease;
}


.viox-overlay.aberto
.viox-panel {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


/* ---------------------------------------------------------
   HEADER
--------------------------------------------------------- */

.viox-header {
    min-height: 80px;

    padding: 15px 16px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

    border-bottom:
        1px solid
        rgba(3, 19, 48, 0.07);

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdff 100%
        );
}


.viox-brand {
    min-width: 0;

    display: flex;

    align-items: center;

    gap: 11px;
}


.viox-brand-mark {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    border-radius: 14px;

    font-size: 17px;
}


.viox-brand-copy {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.viox-title-row {
    display: flex;

    align-items: center;

    gap: 8px;
}


.viox-title-row strong {
    color: #031330;

    font-size: 17px;

    font-weight: 950;

    letter-spacing: 0.07em;
}


.viox-brand-copy > span {
    color: #64748b;

    font-size: 10px;

    font-weight: 650;
}


.viox-online {
    min-height: 20px;

    padding: 0 7px;

    display: inline-flex;

    align-items: center;

    gap: 5px;

    border:
        1px solid
        rgba(34, 197, 94, 0.14);

    border-radius: 999px;

    background:
        rgba(34, 197, 94, 0.07);

    color: #15803d;

    font-size: 8px;

    font-weight: 800;
}


.viox-online i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #22c55e;
}


.viox-close {
    width: 36px;
    height: 36px;

    min-width: 36px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(3, 19, 48, 0.08);

    border-radius: 11px;

    background: #ffffff;

    color: #64748b;

    cursor: pointer;
}


/* ---------------------------------------------------------
   CONTEXT
--------------------------------------------------------- */

.viox-context {
    margin:
        14px 14px
        0;

    padding: 12px;

    display: flex;

    align-items: center;

    gap: 10px;

    border:
        1px solid
        rgba(0, 102, 255, 0.11);

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(0, 102, 255, 0.055),
            rgba(0, 102, 255, 0.018)
        );
}


.viox-context-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    background:
        rgba(0, 102, 255, 0.09);

    color: #0066ff;

    font-size: 13px;
}


.viox-context > div:last-child {
    display: flex;

    flex-direction: column;

    gap: 2px;
}


.viox-context span {
    color: #0066ff;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 0.12em;
}


.viox-context strong {
    color: #031330;

    font-size: 12px;

    font-weight: 800;
}


/* ---------------------------------------------------------
   MESSAGES
--------------------------------------------------------- */

.viox-messages {
    min-height: 130px;

    padding: 15px 16px;

    display: flex;

    flex: 1 1 auto;

    flex-direction: column;

    gap: 12px;

    overflow-y: auto;

    background: #f8fbff;
}


.viox-message {
    display: flex;

    align-items: flex-end;

    gap: 8px;
}


.viox-message.user {
    justify-content: flex-end;
}


.viox-message-mark {
    width: 27px;
    height: 27px;

    flex: 0 0 27px;

    display: grid;

    place-items: center;

    border-radius: 9px;

    background:
        linear-gradient(
            145deg,
            #031330,
            #0066ff
        );

    color: #ffffff;

    font-size: 10px;

    font-style: italic;

    font-weight: 900;
}


.viox-bubble {
    max-width: 84%;

    padding: 11px 12px;

    display: flex;

    flex-direction: column;

    gap: 4px;

    border:
        1px solid
        rgba(3, 19, 48, 0.05);

    border-radius:
        15px 15px
        15px 5px;

    background: #ffffff;

    color: #52647a;

    box-shadow:
        0 6px 20px
        rgba(3, 19, 48, 0.055);

    font-size: 11px;

    line-height: 1.48;
}


.viox-bubble strong {
    color: #031330;

    font-size: 11px;

    font-weight: 850;
}


.viox-bubble span {
    color: #52647a;
}


.viox-message.user
.viox-bubble {
    border: 0;

    border-radius:
        15px 15px
        5px 15px;

    background:
        linear-gradient(
            135deg,
            #005de9,
            #0066ff
        );

    color: #ffffff;

    font-weight: 750;
}


/* ---------------------------------------------------------
   ACTIONS
--------------------------------------------------------- */

.viox-quick-actions {
    padding:
        11px 12px
        12px;

    display: grid;

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

    gap: 8px;

    border-top:
        1px solid
        rgba(3, 19, 48, 0.06);

    background: #ffffff;
}


.viox-action {
    min-height: 70px;

    padding: 10px;

    display: grid;

    grid-template-columns:
        32px
        minmax(0, 1fr)
        12px;

    align-items: center;

    gap: 8px;

    border:
        1px solid
        rgba(3, 19, 48, 0.07);

    border-radius: 13px;

    background: #fbfdff;

    color: #334155;

    text-align: left;

    cursor: pointer;

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


.viox-action:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(0, 102, 255, 0.20);

    background:
        rgba(0, 102, 255, 0.035);
}


.viox-action-icon {
    width: 32px;
    height: 32px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    background:
        rgba(0, 102, 255, 0.075);

    color: #0066ff;

    font-size: 12px;
}


.viox-action-copy {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 2px;
}


.viox-action-copy strong {
    color: #031330;

    font-size: 10px;

    font-weight: 850;
}


.viox-action-copy small {
    color: #7b8b9e;

    font-size: 8px;

    line-height: 1.3;
}


.viox-action > i {
    color: #a4b0bf;

    font-size: 8px;
}


/* ---------------------------------------------------------
   HUMAN ESCALATION
--------------------------------------------------------- */

.viox-human {
    margin:
        0 12px
        12px;

    padding: 12px;

    display: grid;

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

    align-items: center;

    gap: 10px;

    border:
        1px solid
        rgba(3, 19, 48, 0.06);

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #031330,
            #071c3e
        );
}


.viox-human-copy {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.viox-human-copy span {
    color: #60a5fa;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 0.12em;
}


.viox-human-copy strong {
    color: #ffffff;

    font-size: 10px;

    font-weight: 750;
}


.viox-human-actions {
    display: flex;

    gap: 6px;
}


.viox-human-actions a {
    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.055);

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;
}


.viox-human-actions
.fa-whatsapp {
    color: #4ade80;
}


.viox-human-actions
.fa-envelope {
    color: #93c5fd;
}


/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */

.viox-footer {
    min-height: 34px;

    padding:
        0 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    border-top:
        1px solid
        rgba(3, 19, 48, 0.055);

    color: #94a3b8;

    background: #fbfdff;
}


.viox-footer span {
    color: #0066ff;

    font-size: 8px;

    font-weight: 950;

    letter-spacing: 0.09em;
}


.viox-footer small {
    font-size: 8px;
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 560px) {

    .viox-launcher {
        right: 12px;

        bottom:
            max(
                12px,
                env(safe-area-inset-bottom)
            );

        min-width: 50px;
        min-height: 50px;

        width: 50px;
        height: 50px;

        padding: 5px;

        grid-template-columns: 1fr;

        border-radius: 15px;
    }


    .viox-launcher-mark {
        width: 38px;
        height: 38px;

        margin: auto;
    }


    .viox-launcher-copy,
    .viox-launcher-status {
        display: none;
    }


    .viox-overlay {
        padding: 10px;

        align-items: flex-end;

        justify-content: center;
    }


    .viox-panel {
        width: 100%;

        max-height:
            calc(
                100dvh -
                20px
            );

        border-radius: 21px;
    }


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


    .viox-action {
        min-height: 58px;
    }


    .viox-human {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
    }
}


/* No dashboard mobile o suporte entra pelo menu hambúrguer,
   evitando sobreposição com Power BI e controles. */
body.camvio-mobile-device.cliente-page
.viox-launcher {
    display: none !important;
}


/* =========================================================
   CAMVIO V17 — VIOX COMPACTO
   Mantém todas as funções da V16 com painel menor.
========================================================= */

.viox-panel {
    width:
        min(
            360px,
            calc(100vw - 26px)
        ) !important;

    max-height:
        min(
            610px,
            calc(100dvh - 24px)
        ) !important;

    border-radius:
        20px !important;
}


/* HEADER */

.viox-header {
    min-height:
        68px !important;

    padding:
        11px 13px !important;

    gap:
        10px !important;
}


.viox-brand {
    gap:
        9px !important;
}


.viox-brand-mark {
    width:
        38px !important;

    height:
        38px !important;

    flex-basis:
        38px !important;

    border-radius:
        11px !important;

    font-size:
        14px !important;
}


.viox-title-row {
    gap:
        6px !important;
}


.viox-title-row strong {
    font-size:
        15px !important;
}


.viox-brand-copy > span {
    font-size:
        9px !important;
}


.viox-online {
    min-height:
        18px !important;

    padding:
        0 6px !important;

    font-size:
        7px !important;
}


.viox-close {
    width:
        32px !important;

    height:
        32px !important;

    min-width:
        32px !important;

    border-radius:
        9px !important;
}


/* CONTEXTO */

.viox-context {
    margin:
        10px 11px
        0 !important;

    padding:
        9px 10px !important;

    gap:
        8px !important;

    border-radius:
        12px !important;
}


.viox-context-icon {
    width:
        29px !important;

    height:
        29px !important;

    flex-basis:
        29px !important;

    border-radius:
        8px !important;

    font-size:
        11px !important;
}


.viox-context span {
    font-size:
        7px !important;
}


.viox-context strong {
    font-size:
        11px !important;
}


/* MENSAGENS */

.viox-messages {
    min-height:
        108px !important;

    padding:
        11px 13px !important;

    gap:
        9px !important;
}


.viox-message {
    gap:
        6px !important;
}


.viox-message-mark {
    width:
        23px !important;

    height:
        23px !important;

    flex-basis:
        23px !important;

    border-radius:
        7px !important;

    font-size:
        8px !important;
}


.viox-bubble {
    max-width:
        86% !important;

    padding:
        9px 10px !important;

    border-radius:
        13px 13px
        13px 4px !important;

    font-size:
        10px !important;

    line-height:
        1.42 !important;
}


.viox-bubble strong {
    font-size:
        10px !important;
}


/* OPÇÕES */

.viox-quick-actions {
    padding:
        8px 10px
        9px !important;

    gap:
        6px !important;
}


.viox-action {
    min-height:
        58px !important;

    padding:
        7px 8px !important;

    grid-template-columns:
        28px
        minmax(0, 1fr)
        9px !important;

    gap:
        6px !important;

    border-radius:
        11px !important;
}


.viox-action-icon {
    width:
        28px !important;

    height:
        28px !important;

    border-radius:
        8px !important;

    font-size:
        10px !important;
}


.viox-action-copy {
    gap:
        1px !important;
}


.viox-action-copy strong {
    font-size:
        9px !important;
}


.viox-action-copy small {
    font-size:
        7px !important;

    line-height:
        1.25 !important;
}


/* SUPORTE HUMANO */

.viox-human {
    margin:
        0 10px
        9px !important;

    padding:
        9px 10px !important;

    gap:
        7px !important;

    border-radius:
        12px !important;
}


.viox-human-copy {
    gap:
        2px !important;
}


.viox-human-copy span {
    font-size:
        6px !important;
}


.viox-human-copy strong {
    font-size:
        9px !important;
}


.viox-human-actions {
    gap:
        5px !important;
}


.viox-human-actions a {
    width:
        30px !important;

    height:
        30px !important;

    border-radius:
        8px !important;

    font-size:
        11px !important;
}


/* FOOTER */

.viox-footer {
    min-height:
        28px !important;

    padding:
        0 10px !important;

    gap:
        4px !important;
}


.viox-footer span,
.viox-footer small {
    font-size:
        7px !important;
}


/* LAUNCHER MENOR E MAIS LIMPO */

.viox-launcher {
    right:
        16px !important;

    bottom:
        16px !important;

    min-width:
        148px !important;

    min-height:
        48px !important;

    padding:
        5px 11px
        5px 6px !important;

    grid-template-columns:
        36px
        minmax(0, 1fr)
        7px !important;

    gap:
        7px !important;

    border-radius:
        14px !important;
}


.viox-launcher-mark {
    width:
        36px !important;

    height:
        36px !important;

    border-radius:
        10px !important;

    font-size:
        13px !important;
}


.viox-launcher-copy strong {
    font-size:
        11px !important;
}


.viox-launcher-copy small {
    font-size:
        8px !important;
}


/* MOBILE */

@media (max-width: 560px) {

    .viox-overlay {
        padding:
            8px !important;
    }


    .viox-panel {
        width:
            min(
                350px,
                calc(100vw - 16px)
            ) !important;

        max-height:
            calc(
                100dvh -
                16px
            ) !important;

        border-radius:
            18px !important;
    }


    .viox-quick-actions {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }


    .viox-action {
        min-height:
            56px !important;
    }


    .viox-launcher {
        right:
            10px !important;

        bottom:
            max(
                10px,
                env(safe-area-inset-bottom)
            ) !important;

        width:
            46px !important;

        height:
            46px !important;

        min-width:
            46px !important;

        min-height:
            46px !important;

        padding:
            5px !important;

        grid-template-columns:
            1fr !important;

        border-radius:
            13px !important;
    }


    .viox-launcher-mark {
        width:
            34px !important;

        height:
            34px !important;
    }
}


/* LANDSCAPE MOBILE: compacto sem perder funções */

@media
(orientation: landscape)
and
(max-height: 520px) {

    .viox-overlay {
        align-items:
            center !important;

        justify-content:
            flex-end !important;

        padding:
            7px !important;
    }


    .viox-panel {
        width:
            min(
                370px,
                44vw
            ) !important;

        max-height:
            calc(
                100dvh -
                14px
            ) !important;

        border-radius:
            16px !important;
    }


    .viox-header {
        min-height:
            54px !important;

        padding:
            8px 10px !important;
    }


    .viox-brand-mark {
        width:
            32px !important;

        height:
            32px !important;

        flex-basis:
            32px !important;
    }


    .viox-context {
        margin-top:
            7px !important;

        padding:
            7px 8px !important;
    }


    .viox-messages {
        min-height:
            70px !important;

        padding:
            8px 10px !important;
    }


    .viox-quick-actions {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;

        padding:
            6px 8px !important;

        gap:
            5px !important;
    }


    .viox-action {
        min-height:
            45px !important;
    }


    .viox-human {
        margin:
            0 8px
            6px !important;

        padding:
            7px 8px !important;
    }


    .viox-footer {
        min-height:
            22px !important;
    }
}


/* =========================================================
   CAMVIO V18 — VIOX REFINADO
========================================================= */

.viox-panel {
    width:
        min(
            390px,
            calc(100vw - 28px)
        ) !important;

    max-height:
        min(
            650px,
            calc(100dvh - 26px)
        ) !important;

    border-radius:
        22px !important;
}


/* HEADER */

.viox-header {
    min-height:
        72px !important;

    padding:
        12px 14px !important;
}


.viox-brand-mark {
    width:
        42px !important;

    height:
        42px !important;

    flex-basis:
        42px !important;

    border-radius:
        12px !important;

    font-size:
        15px !important;
}


.viox-title-row strong {
    font-size:
        16px !important;
}


.viox-brand-copy > span {
    font-size:
        10px !important;
}


.viox-online {
    min-height:
        19px !important;

    font-size:
        8px !important;
}


/* CONTEXTO */

.viox-context {
    margin:
        11px 12px
        0 !important;

    padding:
        10px 11px !important;
}


.viox-context-icon {
    width:
        32px !important;

    height:
        32px !important;

    flex-basis:
        32px !important;
}


.viox-context span {
    font-size:
        8px !important;
}


.viox-context strong {
    font-size:
        12px !important;
}


/* MENSAGENS */

.viox-messages {
    min-height:
        118px !important;

    padding:
        12px 14px !important;
}


.viox-message-mark {
    width:
        25px !important;

    height:
        25px !important;

    flex-basis:
        25px !important;
}


.viox-bubble {
    max-width:
        86% !important;

    padding:
        10px 12px !important;

    font-size:
        11px !important;

    line-height:
        1.5 !important;
}


.viox-bubble strong {
    font-size:
        11px !important;
}


/* CARDS — menos texto miúdo, melhor leitura */

.viox-quick-actions {
    padding:
        9px 11px
        10px !important;

    gap:
        7px !important;
}


.viox-action {
    min-height:
        64px !important;

    padding:
        8px 9px !important;

    grid-template-columns:
        30px
        minmax(0, 1fr)
        10px !important;

    gap:
        7px !important;
}


.viox-action-icon {
    width:
        30px !important;

    height:
        30px !important;
}


.viox-action-copy strong {
    font-size:
        10px !important;

    line-height:
        1.25 !important;
}


.viox-action-copy small {
    font-size:
        8px !important;

    line-height:
        1.35 !important;
}


/* SUPORTE HUMANO — CORRIGE SOBREPOSIÇÃO */

.viox-human {
    margin:
        0 11px
        10px !important;

    padding:
        11px !important;

    display:
        grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        auto !important;

    align-items:
        center !important;

    gap:
        12px !important;

    border:
        1px solid
        rgba(0, 102, 255, 0.10) !important;

    background:
        linear-gradient(
            135deg,
            #f7fbff,
            #eef6ff
        ) !important;
}


.viox-human-copy span {
    color:
        #0066ff !important;

    font-size:
        7px !important;
}


.viox-human-copy strong {
    color:
        #031330 !important;

    font-size:
        11px !important;

    line-height:
        1.35 !important;
}


.viox-human-actions {
    display:
        flex !important;

    align-items:
        center !important;

    gap:
        7px !important;
}


.viox-human-actions a {
    width:
        auto !important;

    min-width:
        74px !important;

    height:
        34px !important;

    padding:
        0 10px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        6px !important;

    border-radius:
        10px !important;

    background:
        #ffffff !important;

    font-size:
        10px !important;

    font-weight:
        800 !important;
}


.viox-human-actions a:first-child {
    border:
        1px solid
        rgba(34, 197, 94, 0.28) !important;

    color:
        #15803d !important;
}


.viox-human-actions a:last-child {
    border:
        1px solid
        rgba(0, 102, 255, 0.24) !important;

    color:
        #0066ff !important;
}


.viox-human-actions .fa-whatsapp {
    color:
        #16a34a !important;
}


.viox-human-actions .fa-envelope {
    color:
        #0066ff !important;
}


/* FOOTER */

.viox-footer {
    min-height:
        30px !important;
}


/* MOBILE */

@media (max-width: 560px) {

    .viox-panel {
        width:
            min(
                360px,
                calc(100vw - 16px)
            ) !important;

        max-height:
            calc(
                100dvh -
                16px
            ) !important;
    }


    .viox-quick-actions {
        grid-template-columns:
            1fr !important;
    }


    .viox-action {
        min-height:
            58px !important;
    }


    .viox-human {
        grid-template-columns:
            1fr !important;

        gap:
            8px !important;
    }


    .viox-human-actions {
        width:
            100% !important;
    }


    .viox-human-actions a {
        flex:
            1 1 0 !important;

        min-width:
            0 !important;
    }
}


/* LANDSCAPE MOBILE */

@media
(orientation: landscape)
and
(max-height: 520px) {

    .viox-panel {
        width:
            min(
                390px,
                46vw
            ) !important;

        max-height:
            calc(
                100dvh -
                12px
            ) !important;
    }


    .viox-header {
        min-height:
            56px !important;
    }


    .viox-context {
        margin-top:
            6px !important;
    }


    .viox-messages {
        min-height:
            76px !important;

        padding:
            8px 10px !important;
    }


    .viox-quick-actions {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }


    .viox-action {
        min-height:
            48px !important;
    }


    .viox-action-copy small {
        display:
            none !important;
    }


    .viox-human {
        grid-template-columns:
            minmax(0, 1fr)
            auto !important;

        padding:
            7px 8px !important;

        gap:
            8px !important;
    }


    .viox-human-actions a {
        min-width:
            58px !important;

        height:
            30px !important;

        padding:
            0 7px !important;

        font-size:
            8px !important;
    }
}

/* =========================================================
   CAMVIO V19 — VIOX CONVERSACIONAL / ABERTURA LIMPA
   Menos informação inicial e ajuda progressiva.
========================================================= */
.viox-context { display: none !important; }
.viox-messages { min-height: 104px !important; padding-top: 16px !important; }
.viox-action-copy small { display: none !important; }
.viox-action { min-height: 52px !important; }
.viox-quick-actions { grid-template-columns: 1fr !important; }
.viox-action[data-viox-help="mobile"] {
    min-height: 42px !important;
    background: transparent !important;
    border-style: dashed !important;
}
.viox-action[data-viox-help="mobile"] .viox-action-icon {
    width: 26px !important; height: 26px !important;
}
.viox-human { margin-top: 2px !important; }
.viox-human-copy span { display: none !important; }
.viox-human-copy strong::before { content: "Não resolveu? "; font-weight: 700; }
.viox-human-copy strong { font-size: 10px !important; font-weight: 500 !important; }
.viox-followups {
    padding: 0 11px 10px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    background: #fff;
}
.viox-followup {
    min-height: 40px;
    padding: 8px 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid rgba(3,19,48,.08);
    border-radius: 11px;
    background: #fbfdff;
    color: #031330;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}
.viox-followup i { color: #94a3b8; font-size: 8px; }
.viox-back {
    margin: 0 11px 8px;
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
}
@media (min-width: 561px) {
    .viox-panel { width: min(360px, calc(100vw - 28px)) !important; }
}


/* =========================================================
   CAMVIO V20 — VIOX PADRÃO
   Menor, mais legível e proporcional
========================================================= */

/* PAINEL */
.viox-panel {
    width: min(340px, calc(100vw - 24px)) !important;
    max-height: min(560px, calc(100dvh - 24px)) !important;
    border-radius: 18px !important;
}

/* HEADER */
.viox-header {
    min-height: 60px !important;
    padding: 10px 12px !important;
}

.viox-brand-mark {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
}

.viox-title-row strong {
    font-size: 16px !important;
    line-height: 1.1 !important;
}

.viox-brand-copy > span {
    font-size: 10px !important;
    line-height: 1.2 !important;
}

.viox-online {
    min-height: 18px !important;
    padding: 0 6px !important;
    font-size: 8px !important;
}

.viox-close {
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
    border-radius: 9px !important;
}

/* CONTEXTO/FAIXA SUPERIOR */
.viox-context {
    margin: 8px 10px 0 !important;
    padding: 8px 9px !important;
    gap: 7px !important;
    border-radius: 11px !important;
}

.viox-context-icon {
    width: 28px !important;
    height: 28px !important;
    flex-basis: 28px !important;
}

.viox-context span {
    font-size: 8px !important;
}

.viox-context strong {
    font-size: 12px !important;
    line-height: 1.2 !important;
}

/* MENSAGEM */
.viox-messages {
    min-height: 86px !important;
    padding: 10px 11px !important;
    gap: 8px !important;
}

.viox-message-mark {
    width: 23px !important;
    height: 23px !important;
    flex-basis: 23px !important;
    font-size: 9px !important;
}

.viox-bubble {
    max-width: 88% !important;
    padding: 9px 10px !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    border-radius: 12px 12px 12px 4px !important;
}

.viox-bubble strong {
    font-size: 12px !important;
    line-height: 1.25 !important;
}

/* AÇÕES PRINCIPAIS */
.viox-quick-actions {
    padding: 8px 9px !important;
    gap: 6px !important;
}

.viox-action {
    min-height: 52px !important;
    padding: 7px 8px !important;
    grid-template-columns: 28px minmax(0, 1fr) 10px !important;
    gap: 7px !important;
    border-radius: 10px !important;
}

.viox-action-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
}

.viox-action-copy strong {
    font-size: 11px !important;
    line-height: 1.2 !important;
}

.viox-action-copy small {
    font-size: 8.5px !important;
    line-height: 1.25 !important;
}

/* SUPORTE HUMANO */
.viox-human {
    margin: 0 9px 8px !important;
    padding: 8px 9px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    border-radius: 11px !important;
}

.viox-human-copy span {
    font-size: 7px !important;
}

.viox-human-copy strong {
    font-size: 10px !important;
    line-height: 1.25 !important;
}

.viox-human-actions {
    gap: 5px !important;
}

.viox-human-actions a {
    min-width: 64px !important;
    height: 30px !important;
    padding: 0 8px !important;
    gap: 5px !important;
    border-radius: 8px !important;
    font-size: 9px !important;
}

/* FOOTER */
.viox-footer {
    min-height: 25px !important;
    padding: 0 8px !important;
}

.viox-footer span,
.viox-footer small {
    font-size: 7px !important;
}

/* OVERLAY */
.viox-overlay {
    padding: 12px !important;
}

/* LAUNCHER */
.viox-launcher {
    min-width: 142px !important;
    min-height: 46px !important;
    padding: 5px 10px 5px 6px !important;
    grid-template-columns: 34px minmax(0, 1fr) 7px !important;
    gap: 7px !important;
    border-radius: 13px !important;
}

.viox-launcher-mark {
    width: 34px !important;
    height: 34px !important;
    border-radius: 9px !important;
}

.viox-launcher-copy strong {
    font-size: 11px !important;
}

.viox-launcher-copy small {
    font-size: 8px !important;
}

/* MOBILE */
@media (max-width: 560px) {

    .viox-panel {
        width: min(330px, calc(100vw - 14px)) !important;
        max-height: calc(100dvh - 14px) !important;
        border-radius: 17px !important;
    }

    .viox-quick-actions {
        grid-template-columns: 1fr !important;
    }

    .viox-action {
        min-height: 50px !important;
    }

    .viox-action-copy strong {
        font-size: 11px !important;
    }

    .viox-action-copy small {
        font-size: 9px !important;
    }

    .viox-human {
        grid-template-columns: 1fr !important;
    }

    .viox-human-actions {
        width: 100% !important;
    }

    .viox-human-actions a {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
}

/* LANDSCAPE MOBILE */
@media (orientation: landscape) and (max-height: 520px) {

    .viox-panel {
        width: min(340px, 42vw) !important;
        max-height: calc(100dvh - 10px) !important;
    }

    .viox-header {
        min-height: 50px !important;
        padding: 7px 9px !important;
    }

    .viox-context {
        margin-top: 5px !important;
        padding: 6px 7px !important;
    }

    .viox-messages {
        min-height: 62px !important;
        padding: 7px 8px !important;
    }

    .viox-quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
        padding: 6px 7px !important;
    }

    .viox-action {
        min-height: 44px !important;
    }

    .viox-action-copy small {
        display: none !important;
    }

    .viox-human {
        grid-template-columns: minmax(0, 1fr) auto !important;
        padding: 6px 7px !important;
        gap: 7px !important;
    }

    .viox-human-actions a {
        min-width: 56px !important;
        height: 28px !important;
        padding: 0 6px !important;
        font-size: 8px !important;
    }
}