/* Original user-supplied icons, viewed through a 216px sprite viewport. */
.app-icon {
    --icon-size: 24px;
    display: inline-block;
    width: var(--icon-size);
    height: var(--icon-size);
    flex: 0 0 var(--icon-size);
    vertical-align: middle;
    background-image: url('../images/brand/icons-sheet.png');
    background-repeat: no-repeat;
    background-size: calc(var(--icon-size)*7.1111111111) calc(var(--icon-size)*4.7407407407);
    border-radius: 6px
}

.has-icon {
    display: inline-flex;
    align-items: center;
    gap: 9px
}

.sidebar nav a.has-icon {
    display: flex
}

.sidebar .app-icon {
    --icon-size: 27px
}

button .app-icon, .button .app-icon {
    --icon-size: 21px
}

h1 .app-icon {
    --icon-size: 34px
}

h2 .app-icon {
    --icon-size: 27px
}

.badge .app-icon {
    --icon-size: 17px
}

.metric > .app-icon {
    --icon-size: 36px;
    float: right;
    margin-left: 8px
}

.brand-wordmark {
    display: block;
    flex: 1;
    min-width: 0;
    width: 100%;
    aspect-ratio: 4.875;
    background-image: url('../images/brand/logo.png');
    background-size: 127.1153846% 247.8125%;
    background-position: 53.191489% 42.283298%;
    background-repeat: no-repeat;
    border-radius: 7px
}

.brand {
    width: 100%;
    min-height: 43px
}

.sidebar .brand {
    padding: 4px 0
}

.auth-card .brand {
    background: #0B2D59;
    border-radius: 10px;
    padding: 10px
}

.auth-card .brand-wordmark {
    min-height: 65px
}

.brand-banner {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 9px;
    margin-top: 18px
}

.gear .app-icon {
    --icon-size: 30px
}

.topbar .gear {
    display: inline-flex
}

.metric > span:not(.app-icon) {
    display: inline-block
}

.metric .app-icon + span {
    max-width: calc(100% - 48px)
}

@media(max-width:700px) {
    .sidebar .brand {
        max-width: 245px
    }

    .sidebar nav a.has-icon {
        display: inline-flex
    }

    .sidebar .app-icon {
        --icon-size: 22px
    }

    .metric > .app-icon {
        --icon-size: 27px
    }

    h1 .app-icon {
        --icon-size: 28px
    }
}

.icon-add {
    background-position: calc(var(--icon-size)*-0.3472222222) calc(var(--icon-size)*-0.3935185185)
}

.icon-delete {
    background-position: calc(var(--icon-size)*-1.7037037037) calc(var(--icon-size)*-0.3935185185)
}

.icon-search {
    background-position: calc(var(--icon-size)*-3.0092592593) calc(var(--icon-size)*-0.3935185185)
}

.icon-edit {
    background-position: calc(var(--icon-size)*-4.3703703704) calc(var(--icon-size)*-0.3935185185)
}

.icon-save {
    background-position: calc(var(--icon-size)*-5.7361111111) calc(var(--icon-size)*-0.3935185185)
}

.icon-customer {
    background-position: calc(var(--icon-size)*-0.3472222222) calc(var(--icon-size)*-1.7407407407)
}

.icon-company {
    background-position: calc(var(--icon-size)*-1.7037037037) calc(var(--icon-size)*-1.7407407407)
}

.icon-user {
    background-position: calc(var(--icon-size)*-3.0092592593) calc(var(--icon-size)*-1.7407407407)
}

.icon-messages {
    background-position: calc(var(--icon-size)*-4.3703703704) calc(var(--icon-size)*-1.7407407407)
}

.icon-list {
    background-position: calc(var(--icon-size)*-5.7361111111) calc(var(--icon-size)*-1.7407407407)
}

.icon-dashboard {
    background-position: calc(var(--icon-size)*-0.3472222222) calc(var(--icon-size)*-3.0972222222)
}

.icon-leads {
    background-position: calc(var(--icon-size)*-1.7037037037) calc(var(--icon-size)*-3.0972222222)
}

.icon-contract {
    background-position: calc(var(--icon-size)*-3.0092592593) calc(var(--icon-size)*-3.0972222222)
}

.icon-settings {
    background-position: calc(var(--icon-size)*-4.3703703704) calc(var(--icon-size)*-3.0972222222)
}

.icon-logout {
    background-position: calc(var(--icon-size)*-5.7361111111) calc(var(--icon-size)*-3.0972222222)
}

.auth-card .brand {
    padding: 0;
    background: transparent
}

    .auth-card .brand img.brand-hero {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 9px
    }

h1.has-icon, h2.has-icon {
    display: flex
}

.culture-switcher {
    position: relative;
    z-index: 20;
    min-width: 155px
}

    .culture-switcher summary {
        list-style: none;
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 10px 12px;
        border: 1px solid #cad5dd;
        border-radius: 7px;
        background: #fff;
        cursor: pointer;
        color: var(--blue);
        font-size: 14px;
        margin: 0
    }

        .culture-switcher summary::-webkit-details-marker {
            display: none
        }

        .culture-switcher summary span {
            margin-left: auto
        }

    .culture-switcher img {
        width: 24px;
        height: 16px;
        object-fit: cover;
        border-radius: 2px;
        flex-shrink: 0
    }

    .culture-switcher form {
        position: absolute;
        top: 100%;
        right: 0;
        width: 100%;
        min-width: 155px;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 8px;
        box-shadow: 0 8px 28px #0B2D591a;
        padding: 5px;
        margin-top: 5px
    }

    .culture-switcher .language-choice {
        display: flex;
        align-items: center;
        gap: 9px;
        width: 100%;
        color: var(--blue);
        background: #fff;
        border-radius: 5px;
        margin: 0;
        padding: 10px;
        font-weight: 400
    }

        .culture-switcher .language-choice:hover {
            background: var(--bg)
        }

/* Ícones próprios para cada menu principal da Chapani. */
.app-icon[class*="icon-menu-"] {
    background-position: center;
    background-size: contain;
    border-radius: 0
}

.icon-menu-painel {
    background-image: url('../images/brand/menu/painel.svg')
}

.icon-menu-conversas {
    background-image: url('../images/brand/menu/conversas.svg')
}

.icon-menu-operadores-comerciais {
    background-image: url('../images/brand/menu/operadores-comerciais.svg')
}

.icon-menu-clientes-empresas {
    background-image: url('../images/brand/menu/clientes-empresas.svg')
}

.icon-menu-orcamentos {
    background-image: url('../images/brand/menu/orcamentos.svg')
}

.icon-menu-financeiro {
    background-image: url('../images/brand/menu/financeiro.svg')
}

.icon-menu-relatorios {
    background-image: url('../images/brand/menu/relatorios.svg')
}

.icon-menu-modelos-mensagens {
    background-image: url('../images/brand/menu/modelos-mensagens.svg')
}

.icon-menu-mensagens {
    background-image: url('../images/brand/menu/mensagens.svg')
}

.icon-menu-automacao-whatsapp {
    background-image: url('../images/brand/menu/automacao-whatsapp.svg')
}

.icon-menu-assinatura {
    background-image: url('../images/brand/menu/assinatura.svg')
}

.icon-menu-configuracoes {
    background-image: url('../images/brand/menu/configuracoes.svg')
}
/* Ativos vetoriais da identidade em tons de azul. */
.app-icon { background-position: center; background-size: contain; background-repeat: no-repeat; }
.icon-add { background-image: url('../images/brand/acoes/add.svg'); background-position: center; }
.icon-delete { background-image: url('../images/brand/acoes/delete.svg'); background-position: center; }
.icon-search { background-image: url('../images/brand/acoes/search.svg'); background-position: center; }
.icon-edit { background-image: url('../images/brand/acoes/edit.svg'); background-position: center; }
.icon-save { background-image: url('../images/brand/acoes/save.svg'); background-position: center; }
.icon-customer { background-image: url('../images/brand/acoes/customer.svg'); background-position: center; }
.icon-company { background-image: url('../images/brand/acoes/company.svg'); background-position: center; }
.icon-user { background-image: url('../images/brand/acoes/user.svg'); background-position: center; }
.icon-messages { background-image: url('../images/brand/acoes/messages.svg'); background-position: center; }
.icon-list { background-image: url('../images/brand/acoes/list.svg'); background-position: center; }
.icon-dashboard { background-image: url('../images/brand/acoes/dashboard.svg'); background-position: center; }
.icon-leads { background-image: url('../images/brand/acoes/leads.svg'); background-position: center; }
.icon-contract { background-image: url('../images/brand/acoes/contract.svg'); background-position: center; }
.icon-settings { background-image: url('../images/brand/acoes/settings.svg'); background-position: center; }
.icon-logout { background-image: url('../images/brand/acoes/logout.svg'); background-position: center; }

.brand-wordmark { aspect-ratio: 3.6; background-image: url('../images/brand/logo-claro.svg?v=20261015-2'); background-position: center; background-size: contain; border-radius: 0; }
.brand { min-height: 54px; }
.sidebar .brand { padding: 0; }
.metric.success > .icon-menu-orcamentos, .badge.success > .icon-menu-orcamentos { background-image: url('../images/brand/conversao-concluida.svg'); }