/* =========================================================
   CONTROLE DE PROSPECÇÃO
   ESTILO GLOBAL
   Cor base: rgb(129, 118, 113)
========================================================= */


/* =========================================================
   1. VARIÁVEIS
========================================================= */

:root {

    /* COR PRINCIPAL */
    --cor-base: rgb(129, 118, 113);
    --cor-base-rgb: 129, 118, 113;

    --cor-base-escura: rgb(105, 95, 91);
    --cor-base-mais-escura: rgb(82, 73, 69);

    --cor-base-clara: rgb(167, 158, 153);
    --cor-base-muito-clara: rgb(235, 231, 229);

    /* FUNDOS */
    --bg-page: #f4f2f1;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --bg-hover: #eeeae8;

    /* TEXTO */
    --texto: #302d2c;
    --texto-secundario: #746e6b;
    --texto-claro: #ffffff;
    --texto-muted: #938c88;

    /* BORDAS */
    --borda: #ded9d6;
    --borda-clara: #ebe7e5;

    /* STATUS */
    --sucesso: #4f7a59;
    --sucesso-bg: #edf5ef;

    --erro: #b84f4f;
    --erro-bg: #fbeeee;

    --aviso: #a77b37;
    --aviso-bg: #fff7e8;

    --info: #55758a;
    --info-bg: #edf4f7;

    /* SOMBRAS */
    --shadow-sm:
        0 2px 5px rgba(48, 45, 44, 0.05);

    --shadow:
        0 5px 18px rgba(48, 45, 44, 0.07);

    --shadow-lg:
        0 15px 40px rgba(48, 45, 44, 0.15);

    /* TAMANHOS */
    --sidebar-width: 235px;

    /* BORDAS ARREDONDADAS */
    --radius-sm: 6px;
    --radius: 9px;
    --radius-lg: 12px;
}


/* =========================================================
   2. RESET
========================================================= */

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;

    font-family:
        Inter,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    font-size: 14px;
    color: var(--texto);

    background: var(--bg-page);

    -webkit-font-smoothing: antialiased;
}

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

button {
    font-family: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

h1,
h2,
h3,
h4,
p {
    margin-top: 0;
}


/* =========================================================
   3. PÁGINA PRINCIPAL
========================================================= */

.app-page {
    min-height: 100vh;
    background: var(--bg-page);
}

.app-layout {
    display: flex;
    min-height: 100vh;
}

.app-content {
    flex: 1;
    min-width: 0;
    min-height: 100vh;
}


/* =========================================================
   4. MENU LATERAL
========================================================= */

.sidebar {

    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    height: 100vh;

    position: sticky;
    top: 0;

    display: flex;
    flex-direction: column;

    background:
        linear-gradient(
            180deg,
            var(--cor-base-mais-escura) 0%,
            var(--cor-base-escura) 100%
        );

    color: white;

    box-shadow:
        4px 0 15px rgba(0, 0, 0, 0.08);

    z-index: 100;
}


/* HEADER DO MENU */

.sidebar-header {

    min-height: 105px;

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

    padding: 20px;

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


/* LOGO */

.logo_header {

    width: 100%;

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

.logo_header img {

    display: block;

    max-width: 165px;
    max-height: 65px;

    width: auto;
    height: auto;

    object-fit: contain;
}


/* MENU */

.sidebar-menu {

    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 5px;

    padding: 20px 12px;
}


/* ITEM */

.menu-item {

    position: relative;

    display: flex;
    align-items: center;

    min-height: 42px;

    padding: 11px 14px;

    color:
        rgba(255, 255, 255, 0.82);

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

    border-radius: 7px;

    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}


/* HOVER */

.menu-item:hover {

    color: white;

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

    transform: translateX(2px);
}


/* ATIVO */

.menu-item.ativo {

    color:
        var(--cor-base-mais-escura);

    background: white;

    font-weight: 700;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.08);
}


/* BARRA DO ITEM ATIVO */

.menu-item.ativo::before {

    content: "";

    position: absolute;

    left: -12px;
    top: 8px;
    bottom: 8px;

    width: 4px;

    border-radius:
        0 4px 4px 0;

    background: white;
}


/* RODAPÉ MENU */

.sidebar-footer {

    padding: 15px 12px 20px;

    border-top:
        1px solid rgba(255, 255, 255, 0.10);
}


/* =========================================================
   5. TOPBAR
========================================================= */

.topbar {

    min-height: 85px;

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

    gap: 25px;

    padding: 18px 30px;

    background: white;

    border-bottom:
        1px solid var(--borda-clara);

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.025);

    position: relative;
    z-index: 20;
}


.topbar h1 {

    margin: 0 0 4px;

    color: var(--texto);

    font-size: 22px;
    font-weight: 700;

    letter-spacing: -0.3px;
}


.topbar p {

    margin: 0;

    color: var(--texto-secundario);

    font-size: 13px;
}


/* =========================================================
   6. USUÁRIO LOGADO
========================================================= */

.usuario-logado {

    display: flex;
    flex-direction: column;

    align-items: flex-end;

    gap: 2px;

    padding-left: 20px;

    border-left:
        1px solid var(--borda-clara);
}


.usuario-logado strong {

    color: var(--texto);

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


.usuario-logado span {

    color: var(--texto-muted);

    font-size: 11px;

    text-transform: capitalize;
}


/* =========================================================
   7. CONTEÚDO
========================================================= */

.main-content {

    width: 100%;

    padding: 26px 30px 45px;

    margin: 0 auto;
}


/* =========================================================
   8. CARD PADRÃO
========================================================= */

.welcome-card {

    background: var(--bg-card);

    border:
        1px solid var(--borda-clara);

    border-radius: var(--radius-lg);

    padding: 22px;

    margin-bottom: 20px;

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


.welcome-card h2 {

    margin: 0 0 7px;

    color: var(--texto);

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


.welcome-card p {

    margin: 0;

    color: var(--texto-secundario);

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


/* detalhe superior */

.welcome-card::before {

    content: "";

    display: block;

    width: 42px;
    height: 3px;

    margin-bottom: 17px;

    border-radius: 10px;

    background: var(--cor-base);
}


/* =========================================================
   9. CABEÇALHO INTERNO
========================================================= */

.page-heading {

    display: flex;

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

    gap: 20px;

    margin-bottom: 20px;
}


.page-heading h2 {

    margin-bottom: 5px;
}


.page-heading p {

    color: var(--texto-secundario);
}


/* =========================================================
   10. FORMULÁRIOS
========================================================= */

form {
    width: 100%;
}


.form-group {

    display: flex;
    flex-direction: column;

    gap: 6px;

    margin-bottom: 16px;
}


.form-group label,
.filtro-item label {

    color: #544f4d;

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


/* INPUTS */

input,
select,
textarea {

    width: 100%;

    min-height: 40px;

    padding: 9px 11px;

    color: var(--texto);

    background: var(--bg-input);

    border:
        1px solid var(--borda);

    border-radius: var(--radius-sm);

    outline: none;

    font-size: 13px;

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


/* PLACEHOLDER */

input::placeholder,
textarea::placeholder {

    color: #aaa3a0;
}


/* FOCUS */

input:focus,
select:focus,
textarea:focus {

    border-color: var(--cor-base);

    box-shadow:
        0 0 0 3px
        rgba(var(--cor-base-rgb), 0.13);

    background: white;
}


/* DISABLED */

input:disabled,
select:disabled,
textarea:disabled {

    cursor: not-allowed;

    color: #918a87;

    background: #eeeae8;
}


/* TEXTAREA */

textarea {

    min-height: 100px;

    resize: vertical;

    line-height: 1.45;
}


/* SELECT */

select {

    cursor: pointer;

    appearance: auto;
}


/* =========================================================
   11. GRID DE FORMULÁRIO
========================================================= */

.form-grid {

    display: grid;

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

    gap: 16px 18px;
}


.form-grid .form-group {

    margin-bottom: 0;
}


.form-group-full {

    grid-column: 1 / -1;
}


/* =========================================================
   12. TÍTULOS DENTRO DE FORMULÁRIOS
========================================================= */

form > h2,
#bloco-pj > h2,
#bloco-pf > h2,
#bloco-interno > h2,
#bloco-exportacao > h2 {

    margin:
        28px 0 16px;

    padding-bottom: 9px;

    color: var(--cor-base-mais-escura);

    font-size: 15px;
    font-weight: 700;

    border-bottom:
        1px solid var(--borda-clara);
}


form > h2:first-child {

    margin-top: 0;
}


/* =========================================================
   13. BOTÕES
========================================================= */

.btn {

    min-height: 38px;

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

    gap: 6px;

    width: auto;

    padding: 9px 16px;

    margin: 0;

    border:
        1px solid var(--borda);

    border-radius: var(--radius-sm);

    background: white;

    color: var(--texto);

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

    line-height: 1;

    cursor: pointer;

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


.btn:hover {

    background: var(--bg-hover);

    border-color: var(--cor-base-clara);
}


.btn:active {

    transform: translateY(1px);
}


/* BOTÃO PRINCIPAL */

.btn-primary {

    color: white !important;

    background:
        var(--cor-base) !important;

    border-color:
        var(--cor-base) !important;

    box-shadow:
        0 3px 8px
        rgba(var(--cor-base-rgb), 0.20);
}


.btn-primary:hover {

    background:
        var(--cor-base-escura) !important;

    border-color:
        var(--cor-base-escura) !important;
}


/* EXCLUIR */

.btn-danger {

    color: white !important;

    background:
        var(--erro) !important;

    border-color:
        var(--erro) !important;
}


.btn-danger:hover {

    background:
        #a64343 !important;
}


/* =========================================================
   14. BOTÃO SAIR
========================================================= */

.btn-sair {

    min-height: 35px;

    padding: 8px 14px;

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

    border-radius: 6px;

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

    color: white;

    font-size: 12px;
    font-weight: 600;

    cursor: pointer;

    transition: 0.15s ease;
}


.sidebar .btn-sair {

    width: 100%;
}


.btn-sair:hover {

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


/* sair dentro da topbar */

.topbar .btn-sair {

    color: var(--cor-base-escura);

    border-color: var(--borda);

    background: white;

    margin-top: 6px;
}


.topbar .btn-sair:hover {

    color: white;

    background: var(--cor-base);

    border-color: var(--cor-base);
}


/* =========================================================
   15. AÇÕES DO FORMULÁRIO
========================================================= */

.form-actions {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 22px;

    padding-top: 18px;

    border-top:
        1px solid var(--borda-clara);
}


/* =========================================================
   16. FILTROS DAS PROSPECÇÕES
========================================================= */

.filtros-prospeccoes {

    display: grid;

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

    gap: 15px;

    padding: 20px;

    margin-bottom: 20px;

    background: white;

    border:
        1px solid var(--borda-clara);

    border-radius: var(--radius-lg);

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


.filtro-item {

    min-width: 0;
}


.filtro-item label {

    display: block;

    margin-bottom: 6px;
}


.filtro-busca {

    grid-column: span 2;
}


.filtro-acoes {

    display: flex;

    align-items: flex-end;
}


.filtro-acoes .btn {

    width: 100%;
}


/* =========================================================
   17. LISTAS
========================================================= */

#lista-clientes,
#lista-usuarios,
#lista-representantes,
#lista-prospeccoes,
#lista-prospeccoes-admin {

    display: grid;

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

    gap: 16px;

    align-items: start;
}


/* =========================================================
   18. CARDS DINÂMICOS
========================================================= */

.prospeccao-card,
.cliente-card,
.usuario-card,
.representante-card,
.dashboard-card {

    position: relative;

    background: white;

    border:
        1px solid var(--borda-clara);

    border-radius: var(--radius-lg);

    padding: 18px;

    box-shadow: var(--shadow-sm);

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


.prospeccao-card:hover,
.cliente-card:hover,
.usuario-card:hover,
.representante-card:hover,
.dashboard-card:hover {

    transform: translateY(-2px);

    border-color: #d1cbc8;

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


/* título */

.prospeccao-card h3,
.cliente-card h3,
.usuario-card h3,
.representante-card h3,
.dashboard-card h3 {

    margin:
        0 0 12px;

    color:
        var(--cor-base-mais-escura);

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


/* parágrafos */

.prospeccao-card p,
.cliente-card p,
.usuario-card p,
.representante-card p,
.dashboard-card p {

    margin: 6px 0;

    color: var(--texto-secundario);

    font-size: 12.5px;

    line-height: 1.5;
}


.prospeccao-card strong,
.cliente-card strong,
.usuario-card strong,
.representante-card strong {

    color: var(--texto);
}


/* =========================================================
   19. DASHBOARD GRID
========================================================= */

.dashboard-grid {

    display: grid;

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

    gap: 16px;
}


/* =========================================================
   20. INFORMAÇÕES DA PROSPECÇÃO
========================================================= */

.prospeccao-info {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );

    gap: 12px 20px;

    padding-top: 5px;
}


.prospeccao-info > div {

    padding: 12px;

    background: #faf9f8;

    border:
        1px solid var(--borda-clara);

    border-radius: 7px;
}


/* =========================================================
   21. CLIENTE SELECIONADO
========================================================= */

#cliente-selecionado,
.cliente-card {

    margin-top: 15px;

    padding: 18px;

    background: #faf9f8;

    border:
        1px solid var(--borda);

    border-radius: var(--radius);
}


.cliente-selecionado-topo,
.cliente-card-topo {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 15px;

    margin-bottom: 15px;
}


.cliente-selecionado-topo h3,
.cliente-card-topo h3 {

    margin: 0;
}


/* =========================================================
   22. TAGS
========================================================= */

.cliente-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;
}


.cliente-tag {

    display: inline-flex;

    align-items: center;

    padding: 5px 9px;

    color: var(--cor-base-mais-escura);

    background: var(--cor-base-muito-clara);

    border:
        1px solid #ddd5d1;

    border-radius: 50px;

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

    text-transform: uppercase;

    letter-spacing: 0.25px;
}


/* =========================================================
   23. DADOS DO CLIENTE
========================================================= */

.cliente-dados-grid,
.cliente-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(210px, 1fr)
        );

    gap: 13px 20px;
}


.cliente-dado {

    color: var(--texto-secundario);

    font-size: 13px;
}


.cliente-dado strong,
.cliente-grid strong {

    display: block;

    margin-bottom: 3px;

    color: var(--texto);

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 0.3px;
}


/* =========================================================
   24. AUTOCOMPLETE CLIENTES / REPRESENTANTES
========================================================= */

.cliente-busca-area,
.representante-busca-area {

    position: relative;
}


.cliente-busca-linha {

    display: flex;

    gap: 10px;

    align-items: flex-end;
}


.cliente-busca-linha .form-group {

    flex: 1;
}


#resultado-clientes,
#resultado-representantes {

    position: absolute;

    top: calc(100% + 4px);

    left: 0;
    right: 0;

    z-index: 500;

    max-height: 280px;

    overflow-y: auto;

    background: white;

    border:
        1px solid var(--borda);

    border-radius: var(--radius);

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


.cliente-resultado,
.representante-resultado {

    padding: 11px 13px;

    cursor: pointer;

    border-bottom:
        1px solid var(--borda-clara);

    transition:
        background-color 0.12s ease;
}


.cliente-resultado:last-child,
.representante-resultado:last-child {

    border-bottom: 0;
}


.cliente-resultado:hover,
.representante-resultado:hover {

    background:
        var(--cor-base-muito-clara);
}


.cliente-resultado strong,
.representante-resultado strong {

    display: block;

    color: var(--texto);

    margin-bottom: 3px;
}


.cliente-resultado small,
.representante-resultado small {

    color: var(--texto-secundario);
}


/* =========================================================
   25. LIBERAÇÃO
========================================================= */

.liberacao-box {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    padding: 14px;

    margin-top: 16px;

    background: #faf9f8;

    border:
        1px solid var(--borda);

    border-radius: var(--radius);
}


.liberacao-box input[type="checkbox"] {

    flex: 0 0 auto;

    width: 18px;
    height: 18px;

    min-height: auto;

    margin-top: 2px;

    accent-color: var(--cor-base);
}


.liberacao-box label {

    margin: 0;

    color: var(--texto);

    cursor: pointer;
}


.liberacao-box small {

    display: block;

    margin-top: 4px;

    color: var(--texto-secundario);
}


/* =========================================================
   26. MENSAGENS
========================================================= */

.mensagem,
.msg {

    margin-top: 12px;

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


.mensagem:empty,
.msg:empty {

    display: none;
}


.mensagem.sucesso,
.msg.sucesso {

    padding: 10px 12px;

    color: var(--sucesso);

    background: var(--sucesso-bg);

    border:
        1px solid #cadece;

    border-radius: 6px;
}


.mensagem.erro,
.msg.erro {

    padding: 10px 12px;

    color: var(--erro);

    background: var(--erro-bg);

    border:
        1px solid #efcccc;

    border-radius: 6px;
}


/* =========================================================
   27. CAMPOS OBRIGATÓRIOS
========================================================= */

.campo-obrigatorio,
.obrigatorio {

    color: var(--erro);
}


/* =========================================================
   28. STATUS / BADGES
========================================================= */

.status,
.badge,
.tag {

    display: inline-flex;

    align-items: center;

    padding: 4px 8px;

    border-radius: 50px;

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

    line-height: 1.2;
}


.status-liberado,
.badge-sucesso {

    color: var(--sucesso);

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


.status-bloqueado,
.badge-erro {

    color: var(--erro);

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


.status-pendente,
.badge-aviso {

    color: var(--aviso);

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


/* =========================================================
   29. MODAIS
========================================================= */

.modal-overlay,
#modal-novo-cliente {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

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

    padding: 20px;

    background:
        rgba(43, 38, 36, 0.60);

    backdrop-filter:
        blur(2px);
}


/* modal comum */

.modal-box {

    width:
        min(460px, 95vw);

    padding: 24px;

    background: white;

    border:
        1px solid var(--borda);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-lg);

    animation:
        modalEntrada 0.16s ease;
}


.modal-box h3 {

    margin:
        0 0 10px;

    color: var(--texto);

    font-size: 17px;
}


.modal-box p {

    color: var(--texto-secundario);

    line-height: 1.5;
}


.modal-aviso {

    padding: 10px;

    color: var(--aviso) !important;

    background: var(--aviso-bg);

    border-radius: 6px;
}


.modal-acoes {

    display: flex;

    justify-content: flex-end;

    gap: 9px;

    margin-top: 20px;
}


/* =========================================================
   30. MODAL GRANDE DO CLIENTE
========================================================= */

.modal-cliente-container {

    width:
        min(1200px, 96vw);

    height:
        92vh;

    background: white;

    border-radius: var(--radius-lg);

    overflow: hidden;

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


.modal-cliente-topo {

    height: 55px;

    display: flex;

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

    padding: 0 18px;

    background: #faf9f8;

    border-bottom:
        1px solid var(--borda);
}


.modal-cliente-topo h3 {

    margin: 0;

    font-size: 15px;
}


.modal-fechar {

    width: 34px;
    height: 34px;

    display: flex;

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

    padding: 0;

    border: none;

    border-radius: 6px;

    background: transparent;

    color: var(--texto-secundario);

    font-size: 20px;

    cursor: pointer;
}


.modal-fechar:hover {

    background:
        var(--cor-base-muito-clara);

    color: var(--texto);
}


#iframe-novo-cliente {

    display: block;

    width: 100%;

    height: calc(100% - 55px);

    border: none;
}


/* =========================================================
   31. LOGIN
========================================================= */

.login-page {

    min-height: 100vh;

    display: flex;

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

    padding: 25px;

    background:

        linear-gradient(
            135deg,
            rgba(var(--cor-base-rgb), 0.14),
            rgba(255, 255, 255, 0.7)
        ),

        var(--bg-page);
}


.login-container {

    width: 100%;

    display: flex;

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


.login-card {

    width: min(400px, 100%);

    padding: 35px;

    background: white;

    border:
        1px solid var(--borda);

    border-radius: 14px;

    box-shadow:
        0 20px 55px
        rgba(70, 61, 57, 0.13);
        text-align: center;
}


.login-card::before {

    content: "";

    display: block;

    width: 48px;
    height: 4px;

    margin-bottom: 22px;

    border-radius: 10px;

    background: var(--cor-base);
}


.login-card h1 {

    margin:
        0 0 7px;

    color: var(--texto);

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


.login-card .subtitle {

    margin-bottom: 25px;

    color: var(--texto-secundario);
}


.login-card .btn {

    width: 100%;

    margin-top: 5px;
}


/* =========================================================
   32. SCROLLBAR
========================================================= */

::-webkit-scrollbar {

    width: 8px;
    height: 8px;
}


::-webkit-scrollbar-track {

    background: #eeeae8;
}


::-webkit-scrollbar-thumb {

    background: #bab1ad;

    border-radius: 20px;
}


::-webkit-scrollbar-thumb:hover {

    background: var(--cor-base);
}


/* =========================================================
   33. SELEÇÃO DE TEXTO
========================================================= */

::selection {

    color: white;

    background: var(--cor-base);
}


/* =========================================================
   34. ANIMAÇÕES
========================================================= */

@keyframes modalEntrada {

    from {
        opacity: 0;
        transform: translateY(7px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* =========================================================
   35. TELAS MÉDIAS
========================================================= */

@media (max-width: 1100px) {

    .filtros-prospeccoes {

        grid-template-columns:
            repeat(3, minmax(150px, 1fr));
    }

    .filtro-busca {

        grid-column: span 2;
    }

}


/* =========================================================
   36. TABLET
========================================================= */

@media (max-width: 850px) {

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


    .main-content {

        padding:
            20px 18px 35px;
    }


    .topbar {

        padding:
            15px 20px;
    }


    .form-grid {

        grid-template-columns: 1fr;
    }


    .filtros-prospeccoes {

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


    .filtro-busca {

        grid-column:
            1 / -1;
    }


    #lista-clientes,
    #lista-usuarios,
    #lista-representantes,
    #lista-prospeccoes,
    #lista-prospeccoes-admin {

        grid-template-columns: 1fr;
    }

}


/* =========================================================
   37. CELULAR
========================================================= */

@media (max-width: 650px) {

    .app-layout {

        display: block;
    }


    .sidebar {

        position: relative;

        width: 100%;
        min-width: 0;

        height: auto;
    }


    .sidebar-header {

        min-height: 70px;
    }


    .logo_header img {

        max-height: 45px;
    }


    .sidebar-menu {

        display: grid;

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

        padding: 10px;

        gap: 6px;
    }


    .menu-item {

        justify-content: center;

        text-align: center;

        padding: 9px;

        font-size: 12px;
    }


    .menu-item.ativo::before {

        display: none;
    }


    .sidebar-footer {

        padding: 10px;
    }


    .topbar {

        align-items: flex-start;

        flex-direction: column;

        gap: 12px;

        padding: 16px;
    }


    .usuario-logado {

        width: 100%;

        align-items: flex-start;

        padding:
            10px 0 0;

        border-left: none;

        border-top:
            1px solid var(--borda-clara);
    }


    .main-content {

        padding:
            15px 12px 30px;
    }


    .welcome-card {

        padding: 17px;
    }


    .page-heading {

        align-items: stretch;

        flex-direction: column;
    }


    .page-heading > div:last-child {

        display: flex;

        flex-wrap: wrap;

        gap: 8px;
    }


    .filtros-prospeccoes {

        grid-template-columns: 1fr;

        padding: 15px;
    }


    .filtro-busca {

        grid-column: auto;
    }


    .filtro-acoes {

        display: block;
    }


    .cliente-busca-linha {

        align-items: stretch;

        flex-direction: column;
    }


    .cliente-selecionado-topo,
    .cliente-card-topo {

        flex-direction: column;
    }


    .modal-acoes {

        flex-direction: column-reverse;
    }


    .modal-acoes .btn {

        width: 100%;
    }


    .login-card {

        padding: 25px 20px;
    }

}


/* =========================================================
   38. UTILITÁRIOS
========================================================= */

.hidden,
[hidden] {

    display: none !important;
}


.text-muted {

    color:
        var(--texto-secundario);
}


.text-danger {

    color: var(--erro);
}


.text-success {

    color: var(--sucesso);
}


/* =========================================================
   39. AJUSTES DE CONSISTÊNCIA
========================================================= */

/* remove margens colocadas manualmente em algumas listas */

#lista-prospeccoes-admin {
    margin-top: 0 !important;
}


/* todos os botões dentro de grids/cards */

.prospeccao-card .btn,
.cliente-card .btn,
.usuario-card .btn,
.representante-card .btn {

    min-height: 34px;

    padding:
        7px 11px;

    font-size: 11px;
}


/* área de botões dentro dos cards */

.card-actions,
.acoes-card,
.prospeccao-acoes,
.cliente-acoes,
.usuario-acoes,
.representante-acoes {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 15px;

    padding-top: 13px;

    border-top:
        1px solid var(--borda-clara);
}


/* mantém inputs de data visualmente iguais */

input[type="date"],
input[type="datetime-local"],
input[type="number"] {

    min-height: 40px;
}


/* checkbox e radio */

input[type="checkbox"],
input[type="radio"] {

    accent-color:
        var(--cor-base);
}


/* links dentro de cards */

.welcome-card a:not(.btn),
.prospeccao-card a:not(.btn),
.cliente-card a:not(.btn) {

    color:
        var(--cor-base-escura);

    font-weight: 600;
}


.welcome-card a:not(.btn):hover,
.prospeccao-card a:not(.btn):hover,
.cliente-card a:not(.btn):hover {

    text-decoration: underline;
}

/* =========================================================
   CLIENTE - CARD DA LISTA
========================================================= */

.cliente-lista-card {

    position: relative;

    display: flex;
    flex-direction: column;

    gap: 10px;

    padding: 18px;

    background: white;

    border:
        1px solid var(--borda-clara);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);

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


/* HOVER */

.cliente-lista-card:hover {

    transform: translateY(-2px);

    border-color:
        var(--cor-base-clara);

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


/* TÍTULO */

.cliente-lista-card h3 {

    margin: 0 0 4px;

    color:
        var(--cor-base-mais-escura);

    font-size: 15px;
    font-weight: 700;

    line-height: 1.3;
}


/* TEXTOS */

.cliente-lista-card p {

    margin: 0;

    color:
        var(--texto-secundario);

    font-size: 12.5px;

    line-height: 1.5;
}


/* LABELS / CAMPOS EM DESTAQUE */

.cliente-lista-card strong {

    color: var(--texto);

    font-weight: 650;
}


/* DIVISÓRIA ENTRE INFORMAÇÕES E BOTÕES */

.cliente-lista-card .card-actions,
.cliente-lista-card .cliente-acoes {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 6px;

    padding-top: 13px;

    border-top:
        1px solid var(--borda-clara);
}


/* BOTÕES DO CARD */

.cliente-lista-card .btn {

    min-height: 34px;

    padding: 7px 11px;

    font-size: 11px;
}


/* LINKS */

.cliente-lista-card a:not(.btn) {

    color:
        var(--cor-base-escura);

    font-weight: 600;
}


.cliente-lista-card a:not(.btn):hover {

    text-decoration: underline;
}


/* STATUS / TAGS */

.cliente-lista-card .status,
.cliente-lista-card .badge,
.cliente-lista-card .tag {

    width: fit-content;

    display: inline-flex;

    align-items: center;

    padding: 4px 8px;

    border-radius: 20px;

    font-size: 10px;

    font-weight: 700;
}


/* DESTAQUE LATERAL */

.cliente-lista-card::before {

    content: "";

    position: absolute;

    left: 0;
    top: 14px;
    bottom: 14px;

    width: 3px;

    border-radius:
        0 4px 4px 0;

    background:
        var(--cor-base);
}

.prospeccao-acoes {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 8px;

    margin-top: 14px;
    padding-top: 12px;

    border-top: 1px solid var(--borda-clara);
}


/* BOTÕES DENTRO DAS AÇÕES */

.prospeccao-acoes .btn {
    width: auto;

    min-width: 90px;
    min-height: 34px;

    margin: 0;

    padding: 7px 14px;

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

    gap: 6px;

    border-radius: 7px;

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

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


/* BOTÃO PRINCIPAL */

.prospeccao-acoes .btn-primary {
    background: var(--cor-base) !important;
    color: #fff !important;
}

.prospeccao-acoes .btn-primary:hover {
    background: var(--cor-base-escura) !important;

    transform: translateY(-1px);

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.10);
}


/* BOTÃO EXCLUIR */

.prospeccao-acoes .btn-danger {
    background: #fff !important;
    color: #b94a48 !important;

    border: 1px solid #e2b9b8 !important;
}

.prospeccao-acoes .btn-danger:hover {
    background: #fff3f3 !important;
    border-color: #c96b68 !important;

    transform: translateY(-1px);
}


/* CASO TENHA BOTÃO NEUTRO */

.prospeccao-acoes .btn-secondary {
    background: #fff !important;

    color: var(--cor-base-escura) !important;

    border: 1px solid var(--borda-clara) !important;
}

.prospeccao-acoes .btn-secondary:hover {
    background: var(--cor-base-muito-clara) !important;

    border-color: var(--cor-base-clara) !important;
}


/* RESPONSIVO */

@media (max-width: 650px) {

    .prospeccao-acoes {
        justify-content: stretch;
    }

    .prospeccao-acoes .btn {
        flex: 1;
        min-width: 0;
    }
}

/* =========================================================
   SWITCH LIBERADO / BLOQUEADO
========================================================= */

.liberacao-switch {
    position: relative;

    display: inline-flex;
    align-items: center;

    width: 92px;
    height: 32px;

    padding: 3px;

    border-radius: 30px;

    background: #d8d3d1;

    border: 1px solid #c9c2bf;

    cursor: pointer;

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


/* BOLINHA */

.liberacao-switch::before {
    content: "";

    width: 24px;
    height: 24px;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.18);

    transition:
        transform 0.22s ease;
}


/* TEXTO */

.liberacao-switch::after {
    content: "Bloqueado";

    position: absolute;

    right: 10px;

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

    color: #7b6f6a;

    text-transform: uppercase;

    letter-spacing: 0.3px;

    transition: 0.2s ease;
}


/* ESTADO ATIVO */

.liberacao-switch.ativo {
    background: #5ca66f;

    border-color: #4c925f;

    box-shadow:
        0 0 0 3px rgba(92, 166, 111, 0.12);
}


.liberacao-switch.ativo::before {
    transform: translateX(58px);
}


.liberacao-switch.ativo::after {
    content: "Liberado";

    left: 9px;
    right: auto;

    color: #fff;
}


/* HOVER */

.liberacao-switch:hover {
    border-color: var(--cor-base);

    box-shadow:
        0 0 0 3px rgba(var(--cor-base-rgb), 0.10);
}


.liberacao-switch.ativo:hover {
    background: #529962;
}


/* CLIQUE */

.liberacao-switch:active::before {
    transform: scale(0.92);
}


.liberacao-switch.ativo:active::before {
    transform:
        translateX(58px)
        scale(0.92);
}

.card-representante-prospeccao {
    background-color: #4c925f !important;
}

.logo_login {
    width: 100%;
display: flex;
justify-content: center;
}

.logo_login img {
    width: 40%;

}