/* ==========================================================
   PortalEMP — Tema EMP Sistemas
   ========================================================== */

@font-face{
    font-family: "Montserrat";
    src: url("/static/fonts/montserrat/Montserrat-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face{
    font-family: "Montserrat";
    src: url("/static/fonts/montserrat/Montserrat-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face{
    font-family: "Montserrat";
    src: url("/static/fonts/montserrat/Montserrat-SemiBold.otf") format("opentype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face{
    font-family: "Montserrat";
    src: url("/static/fonts/montserrat/Montserrat-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root{
    /* Identidade EMP — paleta oficial */
    --emp-verde: #27A872;
    --emp-verde-claro: #32DB95;
    --emp-verde-escuro: #0A613D;

    /* Fundo escuro */
    --emp-fundo: #0b1220;
    --emp-fundo-secundario: #121c2f;
    --emp-painel: #18243a;
    --emp-card: #1d2a42;

    /* Textos */
    --emp-texto: #e8eefc;
    --emp-texto-suave: #aebbd0;
    --emp-texto-escuro: #243044;

    /* Bordas e sombras */
    --emp-borda: #30405d;
    --emp-sombra: 0 12px 32px rgba(0, 0, 0, 0.25);

    /* Estados */
    --emp-sucesso: #27A872;
    --emp-atencao: #E46340;
    --emp-perigo: #7922AD;
    --emp-informacao: #008FAB;
    --emp-roxo: #9F2EE0;

    /* Controles */
    --emp-raio: 12px;
    --emp-transicao: 0.2s ease;
}

*{
    box-sizing: border-box;
}

html{
    min-height: 100%;
}

body{
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background:
        radial-gradient(
            circle at top right,
            rgba(39, 168, 114, 0.12),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            var(--emp-fundo) 0%,
            var(--emp-fundo-secundario) 100%
        );
    font-family: "Montserrat", "Segoe UI", Arial, Helvetica, sans-serif;
    color: var(--emp-texto);
    transition: background 0.25s ease, color 0.25s ease;
}

body[data-theme="light"]{
    background: linear-gradient(135deg, #f4f7fb 0%, #eef4ff 100%);
    color: #233142;
}

/* ==========================================================
   Estrutura principal
   ========================================================== */

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

.sidebar{
    width: 260px;
    flex: 0 0 260px;
    background: linear-gradient(180deg, #14213d 0%, #223a63 100%);
    color: #ffffff;
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sidebar-header,
.topbar-identidade{
    display: flex;
    align-items: center;
}

.sidebar-header{
    justify-content: space-between;
    gap: 12px;
}

.topbar-identidade{
    gap: 14px;
}

.brand{
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-mark{
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(255,255,255,0.16);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 1.1rem;
}

.brand h1{
    margin: 0;
    font-size: 1.05rem;
}

.brand p{
    margin: 2px 0 0;
    opacity: 0.8;
    font-size: 0.9rem;
}

.sidebar-nav{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-nav a{
    text-decoration: none;
    color: #ffffff;
    padding: 10px 12px;
    border-radius: 12px;
    transition: background var(--emp-transicao);
}

.sidebar-nav a:hover,
.sidebar-nav a.active{
    background: rgba(255,255,255,0.16);
}

.sidebar-nav a.active{
    box-shadow: inset 3px 0 0 var(--emp-verde-claro);
}

.sidebar-logout{
    margin-top: 12px;
    border: 1px solid rgba(255,255,255,0.12);
}

.sidebar-versao{
    margin-top: auto;
    padding-top: 12px;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.45);
    text-align: center;
}

.menu-toggle,
.menu-close,
.menu-overlay{
    display: none;
}

.content-area{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar{
    background: rgba(15, 23, 42, 0.94);
    color: #f8fbff;
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 6px 18px rgba(2, 8, 23, 0.35);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

body[data-theme="light"] .topbar{
    background: #ffffff;
    color: #233142;
    box-shadow: 0 6px 18px rgba(20, 33, 61, 0.06);
}

.topbar h2{
    margin: 4px 0 0;
    font-size: 1.2rem;
}

.topbar-actions{
    display: flex;
    align-items: center;
    gap: 10px;
}

.theme-toggle,
.logout-chip{
    text-decoration: none;
    background: #008FAB;
    color: #ffffff;
    padding: 9px 14px;
    border-radius: 999px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
}

.theme-toggle:hover,
.logout-chip:hover{
    opacity: 0.92;
}

.radio-toggle{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--emp-borda);
    background: var(--emp-painel);
    color: var(--emp-texto-suave);
    font-size: 1rem;
    cursor: pointer;
    transition: var(--emp-transicao);
}

.radio-toggle:hover{
    color: var(--emp-texto);
    border-color: var(--emp-verde);
}

.radio-toggle.tocando{
    color: var(--emp-verde-claro);
    border-color: var(--emp-verde);
    box-shadow: 0 0 0 0 rgba(39, 168, 114, 0.45);
    animation: radio-pulso 2s infinite;
}

@keyframes radio-pulso{
    0%{ box-shadow: 0 0 0 0 rgba(39, 168, 114, 0.45); }
    70%{ box-shadow: 0 0 0 8px rgba(39, 168, 114, 0); }
    100%{ box-shadow: 0 0 0 0 rgba(39, 168, 114, 0); }
}

.container{
    max-width: 1200px;
    width: 100%;
    margin: 24px auto 40px;
    padding: 0 20px;
}

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

/* ==========================================================
   Dashboard
   ========================================================== */

.dashboard-hero{
    background: linear-gradient(135deg, #008FAB 0%, #00BADD 100%);
    color: #ffffff;
    border-radius: 24px;
    padding: 24px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    box-shadow: 0 12px 30px rgba(0, 143, 171, 0.28);
}

.eyebrow{
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.75rem;
    opacity: 0.8;
}

.hero-text{
    margin: 8px 0 0;
    max-width: 620px;
    line-height: 1.5;
    opacity: 0.95;
}

.hero-badge{
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.24);
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 600;
    white-space: nowrap;
}

.stats-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.stat-card,
.dashboard-panel,
.card,
.card-resumo{
    background: rgba(15, 23, 42, 0.88);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 24px rgba(2, 8, 23, 0.28);
}

body[data-theme="light"] .stat-card,
body[data-theme="light"] .dashboard-panel,
body[data-theme="light"] .card,
body[data-theme="light"] .card-resumo{
    background: #ffffff;
    border: 1px solid #e5eaf2;
    box-shadow: 0 10px 24px rgba(35, 49, 66, 0.08);
}

.stat-card{
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
}

.stat-card::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--accent);
}

.stat-card.azul{ --accent: #008FAB; }
.stat-card.verde{ --accent: var(--emp-verde); }
.stat-card.laranja{ --accent: #fd7e14; }

.stat-icon{
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    background: rgba(44, 123, 229, 0.12);
}

.stat-card h3{
    margin: 0 0 6px;
    font-size: 1rem;
    color: #cbd5e1;
}

body[data-theme="light"] .stat-card h3{
    color: #425266;
}

.stat-value{
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: #f8fbff;
}

body[data-theme="light"] .stat-value{
    color: #1f2b3d;
}

.dashboard-grid{
    display: grid;
    grid-template-columns: 1.3fr 0.9fr;
    gap: 16px;
    margin-top: 20px;
}

.dashboard-panel{
    padding: 24px;
}

.dashboard-panel h3{
    margin-bottom: 10px;
    color: #f8fbff;
}

.dashboard-panel p{
    margin: 0;
    color: #cbd5e1;
    line-height: 1.6;
}

body[data-theme="light"] .dashboard-panel h3{
    color: #233142;
}

body[data-theme="light"] .dashboard-panel p{
    color: #5b6b7f;
}

.mini-stats{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 16px;
}

.mini-stats div{
    background: rgba(59, 130, 246, 0.14);
    border-radius: 14px;
    padding: 12px;
}

body[data-theme="light"] .mini-stats div{
    background: #f6f9ff;
}

.mini-stats span{
    display: block;
    color: #7a88a1;
    font-size: 0.82rem;
    margin-bottom: 6px;
}

.mini-stats strong{
    color: var(--emp-texto);
    font-size: 1.05rem;
}

body[data-theme="light"] .mini-stats strong{
    color: #16243b;
}

.activity-list{
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.activity-list li{
    display: flex;
    align-items: center;
    gap: 10px;
    color: #cbd5e1;
}

body[data-theme="light"] .activity-list li{
    color: #475569;
}

.dot{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.dot.blue{ background: #008FAB; }
.dot.green{ background: var(--emp-verde); }
.dot.orange{ background: #fd7e14; }

/* ==========================================================
   Pesquisa e filtros
   ========================================================== */

.pesquisa,
.filtros{
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.pesquisa input,
.filtros input{
    flex: 1;
    min-width: 220px;
    padding: 14px;
    font-size: 17px;
    color: var(--emp-texto);
    background: var(--emp-card);
    border: 1px solid var(--emp-borda);
    border-radius: 10px;
    outline: none;
}

.pesquisa input::placeholder,
.filtros input::placeholder{
    color: var(--emp-texto-suave);
}

.pesquisa input:focus,
.filtros input:focus{
    border-color: var(--emp-verde);
    box-shadow: 0 0 0 3px rgba(39, 168, 114, 0.14);
}

body[data-theme="light"] .pesquisa input,
body[data-theme="light"] .filtros input{
    color: #233142;
    background: #ffffff;
    border-color: #d0d7de;
}

.pesquisa button{
    padding: 14px 18px;
    border: none;
    border-radius: 10px;
    background: #008FAB;
    color: #ffffff;
    cursor: pointer;
    font-size: 16px;
}

/* ==========================================================
   Tabelas e listagens
   ========================================================== */

table{
    width: 100%;
    border-collapse: collapse;
    background: var(--emp-card);
    color: var(--emp-texto);
    border: 1px solid var(--emp-borda);
}

table thead{
    background: var(--emp-painel);
}

table th{
    padding: 13px 12px;
    color: #ffffff;
    font-weight: 600;
    text-align: left;
    border-bottom: 1px solid var(--emp-borda);
}

table td{
    padding: 12px;
    color: var(--emp-texto);
    border-bottom: 1px solid rgba(48, 64, 93, 0.7);
}

table tbody tr{
    background: var(--emp-card);
    transition: background var(--emp-transicao);
}

table tbody tr:nth-child(even){
    background: #202f49;
}

table tbody tr:hover{
    background: #293b59;
}

table a{
    color: var(--emp-verde-claro);
}

table a:hover{
    color: #ffffff;
}

table small,
table .texto-secundario{
    color: var(--emp-texto-suave);
}

body[data-theme="light"] table{
    background: #ffffff;
    color: #243044;
    border-color: #d9e2ec;
}

body[data-theme="light"] table thead{
    background: #2c3e50;
}

body[data-theme="light"] table td{
    color: #243044;
    border-bottom-color: #e5eaf2;
}

body[data-theme="light"] table tbody tr{
    background: #ffffff;
}

body[data-theme="light"] table tbody tr:nth-child(even){
    background: #f6f8fb;
}

body[data-theme="light"] table tbody tr:hover{
    background: #eaf2ff;
}

.tabela-clientes{
    table-layout: fixed;
    width: 100%;
}

.tabela-clientes td,
.tabela-clientes th{
    overflow: hidden;
    text-overflow: ellipsis;
}

.tabela-clientes td:first-child{
    white-space: nowrap;
    width: 120px;
}

/* ==========================================================
   Botões
   ========================================================== */

.botao{
    display: inline-block;
    padding: 7px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: #ffffff;
    font-size: 13px;
    transition: opacity var(--emp-transicao), transform var(--emp-transicao);
}

.botao:hover{
    opacity: 0.90;
    transform: translateY(-1px);
}

.botao.verde{ background: var(--emp-verde); }
.botao.verde-claro{ background: var(--emp-verde-claro); }

.botao.vermelho{
    background: transparent;
    color: var(--emp-texto-suave);
    border: 1px solid var(--emp-borda);
}

.botao.vermelho:hover{
    background: rgba(255, 255, 255, 0.05);
    color: var(--emp-texto);
}


.botao.laranja{
    background: linear-gradient(
        135deg,
        #E46340,
        #B74729
    );

    color: #ffffff;
    border: 1px solid #E46340;
}

.botao.laranja:hover{
    background: linear-gradient(
        135deg,
        #F3A794,
        #E46340
    );
}


.botao.azul{
    background: linear-gradient(
        135deg,
        #00BADD,
        #008FAB
    );

    color: #ffffff;
    border: 1px solid #00BADD;
}

.botao.azul:hover{
    background: linear-gradient(
        135deg,
        #6DD2E2,
        #00BADD
    );
}

.acoes{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ==========================================================
   Status
   ========================================================== */

.status{
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}

.status-verde{
    background: #DFF5EC;
    color: #0A4C3D;
}

.status-amarelo{
    background: #FDEDE8;
    color: #B74729;
}

.status-roxo{
    background: #F1E0FA;
    color: #3F034C;
}

.status-laranja{
    background: #FBEAE3;
    color: #632312;
}

/* ==========================================================
   Histórico — destaque somente durante a animação
   ========================================================== */

#tabelaHistorico tbody tr.linha-nova{
    animation: novaLinha 2s ease-out;
}

#tabelaHistorico tbody tr.linha-nova td,
#tabelaHistorico tbody tr.linha-nova a{
    animation: novoTexto 2s ease-out;
}

/* Conexao cujo Evento foi "Suspenso". Roxo = casos mais graves na
   convencao da marca, os mesmos tons do selo .status-roxo. O #id
   no seletor e de proposito: precisa vencer o zebrado
   (nth-child(even)), o hover e as regras do layout em cartao do
   celular, todas por classe. */
#tabelaHistorico tbody tr.linha-suspensa,
#tabelaHistorico tbody tr.linha-suspensa:nth-child(even){
    background: #3F0D5D;
    border-color: #7922AD;
}

#tabelaHistorico tbody tr.linha-suspensa:hover{
    background: #4E1474;
}

#tabelaHistorico tbody tr.linha-suspensa td{
    color: #F1E0FA;
    border-bottom-color: rgba(201, 147, 228, 0.25);
}

body[data-theme="light"] #tabelaHistorico tbody tr.linha-suspensa,
body[data-theme="light"] #tabelaHistorico tbody tr.linha-suspensa:nth-child(even){
    background: #F6EBFC;
    border-color: #C993E4;
}

body[data-theme="light"] #tabelaHistorico tbody tr.linha-suspensa:hover{
    background: #EDD9F8;
}

body[data-theme="light"] #tabelaHistorico tbody tr.linha-suspensa td{
    color: #3F034C;
    border-bottom-color: #E6CFF5;
}

/* No tema claro o selo SUSPENSO (#F1E0FA) quase some sobre a linha
   lilas; fundo branco devolve o contorno. */
body[data-theme="light"] #tabelaHistorico tbody tr.linha-suspensa .status-roxo{
    background: #ffffff;
}

@keyframes novaLinha{
    0%,
    60%{
        background-color: #9be7b2;
    }

    100%{
        background-color: var(--emp-card);
    }
}

@keyframes novoTexto{
    0%,
    60%{
        color: #12351f;
    }

    100%{
        color: var(--emp-texto);
    }
}

/* ==========================================================
   Financeiro
   ========================================================== */

.cards-resumo{
    display: flex;
    gap: 20px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.card-resumo{
    min-width: 220px;
}

/* Cinco cards, nao quatro como nas outras telas: 220px cada nao cabe
   numa linha so (5x220 + 4x20 de gap > largura util do container), e
   o quinto ("Localizados no EMP") sobrava sozinho na linha de baixo. */
.cards-resumo-retorno .card-resumo{
    min-width: 170px;
    flex: 1 1 170px;
}

.card-resumo h3{
    margin: 0;
    color: var(--emp-verde-claro);
    font-size: 28px;
}

.card-resumo small{
    color: var(--emp-texto-suave);
}

body[data-theme="light"] .card-resumo h3{
    color: #008FAB;
}

body[data-theme="light"] .card-resumo small{
    color: #667085;
}

.filtros-financeiro{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.filtros-financeiro .botao{
    background: var(--emp-card);
    color: var(--emp-texto);
    border: 1px solid var(--emp-borda);
    font-weight: bold;
}

.filtros-financeiro .botao:hover{
    background: #293b59;
}

.filtros-financeiro .botao.verde{
    background: var(--emp-verde);
    color: #ffffff;
    border-color: var(--emp-verde);
}

.botao-copiar-contas{
    font-family: inherit;
    cursor: pointer;
}

.botao-copiar-contas:disabled{
    opacity: 0.5;
    cursor: not-allowed;
}

.feedback-copia{
    min-height: 31px;
    display: inline-flex;
    align-items: center;
    color: var(--emp-verde-claro);
    font-size: 13px;
    font-weight: 700;
}

body[data-theme="light"] .filtros-financeiro .botao{
    background: #ffffff;
    color: #2c3e50;
    border-color: #cfd8dc;
}

body[data-theme="light"] .filtros-financeiro .botao:hover{
    background: #f5f7fa;
}

body[data-theme="light"] .filtros-financeiro .botao.verde{
    background: var(--emp-verde);
    color: #ffffff;
    border-color: var(--emp-verde);
}

/* ==========================================================
   Gráfico do Dashboard
   ========================================================== */

.painel-grafico{
    margin-top: 28px;
    padding: 24px;
    background: var(--emp-card);
    border: 1px solid var(--emp-borda);
    border-radius: var(--emp-raio);
    box-shadow: var(--emp-sombra);
}

.cabecalho-grafico{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.cabecalho-grafico h2{
    margin: 0 0 5px;
    color: var(--emp-texto);
    font-size: 21px;
}

.cabecalho-grafico p{
    margin: 0;
    color: var(--emp-texto-suave);
    font-size: 14px;
}

.area-grafico{
    position: relative;
    width: 100%;
    height: 340px;
}

body[data-theme="light"] .painel-grafico{
    background: #ffffff;
    border-color: #d9e2ec;
}

body[data-theme="light"] .cabecalho-grafico h2{
    color: #243044;
}

body[data-theme="light"] .cabecalho-grafico p{
    color: #667085;
}

/* ==========================================================
   Responsividade
   ========================================================== */

@media(max-width: 900px){
    .app-shell{
        display: block;
    }

    .sidebar{
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 1100;
        width: min(84vw, 300px);
        padding: 20px 16px;
        box-shadow: 18px 0 45px rgba(2, 8, 23, 0.38);
        transform: translateX(-105%);
        transition: transform 0.25s ease;
        overflow-y: auto;
    }

    body.menu-aberto{
        overflow: hidden;
    }

    body.menu-aberto .sidebar{
        transform: translateX(0);
    }

    .menu-overlay{
        position: fixed;
        inset: 0;
        z-index: 1050;
        width: 100%;
        height: 100%;
        padding: 0;
        background: rgba(2, 8, 23, 0.68);
        border: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }

    body.menu-aberto .menu-overlay{
        display: block;
        opacity: 1;
        visibility: visible;
    }

    .menu-toggle{
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        padding: 11px 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: inherit;
        background: rgba(59, 130, 246, 0.14);
        border: 1px solid rgba(59, 130, 246, 0.3);
        border-radius: 12px;
        cursor: pointer;
    }

    .menu-toggle span{
        display: block;
        width: 100%;
        height: 2px;
        background: currentColor;
        border-radius: 999px;
    }

    .menu-close{
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        display: grid;
        place-items: center;
        color: #ffffff;
        background: rgba(255,255,255,0.1);
        border: 1px solid rgba(255,255,255,0.14);
        border-radius: 12px;
        cursor: pointer;
        font-size: 26px;
        line-height: 1;
    }

    .sidebar-nav a{
        min-height: 48px;
        display: flex;
        align-items: center;
        padding: 12px 14px;
    }

    .stats-grid,
    .dashboard-grid,
    .mini-stats{
        grid-template-columns: 1fr;
    }
}

@media(max-width: 700px){
    .cards-resumo{
        flex-wrap: nowrap;
        gap: 10px;
    }

    .card-resumo{
        flex: 1 1 0;
        min-width: 0;
        padding: 14px;
    }

    .card-resumo h3{
        font-size: clamp(18px, 5vw, 28px);
        overflow-wrap: anywhere;
    }

    .topbar{
        padding: 12px 14px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .topbar-identidade{
        min-width: 0;
    }

    .topbar .eyebrow{
        display: none;
    }

    .topbar h2{
        margin: 0;
        font-size: 1rem;
    }

    .topbar-actions{
        margin-left: auto;
    }

    .logout-chip{
        display: none;
    }

    .theme-toggle{
        padding: 8px 11px;
        font-size: 0.82rem;
    }

    .dashboard-hero{
        flex-direction: column;
        align-items: flex-start;
    }

    .container{
        padding: 0 14px;
    }

    .pesquisa,
    .filtros{
        gap: 8px;
    }

    .pesquisa input,
    .filtros input{
        min-width: 100%;
        font-size: 18px;
    }

    .pesquisa button{
        width: 100%;
    }


    table td{
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }

    table td::before{
        content: attr(data-label);
        font-weight: 700;
        color: var(--emp-texto-suave, #aebbd0);
    }

    
    table,
    thead,
    tbody,
    th,
    td,
    tr{
        display: block;
    }

    thead{
        display: none;
    }

    table{
        border: none;
        background: transparent;
    }

    table tbody tr{
        display: flex;
        flex-direction: column;
        margin-bottom: 15px;
        padding: 14px;
        border: 1px solid var(--emp-borda);
        border-radius: 16px;
        box-shadow: 0 8px 20px rgba(0,0,0,.18);
        background: var(--emp-card);
    }

    table tbody tr:nth-child(even){
        background: #202f49;
    }

    table td{
        border: none;
        min-width: 0;
        padding: 10px 8px;
        border-bottom: 1px solid rgba(174, 187, 208, 0.12);
    }

    table td:last-child{
        border-bottom: none;
    }

    table td::before{
        flex: 0 0 42%;
        font-size: 0.78rem;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

    table td:not(.mobile-card-actions){
        overflow-wrap: anywhere;
        text-align: right;
    }

    table td.mobile-card-title{
        order: -2;
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
        padding: 4px 8px 13px;
        color: var(--emp-texto);
        font-size: 1.05rem;
        font-weight: 700;
        line-height: 1.35;
        text-align: left;
    }

    table td.mobile-card-title::before{
        flex-basis: auto;
        color: var(--emp-verde-claro);
        font-size: 0.7rem;
    }

    table td.mobile-card-status{
        order: -1;
        justify-content: space-between;
        overflow: visible;
        text-overflow: clip;
    }

    table td.mobile-card-status .status{
        flex-shrink: 0;
        white-space: nowrap;
    }

    table td.mobile-card-actions{
        align-items: stretch;
        flex-wrap: wrap;
        padding-top: 14px;
        gap: 8px;
    }

    table td.mobile-card-actions::before{
        flex: 0 0 100%;
        margin-bottom: 2px;
    }

    table td.mobile-card-actions .botao{
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    table td.campo-opcional.vazio-mobile{
        display: none;
    }

    #tabelaHistorico td:first-child{
        width: 100%;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    body[data-theme="light"] table tbody tr,
    body[data-theme="light"] table tbody tr:nth-child(even){
        background: #ffffff;
        border-color: #d9e2ec;
    }

    body[data-theme="light"] table td{
        border-bottom-color: #e8edf3;
    }

    body[data-theme="light"] table td.mobile-card-title{
        color: #243044;
    }

    .acoes{
        margin-top: 10px;
    }

    .botao{
        flex: 1;
        text-align: center;
    }

    .painel-grafico{
        padding: 16px;
        margin-top: 20px;
    }

    .cabecalho-grafico h2{
        font-size: 18px;
    }

    .area-grafico{
        height: 280px;
    }
}


/* ==========================================================
   Login do PortalEMP
   ========================================================== */

.pagina-login{
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: #0b1220;
    color: #e8eefc;
}

.login-container{
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns:
        minmax(360px, 1.05fr)
        minmax(440px, 0.95fr);
}


/* ==========================================================
   Apresentação lateral
   ========================================================== */

.login-apresentacao{
    position: relative;
    overflow: hidden;

    padding: 46px 54px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(67, 212, 119, 0.28),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(59, 130, 246, 0.22),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            #111d32 0%,
            #142b3a 52%,
            #123d2b 100%
        );
}

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

    position: absolute;
    width: 430px;
    height: 430px;

    top: -190px;
    right: -190px;

    border-radius: 50%;
    border: 70px solid rgba(255, 255, 255, 0.035);
}

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

    position: absolute;
    width: 340px;
    height: 340px;

    bottom: -180px;
    left: -140px;

    border-radius: 50%;
    border: 55px solid rgba(39, 168, 114, 0.08);
}

.login-marca{
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    gap: 14px;
}

.login-logo{
    display: block;

    max-width: 150px;
    max-height: 68px;

    object-fit: contain;
}

.login-marca div{
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.login-marca strong{
    font-size: 17px;
    letter-spacing: 0.01em;
}

.login-marca span{
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
}

.login-apresentacao-conteudo{
    position: relative;
    z-index: 1;

    max-width: 610px;
}

.login-etiqueta{
    display: inline-flex;

    margin-bottom: 22px;
    padding: 8px 13px;

    border: 1px solid rgba(67, 212, 119, 0.35);
    border-radius: 999px;

    color: #77e59d;
    background: rgba(39, 168, 114, 0.09);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.login-apresentacao h1{
    max-width: 580px;

    margin: 0 0 20px;

    font-size: clamp(38px, 5vw, 62px);
    font-weight: 750;
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.login-apresentacao-conteudo p{
    max-width: 560px;

    margin: 0;

    color: rgba(232, 238, 252, 0.76);

    font-size: 17px;
    line-height: 1.7;
}

.login-apresentacao-rodape{
    position: relative;
    z-index: 1;

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

    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}


/* ==========================================================
   Área do formulário
   ========================================================== */

.login-area{
    padding: 40px;

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

    background:
        radial-gradient(
            circle at top right,
            rgba(39, 168, 114, 0.09),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #0b1220 0%,
            #121c2f 100%
        );
}

.login-card{
    width: 100%;
    max-width: 470px;

    padding: 38px;

    background: rgba(24, 36, 58, 0.93);

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 24px;

    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);

    backdrop-filter: blur(12px);
}

.login-card-cabecalho{
    display: flex;
    align-items: center;
    gap: 16px;

    margin-bottom: 30px;
}

.login-icone{
    width: 58px;
    height: 58px;
    flex: 0 0 58px;

    display: grid;
    place-items: center;

    border-radius: 17px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--emp-verde, #27A872),
            var(--emp-verde-escuro, #0A613D)
        );

    box-shadow:
        0 10px 24px rgba(39, 168, 114, 0.28);

    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.login-saudacao{
    margin: 0 0 4px;

    color: var(--emp-verde-claro, #32DB95);

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.login-card h2{
    margin: 0;

    color: #ffffff;

    font-size: 25px;
    letter-spacing: -0.02em;
}

.login-instrucao{
    margin: 5px 0 0;

    color: var(--emp-texto-suave, #aebbd0);

    font-size: 14px;
}

.login-alerta{
    margin-bottom: 22px;
    padding: 13px 15px;

    display: flex;
    align-items: center;
    gap: 11px;

    color: #ecd6fa;
    background: rgba(121, 34, 173, 0.14);

    border: 1px solid rgba(121, 34, 173, 0.38);
    border-radius: 12px;
}

.login-alerta span{
    width: 25px;
    height: 25px;
    flex: 0 0 25px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #ffffff;
    background: var(--emp-perigo, #7922AD);

    font-weight: 800;
}

.login-alerta p{
    margin: 0;
    font-size: 14px;
}

.login-formulario{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.login-campo label{
    display: block;

    margin-bottom: 8px;

    color: #d9e3f3;

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

.login-input-container{
    min-height: 54px;

    display: flex;
    align-items: center;

    background: rgba(11, 18, 32, 0.66);

    border: 1px solid var(--emp-borda, #30405d);
    border-radius: 13px;

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

.login-input-container:focus-within{
    background: rgba(11, 18, 32, 0.88);

    border-color: var(--emp-verde, #27A872);

    box-shadow:
        0 0 0 4px rgba(39, 168, 114, 0.12);
}

.login-input-icone{
    width: 48px;
    flex: 0 0 48px;

    display: grid;
    place-items: center;

    color: var(--emp-texto-suave, #aebbd0);

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

.login-input-container input{
    width: 100%;
    min-width: 0;
    height: 52px;

    padding: 0 12px 0 0;

    color: #ffffff;
    background: transparent;

    border: none;
    outline: none;

    font-family: inherit;
    font-size: 16px;
}

.login-input-container input::placeholder{
    color: #738198;
}

.login-mostrar-senha{
    margin-right: 8px;
    padding: 8px 9px;

    color: var(--emp-verde-claro, #32DB95);
    background: transparent;

    border: none;
    border-radius: 8px;

    cursor: pointer;

    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
}

.login-mostrar-senha:hover{
    background: rgba(39, 168, 114, 0.1);
}

.login-botao{
    width: 100%;
    min-height: 54px;

    margin-top: 4px;
    padding: 0 20px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--emp-verde, #27A872),
            var(--emp-verde-escuro, #0A613D)
        );

    border: none;
    border-radius: 13px;

    box-shadow:
        0 13px 28px rgba(39, 168, 114, 0.24);

    cursor: pointer;

    font-family: inherit;
    font-size: 16px;
    font-weight: 750;

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

.login-botao:hover{
    filter: brightness(1.08);
    transform: translateY(-2px);

    box-shadow:
        0 16px 34px rgba(39, 168, 114, 0.31);
}

.login-botao:active{
    transform: translateY(0);
}

.status-consulta-historico{
    min-height: 24px;
    margin: -8px 0 12px;
    color: var(--emp-texto-suave);
    font-size: 14px;
}

.status-consulta-historico.consultando::before{
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -2px;
    animation: girar-status-consulta 0.7s linear infinite;
}

.status-consulta-historico.sucesso{ color: #32DB95; }
.status-consulta-historico.vazio{ color: #f0b44c; }
.status-consulta-historico.erro{ color: #C993E4; }

@keyframes girar-status-consulta{
    to{ transform: rotate(360deg); }
}

.login-botao:disabled{
    cursor: wait;
    filter: saturate(0.8);
    opacity: 0.85;
    transform: none;
}

.login-botao:disabled:hover{
    filter: saturate(0.8);
    transform: none;
}

.login-carregando{
    width: 18px;
    height: 18px;

    display: none;

    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
}

.login-botao.esta-carregando .login-carregando{
    display: block;
    animation: login-girar 0.75s linear infinite;
}

.login-status{
    margin: -2px 0 0;

    color: var(--emp-texto-suave, #aebbd0);

    font-size: 13px;
    line-height: 1.45;
    text-align: center;
}

@keyframes login-girar{
    to{
        transform: rotate(360deg);
    }
}

.login-seguranca{
    margin-top: 24px;
    padding-top: 20px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    color: var(--emp-texto-suave, #aebbd0);

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

.login-seguranca p{
    margin: 0;
    font-size: 12px;
}

.login-rodape{
    width: 100%;
    max-width: 470px;

    margin-top: 20px;

    display: flex;
    justify-content: space-between;
    gap: 12px;

    color: #718096;

    font-size: 12px;
}


/* ==========================================================
   Login responsivo
   ========================================================== */

@media(max-width: 950px){

    .login-container{
        grid-template-columns: 1fr;
    }

    .login-apresentacao{
        min-height: 270px;
        padding: 30px;
    }

    .login-apresentacao-conteudo{
        margin: 42px 0;
    }

    .login-apresentacao h1{
        max-width: 660px;
        font-size: 40px;
    }

    .login-apresentacao-rodape{
        display: none;
    }

    .login-area{
        padding: 42px 22px;
    }

}


@media(max-width: 600px){

    .login-apresentacao{
        min-height: auto;
        padding: 24px 20px;
    }

    .login-marca div{
        display: none;
    }

    .login-logo{
        max-width: 125px;
        max-height: 56px;
    }

    .login-apresentacao-conteudo{
        margin: 34px 0 10px;
    }

    .login-etiqueta{
        margin-bottom: 15px;
        font-size: 10px;
    }

    .login-apresentacao h1{
        margin-bottom: 13px;
        font-size: 31px;
    }

    .login-apresentacao-conteudo p{
        font-size: 14px;
        line-height: 1.55;
    }

    .login-area{
        padding: 25px 14px 30px;
    }

    .login-card{
        padding: 26px 20px;
        border-radius: 19px;
    }

    .login-card-cabecalho{
        align-items: flex-start;
        margin-bottom: 25px;
    }

    .login-icone{
        width: 49px;
        height: 49px;
        flex-basis: 49px;
        border-radius: 14px;
        font-size: 12px;
    }

    .login-card h2{
        font-size: 21px;
    }

    .login-instrucao{
        font-size: 13px;
    }

    .login-rodape{
        padding: 0 6px;
    }

}

.numero-atualizado{
    animation: atualizarNumero 1s ease;
}

@keyframes atualizarNumero{

    0%{
        color: var(--emp-verde-claro, #32DB95);
        transform: scale(1);
    }

    45%{
        color: #ffffff;
        transform: scale(1.18);
    }

    100%{
        color: inherit;
        transform: scale(1);
    }

}

/* ==========================================================
   Contas Recebidas / DataTables
   ========================================================== */

.tabela-datatable{
    margin-top: 20px;
    overflow: visible;
}

.valor-monetario{
    text-align: right;
    white-space: nowrap;
}

.destaque-valor{
    color: var(--emp-verde-claro, #32DB95);
    font-weight: 700;
}


/* Área superior do DataTables */

.dt-container{
    color: var(--emp-texto, #e8eefc);
}

.dt-container .dt-layout-row{
    margin: 0 0 14px;
}

.dt-container .dt-search,
.dt-container .dt-length,
.dt-container .dt-info{
    color: var(--emp-texto-suave, #aebbd0);
}

.dt-container .dt-search input,
.dt-container .dt-length select{
    margin-left: 8px;
    padding: 8px 10px;

    color: var(--emp-texto, #e8eefc);
    background: var(--emp-card, #1d2a42);

    border: 1px solid var(--emp-borda, #30405d);
    border-radius: 8px;
    outline: none;
}

.dt-container .dt-search input:focus,
.dt-container .dt-length select:focus{
    border-color: var(--emp-verde, #27A872);

    box-shadow:
        0 0 0 3px rgba(39, 168, 114, 0.14);
}


/* Paginação */

.dt-container .dt-paging .dt-paging-button{
    color: var(--emp-texto, #e8eefc) !important;
    background: var(--emp-card, #1d2a42) !important;

    border: 1px solid var(--emp-borda, #30405d) !important;
    border-radius: 7px !important;
}

.dt-container .dt-paging .dt-paging-button:hover{
    color: #ffffff !important;
    background: #293b59 !important;
}

.dt-container .dt-paging .dt-paging-button.current{
    color: #ffffff !important;
    background: var(--emp-verde, #27A872) !important;
    border-color: var(--emp-verde, #27A872) !important;
}


/* Linha expandida no celular */

table.dataTable > tbody > tr.child ul.dtr-details{
    width: 100%;
}

table.dataTable > tbody > tr.child span.dtr-title{
    color: var(--emp-texto-suave, #aebbd0);
    font-weight: 700;
}

table.dataTable > tbody > tr.child span.dtr-data{
    color: var(--emp-texto, #e8eefc);
}


/* Tema claro */

body[data-theme="light"] .dt-container{
    color: #243044;
}

body[data-theme="light"] .dt-container .dt-search,
body[data-theme="light"] .dt-container .dt-length,
body[data-theme="light"] .dt-container .dt-info{
    color: #667085;
}

body[data-theme="light"] .dt-container .dt-search input,
body[data-theme="light"] .dt-container .dt-length select{
    color: #243044;
    background: #ffffff;
    border-color: #cfd8dc;
}

body[data-theme="light"]
.dt-container
.dt-paging
.dt-paging-button{
    color: #243044 !important;
    background: #ffffff !important;
    border-color: #cfd8dc !important;
}


/* Celular */

@media(max-width: 700px){

    .tabela-datatable{
        padding: 12px;
    }

    .dt-container .dt-layout-row{
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .dt-container .dt-search input{
        width: 100%;
        margin: 7px 0 0;
    }

    .dt-container .dt-length select{
        margin-left: 6px;
    }

    .dt-container .dt-paging{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

}

/* ==========================================================
   Filtros de Contas Recebidas
   ========================================================== */

.filtros-recebidas{
    margin-top: 22px;
    margin-bottom: 14px;
}

.formulario-periodo-recebidas{
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;

    margin-bottom: 14px;
    padding: 16px;

    background: var(--emp-card, #1d2a42);
    border: 1px solid var(--emp-borda, #30405d);
    border-radius: var(--emp-raio, 12px);
}

.campo-periodo{
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.campo-periodo label{
    color: var(--emp-texto-suave, #aebbd0);
    font-size: 13px;
    font-weight: 600;
}

.campo-periodo input{
    min-height: 39px;
    padding: 8px 10px;

    color: var(--emp-texto, #e8eefc);
    background: var(--emp-fundo, #0b1220);

    border: 1px solid var(--emp-borda, #30405d);
    border-radius: 8px;

    font-family: inherit;
    font-size: 14px;
}

.campo-periodo input:focus{
    border-color: var(--emp-verde, #27A872);
    outline: none;

    box-shadow:
        0 0 0 3px rgba(39, 168, 114, 0.14);
}

.periodo-consultado{
    margin: 0 0 18px;
    color: var(--emp-texto-suave, #aebbd0);
    font-size: 14px;
}

.periodo-consultado strong{
    color: var(--emp-texto, #e8eefc);
}

.aviso-periodo{
    margin-bottom: 14px;
    padding: 12px 14px;

    color: #ffe7ad;
    background: rgba(233, 185, 73, 0.12);

    border: 1px solid rgba(233, 185, 73, 0.35);
    border-radius: 9px;
}


/* Tema claro */

body[data-theme="light"]
.formulario-periodo-recebidas{
    background: #ffffff;
    border-color: #d9e2ec;
}

body[data-theme="light"]
.campo-periodo input{
    color: #243044;
    background: #ffffff;
    border-color: #cfd8dc;
}

body[data-theme="light"]
.periodo-consultado strong{
    color: #243044;
}


/* Celular */

@media(max-width: 700px){

    .formulario-periodo-recebidas{
        align-items: stretch;
    }

    .campo-periodo{
        width: 100%;
    }

    .campo-periodo input{
        width: 100%;
        min-height: 46px;
    }

    .formulario-periodo-recebidas .botao{
        width: 100%;
        min-height: 46px;

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

}

/* ==========================================================
   Baixa de conta
   ========================================================== */

.modal-aberto{
    overflow: hidden;
}

.modal-baixa[hidden]{
    display: none;
}

.modal-baixa{
    position: fixed;
    inset: 0;
    z-index: 2000;

    display: grid;
    place-items: center;

    padding: 20px;
}

.modal-baixa-fundo{
    position: absolute;
    inset: 0;

    background: rgba(2, 8, 23, 0.76);
    backdrop-filter: blur(4px);
}

.modal-baixa-card{
    position: relative;
    z-index: 1;

    width: min(100%, 470px);
    padding: 25px;

    color: var(--emp-texto);
    background: var(--emp-card);

    border: 1px solid var(--emp-borda);
    border-radius: 18px;

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

.modal-baixa-cabecalho{
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.modal-baixa-cabecalho h2{
    margin-bottom: 12px;
}

.modal-baixa-fechar{
    width: 38px;
    height: 38px;

    color: var(--emp-texto);
    background: transparent;

    border: 1px solid var(--emp-borda);
    border-radius: 10px;

    cursor: pointer;
    font-size: 24px;
}

.modal-baixa-acoes[hidden]{
    display: none;
}

.modal-baixa-acoes{
    display: flex;
    justify-content: flex-end;
    gap: 10px;

    margin-top: 22px;
}

.botao-confirmar-baixa{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.botao-confirmar-baixa:disabled{
    cursor: wait;
    opacity: 0.75;
}

.spinner-baixa{
    display: none;
    width: 16px;
    height: 16px;

    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #ffffff;
    border-radius: 50%;
}

.botao-confirmar-baixa.carregando .spinner-baixa{
    display: inline-block;
    animation: girar-spinner-baixa 0.7s linear infinite;
}

@keyframes girar-spinner-baixa{
    to{
        transform: rotate(360deg);
    }
}

.mensagem-sistema{
    margin-bottom: 18px;
    padding: 14px 16px;

    border-radius: 10px;
    font-weight: 600;
}

.mensagem-sistema.sucesso{
    color: #92E1C0;
    background: rgba(39, 168, 114, 0.15);
    border: 1px solid rgba(39, 168, 114, 0.40);
}

.mensagem-sistema.erro{
    color: #ecd6fa;
    background: rgba(121, 34, 173, 0.15);
    border: 1px solid rgba(121, 34, 173, 0.40);
}

/* Laranja: nivel de aviso na convencao da marca. */
.mensagem-sistema.aviso{
    color: #F3A794;
    background: rgba(228, 99, 64, 0.12);
    border: 1px solid rgba(228, 99, 64, 0.40);
}

body[data-theme="light"] .mensagem-sistema.aviso{
    color: #632312;
    background: #fdece6;
    border-color: #F3A794;
}

@media(max-width: 700px){

    .modal-baixa-card{
        padding: 20px;
    }

    .modal-baixa-acoes{
        flex-direction: column-reverse;
    }

    .modal-baixa-acoes .botao{
        width: 100%;
        min-height: 45px;

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

}


.botoes-container {
    display: flex;
    gap: 10px; /* Espaço entre os botões */
    width: 100%;
}

.botoes-container button {
    flex: 1; /* Faz com que ambos os botões ocupem o mesmo espaço proporcionalmente */
}


/* ==========================================================
   Botões de ações dos clientes — Paleta EMP
   ========================================================== */

.botao.emp-download{
    color: #ffffff;
    background: var(--emp-informacao);
    border: 1px solid #00BADD;
}

.botao.emp-download:hover{
    background: #004E62;
}


.botao.emp-chave{
    color: #ffffff;
    background: var(--emp-verde);
    border: 1px solid var(--emp-verde-claro);
}

.botao.emp-chave:hover{
    background: var(--emp-verde-escuro);
}

#ativarSomHistorico.botao{
    padding: 5px 9px;
    color: var(--emp-texto-suave);
    background: transparent;
    border-color: var(--emp-borda);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
}

#ativarSomHistorico.botao:hover{
    color: var(--emp-texto);
    background: rgba(255, 255, 255, 0.05);
}

#ativarSomHistorico.botao:disabled{
    color: var(--emp-texto-suave);
    background: transparent;
    border-color: var(--emp-borda);
    opacity: 0.65;
    cursor: default;
    transform: none;
}

body[data-theme="light"] #ativarSomHistorico.botao:hover{
    background: #f4f6f8;
}


.botao.emp-reativar{
    color: #ffffff;
    background: #E46340;
    border: 1px solid #F3A794;
}

.botao.emp-reativar:hover{
    background: #B74729;
}


.botao.emp-suspender{
    color: #ffffff;
    background: var(--emp-roxo);
    border: 1px solid #C993E4;
}

.botao.emp-suspender:hover{
    background: #7922AD;
}

/* ==========================================================
   Certificados digitais
   ========================================================== */

.campo-dias-alerta{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--emp-texto-suave);
    font-size: 14px;
    white-space: nowrap;
}

.pesquisa .campo-dias-alerta input{
    flex: 0 0 auto;
    width: 80px;
    min-width: 0;
    padding: 12px 10px;
    font-size: 16px;
    text-align: center;
}

.tabela-vazia{
    padding: 28px 16px;
    text-align: center;
    color: var(--emp-texto-suave);
}

body[data-theme="light"] .campo-dias-alerta{
    color: #5b6b7f;
}

.aviso-telefone{
    display: inline-block;
    margin-top: 4px;
    color: var(--emp-texto-suave);
    font-size: 12px;
    font-style: italic;
}

/* ==========================================================
   Cadastro publico de clientes
   ========================================================== */

.pagina-publica{
    padding: 32px 16px 56px;
}

.cadastro-container{
    max-width: 900px;
    margin: 0 auto;
}

.cadastro-container-estreito{
    max-width: 560px;
}

.cadastro-cabecalho{
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.cadastro-logo{
    width: 64px;
    height: auto;
}

.cadastro-etiqueta{
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.72rem;
    color: var(--emp-verde-claro);
    margin-bottom: 6px;
}

.cadastro-cabecalho h1{
    margin: 0 0 6px;
    font-size: 1.6rem;
}

.cadastro-cabecalho p{
    margin: 0;
    max-width: 52ch;
    color: var(--emp-texto-suave);
    line-height: 1.5;
}

.cadastro-erros{
    background: rgba(121, 34, 173, 0.16);
    border: 1px solid var(--emp-roxo);
    border-radius: var(--emp-raio);
    padding: 16px 20px;
    margin-bottom: 24px;
}

.cadastro-erros ul{
    margin: 8px 0 0;
    padding-left: 20px;
}

.cadastro-erros li{
    margin-bottom: 4px;
}

.cadastro-formulario fieldset{
    border: 1px solid var(--emp-borda);
    border-radius: var(--emp-raio);
    background: var(--emp-card);
    padding: 20px 24px 24px;
    margin: 0 0 20px;
}

.cadastro-formulario legend{
    padding: 0 10px;
    color: var(--emp-verde-claro);
    font-weight: 600;
    font-size: 0.95rem;
}

.cadastro-linha{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.cadastro-linha:last-child{
    margin-bottom: 0;
}

.cadastro-campo{
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.88rem;
    color: var(--emp-texto-suave);
}

.cadastro-campo-largo{
    flex: 2 1 320px;
}

.cadastro-campo-estreito{
    flex: 0 1 130px;
}

.cadastro-campo input,
.cadastro-campo select,
.cadastro-campo textarea{
    padding: 12px 14px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--emp-texto);
    background: var(--emp-painel);
    border: 1px solid var(--emp-borda);
    border-radius: 10px;
    outline: none;
    width: 100%;
}

.cadastro-campo textarea{
    resize: vertical;
}

.cadastro-campo input:focus,
.cadastro-campo select:focus,
.cadastro-campo textarea:focus{
    border-color: var(--emp-verde);
    box-shadow: 0 0 0 3px rgba(39, 168, 114, 0.14);
}

.cadastro-campo small{
    color: var(--emp-texto-suave);
    font-size: 0.76rem;
}

/* Sem isso o asterisco vira um item proprio do flex-column do label
   e cai numa linha sozinho, longe do texto. */
.cadastro-rotulo{
    display: block;
}

.cadastro-campo .obrigatorio{
    color: var(--emp-atencao);
}

.cadastro-arquivo{
    margin-bottom: 16px;
}

.cadastro-arquivo input[type="file"]{
    padding: 10px;
    cursor: pointer;
}

/* Isca contra robo: precisa existir no DOM e sumir da tela, sem
   usar display:none, que alguns robos reconhecem e pulam. */
.cadastro-isca{
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.cadastro-acoes{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.cadastro-acoes small{
    color: var(--emp-texto-suave);
    max-width: 46ch;
}

.cadastro-botao{
    padding: 15px 40px;
    border: none;
    border-radius: 999px;
    background: var(--emp-verde);
    color: #ffffff;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--emp-transicao);
}

.cadastro-botao:hover{
    background: var(--emp-verde-claro);
    color: #06301f;
}

.cadastro-sucesso{
    background: var(--emp-card);
    border: 1px solid var(--emp-borda);
    border-radius: 20px;
    padding: 40px 32px;
    text-align: center;
}

.cadastro-sucesso-icone{
    font-size: 3rem;
    margin-bottom: 10px;
}

.cadastro-sucesso h1{
    margin: 0 0 12px;
    font-size: 1.5rem;
}

.cadastro-sucesso p{
    margin: 0 0 12px;
    color: var(--emp-texto-suave);
    line-height: 1.6;
}

.cadastro-protocolo{
    font-size: 1.2rem;
    color: var(--emp-texto) !important;
}

.cadastro-sucesso-logo{
    display: block;
    width: 76px;
    margin: 28px auto 0;
    opacity: 0.7;
}

/* As telas publicas (/cadastro e login) nao tem data-theme nem
   alternador: sao sempre escuras, entao aqui nao entra regra de tema
   claro. A conferencia dentro do Portal, sim — ver mais abaixo. */

/* ==========================================================
   Cadastros recebidos (conferencia no Portal)
   ========================================================== */

.cadastro-recebido{
    background: var(--emp-card);
    border: 1px solid var(--emp-borda);
    border-radius: var(--emp-raio);
    padding: 20px 24px;
    margin-bottom: 16px;
}

.cadastro-recebido-topo{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--emp-borda);
}

.cadastro-recebido-protocolo{
    display: block;
    font-size: 0.76rem;
    color: var(--emp-texto-suave);
    margin-bottom: 4px;
}

.cadastro-recebido-topo h3{
    margin: 0;
    font-size: 1.1rem;
}

.cadastro-recebido-fantasia{
    margin: 2px 0 0;
    color: var(--emp-texto-suave);
    font-size: 0.9rem;
}

.cadastro-recebido-dados{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px 20px;
    margin: 16px 0;
}

.cadastro-recebido-endereco{
    grid-column: 1 / -1;
}

.cadastro-recebido-dados dt{
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--emp-texto-suave);
    margin-bottom: 3px;
}

.cadastro-recebido-dados dd{
    margin: 0;
    line-height: 1.5;
    word-break: break-word;
}

.cadastro-recebido-acoes{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid var(--emp-borda);
}

.cadastro-recebido-form{
    margin: 0;
}

.cadastro-recebido-form .botao{
    border: none;
    font-family: inherit;
    cursor: pointer;
}

body[data-theme="light"] .cadastro-recebido{
    background: #ffffff;
    border-color: #d9e2ec;
}

.cadastro-status-cep{
    min-height: 16px;
    transition: color var(--emp-transicao);
}

.cadastro-status-cep.buscando{
    color: var(--emp-texto-suave);
}

.cadastro-status-cep.sucesso{
    color: var(--emp-verde-claro);
}

.cadastro-status-cep.aviso{
    color: #f0b44c;
}

.cadastro-status-cep.erro{
    color: #C993E4;
}

.aviso-cnpj{
    display: block;
    margin-top: 4px;
    color: #f0b44c;
    font-size: 0.76rem;
    line-height: 1.4;
}

.cadastro-virou-cliente{
    color: var(--emp-verde-claro);
    font-size: 0.9rem;
    font-weight: 600;
}

.cadastro-alerta-duplicado{
    background: rgba(228, 99, 64, 0.14);
    border: 1px solid var(--emp-atencao);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 0.86rem;
    line-height: 1.5;
}

.modal-campos{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.modal-campos label{
    flex: 1 1 150px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.86rem;
    color: var(--emp-texto-suave);
}

.modal-campos input{
    padding: 12px 14px;
    font-family: inherit;
    font-size: 1.05rem;
    color: var(--emp-texto);
    background: var(--emp-painel);
    border: 1px solid var(--emp-borda);
    border-radius: 10px;
    outline: none;
}

.modal-campos input:focus{
    border-color: var(--emp-verde);
    box-shadow: 0 0 0 3px rgba(39, 168, 114, 0.14);
}

.modal-campos small{
    font-size: 0.74rem;
}

body[data-theme="light"] .modal-campos input{
    color: #233142;
    background: #ffffff;
    border-color: #d0d7de;
}

/* ==========================================================
   Retorno bancario
   ========================================================== */

.retorno-envio input[type="file"]{
    padding: 11px 14px;
    cursor: pointer;
}

.retorno-cabecalho{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px 20px;
    background: var(--emp-card);
    border: 1px solid var(--emp-borda);
    border-radius: var(--emp-raio);
    padding: 18px 22px;
    margin-bottom: 20px;
}

.retorno-cabecalho dt{
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--emp-texto-suave);
    margin-bottom: 3px;
}

.retorno-cabecalho dd{
    margin: 0;
    font-weight: 600;
    word-break: break-word;
}

.retorno-nome-arquivo{
    font-size: 0.78rem;
    font-weight: 400 !important;
}

.retorno-ja-baixado{
    color: var(--emp-texto-suave);
    font-style: italic;
}

.retorno-divergencia{
    color: #f0b44c;
}

body[data-theme="light"] .retorno-cabecalho{
    background: #ffffff;
    border-color: #d9e2ec;
}

/* Cada titulo ocupa duas linhas: sacado e situacao no EMP em cima,
   com a largura toda, e os campos curtos embaixo. O <tbody> agrupa
   o par, e e nele que fica a separacao entre um titulo e o proximo. */

/* Com os textos longos na linha de cima, a linha de baixo so tem
   valor curto: cortar com reticencias ali so escondia informacao.
   Se faltar largura, a tabela rola na horizontal. */
.tabela-responsiva-retorno{
    overflow-x: auto;
}

/* O cabecalho pode quebrar em duas linhas ("Comissão liberada em" e
   afins); os dados da linha curta ficam numa linha so, senao a
   tabela alarga demais e o scroll horizontal aparece sem precisar. */
.tabela-retorno th{
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.tabela-retorno .retorno-titulo-dados td{
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

/* Motivo pode ter descricao longa ("Concessão de desconto - já existe
   desconto anterior") ou mais de uma ocorrencia — ao contrario das
   outras colunas da linha de dados, essa precisa poder quebrar linha.
   Precisa do "td" e da classe ".retorno-titulo-dados" repetidos aqui
   para bater a especificidade de onde nowrap foi definido logo
   acima — so ".tabela-retorno .retorno-coluna-motivo" (2 classes)
   perde para ".tabela-retorno .retorno-titulo-dados td" (2 classes
   + 1 elemento), que tambem bate nesta celula. */
.tabela-retorno .retorno-titulo-dados td.retorno-coluna-motivo{
    white-space: normal;
}

/* A tabela e table-layout:fixed, entao as colunas nascem todas com a
   mesma largura. A tarja de movimento precisa de mais: "02 Entrada
   confirmada" pede 178px e transbordaria para a coluna do lado. */
.tabela-retorno th:nth-child(1){ width: 200px; }
.tabela-retorno th:nth-child(2){ width: 130px; }
.tabela-retorno th:nth-child(3),
.tabela-retorno th:nth-child(4){ width: 115px; }
.tabela-retorno th:nth-child(11){ width: 110px; }
.tabela-retorno th:nth-child(12){ width: 150px; }

.tabela-retorno .retorno-titulo-dados td:first-child{
    width: 200px;
}

.tabela-retorno tbody.retorno-titulo{
    border-top: 2px solid var(--emp-borda);
}

.tabela-retorno tbody.retorno-titulo:first-of-type{
    border-top: none;
}

.tabela-retorno .retorno-titulo-texto td{
    padding-bottom: 4px;
    border-bottom: none;

    /* A regra .tabela-clientes td:first-child fixa 120px e nowrap,
       pensada na coluna de codigo. Aqui a celula ocupa a linha
       inteira e o conteudo e texto livre, que precisa quebrar. */
    width: auto;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.tabela-retorno .retorno-titulo-dados td{
    padding-top: 4px;
    vertical-align: top;
}

.retorno-textos{
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
}

.retorno-sacado,
.retorno-emp{
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 240px;
}

/* Motivo, dentro da tabela: cada ocorrencia numa linha propria,
   sem o gap generoso do flex acima (aqui e conteudo de celula). */
.retorno-motivo{
    font-size: 0.86rem;
    color: var(--emp-texto-suave);
}

.retorno-motivo + .retorno-motivo{
    margin-top: 4px;
}

.retorno-motivo strong{
    color: var(--emp-texto);
}

/* --emp-texto e a cor do tema escuro e nao e redefinida no claro: o
   tema claro troca a cor no body, nao na variavel. Sem estas linhas o
   codigo do motivo fica branco sobre branco. */
body[data-theme="light"] .retorno-motivo strong{
    color: #233142;
}

body[data-theme="light"] .retorno-rotulo{
    color: #5b6b7f;
}

body[data-theme="light"] .retorno-cabecalho dt{
    color: #5b6b7f;
}

body[data-theme="light"] .retorno-ja-baixado{
    color: #5b6b7f;
}

.retorno-sacado{
    flex: 1 1 40%;
}

.retorno-emp{
    flex: 1 1 40%;
}

.retorno-rotulo{
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--emp-texto-suave);
}

.retorno-sacado strong,
.retorno-emp strong{
    font-size: 0.98rem;
    line-height: 1.35;
}

/* "No EMP" fica em azul pra separar visualmente do sacado — mesmo
   azul informativo usado no resto do Portal (var(--emp-informacao)),
   nao muda entre os temas porque e um hex fixo, nao uma variavel
   redefinida por tema. So o rotulo e a linha principal (conta e
   cliente) ficam azuis; os avisos abaixo (ja baixado, divergencia,
   nao localizado) mantem cor propria, sao status, nao rotulo.

   .retorno-textos entra na frente so para ganhar especificidade —
   sem isso, "body[data-theme=light] .retorno-rotulo" (2 classes +
   1 elemento) vence "retorno-emp > .retorno-rotulo" (2 classes) e o
   rotulo volta a cinza no tema claro. */
.retorno-textos .retorno-emp > .retorno-rotulo,
.retorno-textos .retorno-emp > strong:not(.retorno-nao-achado){
    color: var(--emp-informacao);
}

.retorno-nao-achado{
    color: var(--emp-texto-suave);
    font-weight: 400 !important;
    font-style: italic;
}

@media(max-width: 700px){

    /* No celular a tabela vira cartao. Com duas linhas por titulo,
       quem faz o papel de cartao passa a ser o <tbody>; o <tr>
       perde a decoracao para os dois nao virarem dois cartoes. */

    .tabela-retorno tbody.retorno-titulo{
        display: flex;
        flex-direction: column;
        margin-bottom: 15px;
        padding: 14px;
        border: 1px solid var(--emp-borda);
        border-radius: 16px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
        background: var(--emp-card);
    }

    .tabela-retorno tbody.retorno-titulo tr{
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }

    .tabela-retorno .retorno-titulo-texto td{
        display: block;
        padding: 0 0 10px;
        text-align: left;
        overflow: visible;
        text-overflow: clip;
        border-bottom: 1px solid rgba(174, 187, 208, 0.12);
    }

    /* Lado a lado nao cabe em tela de celular: os dois blocos
       transbordam a coluna e se sobrepoem. Empilhados, cada um usa
       a largura toda. */
    .retorno-textos{
        flex-direction: column;
        gap: 10px;
    }

    .retorno-sacado,
    .retorno-emp{
        min-width: 0;
        flex: 0 0 auto;
        width: 100%;
    }

    .retorno-sacado strong,
    .retorno-emp strong,
    .retorno-emp span{
        overflow-wrap: anywhere;
    }
}

/* ==========================================================
   Baixa do arquivo-retorno
   ========================================================== */

.retorno-acao-baixa{
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: rgba(39, 168, 114, 0.10);
    border: 1px solid rgba(39, 168, 114, 0.35);
    border-radius: var(--emp-raio);
    padding: 16px 20px;
    margin-bottom: 20px;
}

.retorno-acao-baixa small{
    color: var(--emp-texto-suave);
    max-width: 46ch;
}

.retorno-modal-aviso{
    color: #f0b44c;
    font-size: 0.86rem;
}

body[data-theme="light"] .retorno-acao-baixa{
    background: #eafaf1;
    border-color: #a8e6c4;
}

/* Versao maior do spinner do botao "Baixar" de Contas a Receber
   (.spinner-baixa / girar-spinner-baixa), para os dois avisos de
   "isso esta rodando" abaixo — nao herda de .spinner-baixa porque
   la ele nasce display:none, pensado para viver dentro de um botao. */
.spinner-baixa-grande{
    display: inline-block;
    width: 34px;
    height: 34px;
    border: 3px solid var(--emp-borda);
    border-top-color: var(--emp-verde);
    border-radius: 50%;
    animation: girar-spinner-baixa 0.8s linear infinite;
}

/* [hidden] tem a mesma especificidade de ".retorno-carregando", e
   como esta e uma regra de autor (nao a folha do navegador), ela
   venceria o atributo "hidden" e o elemento ficaria visivel mesmo
   escondido por JS. Mesmo problema que ".modal-baixa" ja resolvia
   ali em cima — mesmo remedio. */
.retorno-carregando[hidden]{
    display: none;
}

/* Some no lugar da tabela do arquivo anterior assim que a leitura
   comeca, para nao deixar dado antigo na tela durante a espera. */
.retorno-carregando{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    margin-bottom: 20px;
    background: var(--emp-card);
    border: 1px solid var(--emp-borda);
    border-radius: var(--emp-raio);
    color: var(--emp-texto-suave);
    font-weight: 600;
}

body[data-theme="light"] .retorno-carregando{
    background: #ffffff;
    border-color: #d9e2ec;
    color: #5b6b7f;
}

/* Toma o lugar do conteudo do modal de confirmacao enquanto a baixa
   esta gravando — arquivo grande pode levar alguns instantes, e o
   modal fica sem jeito de fechar nesse meio tempo (ver JS). */
.retorno-baixa-processando[hidden]{
    display: none;
}

.retorno-baixa-processando{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 12px 8px 4px;
    text-align: center;
}

.retorno-baixa-processando p{
    margin: 0;
    color: var(--emp-texto);
    line-height: 1.5;
}

.retorno-baixa-processando small{
    color: var(--emp-texto-suave);
}

.retorno-resultado-titulo{
    margin: 28px 0 8px;
    font-size: 1.05rem;
}

.retorno-resultado-explicacao{
    margin: 0 0 10px;
    color: var(--emp-texto-suave);
    font-size: 0.88rem;
}

.retorno-resultado-lista{
    margin: 0 0 20px;
    padding-left: 20px;
    color: var(--emp-texto-suave);
    font-size: 0.9rem;
    line-height: 1.7;
}

.retorno-resultado-voltar{
    margin-top: 24px;
}

/* ==========================================================
   Boletos e notas fiscais (PDF)
   ========================================================== */

.boletos-select-periodo{
    flex: 0 0 auto;
    min-width: 130px;
    padding: 14px;
    font-size: 17px;
    font-family: inherit;
    color: var(--emp-texto);
    background: var(--emp-card);
    border: 1px solid var(--emp-borda);
    border-radius: 10px;
    outline: none;
}

body[data-theme="light"] .boletos-select-periodo{
    color: #233142;
    background: #ffffff;
    border-color: #d0d7de;
}

/* Campo de busca + Limpar na mesma linha. As outras telas poem o
   Limpar em .botoes-container, que ocupa a largura inteira; aqui o
   filtro e curto e sobraria espaco. Os seletores comecam por
   .pesquisa para vencer as regras gerais de .pesquisa input/button,
   inclusive as do celular (input com min-width 100% e botao com
   width 100%, que jogariam o Limpar para baixo). */
.pesquisa .boletos-busca{
    display: flex;
    flex: 1 1 320px;
    gap: 10px;
    min-width: 0;
}

.pesquisa .boletos-busca input{
    min-width: 0;
}

.pesquisa .boletos-botao-limpar{
    flex: 0 0 auto;
    width: auto;
    padding: 0 16px;
    font-size: 15px;
}

.boletos-registro{
    background: var(--emp-card);
    border: 1px solid var(--emp-borda);
    border-radius: var(--emp-raio);
    padding: 18px 22px;
    margin-bottom: 14px;
}

body[data-theme="light"] .boletos-registro{
    background: #ffffff;
    border-color: #d9e2ec;
}

.boletos-registro-topo{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--emp-borda);
}

.boletos-registro-topo h3{
    margin: 0 0 2px;
    font-size: 1.05rem;
}

.boletos-registro-topo small{
    color: var(--emp-texto-suave);
}

.boletos-registro-telefone{
    text-align: right;
    font-size: 0.92rem;
    color: var(--emp-texto-suave);
}

.boletos-registro-docs{
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    margin: 16px 0;
}

.boletos-doc{
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 220px;
}

.boletos-doc strong{
    font-size: 1rem;
}

.boletos-doc span{
    color: var(--emp-texto-suave);
    font-size: 0.86rem;
}

/* --emp-texto-suave so existe no tema escuro; sem isto o texto
   fica cinza-claro sobre o card branco. */
body[data-theme="light"] .boletos-doc span{
    color: #5b6b7f;
}

.boletos-doc .boletos-doc-pago{
    align-self: flex-start;
    margin-top: 2px;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(50, 219, 149, 0.14);
    color: var(--emp-verde-claro);
    font-size: 0.74rem;
    font-weight: 600;
}

body[data-theme="light"] .boletos-doc .boletos-doc-pago{
    background: #e4f7ee;
    color: #1a7f52;
}

.boletos-doc-link{
    align-self: flex-start;
    margin-top: 4px;
    color: var(--emp-informacao);
    font-size: 0.84rem;
    text-decoration: none;
}

.boletos-doc-link:hover{
    text-decoration: underline;
}

.boletos-registro-acoes{
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid var(--emp-borda);
}

.boletos-registro-acoes .botao[disabled]{
    /* .botao (sem modificador .verde/.azul/...) so define o texto
       branco, nunca o fundo — herda o do elemento pai. Sem um fundo
       proprio aqui, fica texto branco sobre fundo claro no tema
       claro, invisivel. */
    background: var(--emp-borda);
    color: var(--emp-texto-suave);
    opacity: 0.7;
    cursor: not-allowed;
}

/* Andamento do envio por WhatsApp, ao lado do botao de cada
   cliente. Cores da convencao da marca: verde = ok, roxo = erro. */
.whatsapp-status{
    color: var(--emp-texto-suave);
    font-size: 0.84rem;
}

body[data-theme="light"] .whatsapp-status{
    color: #5b6b7f;
}

/* Botao Avisar de /certificados e o andamento, num bloco so, um
   embaixo do outro. No celular a celula da tabela vira flex: soltos,
   telefone, botao e status dividiam a largura e o botao espremia a
   ponto de quebrar "Avisado" letra por letra. */
.certificado-whatsapp{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
}

.certificado-whatsapp .botao{
    white-space: nowrap;
}

/* Link wa.me de reserva, que aparece no status depois de uma falha
   do envio automatico. */
.whatsapp-link-reserva{
    color: var(--emp-informacao);
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}

body[data-theme="light"] .whatsapp-link-reserva{
    color: #004E62;
}

/* Resumo da baixa por WhatsApp, na tela de resultado do retorno. */
.retorno-resumo-whatsapp{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 20px;
    padding: 14px 18px;
    background: var(--emp-card);
    border: 1px solid var(--emp-borda);
    border-radius: var(--emp-raio);
}

body[data-theme="light"] .retorno-resumo-whatsapp{
    background: #ffffff;
    border-color: #d9e2ec;
}

.retorno-resumo-links{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Sem isto o display:flex acima vence o atributo hidden e os links
   ficam sempre a mostra. */
.retorno-resumo-links[hidden]{
    display: none;
}

/* No cartao do celular o bloco desce para uma linha propria,
   alinhado a direita: dividindo a linha com o botao, o telefone
   quebrava em tres pedacos. */
@media(max-width: 700px){

    td:has(> .certificado-whatsapp){
        flex-wrap: wrap;
    }

    .certificado-whatsapp{
        flex-basis: 100%;
        align-items: flex-end;
        margin-top: 0;
        text-align: right;
    }
}

.whatsapp-status.sucesso{
    color: var(--emp-verde-claro);
    font-weight: 600;
}

body[data-theme="light"] .whatsapp-status.sucesso{
    color: #0A613D;
}

.whatsapp-status.erro{
    color: #C993E4;
}

body[data-theme="light"] .whatsapp-status.erro{
    color: #7922AD;
}

/* A Evolution leva ate 1 minuto para acordar. Laranja e negrito
   para a pessoa perceber que esta andando e nao achar que travou.
   No escuro, o laranja claro da paleta: o #E46340 sobre o fundo do
   cartao fica abaixo do contraste minimo para texto pequeno. */
.whatsapp-status.acordando{
    color: #F3A794;
    font-weight: 700;
}

body[data-theme="light"] .whatsapp-status.acordando{
    color: #B74729;
}

/* Enviou, mas nao registrou em CORRESPONDENCIA: laranja, o nivel
   de aviso da marca — nao e erro do envio. */
.whatsapp-status.aviso{
    color: #F3A794;
    font-weight: 600;
}

body[data-theme="light"] .whatsapp-status.aviso{
    color: #B74729;
}

.whatsapp-modal-teste{
    color: #F3A794;
    font-size: 0.88rem;
}

body[data-theme="light"] .whatsapp-modal-teste{
    color: #B74729;
}

/* ==========================================================
   Saldo Sicoob (tela de retorno)
   ========================================================== */

.retorno-saldo-sicoob{
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    background: var(--emp-card);
    border: 1px solid var(--emp-borda);
    border-radius: var(--emp-raio);
    padding: 14px 20px;
    margin-bottom: 20px;
}

body[data-theme="light"] .retorno-saldo-sicoob{
    background: #ffffff;
    border-color: #d9e2ec;
}

.retorno-saldo-rotulo{
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.retorno-saldo-rotulo small{
    color: var(--emp-texto-suave);
    font-size: 0.74rem;
}

/* --emp-texto-suave e a cor do tema escuro e nao e redefinida no
   claro (mesma pegadinha ja vista em .retorno-rotulo e
   .retorno-ja-baixado) — sem isto fica cinza claro sobre fundo
   branco. */
body[data-theme="light"] .retorno-saldo-rotulo small{
    color: #5b6b7f;
}

/* [hidden] tem a mesma especificidade que estas duas classes, que
   definem display — como sao regras de autor, venceriam o atributo
   "hidden" nativo e o bloco ficaria visivel mesmo escondido por JS.
   Mesmo problema ja visto em .retorno-carregando e
   .retorno-baixa-processando; mesmo remedio. */
.retorno-saldo-valor[hidden],
.retorno-saldo-edicao[hidden]{
    display: none;
}

.retorno-saldo-valor,
.retorno-saldo-edicao{
    display: flex;
    align-items: center;
    gap: 10px;
}

.retorno-saldo-valor strong{
    font-size: 1.15rem;
    color: var(--emp-verde-claro);
}

.retorno-saldo-edicao input{
    width: 150px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--emp-texto);
    background: var(--emp-painel);
    border: 1px solid var(--emp-borda);
    border-radius: 8px;
    outline: none;
}

body[data-theme="light"] .retorno-saldo-edicao input{
    color: #233142;
    background: #ffffff;
    border-color: #d0d7de;
}

.retorno-saldo-edicao input:focus{
    border-color: var(--emp-verde);
    box-shadow: 0 0 0 3px rgba(39, 168, 114, 0.14);
}

.retorno-saldo-mensagem{
    font-size: 0.86rem;
    font-weight: 600;
}

.retorno-saldo-mensagem.sucesso{
    color: var(--emp-verde-claro);
}

.retorno-saldo-mensagem.erro{
    color: #C993E4;
}