/* =========================================================
   FINCONTROLE — IDENTIDADE VISUAL UNIFICADA V1
   Base visual inspirada no Blog aprovado.
   Index + Área logada + Blog + Admin + Caixa.
========================================================= */

:root {
    /* Fundos */
    --fc-bg: #070b19;
    --fc-bg-deep: #040a16;
    --fc-card: #0c1629;
    --fc-card-2: #101c33;
    --fc-hover: #122743;
    --fc-menu: #081225;

    /* Contornos e textos */
    --fc-border: #17385a;
    --fc-border-soft: rgba(23, 56, 90, .72);
    --fc-text: #ffffff;
    --fc-text-light: #b9c8df;
    --fc-text-muted: #8da5c4;

    /* Destaques */
    --fc-primary: #00e5ff;
    --fc-success: #00f0b5;
    --fc-danger: #ff5b68;
    --fc-warning: #ffc857;

    /* Compatibilidade com o CSS antigo */
    --bg: var(--fc-bg);
    --bg-main: var(--fc-bg);
    --card: var(--fc-card);
    --bg-card: var(--fc-card);
    --card2: var(--fc-card-2);
    --bg-hover: var(--fc-hover);
    --menu: var(--fc-menu);
    --border: var(--fc-border);
    --text: var(--fc-text);
    --light: var(--fc-text-light);
    --text-light: var(--fc-text-light);
    --muted: var(--fc-text-light);
    --primary: var(--fc-primary);
    --green: var(--fc-success);
    --success: var(--fc-success);
    --ok: var(--fc-success);
    --danger: var(--fc-danger);
    --warning: var(--fc-warning);
    --warn: var(--fc-warning);

    /* Geometria comum */
    --fc-radius-sm: 8px;
    --fc-radius: 12px;
    --fc-radius-lg: 16px;
    --fc-shadow: 0 16px 42px rgba(0, 0, 0, .22);
    --fc-shadow-cyan: 0 14px 36px rgba(0, 229, 255, .07);
}

html {
    color-scheme: dark;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--fc-text);
    font-family: Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection {
    background: rgba(0, 229, 255, .24);
    color: #fff;
}

/* Fundo visual único em todas as áreas */
body.fin-app,
body.pagina-blog,
body.pagina-admin,
body.pagina-caixa-app {
    background:
        radial-gradient(circle at 50% 0, #09234b 0, #070b19 34%, #070b19 100%);
    background-attachment: fixed;
}

/* Foco padrão acessível */
body.fin-app :focus-visible,
body.pagina-blog :focus-visible,
body.pagina-admin :focus-visible,
body.pagina-caixa-app :focus-visible {
    outline: 2px solid rgba(0, 229, 255, .78);
    outline-offset: 2px;
}

/* Scrollbar visual unificada */
body.fin-app,
body.pagina-blog,
body.pagina-admin,
body.pagina-caixa-app {
    scrollbar-width: thin;
    scrollbar-color: var(--fc-border) var(--fc-menu);
}

body.fin-app *::-webkit-scrollbar,
body.pagina-blog *::-webkit-scrollbar,
body.pagina-admin *::-webkit-scrollbar,
body.pagina-caixa-app *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.fin-app *::-webkit-scrollbar-track,
body.pagina-blog *::-webkit-scrollbar-track,
body.pagina-admin *::-webkit-scrollbar-track,
body.pagina-caixa-app *::-webkit-scrollbar-track {
    background: var(--fc-menu);
}

body.fin-app *::-webkit-scrollbar-thumb,
body.pagina-blog *::-webkit-scrollbar-thumb,
body.pagina-admin *::-webkit-scrollbar-thumb,
body.pagina-caixa-app *::-webkit-scrollbar-thumb {
    background: var(--fc-border);
    border: 2px solid var(--fc-menu);
    border-radius: 999px;
}

body.fin-app *::-webkit-scrollbar-thumb:hover,
body.pagina-blog *::-webkit-scrollbar-thumb:hover,
body.pagina-admin *::-webkit-scrollbar-thumb:hover,
body.pagina-caixa-app *::-webkit-scrollbar-thumb:hover {
    background: var(--fc-primary);
}


/* ===== ÁREA PRINCIPAL / DASHBOARD ===== */
/* =========================================================
RESET
========================================================= */

.fin-app *{
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* =========================================================
CORES GLOBAIS
========================================================= */



/* =========================================================
BODY
========================================================= */

body.fin-app{
font-family: Arial, sans-serif;

background: var(--bg-main);

color: var(--text);

margin: 0;


}

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

.fin-app .sidebar{
width: 350px;

height: 100vh;

position: fixed;

left: 0;
top: 0;

z-index: 1000;

background: var(--menu);

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

padding: 20px 5px;

overflow: hidden;


}

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

.fin-app .logo{
padding-left: 5px;

font-size: 28px;

font-weight: bold;

color: var(--primary);

margin-bottom: 30px;


}

/* =========================================================
BOTÕES DO MENU
========================================================= */

.fin-app .sidebar button{
width: 320px;

height: 40px;

display: flex;

align-items: center;

justify-content: center;

padding: 0 10px;

margin-top: 2px;
margin-bottom: 4px;

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

border-radius: 8px;

background: var(--bg-card);

color: var(--primary);

font-size: 18px;

font-weight: bold;

cursor: pointer;


}

.fin-app .sidebar button:hover{
background: var(--primary);

color: #000000;


}

/* =========================================================
CONTEÚDO PRINCIPAL
========================================================= */

.fin-app .conteudo{
margin-left: 370px;

padding: 30px;

max-width: 1100px;


}

/* =========================================================
CONTEÚDO ALTERNATIVO
========================================================= */

.fin-app .content{
flex: 1;

padding: 30px;


}

/* =========================================================
TÍTULOS
========================================================= */

.fin-app h1,.fin-app h2,.fin-app h3{
margin-bottom: 10px;
}

/* =========================================================
LINKS
========================================================= */

.fin-app a{
text-decoration: none;

color: var(--primary);

text-align: center;


}

/* =========================================================
CARDS GERAIS
========================================================= */

.fin-app .card{
background: var(--bg-card);

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

border-radius: 8px;

padding: 20px;

margin-bottom: 10px;


}

.fin-app .card-title{
color: var(--text-light);

margin-bottom: 10px;


}

.fin-app .card-value{
font-size: 35px;

color: var(--primary);

font-weight: bold;


}

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

.fin-app table{
width: 100%;

border-collapse: collapse;

background: var(--bg-card);

border-radius: 8px;

overflow: hidden;


}

.fin-app table th{
background: #15182b;

color: var(--primary);

padding: 15px;

text-align: left;


}

.fin-app table td{
padding: 15px;

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

color: var(--text);


}

.fin-app table tr:hover{
background: var(--bg-hover);
}

.fin-app table td a{
text-decoration: none;

margin-left: 8px;

font-size: 14px;


}

.fin-app table td a:hover{
opacity: 0.8;
}

/* =========================================================
INPUTS E SELECTS GERAIS
========================================================= */

.fin-app input,.fin-app select{
height: 40px;

padding: 0 10px;

background: var(--bg-card);

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

border-radius: 8px;

color: var(--text-light);

font-size: 14px;

font-weight: bold;

outline: none;


}

.fin-app input::placeholder{
color: #7f86a8;
}

.fin-app input:focus,.fin-app select:focus{
border-color: var(--primary);

outline: none;


}

/* =========================================================
SELECT / OPTION
========================================================= */

.fin-app option{
background: var(--bg-card);

color: var(--text-light);


}

/* =========================================================
PÁGINA INICIAL
========================================================= */

.fin-app .ini{
width: 350px;

margin-left: auto;
margin-right: auto;

margin-top: 30px;

text-align: center;


}

/* =========================================================
CADASTRO DE CARTÃO

========================================================= */

/* ---------------------------------------------------------
FORMULÁRIO
--------------------------------------------------------- */

.fin-app .cartao-formulario{
width: 100%;

background: #141729;

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

border-radius: 12px;

padding: 25px;

margin-top: 20px;

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


}

/* ---------------------------------------------------------
CAMPOS
--------------------------------------------------------- */

.fin-app .cartao-formulario .campo{
width: 100%;

margin-bottom: 20px;


}

/* ---------------------------------------------------------
LABEL
--------------------------------------------------------- */

.fin-app .cartao-formulario .campo label{
display: block;

color: var(--text);

font-size: 15px;

font-weight: bold;

margin-bottom: 8px;


}

/* ---------------------------------------------------------
INPUT E SELECT
--------------------------------------------------------- */

.fin-app .cartao-formulario input,.fin-app .cartao-formulario select{
width: 100%;

height: 45px;

padding: 0 12px;

background: #0f1120;

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

border-radius: 8px;

color: var(--text);

font-size: 14px;

font-weight: normal;

outline: none;


}

/* ---------------------------------------------------------
PLACEHOLDER
--------------------------------------------------------- */

.fin-app .cartao-formulario input::placeholder{
color: #7f86a8;

opacity: 1;


}

/* ---------------------------------------------------------
FOCO
--------------------------------------------------------- */

.fin-app .cartao-formulario input:focus,.fin-app .cartao-formulario select:focus{
border-color: var(--primary);

box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.10);


}

/* ---------------------------------------------------------
SELECT
--------------------------------------------------------- */

.fin-app .cartao-formulario select{
appearance: auto;

cursor: pointer;


}

.fin-app .cartao-formulario option{
background: var(--bg-card);

color: var(--text);


}

/* ---------------------------------------------------------
LINHA DOS DIAS
--------------------------------------------------------- */

.fin-app .cartao-formulario .linha{
display: flex;

gap: 16px;

width: 100%;


}

.fin-app .cartao-formulario .linha .campo{
flex: 1;
}

/* ---------------------------------------------------------
BOTÃO SALVAR
--------------------------------------------------------- */

.fin-app .cartao-formulario .botao-salvar{
width: 100%;

height: 45px;

display: flex;

align-items: center;

justify-content: center;

padding: 0 15px;

margin-top: 5px;

background: #0f1120;

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

border-radius: 8px;

color: var(--primary);

font-size: 16px;

font-weight: bold;

cursor: pointer;

transition: 0.2s;


}

.fin-app .cartao-formulario .botao-salvar:hover{
background: var(--primary);

color: #000000;

border-color: var(--primary);


}

/* ---------------------------------------------------------
LISTA DE CARTÕES
--------------------------------------------------------- */

.fin-app .lista-cartoes{
width: 100%;

margin-top: 30px;


}

.fin-app .lista-cartoes h2{
color: var(--text);

margin-bottom: 15px;


}

/* ---------------------------------------------------------
CARTÃO CADASTRADO
--------------------------------------------------------- */

.fin-app .cartao-item{
display: flex;

align-items: center;

justify-content: space-between;

width: 100%;

padding: 15px;

background: var(--bg-card);

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

border-radius: 10px;

margin-bottom: 10px;


}

/* ---------------------------------------------------------
INFORMAÇÕES DO CARTÃO
--------------------------------------------------------- */

.fin-app .cartao-info{
display: flex;

align-items: center;

gap: 15px;


}

/* ---------------------------------------------------------
ÍCONE DA BANDEIRA
--------------------------------------------------------- */

.fin-app .bandeira-icone{
width: 55px;

height: 35px;

object-fit: contain;


}

/* ---------------------------------------------------------
NOME DO CARTÃO
--------------------------------------------------------- */

.fin-app .cartao-nome{
color: var(--text);

font-weight: bold;

font-size: 16px;


}

/* ---------------------------------------------------------
DETALHES
--------------------------------------------------------- */

.fin-app .cartao-detalhes{
color: var(--text-light);

font-size: 13px;

margin-top: 5px;


}

/* ---------------------------------------------------------
BOTÃO EXCLUIR
--------------------------------------------------------- */

.fin-app .botao-excluir{
background: #8f1d2c;

color: #ffffff;

padding: 8px 12px;

border-radius: 6px;

border: 1px solid #b52a3a;

font-size: 13px;


}

.fin-app .botao-excluir:hover{
background: #c82333;

color: #ffffff;

opacity: 1;


}

/* =========================================================
CADASTRO DE CATEGORIAS

========================================================= */

/* ---------------------------------------------------------
DESCRIÇÃO
--------------------------------------------------------- */

.fin-app .descricao-pagina{
color: var(--text-light);

font-size: 16px;

margin-bottom: 5px;


}

/* ---------------------------------------------------------
FORMULÁRIO DE CATEGORIA / SUBCATEGORIA
--------------------------------------------------------- */

.fin-app .cadastro-formulario{
width: 100%;

background: #141729;

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

border-radius: 12px;

padding: 25px;

margin-top: 20px;

margin-bottom: 25px;

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


}

/* ---------------------------------------------------------
TÍTULO
--------------------------------------------------------- */

.fin-app .cadastro-formulario h2{
color: var(--text);

font-size: 22px;

margin-bottom: 20px;


}

/* ---------------------------------------------------------
CAMPO
--------------------------------------------------------- */

.fin-app .campo-cadastro{
width: 100%;

margin-bottom: 20px;


}

/* ---------------------------------------------------------
LABEL
--------------------------------------------------------- */

.fin-app .campo-cadastro label{
display: block;

color: var(--text);

font-size: 15px;

font-weight: bold;

margin-bottom: 8px;


}

/* ---------------------------------------------------------
INPUT
--------------------------------------------------------- */

.fin-app .campo-cadastro input{
display: block;

width: 100%;

height: 45px;

padding: 0 12px;

background: #0f1120;

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

border-radius: 8px;

color: var(--text);

font-size: 14px;

font-weight: normal;

outline: none;


}

.fin-app .campo-cadastro input::placeholder{
color: #7f86a8;

opacity: 1;


}

/* ---------------------------------------------------------
SELECT
--------------------------------------------------------- */

.fin-app .campo-cadastro select{
display: block;

width: 100%;

height: 45px;

padding: 0 12px;

background: #0f1120;

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

border-radius: 8px;

color: var(--text);

font-size: 14px;

font-weight: normal;

outline: none;

cursor: pointer;


}

.fin-app .campo-cadastro select option{
background: #1a1d33;

color: #ffffff;


}

/* ---------------------------------------------------------
FOCO
--------------------------------------------------------- */

.fin-app .campo-cadastro input:focus,.fin-app .campo-cadastro select:focus{
border-color: var(--primary);

box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.10);


}

/* ---------------------------------------------------------
BOTÃO
--------------------------------------------------------- */

.fin-app .botao-cadastro{
display: flex;

width: 100%;

height: 45px;

align-items: center;

justify-content: center;

padding: 0 15px;

margin: 0;

background: #0f1120;

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

border-radius: 8px;

color: var(--primary);

font-size: 16px;

font-weight: bold;

cursor: pointer;

transition: 0.2s;


}

.fin-app .botao-cadastro:hover{
background: var(--primary);

color: #000000;

border-color: var(--primary);


}

/* ---------------------------------------------------------
LISTA DE CATEGORIAS
--------------------------------------------------------- */

.fin-app .lista-categorias{
width: 100%;

margin-top: 30px;

background: #141729;

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

border-radius: 12px;

padding: 25px;

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


}

/* ---------------------------------------------------------
TÍTULO DA LISTA
--------------------------------------------------------- */

.fin-app .lista-categorias h2{
color: var(--text);

font-size: 22px;

margin-bottom: 20px;


}

/* ---------------------------------------------------------
TABELA DE CATEGORIAS
--------------------------------------------------------- */

.fin-app .lista-categorias table{
width: 100%;

border-collapse: separate;

border-spacing: 0;

background: #1a1d33;

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

border-radius: 8px;

overflow: hidden;


}

/* ---------------------------------------------------------
CABEÇALHO
--------------------------------------------------------- */

.fin-app .lista-categorias table th{
background: #15182b;

color: var(--primary);

padding: 15px;

text-align: left;

font-size: 15px;

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


}

/* ---------------------------------------------------------
CÉLULAS
--------------------------------------------------------- */

.fin-app .lista-categorias table td{
padding: 15px;

color: var(--text);

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

font-size: 14px;


}

/* ---------------------------------------------------------
ÚLTIMA LINHA
--------------------------------------------------------- */

.fin-app .lista-categorias table tr:last-child td{
border-bottom: none;
}

/* ---------------------------------------------------------
HOVER
--------------------------------------------------------- */

.fin-app .lista-categorias table tr:hover td{
background: var(--bg-hover);
}

/* ---------------------------------------------------------
LINKS EDITAR / EXCLUIR
--------------------------------------------------------- */

.fin-app .lista-categorias table td a{
text-decoration: none;

margin-left: 10px;

font-size: 15px;


}

.fin-app .lista-categorias table td a:hover{
opacity: 0.7;
}

/* =========================================================
MENSAGENS
========================================================= */

.fin-app .mensagem-sucesso{
width: 100%;

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

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

color: var(--success);

padding: 12px 15px;

border-radius: 8px;

margin-top: 15px;

margin-bottom: 15px;


}

.fin-app .mensagem-erro{
width: 100%;

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

border: 1px solid #ff4d4d;

color: #ff6b6b;

padding: 12px 15px;

border-radius: 8px;

margin-top: 15px;

margin-bottom: 15px;


}

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

@media (max-width: 768px) {

.fin-app .sidebar{
    width: 100%;

    position: relative;

    height: auto;
}


.fin-app .conteudo{
    margin-left: 0;

    padding: 20px;
}


.fin-app .cartao-formulario .linha{
    flex-direction: column;

    gap: 0;
}


.fin-app .cartao-item{
    flex-direction: column;

    align-items: flex-start;

    gap: 15px;
}


.fin-app .cadastro-formulario{
    padding: 20px;
}


.fin-app .lista-categorias{
    padding: 20px;

    overflow-x: auto;
}


.fin-app .lista-categorias table{
    min-width: 500px;
}


}

/* =========================================================
FORMULÁRIOS DE CATEGORIA LADO A LADO
========================================================= */

.fin-app .formularios-categorias{
display: grid;

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

gap: 20px;

align-items: stretch;

width: 100%;

margin-bottom: 25px;
}

.fin-app .formularios-categorias .cadastro-formulario{
width: 100%;

min-width: 0;

height: 100%;

margin: 0;

display: flex;

flex-direction: column;
}

.fin-app .formularios-categorias .cadastro-formulario form{
display: flex;

flex-direction: column;

flex: 1;

min-width: 0;
}

.fin-app .formularios-categorias .campo-cadastro,.fin-app .formularios-categorias input,.fin-app .formularios-categorias select,.fin-app .formularios-categorias .botao-cadastro{
width: 100%;

max-width: 100%;

min-width: 0;
}

.fin-app .formularios-categorias .botao-cadastro{
margin-top: auto;
}

@media (max-width: 800px) {

.fin-app .formularios-categorias{
    grid-template-columns: 1fr;
}

}


/* =========================================================
LANÇAMENTOS
========================================================= */

.fin-app .lancamento-formulario{
    width: 100%;
    margin-top: 20px;
    padding: 28px;
    background: #141729;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
}

.fin-app .campo-lancamento{
    width: 100%;
    min-width: 0;
}

.fin-app .campo-lancamento > label{
    display: block;
    margin-bottom: 8px;
    color: var(--text);
    font-size: 15px;
    font-weight: bold;
}

.fin-app .campo-lancamento input,.fin-app .campo-lancamento select{
    display: block;
    width: 100%;
    height: 45px;
    padding: 0 12px;
    background: #0f1120;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
    font-weight: normal;
    outline: none;
}

.fin-app .campo-lancamento input::placeholder{
    color: #7f86a8;
    opacity: 1;
}

.fin-app .campo-lancamento input:focus,.fin-app .campo-lancamento select:focus{
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.10);
}

.fin-app .grade-lancamento{
    display: grid;
    width: 100%;
    gap: 20px;
    margin-bottom: 24px;
}

.fin-app .grade-2{
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
}

.fin-app .grade-3{
    grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.05fr) minmax(0, 1fr);
}

.fin-app .grade-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fin-app .tipo-lancamento{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.fin-app .tipo-opcao{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 220px;
    height: 70px;
    padding: 0 25px;
    background: #0f1120;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.fin-app .tipo-opcao:hover,.fin-app .tipo-opcao.ativo{
    border-color: var(--primary);
    color: var(--primary);
}

.fin-app .tipo-opcao input{
    display: none;
}

.fin-app .tipo-icone{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
}

.fin-app .tipo-opcao.ativo .tipo-icone{
    background: var(--primary);
    color: #061018;
    border-color: var(--primary);
}

.fin-app .divisor-lancamento{
    width: 100%;
    height: 1px;
    margin: 28px 0;
    background: var(--border);
    opacity: 0.65;
}

.fin-app .campo-moeda{
    display: flex;
    width: 100%;
    height: 45px;
    background: #0f1120;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.fin-app .campo-moeda:focus-within{
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.10);
}

.fin-app .campo-moeda span{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    border-right: 1px solid var(--border);
    color: var(--text);
    font-weight: bold;
}

.fin-app .campo-moeda input{
    height: 43px;
    border: none;
    border-radius: 0;
    box-shadow: none !important;
}

.fin-app .acoes-lancamento{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.fin-app .botao-limpar,.fin-app .botao-salvar-lancamento{
    height: 45px;
    padding: 0 24px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.fin-app .botao-limpar{
    background: #0f1120;
    border: 1px solid var(--border);
    color: var(--text);
}

.fin-app .botao-limpar:hover{
    border-color: var(--primary);
    color: var(--primary);
}

.fin-app .botao-salvar-lancamento{
    min-width: 190px;
    background: var(--primary);
    border: 1px solid var(--primary);
    color: #000000;
}

.fin-app .botao-salvar-lancamento:hover{
    filter: brightness(1.08);
}

@media (max-width: 1000px) {
    .fin-app .grade-4{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fin-app .grade-3{
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .fin-app .lancamento-formulario{
        padding: 20px;
    }

    .fin-app .grade-2,.fin-app .grade-3,.fin-app .grade-4{
        grid-template-columns: 1fr;
    }

    .fin-app .tipo-opcao{
        width: 100%;
        min-width: 0;
    }

    .fin-app .acoes-lancamento{
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .fin-app .botao-limpar,.fin-app .botao-salvar-lancamento{
        width: 100%;
    }
}



/* =========================================================
DASHBOARD FINANCEIRO
========================================================= */

.fin-app .dashboard-financeiro{
    padding-bottom: 60px;
}

.fin-app .dashboard-cabecalho{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.fin-app .seletor-periodo-dashboard{
    display: flex;
    align-items: center;
    gap: 8px;
}

.fin-app .botao-periodo{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--primary);
    font-size: 27px;
    font-weight: bold;
    cursor: pointer;
}

.fin-app .botao-periodo:hover{
    background: var(--bg-hover);
}

.fin-app .periodo-atual{
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 190px;
    height: 44px;
    padding: 0 15px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    cursor: pointer;
}

.fin-app .periodo-atual span:first-child{
    color: var(--primary);
    font-weight: bold;
}

.fin-app .periodo-atual strong{
    color: var(--text);
}

.fin-app .seta-periodo{
    margin-left: auto;
    color: var(--text-light);
}

.fin-app .alerta-dashboard{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 20px;
    background: rgba(255, 183, 77, 0.08);
    border: 1px solid rgba(255, 183, 77, 0.45);
    border-radius: 10px;
}

.fin-app .alerta-dashboard-icone{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 183, 77, 0.18);
    color: #ffbd59;
    font-weight: bold;
}

.fin-app .alerta-dashboard div{
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.fin-app .alerta-dashboard span:last-child{
    color: var(--text-light);
    font-size: 13px;
}

.fin-app .cards-dashboard{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 14px;
    margin-bottom: 24px;
}

.fin-app .card-dashboard{
    min-width: 0;
    min-height: 136px;

    display: flex;
    flex-direction: column;

    padding: 18px;

    background: #141729;
    border: 1px solid var(--border);
    border-radius: 12px;

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

    box-sizing: border-box;
}

.fin-app .card-dashboard-titulo{
    display: flex;
    align-items: flex-start;

    min-height: 27px;
    margin-bottom: 5px;

    color: var(--text-light);

    font-size: 13px;
    font-weight: bold;
    line-height: 1.15;

    text-transform: uppercase;
}

.fin-app .card-dashboard-valor{
    display: block;

    margin-bottom: 6px;

    color: var(--primary);

    font-size: clamp(20px, 1.65vw, 24px);
    font-weight: 700;
    line-height: 1.15;

    white-space: nowrap;
}

.fin-app .card-dashboard-periodo{
    display: block;

    margin-top: auto;

    color: #7f86a8;

    font-size: 12px;
    line-height: 1.25;
}

@media (max-width: 1350px) {
    .fin-app .cards-dashboard{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1050px) {
    .fin-app .cards-dashboard{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.fin-app .valor-receita{
    color: var(--success);
}

.fin-app .valor-despesa{
    color: #ff6b6b;
}

.fin-app .painel-dashboard{
    width: 100%;
    margin-bottom: 24px;
    padding: 22px;
    background: #141729;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.22);
}

.fin-app .painel-dashboard-cabecalho{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.fin-app .painel-dashboard-cabecalho h2{
    margin-bottom: 4px;
    font-size: 20px;
}

.fin-app .painel-dashboard-cabecalho p{
    color: var(--text-light);
    font-size: 13px;
}

.fin-app .link-dashboard{
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--primary);
    font-size: 13px;
    font-weight: bold;
}

.fin-app .link-dashboard:hover{
    border-color: var(--primary);
}

.fin-app .dashboard-vazio{
    padding: 20px;
    background: var(--bg-main);
    border: 1px dashed var(--border);
    border-radius: 8px;
    color: var(--text-light);
    text-align: center;
}

.fin-app .lista-vencimentos-dashboard{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fin-app .linha-vencimento-dashboard{
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) 125px 140px 105px;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.fin-app .linha-vencimento-dashboard:hover{
    background: var(--bg-hover);
}

.fin-app .data-vencimento-dashboard{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 9px;
    background: var(--bg-main);
    border: 1px solid var(--border);
}

.fin-app .data-vencimento-dashboard strong{
    color: var(--primary);
    font-size: 20px;
    line-height: 1;
}

.fin-app .data-vencimento-dashboard span{
    margin-top: 4px;
    color: var(--text-light);
    font-size: 10px;
}

.fin-app .descricao-vencimento-dashboard{
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.fin-app .descricao-vencimento-dashboard strong{
    overflow: hidden;
    color: var(--text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fin-app .descricao-vencimento-dashboard span{
    color: var(--text-light);
    font-size: 12px;
}

.fin-app .valor-vencimento-dashboard{
    text-align: right;
}

.fin-app .valor-vencimento-dashboard strong{
    color: var(--text);
    font-size: 15px;
}

.fin-app .acao-vencimento-dashboard{
    text-align: right;
}

.fin-app .badge-status{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: bold;
}

.fin-app .status-pago{
    background: rgba(0, 255, 179, 0.10);
    border: 1px solid rgba(0, 255, 179, 0.35);
    color: var(--success);
}

.fin-app .status-vencido{
    background: rgba(255, 80, 80, 0.10);
    border: 1px solid rgba(255, 80, 80, 0.35);
    color: #ff6b6b;
}

.fin-app .status-hoje{
    background: rgba(255, 183, 77, 0.10);
    border: 1px solid rgba(255, 183, 77, 0.35);
    color: #ffbd59;
}

.fin-app .status-pendente{
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.25);
    color: var(--primary);
}

.fin-app .botao-pagar-dashboard,.fin-app .botao-secundario-dashboard,.fin-app .botao-confirmar-dashboard,.fin-app .botao-cancelar-dashboard{
    height: 38px;
    padding: 0 15px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.fin-app .botao-pagar-dashboard,.fin-app .botao-confirmar-dashboard{
    background: var(--primary);
    border: 1px solid var(--primary);
    color: #000;
}

.fin-app .botao-pagar-dashboard:hover,.fin-app .botao-confirmar-dashboard:hover{
    filter: brightness(1.08);
}

.fin-app .botao-secundario-dashboard,.fin-app .botao-cancelar-dashboard{
    background: var(--bg-main);
    border: 1px solid var(--border);
    color: var(--text);
}

.fin-app .botao-secundario-dashboard:hover,.fin-app .botao-cancelar-dashboard:hover{
    border-color: var(--primary);
    color: var(--primary);
}

.fin-app .texto-pago-dashboard{
    color: var(--success);
    font-size: 12px;
    font-weight: bold;
}

.fin-app .grade-faturas-dashboard{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.fin-app .fatura-dashboard{
    padding: 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.fin-app .fatura-dashboard-topo{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.fin-app .fatura-dashboard-label{
    display: block;
    margin-bottom: 5px;
    color: var(--text-light);
    font-size: 10px;
    font-weight: bold;
}

.fin-app .fatura-dashboard h3{
    margin: 0;
    color: var(--text);
    font-size: 17px;
}

.fin-app .fatura-dashboard-valor{
    margin: 18px 0 16px;
    color: var(--primary);
    font-size: 27px;
    font-weight: bold;
}

.fin-app .fatura-dashboard-info{
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
    color: var(--text-light);
    font-size: 12px;
}

.fin-app .fatura-dashboard-info strong{
    color: var(--text);
}

.fin-app .fatura-dashboard-acoes{
    display: flex;
    gap: 8px;
}

.fin-app .grade-contas-dashboard{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.fin-app .conta-dashboard{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 9px;
}

.fin-app .conta-dashboard-icone{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: 9px;
    font-size: 20px;
}

.fin-app .conta-dashboard div:last-child{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fin-app .conta-dashboard strong{
    font-size: 13px;
}

.fin-app .conta-dashboard span{
    color: var(--primary);
    font-size: 14px;
    font-weight: bold;
}


/* =========================================================
MODAIS DASHBOARD
========================================================= */

.fin-app .modal-dashboard{
    display: none;
    position: fixed;
    inset: 0;
    z-index: 5000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(5, 7, 16, 0.78);
    backdrop-filter: blur(4px);
}

.fin-app .modal-dashboard.aberto{
    display: flex;
}

.fin-app .modal-dashboard-conteudo{
    position: relative;
    width: min(560px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    padding: 26px;
    background: #141729;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}

.fin-app .modal-periodo-conteudo{
    width: min(430px, 100%);
}

.fin-app .modal-fatura-conteudo{
    width: min(850px, 100%);
}

.fin-app .fechar-modal-dashboard{
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-light);
    font-size: 21px;
    cursor: pointer;
}

.fin-app .modal-dashboard-conteudo h2{
    padding-right: 45px;
    margin-bottom: 8px;
}

.fin-app .descricao-modal-dashboard{
    margin-bottom: 20px;
    color: var(--text-light);
}

.fin-app .campo-dashboard{
    width: 100%;
    margin-bottom: 18px;
}

.fin-app .campo-dashboard label{
    display: block;
    margin-bottom: 8px;
    color: var(--text);
    font-size: 13px;
    font-weight: bold;
}

.fin-app .campo-dashboard input,.fin-app .campo-dashboard select{
    width: 100%;
    height: 43px;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
}

.fin-app .grade-modal-dashboard{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.fin-app .acoes-modal-dashboard{
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.fin-app .tabela-fatura-dashboard{
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 20px;
}

.fin-app .linha-fatura-dashboard{
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr) 85px 120px;
    gap: 12px;
    padding: 11px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12px;
}

.fin-app .cabecalho-fatura-dashboard{
    background: var(--bg-main);
    color: var(--primary);
    font-weight: bold;
}

.fin-app .alinha-direita{
    text-align: right;
}

.fin-app .rodape-fatura-dashboard{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    padding: 15px;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.fin-app .rodape-fatura-dashboard strong{
    color: var(--primary);
    font-size: 18px;
}


/* =========================================================
RESPONSIVO DASHBOARD
========================================================= */

@media (max-width: 1200px) {

    .fin-app .cards-dashboard{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .fin-app .grade-faturas-dashboard,.fin-app .grade-contas-dashboard{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {

    .fin-app .dashboard-cabecalho{
        flex-direction: column;
    }

    .fin-app .linha-vencimento-dashboard{
        grid-template-columns: 60px minmax(0, 1fr) 120px;
    }

    .fin-app .status-vencimento-dashboard{
        display: none;
    }

    .fin-app .valor-vencimento-dashboard{
        text-align: left;
    }

    .fin-app .acao-vencimento-dashboard{
        grid-column: 2 / -1;
        text-align: left;
    }
}

@media (max-width: 768px) {

    .fin-app .cards-dashboard,.fin-app .grade-faturas-dashboard,.fin-app .grade-contas-dashboard,.fin-app .grade-modal-dashboard{
        grid-template-columns: 1fr;
    }

    .fin-app .seletor-periodo-dashboard{
        width: 100%;
    }

    .fin-app .periodo-atual{
        flex: 1;
    }

    .fin-app .painel-dashboard{
        padding: 16px;
    }

    .fin-app .linha-vencimento-dashboard{
        grid-template-columns: 52px minmax(0, 1fr);
    }

    .fin-app .valor-vencimento-dashboard,.fin-app .acao-vencimento-dashboard{
        grid-column: 2;
    }

    .fin-app .fatura-dashboard-acoes,.fin-app .acoes-modal-dashboard{
        flex-direction: column;
    }

    .fin-app .botao-pagar-dashboard,.fin-app .botao-secundario-dashboard,.fin-app .botao-confirmar-dashboard,.fin-app .botao-cancelar-dashboard{
        width: 100%;
    }

    .fin-app .linha-fatura-dashboard{
        grid-template-columns: 80px minmax(0, 1fr) 70px;
    }

    .fin-app .linha-fatura-dashboard span:last-child{
        grid-column: 2 / -1;
        text-align: left;
        font-weight: bold;
    }
}


.fin-app .acoes-contas-dashboard{
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.fin-app .botao-transferencia-dashboard{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
}

@media (max-width: 768px) {
    .fin-app .botao-transferencia-dashboard{
        width: 100%;
    }
}


/* =========================================================
AJUSTES LANÇAMENTOS / FATURA
========================================================= */

.fin-app .linha-vencimento-dashboard{
    grid-template-columns:
        70px
        minmax(180px, 1.2fr)
        minmax(180px, 1fr)
        120px
        125px
        210px
        95px;
}

.fin-app .descricao-vencimento-dashboard,.fin-app .categoria-vencimento-dashboard{
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.fin-app .categoria-vencimento-dashboard span,.fin-app .descricao-vencimento-dashboard span{
    color: var(--text-light);
    font-size: 12px;
}

.fin-app .categoria-vencimento-dashboard b,.fin-app .descricao-vencimento-dashboard b{
    color: var(--primary);
    font-weight: normal;
}

.fin-app .badge-status{
    min-width: 95px;
    padding: 7px 12px;
    font-size: 12px;
}

.fin-app .acao-vencimento-dashboard{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.fin-app .acao-vencimento-dashboard .botao-secundario-dashboard,.fin-app .acao-vencimento-dashboard .botao-pagar-dashboard,.fin-app .acao-fatura-dashboard .botao-secundario-dashboard{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    height: 38px;
    padding: 0 14px;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--primary);
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

.fin-app .acao-vencimento-dashboard .botao-pagar-dashboard{
    background: var(--primary);
    color: #000000;
    border-color: var(--primary);
}

.fin-app .dias-vencimento-dashboard,.fin-app .dias-fatura-dashboard{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.05;
}

.fin-app .texto-dias-falta,.fin-app .numero-dias-falta{
    color: #ff9f1a;
}

.fin-app .texto-dias-vencido,.fin-app .numero-dias-vencido{
    color: #ff4d4d;
}

.fin-app .texto-dias-hoje{
    color: #ffbd59;
    font-weight: bold;
}

.fin-app .numero-dias-falta,.fin-app .numero-dias-vencido{
    margin: 3px 0;
    font-size: 23px;
}

.fin-app .texto-dias-falta,.fin-app .texto-dias-vencido{
    font-size: 11px;
}


/* FATURA DETALHES */

.fin-app .linha-fatura-dashboard{
    display: grid;
    grid-template-columns:
        65px
        minmax(180px, 1.15fr)
        minmax(180px, 1fr)
        70px
        120px
        100px
        90px;
    align-items: center;
    gap: 12px;
}

.fin-app .data-fatura-dashboard{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fin-app .data-fatura-dashboard strong{
    color: var(--primary);
    font-size: 20px;
}

.fin-app .data-fatura-dashboard span{
    color: var(--text-light);
    font-size: 10px;
}

.fin-app .descricao-fatura-dashboard,.fin-app .categoria-fatura-dashboard{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fin-app .descricao-fatura-dashboard span,.fin-app .categoria-fatura-dashboard span{
    color: var(--text-light);
    font-size: 12px;
}

.fin-app .categoria-fatura-dashboard b{
    color: var(--primary);
    font-weight: normal;
}

.fin-app .parcela-fatura-dashboard,.fin-app .valor-fatura-item-dashboard{
    color: var(--text);
    font-weight: bold;
}

.fin-app .valor-fatura-item-dashboard{
    text-align: right;
}

.fin-app .acao-fatura-dashboard{
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 1100px) {

    .fin-app .linha-vencimento-dashboard{
        grid-template-columns:
            60px
            minmax(0, 1fr)
            minmax(0, 1fr);
    }

    .fin-app .status-vencimento-dashboard,.fin-app .valor-vencimento-dashboard,.fin-app .acao-vencimento-dashboard,.fin-app .dias-vencimento-dashboard{
        grid-column: 2 / -1;
        justify-content: flex-start;
        text-align: left;
    }

    .fin-app .linha-fatura-dashboard{
        grid-template-columns:
            60px
            minmax(0, 1fr)
            minmax(0, 1fr);
    }

    .fin-app .parcela-fatura-dashboard,.fin-app .valor-fatura-item-dashboard,.fin-app .acao-fatura-dashboard,.fin-app .dias-fatura-dashboard{
        grid-column: 2 / -1;
        justify-content: flex-start;
        text-align: left;
    }
}


/* =========================================================
CORREÇÃO FINAL DE LAYOUT DO DASHBOARD
========================================================= */

.fin-app .conteudo.dashboard-financeiro{
    width: calc(100% - 370px);
    max-width: none;
    min-width: 0;
}

/* evita qualquer bloco estourar a largura */
.fin-app .dashboard-financeiro,.fin-app .dashboard-financeiro .painel-dashboard,.fin-app .dashboard-financeiro .lista-vencimentos-dashboard,.fin-app .dashboard-financeiro .linha-vencimento-dashboard,.fin-app .dashboard-financeiro .grade-contas-dashboard,.fin-app .dashboard-financeiro .grade-faturas-dashboard{
    min-width: 0;
    max-width: 100%;
}

/* =========================
   LANÇAMENTOS
========================= */

.fin-app .linha-vencimento-dashboard{
    display: grid;
    grid-template-columns:
        62px
        minmax(150px, 1.05fr)
        minmax(150px, 1fr)
        100px
        105px
        minmax(150px, auto)
        82px;
    gap: 10px;
    align-items: center;
    padding: 12px;
}

.fin-app .data-vencimento-dashboard{
    width: 48px;
    height: 48px;
}

.fin-app .data-vencimento-dashboard span{
    font-size: 8px;
    text-align: center;
}

.fin-app .descricao-vencimento-dashboard strong{
    font-size: 14px;
}

.fin-app .descricao-vencimento-dashboard span,.fin-app .categoria-vencimento-dashboard span{
    font-size: 11px;
    line-height: 1.3;
}

.fin-app .status-vencimento-dashboard{
    display: flex;
    justify-content: center;
}

.fin-app .badge-status{
    min-width: 78px;
    padding: 6px 8px;
    font-size: 11px;
}

.fin-app .valor-vencimento-dashboard{
    text-align: right;
    white-space: nowrap;
}

.fin-app .acao-vencimento-dashboard{
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

.fin-app .acao-vencimento-dashboard .botao-secundario-dashboard,.fin-app .acao-vencimento-dashboard .botao-pagar-dashboard{
    width: auto !important;
    min-width: 72px;
    height: 34px;
    padding: 0 10px;
    font-size: 11px;
}

.fin-app .dias-vencimento-dashboard{
    min-width: 70px;
    text-align: center;
}

.fin-app .numero-dias-falta,.fin-app .numero-dias-vencido{
    font-size: 20px;
}

/* =========================
   RESPONSIVO DO DASHBOARD
   Em telas médias organiza
   cada lançamento em 2 linhas
========================= */

@media (max-width: 1450px) {

    .fin-app .conteudo.dashboard-financeiro{
        width: calc(100% - 370px);
        max-width: none;
    }

    .fin-app .linha-vencimento-dashboard{
        grid-template-columns:
            58px
            minmax(150px, 1fr)
            minmax(150px, 1fr)
            90px;
        grid-template-areas:
            "data descricao categoria status"
            "data valor acao dias";
        row-gap: 10px;
    }

    .fin-app .data-vencimento-dashboard{
        grid-area: data;
    }

    .fin-app .descricao-vencimento-dashboard{
        grid-area: descricao;
    }

    .fin-app .categoria-vencimento-dashboard{
        grid-area: categoria;
    }

    .fin-app .status-vencimento-dashboard{
        grid-area: status;
    }

    .fin-app .valor-vencimento-dashboard{
        grid-area: valor;
        text-align: left;
    }

    .fin-app .acao-vencimento-dashboard{
        grid-area: acao;
        justify-content: flex-start;
    }

    .fin-app .dias-vencimento-dashboard{
        grid-area: dias;
    }
}

/* =========================
   FATURA - modal
========================= */

.fin-app .modal-fatura-conteudo{
    width: min(1050px, 96vw);
}

.fin-app .linha-fatura-dashboard{
    display: grid;
    grid-template-columns:
        58px
        minmax(160px, 1fr)
        minmax(160px, 1fr)
        55px
        100px
        85px
        75px;
    gap: 10px;
    align-items: center;
    padding: 10px;
}

.fin-app .descricao-fatura-dashboard strong{
    font-size: 13px;
}

.fin-app .descricao-fatura-dashboard span,.fin-app .categoria-fatura-dashboard span{
    font-size: 11px;
}

.fin-app .acao-fatura-dashboard .botao-secundario-dashboard{
    width: auto !important;
    min-width: 70px;
    height: 34px;
    padding: 0 10px;
    font-size: 11px;
}

@media (max-width: 950px) {

    .fin-app .linha-fatura-dashboard{
        grid-template-columns:
            55px
            minmax(140px, 1fr)
            minmax(140px, 1fr);
        grid-template-areas:
            "data descricao categoria"
            "data parcela valor"
            "data acao dias";
        row-gap: 8px;
    }

    .fin-app .data-fatura-dashboard{
        grid-area: data;
    }

    .fin-app .descricao-fatura-dashboard{
        grid-area: descricao;
    }

    .fin-app .categoria-fatura-dashboard{
        grid-area: categoria;
    }

    .fin-app .parcela-fatura-dashboard{
        grid-area: parcela;
    }

    .fin-app .valor-fatura-item-dashboard{
        grid-area: valor;
        text-align: left;
    }

    .fin-app .acao-fatura-dashboard{
        grid-area: acao;
        justify-content: flex-start;
    }

    .fin-app .dias-fatura-dashboard{
        grid-area: dias;
    }
}

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

@media (max-width: 768px) {

    .fin-app .conteudo.dashboard-financeiro{
        width: 100%;
        margin-left: 0;
    }

    .fin-app .linha-vencimento-dashboard{
        grid-template-columns: 50px minmax(0, 1fr);
        grid-template-areas:
            "data descricao"
            "data categoria"
            "data status"
            "data valor"
            "data acao"
            "data dias";
    }

    .fin-app .status-vencimento-dashboard{
        justify-content: flex-start;
    }

    .fin-app .dias-vencimento-dashboard{
        align-items: flex-start;
        text-align: left;
    }

    .fin-app .linha-fatura-dashboard{
        grid-template-columns: 50px minmax(0, 1fr);
        grid-template-areas:
            "data descricao"
            "data categoria"
            "data parcela"
            "data valor"
            "data acao"
            "data dias";
    }

    .fin-app .dias-fatura-dashboard{
        align-items: flex-start;
        text-align: left;
    }
}


/* =========================================================
LAYOUT FINAL - DASHBOARD
========================================================= */

.fin-app .cabecalho-lancamentos-dashboard,.fin-app .linha-lancamento-final{
    display: grid;
    grid-template-columns:
        95px
        minmax(175px, 1.15fr)
        minmax(170px, 1fr)
        105px
        110px
        220px
        95px;
    gap: 12px;
    align-items: center;
}

.fin-app .cabecalho-lancamentos-dashboard{
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    color: var(--text);
    font-size: 11px;
}

.fin-app .cabecalho-lancamentos-dashboard small{
    display: block;
    margin-top: 4px;
    color: var(--text);
    font-size: 10px;
}

.fin-app .linha-lancamento-final{
    min-height: 96px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-bottom: 0;
}

.fin-app .linha-lancamento-final:last-child{
    border-bottom: 1px solid var(--border);
    border-radius: 0 0 10px 10px;
}

.fin-app .data-lancamento-final,.fin-app .data-fatura-final{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.fin-app .data-lancamento-final{
    width: 58px;
    min-height: 68px;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.fin-app .data-lancamento-final strong,.fin-app .data-fatura-final strong{
    color: var(--primary);
    font-size: 22px;
}

.fin-app .data-lancamento-final span,.fin-app .data-fatura-final span{
    margin-top: 3px;
    color: var(--text);
    font-size: 10px;
    text-transform: uppercase;
}

.fin-app .coluna-principal-final,.fin-app .descricao-fatura-final,.fin-app .categoria-fatura-final{
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.fin-app .coluna-principal-final strong,.fin-app .categoria-fatura-final strong{
    color: var(--primary);
    font-size: 14px;
    font-weight: 700;
}

.fin-app .coluna-principal-final span,.fin-app .descricao-fatura-final span,.fin-app .categoria-fatura-final span{
    color: var(--text);
    font-size: 11px;
}

.fin-app .status-final{
    display: flex;
    justify-content: center;
}

.fin-app .status-final .badge-status{
    min-width: 82px;
    padding: 6px 8px;
    font-size: 11px;
}

.fin-app .valor-final,.fin-app .valor-fatura-final{
    color: var(--text);
    font-weight: bold;
    text-align: right;
    white-space: nowrap;
}

.fin-app .acoes-final{
    display: grid;
    grid-template-columns: 100px 100px;
    gap: 6px;
    justify-content: center;
    align-items: center;
}

.fin-app .botao-pagar-final,.fin-app .botao-editar-final,.fin-app .botao-cancelar-final{
    width: 100px;
    min-height: 33px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 8px;
    border-radius: 7px;
    font-family: inherit;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

.fin-app .botao-pagar-final{
    border: 1px solid #00c853;
    background: transparent;
    color: #00e65c;
}

.fin-app .botao-editar-final{
    border: 1px solid var(--primary);
    background: transparent;
    color: var(--primary);
}

.fin-app .botao-cancelar-final{
    grid-column: 2;
    grid-row: 1 / span 2;
    min-height: 72px;
    border: 1px solid var(--border);
    background: var(--bg-main);
    color: var(--text);
    line-height: 1.15;
    text-align: center;
}

.fin-app .dias-final{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.05;
    text-align: center;
}

.fin-app .dias-vencido-texto,.fin-app .dias-vencido-numero{
    color: #ff4d4d;
}

.fin-app .dias-falta-texto,.fin-app .dias-falta-numero{
    color: #ff9f1a;
}

.fin-app .dias-vencido-numero,.fin-app .dias-falta-numero{
    margin: 3px 0;
    font-size: 23px;
}

.fin-app .dias-vencido-texto,.fin-app .dias-falta-texto,.fin-app .dias-hoje-final{
    font-size: 10px;
}

.fin-app .dias-hoje-final{
    color: #ff9f1a;
}


/* =========================================================
FATURA FINAL
========================================================= */

.fin-app .cabecalho-fatura-final,.fin-app .linha-fatura-final{
    display: grid;
    grid-template-columns:
        70px
        minmax(170px, 1.1fr)
        minmax(160px, 1fr)
        65px
        100px
        90px
        85px;
    gap: 10px;
    align-items: center;
}

.fin-app .cabecalho-fatura-final{
    padding: 10px;
    color: var(--text-light);
    font-size: 10px;
    border-bottom: 1px solid var(--border);
}

.fin-app .cabecalho-fatura-final small{
    display: block;
    margin-top: 3px;
    color: var(--text-light);
    font-size: 9px;
}

.fin-app .linha-fatura-final{
    padding: 10px;
    border-bottom: 1px solid var(--border);
}

.fin-app .descricao-fatura-final strong{
    color: var(--primary);
    font-size: 13px;
}

.fin-app .parcela-fatura-final{
    color: var(--text);
    font-size: 11px;
    text-align: center;
}

.fin-app .acao-fatura-final{
    display: flex;
    justify-content: center;
}


/* =========================================================
RESPONSIVO FINAL
========================================================= */

@media (max-width: 1250px) {

    .fin-app .cabecalho-lancamentos-dashboard{
        display: none;
    }

    .fin-app .linha-lancamento-final{
        grid-template-columns:
            65px
            minmax(150px, 1fr)
            minmax(150px, 1fr)
            90px;
        grid-template-areas:
            "data lancamento categoria status"
            "data valor acoes dias";
        row-gap: 9px;
        margin-bottom: 8px;
        border-bottom: 1px solid var(--border);
        border-radius: 9px;
    }

    .fin-app .data-lancamento-final{ grid-area: data; }
    .fin-app .coluna-principal-final:not(.categoria-final){ grid-area: lancamento; }
    .fin-app .categoria-final{ grid-area: categoria; }
    .fin-app .status-final{ grid-area: status; }
    .fin-app .valor-final{
        grid-area: valor;
        text-align: left;
    }
    .fin-app .acoes-final{
        grid-area: acoes;
        justify-content: start;
    }
    .fin-app .dias-final{ grid-area: dias; }
}

@media (max-width: 800px) {

    .fin-app .linha-lancamento-final{
        grid-template-columns: 58px minmax(0, 1fr);
        grid-template-areas:
            "data lancamento"
            "data categoria"
            "data status"
            "data valor"
            "data acoes"
            "data dias";
    }

    .fin-app .status-final,.fin-app .dias-final{
        justify-content: flex-start;
        align-items: flex-start;
        text-align: left;
    }

    .fin-app .cabecalho-fatura-final{
        display: none;
    }

    .fin-app .linha-fatura-final{
        grid-template-columns: 55px minmax(0, 1fr);
        grid-template-areas:
            "data descricao"
            "data categoria"
            "data parcela"
            "data valor"
            "data acao"
            "data dias";
    }

    .fin-app .data-fatura-final{ grid-area: data; }
    .fin-app .descricao-fatura-final{ grid-area: descricao; }
    .fin-app .categoria-fatura-final{ grid-area: categoria; }
    .fin-app .parcela-fatura-final{ grid-area: parcela; text-align:left; }
    .fin-app .valor-fatura-final{ grid-area: valor; text-align:left; }
    .fin-app .acao-fatura-final{ grid-area: acao; justify-content:flex-start; }
    .fin-app .linha-fatura-final .dias-final{ grid-area: dias; align-items:flex-start; }
}

/* =========================================================
INVESTIMENTOS - MÓDULO UNIFICADO
========================================================= */

/* =========================================================
   INVESTIMENTOS
========================================================= */

.fin-app .investimentos-resumo{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 20px 0;
}

.fin-app .investimento-card-resumo,.fin-app .investimento-formulario,.fin-app .investimento-item,.fin-app .movimento-investimento-item{
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-sizing: border-box;
}

.fin-app .investimento-card-resumo{
    padding: 18px;
}

.fin-app .investimento-card-resumo span{
    display: block;
    color: var(--text-light);
    font-size: 12px;
}

.fin-app .investimento-card-resumo strong{
    display: block;
    margin-top: 8px;
    color: var(--primary);
    font-size: 24px;
}

.fin-app .grade-investimento-formularios{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.fin-app .investimento-formulario{
    padding: 18px;
}

.fin-app .investimento-formulario h2{
    margin: 0 0 18px;
}

.fin-app .investimento-campo{
    margin-bottom: 14px;
}

.fin-app .investimento-campo label{
    display: block;
    margin-bottom: 7px;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
}

.fin-app .investimento-campo input,.fin-app .investimento-campo select{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 43px;
    padding: 0 12px;

    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: 8px;

    color: var(--text);
    font-family: inherit;
    font-size: 13px;

    box-sizing: border-box;
}

.fin-app .investimento-campo input:focus,.fin-app .investimento-campo select:focus{
    border-color: var(--primary);
    outline: none;
}

.fin-app .investimento-ajuda{
    display: block;
    margin-top: 6px;
    color: var(--text-light);
    font-size: 10px;
}

.fin-app .investimento-botao{
    width: 100%;
    min-height: 43px;
    margin-top: 4px;

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

    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;

    color: var(--primary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}

.fin-app .investimento-botao:hover{
    background: var(--bg-hover);
    border-color: var(--primary);
}

.fin-app .lista-investimentos{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin: 14px 0 24px;
}

.fin-app .investimento-item{
    padding: 16px;
}

.fin-app .investimento-item-topo{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.fin-app .investimento-item h3{
    margin: 0;
    color: var(--primary);
    font-size: 15px;
}

.fin-app .investimento-tipo{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;

    border: 1px solid var(--border);
    border-radius: 999px;

    color: var(--text-light);
    font-size: 10px;
}

.fin-app .investimento-saldo{
    margin-top: 14px;
    color: var(--primary);
    font-size: 22px;
    font-weight: 800;
}

.fin-app .investimento-detalhe{
    margin-top: 5px;
    color: var(--text-light);
    font-size: 11px;
}

.fin-app .lista-movimentos-investimentos{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.fin-app .movimento-investimento-item{
    display: grid;
    grid-template-columns:
        110px
        minmax(180px, 1fr)
        minmax(120px, .8fr)
        120px;

    gap: 12px;
    align-items: center;
    padding: 12px 14px;
}

.fin-app .movimento-tipo{
    font-size: 11px;
    font-weight: 800;
}

.fin-app .movimento-APLICACAO{
    color: #ff9f1a;
}

.fin-app .movimento-RESGATE{
    color: var(--primary);
}

.fin-app .movimento-RENDIMENTO{
    color: var(--success);
}

.fin-app .movimento-valor{
    text-align: right;
    font-weight: 800;
}


/* =========================================================
   INVESTIMENTOS - RESPONSIVO
========================================================= */

@media (max-width: 900px) {

    .fin-app .grade-investimento-formularios{
        grid-template-columns: 1fr;
    }

    .fin-app .investimentos-resumo{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fin-app .movimento-investimento-item{
        grid-template-columns:
            90px
            minmax(0, 1fr)
            100px;
    }

    .fin-app .movimento-investimento-item .movimento-valor{
        grid-column: 3;
    }
}


@media (max-width: 620px) {

    .fin-app .conteudo h1{
        font-size: 28px;
        line-height: 1.15;
    }

    .fin-app .descricao-pagina{
        font-size: 14px;
        line-height: 1.4;
    }

    .fin-app .investimentos-resumo{
        grid-template-columns: 1fr;
    }

    .fin-app .grade-investimento-formularios{
        grid-template-columns: 1fr;
    }

    .fin-app .investimento-formulario{
        padding: 14px;
    }

    .fin-app .investimento-campo{
        margin-bottom: 12px;
    }

    .fin-app .investimento-campo input,.fin-app .investimento-campo select{
        min-height: 45px;
        font-size: 14px;
    }

    .fin-app .investimento-botao{
        min-height: 45px;
    }

    .fin-app .lista-investimentos{
        grid-template-columns: 1fr;
    }

    .fin-app .movimento-investimento-item{
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .fin-app .movimento-investimento-item .movimento-valor{
        grid-column: auto;
        text-align: left;
    }
}

/* =========================================================
CONFIGURAÇÕES - MÓDULO UNIFICADO
========================================================= */

/* =========================================================
   CONFIGURAÇÕES
========================================================= */

.fin-app .configuracoes-lista{
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 22px;
}

.fin-app .configuracao-card{
    width: 100%;
    max-width: 900px;

    padding: 20px;

    background: var(--bg-card, #1a1d33);

    border:
        1px solid
        var(--border, #35395c);

    border-radius: 12px;

    box-sizing: border-box;
}

.fin-app .configuracao-card-topo{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;

    margin-bottom: 18px;
}

.fin-app .configuracao-card h2{
    margin:
        0
        0
        7px;

    color:
        var(--text, #ffffff);

    font-size: 20px;
}

.fin-app .configuracao-card p{
    margin: 0;

    color:
        var(--text-light, #bfc6ff);

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

.fin-app .configuracao-icone{
    display: flex;
    align-items: center;
    justify-content: center;

    flex:
        0
        0
        48px;

    width: 48px;
    height: 48px;

    color: #ff4d4d;

    background:
        rgba(
            255,
            77,
            77,
            .06
        );

    border:
        1px solid
        rgba(
            255,
            77,
            77,
            .42
        );

    border-radius: 10px;
}

.fin-app .configuracao-icone svg{
    width: 25px;
    height: 25px;

    fill: none;
    stroke: currentColor;

    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fin-app .reset-aviso{
    margin-bottom: 16px;
    padding: 13px 14px;

    background:
        rgba(
            255,
            77,
            77,
            .05
        );

    border:
        1px solid
        rgba(
            255,
            77,
            77,
            .28
        );

    border-radius: 9px;

    color:
        var(--text-light, #bfc6ff);

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

.fin-app .reset-aviso strong{
    color: #ff6b6b;
}

.fin-app .reset-mantem{
    margin-top: 8px;
    color:
        var(--primary, #00e5ff);
}

.fin-app .reset-formulario{
    max-width: 500px;
}

.fin-app .reset-formulario label{
    display: block;

    margin-bottom: 7px;

    color:
        var(--text, #ffffff);

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

.fin-app .reset-formulario input{
    width: 100%;
    min-height: 42px;

    padding: 0 12px;

    background:
        var(--bg-main, #0f1120);

    border:
        1px solid
        var(--border, #35395c);

    border-radius: 8px;

    color:
        var(--text, #ffffff);

    box-sizing: border-box;
}

.fin-app .botao-resetar-lancamentos{
    width: 100%;
    min-height: 42px;

    margin-top: 12px;

    background:
        transparent;

    border:
        1px solid
        #ff4d4d;

    border-radius: 8px;

    color:
        #ff4d4d;

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}

.fin-app .botao-resetar-lancamentos:hover{
    background:
        rgba(
            255,
            77,
            77,
            .08
        );
}


@media (max-width: 900px) {

    html,body.fin-app{
        overflow-x: hidden;
    }

    .fin-app .conteudo{
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;

        padding:
            72px
            14px
            32px !important;

        box-sizing: border-box !important;
    }

    .fin-app .configuracao-card{
        max-width: 100%;
    }
}


@media (max-width: 620px) {

    .fin-app .conteudo{
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .fin-app .configuracao-card{
        padding: 15px;
    }

    .fin-app .configuracao-card-topo{
        gap: 12px;
    }

    .fin-app .configuracao-card h2{
        font-size: 18px;
    }

    .fin-app .configuracao-icone{
        flex-basis: 42px;

        width: 42px;
        height: 42px;
    }
}


/* =========================================================
   DASHBOARD - TRANSFERÊNCIAS ENTRE CONTAS
========================================================= */

.fin-app .acoes-contas-dashboard{
    display: flex;
    justify-content: flex-end;

    margin-top: 18px;
    padding-top: 18px;

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

.fin-app .botao-transferencia-dashboard{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 190px;
    min-height: 38px;

    background:
        var(--bg-main);

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

    border-radius: 8px;

    color:
        var(--primary);

    font-family: inherit;
    font-size: 13px;
    font-weight: bold;

    cursor: pointer;
}

.fin-app .botao-transferencia-dashboard:hover{
    border-color:
        var(--primary);

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

.fin-app .transferencias-dashboard{
    margin-top: 22px;
    padding-top: 20px;

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

.fin-app .transferencias-dashboard-topo{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 14px;

    margin-bottom: 12px;
}

.fin-app .transferencias-dashboard-topo h3{
    margin: 0 0 4px;

    color:
        var(--text);

    font-size: 16px;
}

.fin-app .transferencias-dashboard-topo p,.fin-app .transferencias-dashboard-topo > strong{
    margin: 0;

    color:
        var(--text-light);

    font-size: 11px;
}

.fin-app .lista-transferencias-dashboard{
    display: flex;
    flex-direction: column;

    width: 100%;
}

.fin-app .cabecalho-transferencias-dashboard,.fin-app .linha-transferencia-dashboard{
    display: grid;

    grid-template-columns:
        82px
        minmax(150px, 1fr)
        minmax(150px, 1fr)
        120px
        190px;

    gap: 10px;
    align-items: center;

    width: 100%;
}

.fin-app .cabecalho-transferencias-dashboard{
    padding: 11px 12px;

    background:
        var(--bg-main);

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

    border-bottom: 0;

    border-radius:
        9px 9px 0 0;

    color:
        var(--primary);

    font-size: 10px;
    font-weight: bold;
}

.fin-app .linha-transferencia-dashboard{
    min-height: 76px;

    padding: 11px 12px;

    background:
        var(--bg-card);

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

    border-bottom: 0;
}

.fin-app .linha-transferencia-dashboard:last-child{
    border-bottom:
        1px solid
        var(--border);

    border-radius:
        0 0 9px 9px;
}

.fin-app .linha-transferencia-dashboard:hover{
    background:
        var(--bg-hover);
}

.fin-app .data-transferencia-dashboard{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    background:
        var(--bg-main);

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

    border-radius: 8px;
}

.fin-app .data-transferencia-dashboard strong{
    color:
        var(--primary);

    font-size: 20px;
    line-height: 1;
}

.fin-app .data-transferencia-dashboard span{
    margin-top: 4px;

    color:
        var(--text-light);

    font-size: 9px;

    text-transform:
        uppercase;
}

.fin-app .conta-transferencia-dashboard{
    display: flex;
    flex-direction: column;

    gap: 4px;

    min-width: 0;
}

.fin-app .transferencia-label{
    color:
        #ff9f1a;

    font-size: 10px;
    font-weight: bold;
}

.fin-app .conta-transferencia-dashboard.destino
.transferencia-label{
    color:
        var(--success);
}

.fin-app .conta-transferencia-dashboard strong{
    overflow: hidden;

    color:
        var(--text);

    font-size: 13px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}

.fin-app .valor-transferencia-dashboard{
    text-align: right;

    white-space: nowrap;
}

.fin-app .valor-transferencia-dashboard strong{
    color:
        var(--primary);

    font-size: 14px;
}

.fin-app .acoes-transferencia-dashboard{
    display: grid;

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

    gap: 6px;
}

.fin-app .acoes-transferencia-dashboard
.botao-editar-final,.fin-app .acoes-transferencia-dashboard
.botao-excluir-final{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 34px !important;
}


@media (max-width: 1050px) {

    .fin-app .cabecalho-transferencias-dashboard{
        display: none;
    }

    .fin-app .linha-transferencia-dashboard{
        grid-template-columns:
            62px
            minmax(0, 1fr)
            minmax(0, 1fr);

        grid-template-areas:
            "data origem destino"
            "data valor acoes";

        row-gap: 9px;
    }

    .fin-app .data-transferencia-dashboard{
        grid-area: data;
    }

    .fin-app .conta-transferencia-dashboard:not(.destino){
        grid-area: origem;
    }

    .fin-app .conta-transferencia-dashboard.destino{
        grid-area: destino;
    }

    .fin-app .valor-transferencia-dashboard{
        grid-area: valor;

        text-align: left;
    }

    .fin-app .acoes-transferencia-dashboard{
        grid-area: acoes;
    }
}


@media (max-width: 620px) {

    .fin-app .acoes-contas-dashboard{
        justify-content: stretch;
    }

    .fin-app .botao-transferencia-dashboard{
        width: 100%;
    }

    .fin-app .transferencias-dashboard-topo{
        align-items: flex-start;
    }

    .fin-app .linha-transferencia-dashboard{
        grid-template-columns:
            58px
            minmax(0, 1fr);

        grid-template-areas:
            "data origem"
            "data destino"
            "data valor"
            "data acoes";
    }

    .fin-app .acoes-transferencia-dashboard{
        grid-template-columns:
            1fr 1fr;
    }
}


/* =========================================================
   RELATÓRIOS - FINCONTROLE
========================================================= */

.fin-app .relatorios-fincontrole{
    min-width: 0;
}

.fin-app .relatorios-topo-pagina{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 16px;
}


/* =========================================================
   MENU SUPERIOR DOS RELATÓRIOS
========================================================= */

.fin-app .menu-relatorios{
    display: flex;
    align-items: center;

    gap: 7px;

    margin:
        20px
        0
        16px;

    padding: 6px;

    overflow-x: auto;

    background:
        var(--bg-card);

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

    border-radius: 10px;
}

.fin-app .menu-relatorio-item{
    flex:
        0
        0
        auto;

    min-height: 36px;

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

    padding:
        0
        14px;

    border:
        1px solid
        transparent;

    border-radius: 7px;

    color:
        var(--text-light);

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

    text-decoration: none;

    white-space: nowrap;
}

.fin-app .menu-relatorio-item:hover{
    color:
        var(--primary);

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

.fin-app .menu-relatorio-item.ativo{
    color:
        var(--primary);

    background:
        var(--bg-main);

    border-color:
        var(--primary);
}

.fin-app .menu-relatorio-item.desabilitado{
    opacity: .45;
    cursor: default;
}


/* =========================================================
   PAINEL
========================================================= */

.fin-app .painel-relatorio{
    width: 100%;

    padding: 18px;

    background:
        var(--bg-card);

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

    border-radius: 12px;

    box-sizing: border-box;
}

.fin-app .cabecalho-relatorio{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 18px;

    margin-bottom: 18px;
}

.fin-app .cabecalho-relatorio h2{
    margin:
        0
        0
        5px;

    color:
        var(--text);

    font-size: 18px;
}

.fin-app .cabecalho-relatorio p{
    margin: 0;

    color:
        var(--text-light);

    font-size: 11px;
}


/* =========================================================
   FILTRO DO ANO
========================================================= */

.fin-app .filtro-ano-relatorio{
    display: flex;
    flex-direction: column;

    gap: 6px;

    flex:
        0
        0
        130px;
}

.fin-app .filtro-ano-relatorio label{
    color:
        var(--text-light);

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

    text-transform: uppercase;
}

.fin-app .filtro-ano-relatorio select{
    width: 100%;
    min-height: 39px;

    padding:
        0
        10px;

    background:
        var(--bg-main);

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

    border-radius: 8px;

    color:
        var(--text);

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}

.fin-app .filtro-ano-relatorio select:focus{
    border-color:
        var(--primary);

    outline: none;
}


/* =========================================================
   TABELA MÊS A MÊS
========================================================= */

.fin-app .tabela-relatorio-scroll{
    width: 100%;

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

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

    border-radius: 9px;
}

.fin-app .tabela-relatorio-categorias{
    width: 100%;
    min-width: 1850px;

    border-collapse: separate;
    border-spacing: 0;

    background:
        var(--bg-card);

    table-layout: fixed;
}

.fin-app .tabela-relatorio-categorias th,.fin-app .tabela-relatorio-categorias td{
    min-width: 115px;

    padding:
        11px
        10px;

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

    border-right:
        1px solid
        rgba(
            53,
            57,
            92,
            .55
        );

    text-align: right;

    white-space: nowrap;

    font-size: 11px;
}

.fin-app .tabela-relatorio-categorias th{
    position: sticky;
    top: 0;

    z-index: 2;

    background:
        var(--bg-main);

    color:
        var(--primary);

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

    text-transform: uppercase;
}

.fin-app .tabela-relatorio-categorias tbody td{
    color:
        var(--text-light);
}

.fin-app .tabela-relatorio-categorias tbody tr:hover td{
    background:
        var(--bg-hover);
}

.fin-app .tabela-relatorio-categorias
.coluna-categoria{
    position: sticky;
    left: 0;

    z-index: 3;

    width: 190px;
    min-width: 190px;
    max-width: 190px;

    text-align: left;

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

.fin-app .tabela-relatorio-categorias
thead
.coluna-categoria{
    z-index: 5;

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

.fin-app .tabela-relatorio-categorias
tbody
.coluna-categoria
strong{
    color:
        var(--text);

    font-size: 11px;
}

.fin-app .tabela-relatorio-categorias
.coluna-total{
    position: sticky;
    right: 0;

    z-index: 3;

    min-width: 130px;

    background:
        #171a2d;

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

.fin-app .tabela-relatorio-categorias
thead
.coluna-total{
    z-index: 5;

    background:
        var(--bg-main);

    color:
        var(--primary);
}

.fin-app .tabela-relatorio-categorias
tbody
.coluna-total
strong{
    color:
        var(--primary);
}

.fin-app .tabela-relatorio-categorias tfoot td{
    position: sticky;
    bottom: 0;

    z-index: 4;

    background:
        var(--bg-main);

    color:
        var(--text);

    font-weight: 800;

    border-bottom: 0;
}

.fin-app .tabela-relatorio-categorias
tfoot
.coluna-categoria{
    z-index: 6;

    background:
        var(--bg-main);

    color:
        var(--primary);
}

.fin-app .tabela-relatorio-categorias
tfoot
.coluna-total{
    z-index: 6;

    background:
        var(--bg-main);

    color:
        var(--success);
}


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

.fin-app .rodape-relatorio{
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 22px;

    margin-top: 14px;

    color:
        var(--text-light);

    font-size: 11px;
}

.fin-app .rodape-relatorio strong{
    margin-left: 4px;

    color:
        var(--primary);
}


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

@media (max-width: 900px) {

    .fin-app .cabecalho-relatorio{
        align-items: stretch;
        flex-direction: column;
    }

    .fin-app .filtro-ano-relatorio{
        flex:
            0
            0
            auto;

        width: 150px;
    }

    .fin-app .painel-relatorio{
        padding: 14px;
    }
}


@media (max-width: 620px) {

    .fin-app .menu-relatorios{
        margin-top: 14px;
    }

    .fin-app .menu-relatorio-item{
        min-height: 34px;

        padding:
            0
            11px;

        font-size: 10px;
    }

    .fin-app .cabecalho-relatorio h2{
        font-size: 16px;
    }

    .fin-app .filtro-ano-relatorio{
        width: 100%;
    }

    .fin-app .tabela-relatorio-categorias
    .coluna-categoria{
        width: 145px;
        min-width: 145px;
        max-width: 145px;
    }

    .fin-app .rodape-relatorio{
        align-items: flex-start;
        flex-direction: column;

        gap: 5px;
    }
}


/* =========================================================
   RELATÓRIOS - AJUSTES FINAIS / COLUNA TRAVADA
========================================================= */

.fin-app .tabela-relatorio-categorias
.coluna-descritivo{
    position: sticky;
    left: 0;

    z-index: 4;

    width: 210px;
    min-width: 210px;
    max-width: 210px;

    text-align: left;

    background:
        var(--bg-card);

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

    box-shadow:
        9px 0 14px
        rgba(0, 0, 0, .14);
}

.fin-app .tabela-relatorio-categorias
thead
.coluna-descritivo{
    z-index: 7;

    background:
        var(--bg-main);

    color:
        var(--primary);
}

.fin-app .tabela-relatorio-categorias
tfoot
.coluna-descritivo{
    z-index: 7;

    background:
        var(--bg-main);

    color:
        var(--primary);
}

.fin-app .tabela-relatorio-categorias
tbody
tr:hover
.coluna-descritivo{
    background:
        var(--bg-hover);
}

.fin-app .link-detalhe-relatorio{
    display: block;

    overflow: hidden;

    color:
        var(--text);

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

    text-decoration: none;
    text-overflow: ellipsis;

    white-space: nowrap;
}

.fin-app .link-detalhe-relatorio:hover{
    color:
        var(--primary);
}

.fin-app .linha-destaque-relatorio td{
    background:
        rgba(0, 229, 255, .04);

    font-weight: 700;
}

.fin-app .linha-destaque-relatorio
.coluna-descritivo{
    color:
        var(--primary);
}

.fin-app .valor-negativo-relatorio{
    color:
        #ff6b6b !important;
}

.fin-app .filtro-ativo-relatorio{
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin:
        -4px
        0
        14px;

    padding:
        9px
        11px;

    background:
        var(--bg-main);

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

    border-radius: 8px;

    color:
        var(--text-light);

    font-size: 10px;
}

.fin-app .filtro-ativo-relatorio a{
    color:
        var(--primary);

    font-weight: 700;

    text-decoration: none;
}


@media (max-width: 620px) {

    .fin-app .tabela-relatorio-categorias
    .coluna-descritivo{
        width: 150px;
        min-width: 150px;
        max-width: 150px;
    }
}


/* =========================================================
   FINCONTROLE - SCROLLBAR GLOBAL
========================================================= */

html,body.fin-app,.fin-app *{
    scrollbar-width: thin;
    scrollbar-color: #35395c #121428;
}

.fin-app *::-webkit-scrollbar{
    width: 8px;
    height: 8px;
    background: #121428;
}

.fin-app *::-webkit-scrollbar-track{
    background: #121428;
    border-radius: 999px;
}

.fin-app *::-webkit-scrollbar-thumb{
    background: #35395c;
    border: 2px solid #121428;
    border-radius: 999px;
    min-height: 38px;
}

.fin-app *::-webkit-scrollbar-thumb:hover{
    background: #00e5ff;
}

.fin-app *::-webkit-scrollbar-corner{
    background: #121428;
}

/* MENU LATERAL */
.fin-app .sidebar{
    scrollbar-width: thin;
    scrollbar-color: #35395c #121428;
}

.fin-app .sidebar::-webkit-scrollbar{
    width: 6px;
}

.fin-app .sidebar::-webkit-scrollbar-track{
    background: #121428;
}

.fin-app .sidebar::-webkit-scrollbar-thumb{
    background: #35395c;
    border: 1px solid #121428;
    border-radius: 999px;
}

.fin-app .sidebar::-webkit-scrollbar-thumb:hover{
    background: #00e5ff;
}

/* CONTEÚDO PRINCIPAL / MODAIS / ASSISTENTE */
.fin-app .conteudo,.fin-app .conteudo-dashboard,.fin-app .relatorio-meses-scroll,.fin-app .modal-dashboard-conteudo,.fin-app .conteudo-fatura-dashboard,.fin-app .assistente-conteudo,.fin-app .assistente-mensagens{
    scrollbar-width: thin;
    scrollbar-color: #35395c #121428;
}

/* RELATÓRIOS - HORIZONTAL */
.fin-app .relatorio-meses-scroll::-webkit-scrollbar{
    height: 10px;
}

.fin-app .relatorio-meses-scroll::-webkit-scrollbar-track{
    background: #121428;
    border: 1px solid #35395c;
    border-radius: 999px;
}

.fin-app .relatorio-meses-scroll::-webkit-scrollbar-thumb{
    background: #252846;
    border: 2px solid #121428;
    border-radius: 999px;
    min-width: 58px;
}

.fin-app .relatorio-meses-scroll::-webkit-scrollbar-thumb:hover{
    background: #00e5ff;
}

/* MODAIS / CHAT */
.fin-app .modal-dashboard-conteudo::-webkit-scrollbar,.fin-app .conteudo-fatura-dashboard::-webkit-scrollbar,.fin-app .assistente-conteudo::-webkit-scrollbar,.fin-app .assistente-mensagens::-webkit-scrollbar{
    width: 7px;
}

.fin-app .modal-dashboard-conteudo::-webkit-scrollbar-thumb,.fin-app .conteudo-fatura-dashboard::-webkit-scrollbar-thumb,.fin-app .assistente-conteudo::-webkit-scrollbar-thumb,.fin-app .assistente-mensagens::-webkit-scrollbar-thumb{
    background: #35395c;
    border: 2px solid #121428;
    border-radius: 999px;
}

.fin-app .modal-dashboard-conteudo::-webkit-scrollbar-thumb:hover,.fin-app .conteudo-fatura-dashboard::-webkit-scrollbar-thumb:hover,.fin-app .assistente-conteudo::-webkit-scrollbar-thumb:hover,.fin-app .assistente-mensagens::-webkit-scrollbar-thumb:hover{
    background: #00e5ff;
}

/* MOBILE */
@media(max-width:620px) {
    .fin-app *::-webkit-scrollbar{
        width: 6px;
        height: 6px;
    }

    .fin-app .sidebar::-webkit-scrollbar{
        width: 4px;
    }

    .fin-app .relatorio-meses-scroll::-webkit-scrollbar{
        height: 8px;
    }
}


/* =========================================================
   FINCONTROLE - CORREÇÃO VISUAL DOS RELATÓRIOS
   V2 - largura, leitura e rolagem horizontal
========================================================= */

/*
 * O conteúdo de relatórios deve aproveitar toda a área disponível.
 */
.fin-app .relatorios-fincontrole{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

.fin-app .relatorios-fincontrole .relatorios-topo-pagina,.fin-app .relatorios-fincontrole .menu-relatorios,.fin-app .relatorios-fincontrole .relatorio-card,.fin-app .relatorios-fincontrole .card-relatorio,.fin-app .relatorios-fincontrole .relatorio-bloco,.fin-app .relatorios-fincontrole .relatorio-conteudo{
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}


/* =========================================================
   MENU SUPERIOR DOS RELATÓRIOS
========================================================= */

.fin-app .menu-relatorios{
    display: flex !important;
    align-items: center !important;

    width: 100% !important;

    gap: 6px !important;

    margin:
        18px
        0
        14px !important;

    padding: 5px !important;

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

    background:
        var(--bg-card) !important;

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

    border-radius:
        9px !important;
}

.fin-app .menu-relatorios a,.fin-app .menu-relatorios .menu-relatorio-item{
    flex: 0 0 auto !important;

    min-height: 34px !important;

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

    padding:
        0
        13px !important;

    border-radius:
        7px !important;

    font-size:
        11px !important;

    white-space:
        nowrap !important;
}


/* =========================================================
   CARD / ÁREA PRINCIPAL DO RELATÓRIO
========================================================= */

.fin-app .relatorio-card,.fin-app .card-relatorio,.fin-app .relatorio-bloco{
    padding:
        16px !important;

    border-radius:
        10px !important;
}

.fin-app .relatorio-card h2,.fin-app .relatorio-card h3,.fin-app .card-relatorio h2,.fin-app .card-relatorio h3{
    font-size:
        17px !important;
}

.fin-app .relatorio-card p,.fin-app .card-relatorio p{
    font-size:
        11px !important;
}


/* =========================================================
   TABELA DUPLA
   Categoria fixa + meses roláveis
========================================================= */

.fin-app .relatorio-tabela-dupla{
    display: grid !important;

    grid-template-columns:
        200px
        minmax(0, 1fr) !important;

    width:
        100% !important;

    min-width:
        0 !important;

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

    border-radius:
        9px !important;

    overflow:
        hidden !important;

    background:
        var(--bg-card) !important;
}


/* coluna fixa da esquerda */
.fin-app .relatorio-coluna-fixa{
    width:
        200px !important;

    min-width:
        200px !important;

    max-width:
        200px !important;

    overflow:
        hidden !important;

    background:
        var(--bg-card) !important;

    border-right:
        1px solid
        var(--border) !important;

    position:
        relative !important;

    z-index:
        20 !important;
}


/* área dos meses ocupa o restante */
.fin-app .relatorio-meses-wrapper{
    width:
        100% !important;

    min-width:
        0 !important;

    overflow:
        hidden !important;
}

.fin-app .relatorio-meses-scroll{
    width:
        100% !important;

    max-width:
        100% !important;

    min-width:
        0 !important;

    overflow-x:
        auto !important;

    overflow-y:
        hidden !important;

    padding-bottom:
        5px !important;
}


/* =========================================================
   TAMANHO DAS TABELAS
========================================================= */

.fin-app .tabela-relatorio-fixa,.fin-app .tabela-relatorio-meses{
    border-collapse:
        collapse !important;

    table-layout:
        fixed !important;
}

.fin-app .tabela-relatorio-fixa{
    width:
        200px !important;

    min-width:
        200px !important;
}

.fin-app .tabela-relatorio-meses{
    width:
        max-content !important;

    min-width:
        1040px !important;
}


/* células da coluna fixa */
.fin-app .tabela-relatorio-fixa th,.fin-app .tabela-relatorio-fixa td{
    width:
        200px !important;

    min-width:
        200px !important;

    height:
        42px !important;

    padding:
        0
        12px !important;

    box-sizing:
        border-box !important;

    font-size:
        11px !important;

    line-height:
        1.25 !important;

    vertical-align:
        middle !important;

    overflow:
        hidden !important;

    text-overflow:
        ellipsis !important;

    white-space:
        nowrap !important;
}


/* meses e total */
.fin-app .tabela-relatorio-meses th,.fin-app .tabela-relatorio-meses td{
    width:
        80px !important;

    min-width:
        80px !important;

    height:
        42px !important;

    padding:
        0
        9px !important;

    box-sizing:
        border-box !important;

    font-size:
        11px !important;

    line-height:
        1.2 !important;

    text-align:
        right !important;

    vertical-align:
        middle !important;

    white-space:
        nowrap !important;
}


/* cabeçalhos */
.fin-app .tabela-relatorio-fixa thead th,.fin-app .tabela-relatorio-meses thead th{
    height:
        40px !important;

    color:
        var(--primary) !important;

    background:
        var(--bg-main) !important;

    font-size:
        10px !important;

    font-weight:
        900 !important;

    text-transform:
        uppercase !important;
}

.fin-app .tabela-relatorio-fixa thead th{
    text-align:
        left !important;
}

.fin-app .tabela-relatorio-meses thead th{
    text-align:
        center !important;
}


/* linhas */
.fin-app .tabela-relatorio-fixa tbody td,.fin-app .tabela-relatorio-meses tbody td{
    border-top:
        1px solid
        var(--border) !important;

    background:
        var(--bg-card) !important;
}

.fin-app .tabela-relatorio-fixa tbody tr:hover td,.fin-app .tabela-relatorio-meses tbody tr:hover td{
    background:
        var(--bg-hover) !important;
}


/* nomes das categorias um pouco mais fortes */
.fin-app .tabela-relatorio-fixa tbody td{
    color:
        var(--text) !important;

    font-weight:
        700 !important;
}


/* total fixo do fim */
.fin-app .tabela-relatorio-meses .coluna-total-meses,.fin-app .tabela-relatorio-meses th:last-child,.fin-app .tabela-relatorio-meses td:last-child{
    min-width:
        92px !important;

    width:
        92px !important;

    font-weight:
        900 !important;
}


/* =========================================================
   SELETOR DE ANO
========================================================= */

.fin-app .relatorios-fincontrole select,.fin-app .relatorio-card select,.fin-app .card-relatorio select{
    min-height:
        38px !important;

    font-size:
        12px !important;
}


/* =========================================================
   SCROLL HORIZONTAL BONITO
========================================================= */

.fin-app .relatorio-meses-scroll{
    scrollbar-width:
        thin !important;

    scrollbar-color:
        #35395c
        #121428 !important;
}

.fin-app .relatorio-meses-scroll::-webkit-scrollbar{
    display:
        block !important;

    height:
        9px !important;

    background:
        #121428 !important;
}

.fin-app .relatorio-meses-scroll::-webkit-scrollbar-track{
    background:
        #121428 !important;

    border:
        1px solid
        #35395c !important;

    border-radius:
        999px !important;
}

.fin-app .relatorio-meses-scroll::-webkit-scrollbar-thumb{
    background:
        #35395c !important;

    border:
        2px solid
        #121428 !important;

    border-radius:
        999px !important;

    min-width:
        60px !important;
}

.fin-app .relatorio-meses-scroll::-webkit-scrollbar-thumb:hover{
    background:
        #00e5ff !important;
}


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

@media(max-width:1100px) {

    .fin-app .relatorio-tabela-dupla{
        grid-template-columns:
            180px
            minmax(0, 1fr) !important;
    }

    .fin-app .relatorio-coluna-fixa,.fin-app .tabela-relatorio-fixa,.fin-app .tabela-relatorio-fixa th,.fin-app .tabela-relatorio-fixa td{
        width:
            180px !important;

        min-width:
            180px !important;

        max-width:
            180px !important;
    }

    .fin-app .tabela-relatorio-meses{
        min-width:
            980px !important;
    }

    .fin-app .tabela-relatorio-meses th,.fin-app .tabela-relatorio-meses td{
        width:
            75px !important;

        min-width:
            75px !important;
    }
}


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

@media(max-width:620px) {

    .fin-app .relatorios-fincontrole{
        padding-right:
            0 !important;
    }

    .fin-app .relatorios-topo-pagina{
        display:
            block !important;
    }

    .fin-app .menu-relatorios{
        margin-top:
            12px !important;

        padding:
            4px !important;
    }

    .fin-app .menu-relatorios a,.fin-app .menu-relatorios .menu-relatorio-item{
        min-height:
            38px !important;

        padding:
            0
            12px !important;

        font-size:
            11px !important;
    }

    .fin-app .relatorio-card,.fin-app .card-relatorio,.fin-app .relatorio-bloco{
        padding:
            12px !important;
    }

    .fin-app .relatorio-tabela-dupla{
        grid-template-columns:
            145px
            minmax(0, 1fr) !important;
    }

    .fin-app .relatorio-coluna-fixa,.fin-app .tabela-relatorio-fixa,.fin-app .tabela-relatorio-fixa th,.fin-app .tabela-relatorio-fixa td{
        width:
            145px !important;

        min-width:
            145px !important;

        max-width:
            145px !important;
    }

    .fin-app .tabela-relatorio-fixa th,.fin-app .tabela-relatorio-fixa td{
        height:
            44px !important;

        padding:
            0
            9px !important;

        font-size:
            10px !important;
    }

    .fin-app .tabela-relatorio-meses{
        min-width:
            910px !important;
    }

    .fin-app .tabela-relatorio-meses th,.fin-app .tabela-relatorio-meses td{
        width:
            70px !important;

        min-width:
            70px !important;

        height:
            44px !important;

        padding:
            0
            7px !important;

        font-size:
            10px !important;
    }

    .fin-app .relatorio-meses-scroll::-webkit-scrollbar{
        height:
            7px !important;
    }
}



/* ===== APRENDER / ONBOARDING VISUAL ===== */
/* =========================================================
   FINCONTROLE - APRENDER POR MÓDULO V2
========================================================= */

/*
 * Por padrão o botão entra DENTRO do cabeçalho da página.
 * Assim ele não cobre período, filtros ou ações.
 */
.fin-app .botao-aprender-modulo{
    position: static;
    flex: 0 0 auto;

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

    min-height: 38px;
    padding: 0 13px;

    border: 1px solid rgba(0,229,255,.38);
    border-radius: 9px;

    background: rgba(15,17,32,.72);
    color: var(--primary, #00e5ff);

    font-family: inherit;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .35px;

    cursor: pointer;
    white-space: nowrap;
    box-shadow: none;
}

.fin-app .botao-aprender-modulo:hover{
    background: var(--bg-hover, #252846);
    border-color: var(--primary, #00e5ff);
}

.fin-app .botao-aprender-modulo .aprender-icone{
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0,229,255,.09);
    font-size: 12px;
}

/* Cabeçalhos conhecidos */
.fin-app .dashboard-cabecalho,.fin-app .relatorios-topo-pagina,.fin-app .fc-cadastro-cabecalho,.fin-app .aprender-host-cabecalho{
    gap: 12px !important;
}

.fin-app .dashboard-cabecalho .botao-aprender-modulo,.fin-app .relatorios-topo-pagina .botao-aprender-modulo,.fin-app .fc-cadastro-cabecalho .botao-aprender-modulo{
    margin-left: auto;
}

/* No dashboard ele fica antes do seletor de período. */
.fin-app .dashboard-cabecalho .botao-aprender-modulo + .seletor-periodo-dashboard{
    margin-left: 0 !important;
}

/* Se nenhuma área adequada existir, usa fallback flutuante. */
.fin-app .botao-aprender-modulo.aprender-flutuante{
    position: fixed;
    right: 18px;
    bottom: 88px;
    top: auto;
    z-index: 1800;
    background: rgba(15,17,32,.96);
    box-shadow: 0 10px 28px rgba(0,0,0,.26);
    backdrop-filter: blur(8px);
}

/* =========================================================
   TOUR LOCAL DO MÓDULO
========================================================= */
.fin-app .aprender-overlay{
    position: fixed;
    inset: 0;
    z-index: 99998;
    display: none;
    background: rgba(4,6,15,.70);
    pointer-events: none;
}

.fin-app .aprender-overlay.ativo{
    display: block;
}

.fin-app .aprender-caixa{
    position: fixed;
    z-index: 100000;
    left: 50%;
    top: 14px;
    transform: translateX(-50%);

    width: min(540px, calc(100vw - 22px));
    padding: 18px;

    border: 1px solid var(--border, #35395c);
    border-radius: 13px;
    background: var(--bg-card, #1a1d33);
    color: var(--text, #fff);

    box-shadow: 0 24px 70px rgba(0,0,0,.56);
}

.fin-app .aprender-topo{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.fin-app .aprender-progresso{
    color: var(--primary, #00e5ff);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.fin-app .aprender-modulo{
    margin-top: 3px;
    color: var(--text-light, #bfc6ff);
    font-size: 10px;
    font-weight: 800;
}

.fin-app .aprender-fechar{
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: 1px solid var(--border, #35395c);
    border-radius: 8px;
    background: transparent;
    color: var(--text-light, #bfc6ff);
    font-size: 19px;
    cursor: pointer;
}

.fin-app .aprender-caixa h3{
    margin: 14px 0 7px;
    color: var(--text, #fff);
    font-size: 18px;
}

.fin-app .aprender-caixa p{
    margin: 0;
    color: var(--text-light, #bfc6ff);
    font-size: 13px;
    line-height: 1.58;
}

.fin-app .aprender-acoes{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 16px;
}

.fin-app .aprender-botao{
    min-height: 42px;
    border: 1px solid var(--primary, #00e5ff);
    border-radius: 8px;
    background: rgba(0,229,255,.08);
    color: var(--primary, #00e5ff);
    font-family: inherit;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}

.fin-app .aprender-botao.secundario{
    border-color: var(--border, #35395c);
    background: transparent;
    color: var(--text-light, #bfc6ff);
}

.fin-app .aprender-botao:disabled{
    opacity: .35;
    cursor: default;
}

.fin-app .aprender-destaque{
    position: relative !important;
    z-index: 99999 !important;
    outline: 2px solid var(--primary, #00e5ff) !important;
    outline-offset: 4px !important;
    border-radius: 8px !important;
    box-shadow: 0 0 0 7px rgba(0,229,255,.09) !important;
}

body.fin-app.aprender-ativo{
    scroll-behavior: smooth;
}

@media(max-width:900px) {
    .fin-app .dashboard-cabecalho{
        flex-wrap: wrap !important;
    }

    .fin-app .dashboard-cabecalho .botao-aprender-modulo{
        order: 2;
        margin-left: auto;
    }

    .fin-app .dashboard-cabecalho .seletor-periodo-dashboard{
        order: 3;
    }
}

@media(max-width:620px) {
    .fin-app .dashboard-cabecalho,.fin-app .relatorios-topo-pagina,.fin-app .fc-cadastro-cabecalho{
        align-items: flex-start !important;
    }

    .fin-app .dashboard-cabecalho .botao-aprender-modulo,.fin-app .relatorios-topo-pagina .botao-aprender-modulo,.fin-app .fc-cadastro-cabecalho .botao-aprender-modulo{
        min-height: 36px;
        padding: 0 10px;
        margin-left: 0;
        font-size: 10px;
    }

    .fin-app .dashboard-cabecalho .botao-aprender-modulo{
        order: 3;
        width: auto;
    }

    .fin-app .dashboard-cabecalho .seletor-periodo-dashboard{
        order: 2;
        width: auto;
        margin-left: auto;
    }

    .fin-app .botao-aprender-modulo.aprender-flutuante{
        right: 12px;
        bottom: 82px;
    }

    .fin-app .aprender-caixa{
        top: 8px;
        width: calc(100vw - 16px);
        padding: 15px;
    }

    .fin-app .aprender-caixa h3{
        font-size: 18px;
    }

    .fin-app .aprender-caixa p{
        font-size: 14px;
    }

    .fin-app .aprender-botao{
        min-height: 48px;
        font-size: 12px;
    }
}


/* =========================================================
   FINCONTROLE - TUTORIAL / ANALISE VISUAL V6
========================================================= */

.fin-app #dashboardGraficos.aprender-destaque,.fin-app .dashboard-grafico-card.aprender-destaque,.fin-app #tourExplicacaoGraficos.aprender-destaque{
    overflow:visible!important;
}

@media(max-width:760px){
    .fin-app .aprender-caixa{
        width:calc(100vw - 14px)!important;
        max-height:44vh!important;
        overflow:auto!important;
    }

    .fin-app .aprender-acoes{
        grid-template-columns:1fr 1fr!important;
        gap:7px!important;
    }
}


/* =========================================================
   FINCONTROLE - TUTORIAL/TOUR V6.4
   Proteção contra clique acidental em ações reais da página
========================================================= */

/* Durante o Tutorial local, o fundo não recebe cliques. */
.fin-app .aprender-overlay{
    pointer-events: auto !important;
}

/* A caixa continua totalmente utilizável. */
.fin-app .aprender-caixa{
    pointer-events: auto !important;
}

/* O elemento destacado é somente visual durante a explicação. */
.fin-app .aprender-destaque{
    pointer-events: none !important;
}

/* Mesma proteção no Tour Geral. */
.fin-app .onboarding-destaque{
    pointer-events: none !important;
}

/*
 * O objetivo é impedir que um toque no destaque execute ações como
 * "Nova transferência", "Editar", "Excluir", "Pagar" etc.
 */


/* =========================================================
   FINCONTROLE - TOUR GERAL V6.8
   Layout restaurado / independente do theme.css
========================================================= */

.fin-app .onboarding-overlay{
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;

    background: rgba(5, 7, 18, .58) !important;
    backdrop-filter: blur(1.5px);

    pointer-events: none !important;
}

.fin-app .onboarding-caixa{
    position: fixed !important;
    top: 14px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;

    transform: translateX(-50%) !important;

    z-index: 2147483001 !important;

    width: min(440px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 28px) !important;
    overflow-y: auto !important;

    padding: 16px !important;

    background: #171a30 !important;
    border: 1px solid #3a4068 !important;
    border-radius: 13px !important;

    box-shadow:
        0 18px 55px rgba(0,0,0,.50),
        0 0 0 1px rgba(0,229,255,.035) !important;

    color: #ffffff !important;

    font-family: Arial, sans-serif !important;

    pointer-events: auto !important;
}

.fin-app .onboarding-progresso{
    margin: 0 42px 3px 0 !important;

    color: #00e5ff !important;

    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;

    letter-spacing: .25px !important;
}

.fin-app .onboarding-pagina{
    margin: 0 42px 8px 0 !important;

    color: #00ffb3 !important;

    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;

    text-transform: uppercase !important;
    letter-spacing: .35px !important;
}

.fin-app .onboarding-caixa h3{
    margin: 0 42px 7px 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
}

.fin-app .onboarding-caixa p{
    margin: 0 !important;
    padding: 0 !important;

    color: #c8cff8 !important;

    font-size: 11px !important;
    line-height: 1.5 !important;
}

.fin-app .onboarding-fechar{
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;

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

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

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

    background: #101326 !important;

    border: 1px solid #41476e !important;
    border-radius: 8px !important;

    color: #ffffff !important;

    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    cursor: pointer !important;
}

.fin-app .onboarding-fechar:hover{
    border-color: #00e5ff !important;
    color: #00e5ff !important;
}

.fin-app .onboarding-acoes{
    margin-top: 14px !important;

    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}

.fin-app .onboarding-botao{
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;

    margin: 0 !important;
    padding: 8px 12px !important;

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

    background: rgba(0,229,255,.08) !important;

    border: 1px solid #00e5ff !important;
    border-radius: 8px !important;

    color: #00e5ff !important;

    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;

    cursor: pointer !important;
}

.fin-app .onboarding-botao:hover{
    background: rgba(0,229,255,.14) !important;
}

.fin-app .onboarding-botao.secundario{
    background: transparent !important;
    border-color: #3a4068 !important;
    color: #d5d9f5 !important;
}

.fin-app .onboarding-botao.secundario:hover{
    border-color: #69719c !important;
}

.fin-app .onboarding-botao:disabled{
    opacity: .45 !important;
    cursor: default !important;
}

.fin-app .onboarding-pular{
    width: 100% !important;
    min-height: 34px !important;

    margin: 8px 0 0 !important;
    padding: 7px 10px !important;

    background: transparent !important;

    border: 1px solid #343a60 !important;
    border-radius: 8px !important;

    color: #aeb6e8 !important;

    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;

    cursor: pointer !important;
}

.fin-app .onboarding-pular:hover{
    color: #ffffff !important;
    border-color: #59618e !important;
}

/*
 * Destaque do elemento ensinado.
 * O contorno fica forte e visível sem alterar o layout.
 */
.fin-app .onboarding-destaque{
    position: relative !important;
    z-index: 2147482999 !important;

    outline: 2px solid #00e5ff !important;
    outline-offset: 4px !important;

    border-radius: 7px !important;

    box-shadow:
        0 0 0 4px rgba(0,229,255,.08),
        0 0 24px rgba(0,229,255,.18) !important;

    pointer-events: none !important;
}

@media (max-width: 620px) {

    .fin-app .onboarding-caixa{
        top: 8px !important;

        width: calc(100vw - 14px) !important;
        max-width: calc(100vw - 14px) !important;
        max-height: calc(100vh - 16px) !important;

        padding: 13px !important;

        border-radius: 11px !important;
    }

    .fin-app .onboarding-caixa h3{
        font-size: 15px !important;
    }

    .fin-app .onboarding-caixa p{
        font-size: 10px !important;
    }

    .fin-app .onboarding-acoes{
        gap: 7px !important;
    }

    .fin-app .onboarding-botao{
        min-height: 40px !important;
        font-size: 10px !important;
    }

    .fin-app .onboarding-pular{
        min-height: 36px !important;
    }
}


/* =========================================================
   FINCONTROLE - V6.9 - BOTÃO ENCERRAR TOUR
========================================================= */

.fin-app .onboarding-pular{
    background:
        rgba(255, 75, 92, .10) !important;

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

    color:
        #ff6673 !important;

    box-shadow:
        inset 0 0 0 1px rgba(255,75,92,.04) !important;
}

.fin-app .onboarding-pular:hover,.fin-app .onboarding-pular:focus-visible{
    background:
        rgba(255, 75, 92, .18) !important;

    border-color:
        #ff5b68 !important;

    color:
        #ffffff !important;

    box-shadow:
        0 0 0 3px rgba(255,75,92,.10),
        0 0 18px rgba(255,75,92,.12) !important;

    outline: none !important;
}

@media (max-width: 620px) {
    .fin-app .onboarding-pular{
        min-height: 40px !important;
        font-size: 10px !important;
        font-weight: 900 !important;
    }
}


/* ===== BLOG ===== */

.pagina-blog *{box-sizing:border-box}html{scroll-behavior:smooth}body.pagina-blog{margin:0;background:radial-gradient(circle at 50% 0,#09234b 0,#070b19 34%,#070b19 100%);color:var(--text);font-family:Arial,sans-serif}.pagina-blog .bc{width:min(1480px,calc(100% - 42px));margin:auto}
.pagina-blog .bt{position:sticky;top:0;z-index:30;background:rgba(4,10,22,.94);border-bottom:1px solid var(--border);backdrop-filter:blur(14px)}.pagina-blog .bti{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px}.pagina-blog .brand{display:flex;align-items:center;width:287px;height:63px}.pagina-blog .brand img{display:block;width:287px;height:63px;object-fit:contain;object-position:left center}.pagina-blog .bn{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.pagina-blog .bn a{padding:11px 14px;color:#e8f0ff;text-decoration:none;font-size:13px;font-weight:700;border-bottom:2px solid transparent}.pagina-blog .bn a:hover,.pagina-blog .bn .ativo{color:var(--primary);border-color:var(--primary)}.pagina-blog .bn .navcta{background:var(--primary);color:#03121a;border:0;border-radius:8px;padding:13px 18px}
.pagina-blog .hero-blog{padding:22px 0 12px}.pagina-blog .hero-grid{min-height:310px;display:grid;grid-template-columns:.82fr 1.18fr;align-items:center;border:1px solid var(--border);border-radius:16px;overflow:hidden;background:linear-gradient(120deg,#07101f,#08224b)}.pagina-blog .hero-grid>div:first-child{padding:40px 50px}.pagina-blog .hero-grid span,.pagina-blog .artigos-topo small,.pagina-blog .tag-art{color:var(--primary);font-size:11px;font-weight:900;letter-spacing:.6px}.pagina-blog .hero-grid h1{font-size:clamp(38px,4vw,62px);line-height:1.04;margin:12px 0 18px;max-width:650px}.pagina-blog .hero-grid p{font-size:16px;line-height:1.7;color:var(--light);max-width:640px}.pagina-blog .hero-img{height:310px}.pagina-blog .hero-img img{width:100%;height:100%;object-fit:cover;object-position:center}
.pagina-blog .artigos-topo{padding:28px 0 10px}.pagina-blog .artigos-topo h2{font-size:28px;margin:5px 0}.pagina-blog .artigos-topo p{margin:0;color:var(--light)}
.pagina-blog .bg{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;padding:12px 0 35px}.pagina-blog .card{overflow:hidden;border:1px solid var(--border);border-radius:13px;background:linear-gradient(180deg,#0b1930,#091426);transition:.2s}.pagina-blog .card:hover{transform:translateY(-3px);border-color:#00b8df;box-shadow:0 14px 35px rgba(0,229,255,.08)}.pagina-blog .card-img{display:block;height:155px;overflow:hidden;background:#07111f}.pagina-blog .card-img img{width:100%;height:100%;object-fit:cover;transition:.25s}.pagina-blog .card:hover .card-img img{transform:scale(1.035)}.pagina-blog .card-body{padding:15px}.pagina-blog .card-body small{display:inline-block;color:var(--primary);font-size:9px;font-weight:900}.pagina-blog .card-body h2{margin:9px 0;font-size:17px;line-height:1.3}.pagina-blog .card-body h2 a{color:white;text-decoration:none}.pagina-blog .card-body p{min-height:70px;margin:0;color:var(--light);font-size:11px;line-height:1.55}.pagina-blog .card-footer{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-top:15px;color:#8da5c4;font-size:10px}.pagina-blog .card-footer a{color:var(--primary);font-weight:900;text-decoration:none}
.pagina-blog .cta-final{margin:0 auto 45px;padding:25px 32px;border:1px solid var(--border);border-radius:14px;background:linear-gradient(100deg,#0a1930,#08294a);display:flex;align-items:center;justify-content:space-between;gap:20px}.pagina-blog .cta-final h2{margin:0 0 5px}.pagina-blog .cta-final p{margin:0;color:var(--light)}.pagina-blog .cta-final>a{white-space:nowrap;padding:14px 22px;border-radius:8px;background:var(--primary);color:#03121a;text-decoration:none;font-weight:900}
.pagina-blog .art{width:min(900px,calc(100% - 32px));margin:auto;padding:50px 0 80px}.pagina-blog .voltar{color:var(--primary);font-size:11px;font-weight:900;text-decoration:none}.pagina-blog .cab{padding:22px 0 28px;border-bottom:1px solid var(--border)}.pagina-blog .cab h1{margin:12px 0;font-size:clamp(36px,5vw,56px);line-height:1.08}.pagina-blog .desc{color:var(--light);font-size:17px;line-height:1.65}.pagina-blog .meta{margin-top:13px;color:#8ea6c6;font-size:11px}.pagina-blog .art-img{margin:28px 0 8px;border:1px solid var(--border);border-radius:15px;overflow:hidden;background:#081427}.pagina-blog .art-img img{display:block;width:100%;max-height:460px;object-fit:cover}.pagina-blog .conteudo{padding-top:20px;color:#e8efff;font-size:16px;line-height:1.85}.pagina-blog .conteudo h2{margin:34px 0 10px;color:#fff;font-size:25px;line-height:1.25}.pagina-blog .conteudo p{margin:0 0 18px}.pagina-blog .cta{margin-top:42px;padding:25px;border:1px solid rgba(0,229,255,.35);border-radius:14px;background:linear-gradient(120deg,#0d1930,#0b2740)}.pagina-blog .cta h2{margin:0 0 8px}.pagina-blog .cta p{color:var(--light)}.pagina-blog .cta a{display:inline-flex;margin-top:6px;padding:11px 15px;border-radius:8px;background:var(--primary);color:#03121a;text-decoration:none;font-size:11px;font-weight:900}.pagina-blog .vazio{margin:30px 0 70px;padding:22px;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--light)}
@media(max-width:1250px){.pagina-blog .bg{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:900px){.pagina-blog .hero-grid{grid-template-columns:1fr}.pagina-blog .hero-img{height:250px}.pagina-blog .bg{grid-template-columns:repeat(2,minmax(0,1fr))}.pagina-blog .brand{width:230px}}@media(max-width:620px){.pagina-blog .bc{width:min(100% - 24px,1480px)}.pagina-blog .bti{align-items:flex-start;flex-direction:column;padding:10px 0}.pagina-blog .bn{width:100%}.pagina-blog .bn a{padding:8px}.pagina-blog .hero-grid>div:first-child{padding:28px 22px}.pagina-blog .hero-grid h1{font-size:38px}.pagina-blog .bg{grid-template-columns:1fr}.pagina-blog .card-img{height:210px}.pagina-blog .cta-final{align-items:flex-start;flex-direction:column}.pagina-blog .cta-final>a{width:100%;text-align:center}}
/* V3 - qualidade de imagens e identidade visual */
.pagina-blog .card-img img,.pagina-blog .art-img img{image-rendering:auto}
.pagina-blog .art-img img{width:100%;height:auto;max-height:none;aspect-ratio:16/9;object-fit:cover}
.pagina-blog .logo-fincontrole-reutilizavel{display:block;max-width:287px;height:auto;object-fit:contain}
.pagina-blog .marca-fincontrole-reutilizavel{display:block;width:48px;height:48px;object-fit:contain}


/* =========================================================
   TOPO UNIFICADO V9 - BLOG + INDEX
========================================================= */

.pagina-blog .bt{
    border-top:
        2px solid
        rgba(0,229,255,.62) !important;
}

.pagina-blog .bti{
    position:relative !important;
    min-height:82px !important;
    gap:24px !important;
}

.pagina-blog .brand{
    width:250px !important;
    height:58px !important;
    flex:0 0 250px !important;
}

.pagina-blog .brand img{
    width:250px !important;
    height:58px !important;
    object-fit:contain !important;
}

.pagina-blog .bn{
    margin-left:auto !important;
    gap:8px !important;
    flex-wrap:nowrap !important;
}

.pagina-blog .bn a{
    min-height:44px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 15px !important;
    border:1px solid transparent !important;
    border-radius:9px !important;
    color:#e8f0ff !important;
    font-size:13px !important;
    font-weight:800 !important;
    white-space:nowrap !important;
}

.pagina-blog .bn a:hover,.pagina-blog .bn .ativo{
    color:var(--primary) !important;
    background:rgba(0,229,255,.055) !important;
    border-color:rgba(0,229,255,.18) !important;
}

.pagina-blog .bn .navcta{
    min-height:46px !important;
    padding:0 19px !important;
    margin-left:3px !important;
    background:var(--primary) !important;
    border:1px solid var(--primary) !important;
    border-radius:9px !important;
    color:#03121a !important;
    font-size:13px !important;
    font-weight:900 !important;
}

/*
 * Botão mobile: propositalmente claro/ciano
 * para não sumir no fundo escuro.
 */
.pagina-blog .menu-toggle{
    display:none;

    width:52px;
    height:52px;
    flex:0 0 52px;

    padding:0;

    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;

    background:var(--primary);

    border:
        2px solid
        #7bf3ff;

    border-radius:11px;

    box-shadow:
        0 0 22px
        rgba(0,229,255,.26);

    cursor:pointer;
}

.pagina-blog .menu-toggle span{
    width:24px;
    height:3px;

    display:block;

    border-radius:999px;

    background:#03121a;

    transition:.2s ease;
}


@media(max-width:820px){

    .pagina-blog .bti{
        min-height:78px !important;
        padding:7px 0 !important;

        flex-direction:row !important;
        align-items:center !important;
    }

    .pagina-blog .brand{
        width:225px !important;
        height:54px !important;
        flex-basis:225px !important;
    }

    .pagina-blog .brand img{
        width:225px !important;
        height:54px !important;
    }

    .pagina-blog .menu-toggle{
        display:flex !important;
        margin-left:auto;
    }

    .pagina-blog .bn{
        display:none !important;

        position:absolute;

        top:calc(100% + 8px);
        left:0;
        right:0;

        width:100% !important;

        padding:12px;
        margin:0 !important;

        flex-direction:column !important;
        align-items:stretch !important;

        gap:6px !important;

        background:#071326;

        border:
            1px solid
            rgba(0,229,255,.48);

        border-radius:14px;

        box-shadow:
            0 22px 60px
            rgba(0,0,0,.52);
    }

    body.pagina-blog.menu-aberto .bn{
        display:flex !important;
    }

    .pagina-blog .bn a{
        width:100% !important;
        min-height:52px !important;

        justify-content:flex-start !important;

        padding:0 16px !important;

        background:#0b1a30 !important;

        border:
            1px solid
            #17385a !important;

        border-radius:9px !important;

        color:#fff !important;

        font-size:15px !important;
    }

    .pagina-blog .bn a:hover,.pagina-blog .bn .ativo{
        color:var(--primary) !important;
        background:#10243d !important;
        border-color:rgba(0,229,255,.45) !important;
    }

    .pagina-blog .bn .navcta{
        min-height:54px !important;

        justify-content:center !important;

        margin-top:3px !important;
        margin-left:0 !important;

        background:var(--primary) !important;

        border-color:var(--primary) !important;

        color:#03121a !important;

        font-size:15px !important;
    }

    body.pagina-blog.menu-aberto
    .menu-toggle
    span:nth-child(1){
        transform:
            translateY(8px)
            rotate(45deg);
    }

    body.pagina-blog.menu-aberto
    .menu-toggle
    span:nth-child(2){
        opacity:0;
    }

    body.pagina-blog.menu-aberto
    .menu-toggle
    span:nth-child(3){
        transform:
            translateY(-8px)
            rotate(-45deg);
    }
}


@media(max-width:480px){

    .pagina-blog .bti{
        min-height:74px !important;
    }

    .pagina-blog .brand{
        width:195px !important;
        height:50px !important;
        flex-basis:195px !important;
    }

    .pagina-blog .brand img{
        width:195px !important;
        height:50px !important;
    }

    .pagina-blog .menu-toggle{
        width:50px !important;
        height:50px !important;
        flex-basis:50px !important;
    }
}


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


.pagina-admin *{box-sizing:border-box}body.pagina-admin{margin:0;background:var(--bg);color:var(--text);font-family:Arial,sans-serif}.pagina-admin .admin-layout{min-height:100vh;display:grid;grid-template-columns:260px minmax(0,1fr)}.pagina-admin .admin-sidebar{position:sticky;top:0;height:100vh;padding:18px 14px;border-right:1px solid var(--border);background:#121428;overflow:auto}.pagina-admin .admin-logo{display:block;padding:12px 10px 20px;color:var(--primary);font-size:22px;font-weight:900;text-decoration:none}.pagina-admin .admin-logo small{display:block;margin-top:4px;color:var(--light);font-size:9px}.pagina-admin .admin-menu{display:grid;gap:7px}.pagina-admin .admin-menu a{min-height:44px;display:flex;align-items:center;gap:9px;padding:0 12px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--light);font-size:12px;font-weight:800;text-decoration:none}.pagina-admin .admin-menu a:hover,.pagina-admin .admin-menu a.ativo{border-color:var(--primary);background:var(--hover);color:var(--primary)}.pagina-admin .admin-conteudo{min-width:0;padding:24px}.pagina-admin .admin-topo{display:flex;justify-content:space-between;gap:16px;margin-bottom:20px}.pagina-admin .admin-topo h1{margin:0;font-size:24px}.pagina-admin .admin-topo p{margin:6px 0 0;color:var(--light);font-size:11px}.pagina-admin .admin-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}.pagina-admin .admin-card,.pagina-admin .admin-painel{min-width:0;padding:16px;border:1px solid var(--border);border-radius:11px;background:var(--card)}.pagina-admin .admin-card small{display:block;color:var(--light);font-size:9px;font-weight:800;text-transform:uppercase}.pagina-admin .admin-card strong{display:block;margin-top:8px;color:var(--primary);font-size:25px;font-weight:900}.pagina-admin .verde{color:var(--ok)!important}.pagina-admin .amarelo{color:var(--warn)!important}.pagina-admin .vermelho{color:var(--danger)!important}.pagina-admin .admin-grid-2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:14px}.pagina-admin .admin-painel-topo{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:13px}.pagina-admin .admin-painel-topo h2{margin:0;font-size:14px}.pagina-admin .admin-painel-topo span,.pagina-admin .admin-muted{color:var(--light);font-size:9px}.pagina-admin .admin-tabela-wrap{width:100%;overflow:auto}.pagina-admin .admin-tabela{width:100%;border-collapse:collapse;min-width:720px}.pagina-admin .admin-tabela th,.pagina-admin .admin-tabela td{padding:10px 9px;border-bottom:1px solid var(--border);text-align:left;font-size:10px;vertical-align:middle}.pagina-admin .admin-tabela th{color:var(--light);font-size:8px;text-transform:uppercase}.pagina-admin .admin-status{display:inline-flex;align-items:center;min-height:24px;padding:0 7px;border-radius:999px;border:1px solid var(--border);color:var(--light);font-size:8px;font-weight:900}.pagina-admin .admin-status.online,.pagina-admin .admin-status.ativa{border-color:rgba(0,255,179,.42);color:var(--ok);background:rgba(0,255,179,.06)}.pagina-admin .admin-status.teste,.pagina-admin .admin-status.pendente{border-color:rgba(255,200,87,.42);color:var(--warn);background:rgba(255,200,87,.06)}.pagina-admin .admin-status.cancelada,.pagina-admin .admin-status.vencida,.pagina-admin .admin-status.bloqueado{border-color:rgba(255,91,104,.42);color:var(--danger);background:rgba(255,91,104,.06)}.pagina-admin .admin-botao{min-height:36px;display:inline-flex;align-items:center;justify-content:center;padding:0 11px;border:1px solid var(--primary);border-radius:8px;background:rgba(0,229,255,.06);color:var(--primary);font-size:9px;font-weight:900;text-decoration:none;cursor:pointer}.pagina-admin .admin-botao.secundario{border-color:var(--border);background:transparent;color:var(--light)}.pagina-admin .admin-lista-online{display:grid;gap:8px}.pagina-admin .admin-online-item{display:grid;grid-template-columns:9px minmax(0,1fr);gap:9px;align-items:center;padding:10px;border:1px solid var(--border);border-radius:8px;background:var(--card2)}.pagina-admin .admin-online-bolinha{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 12px rgba(0,255,179,.35)}.pagina-admin .admin-online-item strong,.pagina-admin .admin-online-item small{display:block}.pagina-admin .admin-online-item strong{font-size:10px}.pagina-admin .admin-online-item small{margin-top:3px;color:var(--light);font-size:8px}.pagina-admin .admin-filtros{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:13px}.pagina-admin .admin-filtros input,.pagina-admin .admin-filtros select,.pagina-admin .admin-campo input,.pagina-admin .admin-campo select{min-height:40px;padding:0 10px;border:1px solid var(--border);border-radius:8px;background:var(--card2);color:var(--text)}.pagina-admin .admin-form{display:grid;gap:12px}.pagina-admin .admin-form-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pagina-admin .admin-campo label{display:block;margin-bottom:5px;color:var(--light);font-size:9px;font-weight:800}.pagina-admin .admin-campo input,.pagina-admin .admin-campo select{width:100%}.pagina-admin .admin-aviso{margin-bottom:14px;padding:11px;border:1px solid rgba(0,229,255,.28);border-radius:8px;background:rgba(0,229,255,.04);color:var(--light);font-size:10px}.pagina-admin .admin-aviso.erro{border-color:rgba(255,91,104,.35);color:#ff9ca5;background:rgba(255,91,104,.05)}
@media(max-width:1100px){.pagina-admin .admin-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.pagina-admin .admin-grid-2{grid-template-columns:1fr}}@media(max-width:760px){.pagina-admin .admin-layout{grid-template-columns:1fr}.pagina-admin .admin-sidebar{position:static;height:auto}.pagina-admin .admin-menu{grid-template-columns:repeat(2,minmax(0,1fr))}.pagina-admin .admin-conteudo{padding:14px}.pagina-admin .admin-topo{flex-direction:column}.pagina-admin .admin-form-grade{grid-template-columns:1fr}}@media(max-width:480px){.pagina-admin .admin-cards,.pagina-admin .admin-menu{grid-template-columns:1fr}}

.pagina-admin .admin-grid-imagens{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.pagina-admin .admin-imagens-grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pagina-admin .admin-imagem-item{min-width:0;padding:10px;border:1px solid var(--border);border-radius:9px;background:var(--card2)}
.pagina-admin .admin-imagem-preview{height:84px;display:flex;align-items:center;justify-content:center;margin-bottom:8px;padding:8px;border:1px solid rgba(255,255,255,.04);border-radius:7px;background:#0d1020}
.pagina-admin .admin-imagem-preview img{display:block;max-width:100%;max-height:64px;width:auto;height:auto;object-fit:contain}
.pagina-admin .admin-imagem-dados{min-width:0;margin-bottom:8px}
.pagina-admin .admin-imagem-dados strong,.pagina-admin .admin-imagem-dados small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pagina-admin .admin-imagem-dados strong{font-size:10px}
.pagina-admin .admin-imagem-dados small{margin-top:4px;color:var(--light);font-size:8px}
.pagina-admin .admin-contador-imagens{min-width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:999px;color:var(--primary);font-size:10px}
.pagina-admin .admin-check{display:flex;align-items:flex-start;gap:8px;color:var(--light);font-size:9px;line-height:1.45}
.pagina-admin .admin-check input{margin-top:1px}
.pagina-admin .admin-botao-perigo{border-color:rgba(255,91,104,.55);background:rgba(255,91,104,.06);color:var(--danger)}
.pagina-admin .admin-botao-perigo:hover{background:rgba(255,91,104,.12);border-color:var(--danger)}
.pagina-admin .admin-botao-perigo:disabled{opacity:.35;cursor:not-allowed}
@media(max-width:1000px){.pagina-admin .admin-grid-imagens{grid-template-columns:1fr}}
@media(max-width:560px){.pagina-admin .admin-imagens-grade{grid-template-columns:1fr}}

.pagina-admin .admin-campo textarea{width:100%;min-height:105px;padding:10px;border:1px solid var(--border);border-radius:8px;background:var(--card2);color:var(--text);font-family:Arial,sans-serif;line-height:1.5;resize:vertical}
.pagina-admin .admin-editor-conteudo{min-height:430px!important;font-family:Consolas,monospace!important;font-size:12px!important}
.pagina-admin .admin-ajuda{display:block;margin-top:5px;color:var(--light);font-size:8px;line-height:1.45}
.pagina-admin .admin-acoes-linha,.pagina-admin .admin-acoes-rodape{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.pagina-admin .admin-acoes-rodape{padding:4px 0 24px}


/* ===== CAIXA ===== */



.pagina-caixa-app *{
    box-sizing: border-box;
}

body.pagina-caixa-app{
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Arial, sans-serif;
}

.pagina-caixa-app a{
    color: inherit;
}

.pagina-caixa-app .topo-caixa{
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px 18px;
    background: #121428;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.pagina-caixa-app .topo-caixa-marca{
    color: var(--primary);
    font-size: 22px;
    font-weight: 900;
}

.pagina-caixa-app .topo-caixa-nav{
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.pagina-caixa-app .topo-caixa-nav a{
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.pagina-caixa-app .topo-caixa-nav a:hover{
    border-color: var(--primary);
    color: var(--primary);
}

.pagina-caixa-app .topo-caixa-usuario{
    margin-left: auto;
    color: var(--muted);
    font-size: 12px;
}

.pagina-caixa-app .pagina-caixa{
    width: min(1240px, calc(100% - 28px));
    margin: 24px auto;
}

.pagina-caixa-app .pagina-caixa h1{
    margin: 0 0 6px;
}

.pagina-caixa-app .descricao-pagina{
    margin: 0 0 20px;
    color: var(--muted);
}

.pagina-caixa-app .card-caixa{
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px;
}

.pagina-caixa-app .grid-2{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.pagina-caixa-app .grid-3{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.pagina-caixa-app .campo{
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pagina-caixa-app .campo label{
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.pagina-caixa-app .campo input,.pagina-caixa-app .campo select{
    min-height: 46px;
    padding: 0 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
}

.pagina-caixa-app .botao{
    min-height: 44px;
    padding: 0 16px;
    border-radius: 8px;
    border: 1px solid var(--primary);
    background: rgba(0,229,255,.07);
    color: var(--primary);
    font-weight: 800;
    cursor: pointer;
}

.pagina-caixa-app .botao-danger{
    border-color: var(--danger);
    color: var(--danger);
    background: rgba(255,91,103,.06);
}

.pagina-caixa-app .botao-success{
    border-color: var(--success);
    color: var(--success);
    background: rgba(0,255,179,.06);
}

.pagina-caixa-app .botao-warning{
    border-color: var(--warning);
    color: var(--warning);
    background: rgba(255,200,87,.06);
}

.pagina-caixa-app .mensagem{
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.pagina-caixa-app .mensagem.ok{
    border-color: rgba(0,255,179,.45);
    color: var(--success);
}

.pagina-caixa-app .mensagem.erro{
    border-color: rgba(255,91,103,.45);
    color: var(--danger);
}

.pagina-caixa-app .tabela{
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}

.pagina-caixa-app .tabela th,.pagina-caixa-app .tabela td{
    padding: 11px 9px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 12px;
}

.pagina-caixa-app .tabela th{
    color: var(--muted);
}

.pagina-caixa-app .login-caixa{
    width: min(430px, calc(100% - 28px));
    margin: 90px auto;
}

.pagina-caixa-app .login-caixa .card-caixa{
    padding: 24px;
}

.pagina-caixa-app .venda-layout{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 14px;
    min-height: calc(100vh - 120px);
}

.pagina-caixa-app .venda-produtos{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(120px, auto);
    gap: 12px;
}

.pagina-caixa-app .botao-produto{
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card2);
    color: var(--text);
    cursor: pointer;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    text-align: left;
}

.pagina-caixa-app .botao-produto strong{
    font-size: 18px;
}

.pagina-caixa-app .botao-produto span{
    color: var(--success);
    font-size: 22px;
    font-weight: 900;
}

.pagina-caixa-app .botao-produto:hover{
    border-color: var(--primary);
}

.pagina-caixa-app .venda-resumo{
    position: sticky;
    top: 80px;
    height: fit-content;
}

.pagina-caixa-app .venda-itens{
    min-height: 220px;
    max-height: 340px;
    overflow-y: auto;
    margin-bottom: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.pagina-caixa-app .item-venda{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}

.pagina-caixa-app .item-venda small{
    display: block;
    color: var(--muted);
    margin-top: 3px;
}

.pagina-caixa-app .total-venda{
    margin-top: 12px;
    padding: 18px;
    border-radius: 12px;
    background: #0c1220;
    border: 1px solid var(--primary);
    text-align: center;
}

.pagina-caixa-app .total-venda small{
    display: block;
    color: var(--muted);
    margin-bottom: 6px;
}

.pagina-caixa-app .total-venda strong{
    display: block;
    color: var(--success);
    font-size: 36px;
}

.pagina-caixa-app .pagamentos-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.pagina-caixa-app .botao-pagamento{
    min-height: 58px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card2);
    color: var(--text);
    font-weight: 800;
    cursor: pointer;
}

.pagina-caixa-app .botao-pagamento.ativo{
    border-color: var(--primary);
    color: var(--primary);
}

.pagina-caixa-app .acoes-venda{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.pagina-caixa-app .acoes-venda .botao{
    min-height: 58px;
}

.pagina-caixa-app .troco-box{
    margin-top: 10px;
    display: none;
}

.pagina-caixa-app .troco-box.ativo{
    display: block;
}

.pagina-caixa-app .troco-resultado{
    margin-top: 8px;
    color: var(--warning);
    font-weight: 800;
}

.pagina-caixa-app .layout-editor{
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 14px;
}

.pagina-caixa-app .layout-preview{
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
}

.pagina-caixa-app .layout-slot{
    min-height: 120px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    padding: 12px;
    background: var(--card2);
}

.pagina-caixa-app .caixa-status{
    font-size: 28px;
    font-weight: 900;
}

.pagina-caixa-app .caixa-status.aberto{
    color: var(--success);
}

.pagina-caixa-app .caixa-status.fechado{
    color: var(--danger);
}

@media (max-width: 900px) {
    .pagina-caixa-app .topo-caixa{
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .pagina-caixa-app .topo-caixa-usuario{
        width: 100%;
        margin-left: 0;
    }

    .pagina-caixa-app .venda-layout{
        grid-template-columns: 1fr;
    }

    .pagina-caixa-app .venda-resumo{
        position: static;
    }

    .pagina-caixa-app .layout-editor{
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .pagina-caixa-app .pagina-caixa{
        width: min(100% - 14px, 1240px);
        margin: 10px auto 90px;
    }

    .pagina-caixa-app .topo-caixa{
        padding: 8px;
    }

    .pagina-caixa-app .topo-caixa-nav{
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .pagina-caixa-app .topo-caixa-nav a{
        min-height: 46px;
        justify-content: center;
        font-size: 13px;
    }

    .pagina-caixa-app .grid-2,.pagina-caixa-app .grid-3{
        grid-template-columns: 1fr;
    }

    .pagina-caixa-app .venda-produtos{
        grid-template-columns: repeat(2, minmax(0,1fr));
        grid-auto-rows: minmax(125px, auto);
    }

    .pagina-caixa-app .botao-produto{
        min-height: 125px;
        padding: 14px;
    }

    .pagina-caixa-app .botao-produto strong{
        font-size: 17px;
    }

    .pagina-caixa-app .botao-produto span{
        font-size: 23px;
    }

    .pagina-caixa-app .pagamentos-grid{
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .pagina-caixa-app .botao-pagamento{
        min-height: 68px;
        font-size: 16px;
    }

    .pagina-caixa-app .acoes-venda{
        grid-template-columns: 1fr;
    }

    .pagina-caixa-app .acoes-venda .botao{
        min-height: 64px;
        font-size: 16px;
    }

    .pagina-caixa-app .total-venda{
        position: sticky;
        bottom: 0;
        z-index: 20;
    }

    .pagina-caixa-app .total-venda strong{
        font-size: 42px;
    }

    .pagina-caixa-app .layout-preview{
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}


/* =========================================================
   MENU COMPACTO DA TELA DE VENDA
========================================================= */

.pagina-caixa-app .topo-caixa-barra{
    display: flex;
    align-items: center;
    gap: 12px;

    min-width: 0;
}

.pagina-caixa-app .topo-caixa-venda{
    min-height: 52px;

    display: block;

    padding: 7px 12px;

    background:
        rgba(18,20,40,.98);

    backdrop-filter:
        blur(8px);
}

.pagina-caixa-app .topo-caixa-venda .topo-caixa-barra{
    width: 100%;
}

.pagina-caixa-app .topo-caixa-usuario-venda{
    margin-left: auto;

    max-width: 210px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pagina-caixa-app .botao-menu-caixa{
    min-height: 38px;

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

    padding: 0 12px;

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

    border-radius: 8px;

    background:
        var(--card);

    color:
        var(--primary);

    font-family: inherit;
    font-size: 15px;
    font-weight: 900;

    cursor: pointer;
}

.pagina-caixa-app .botao-menu-caixa span{
    font-size: 11px;
}

.pagina-caixa-app .topo-caixa-nav-venda{
    display: none;

    width: 100%;

    margin-top: 7px;
    padding-top: 7px;

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

.pagina-caixa-app .topo-caixa-nav-venda.aberto{
    display: grid;

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

    gap: 7px;
}

.pagina-caixa-app .topo-caixa-nav-venda a{
    min-height: 42px;

    justify-content: center;

    background:
        var(--card);
}

.pagina-caixa-app .pagina-caixa-venda{
    margin-top: 12px;
}


/* =========================================================
   MOBILE - VENDA MAIS PARECIDA COM PDV
========================================================= */

@media(max-width:620px) {

    .pagina-caixa-app .topo-caixa-venda{
        min-height: 48px;

        padding: 6px 8px;
    }

    .pagina-caixa-app .topo-caixa-venda .topo-caixa-marca{
        font-size: 18px;
    }

    .pagina-caixa-app .topo-caixa-usuario-venda{
        max-width: 120px;

        font-size: 11px;
    }

    .pagina-caixa-app .botao-menu-caixa{
        min-height: 38px;

        padding: 0 10px;
    }

    .pagina-caixa-app .botao-menu-caixa span{
        display: none;
    }

    .pagina-caixa-app .topo-caixa-nav-venda.aberto{
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

    .pagina-caixa-app .topo-caixa-nav-venda a{
        min-height: 48px;

        font-size: 13px;
    }

    .pagina-caixa-app .pagina-caixa-venda{
        width:
            calc(100% - 8px);

        margin:
            6px auto 90px;
    }

    .pagina-caixa-app .pagina-caixa-venda > h1{
        margin-bottom: 8px;

        font-size: 21px;
    }

    .pagina-caixa-app .pagina-caixa-venda .card-caixa{
        padding: 10px;
    }

    .pagina-caixa-app .pagina-caixa-venda .venda-produtos{
        gap: 8px;
    }
}


/* =========================================================
   V1.5 - REMOVER ITEM / CANCELAR VENDA COM SEGURANÇA
========================================================= */

.pagina-caixa-app .item-venda{
    padding: 0;
}

.pagina-caixa-app .item-venda-remover{
    width: 100%;
    min-height: 58px;

    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;

    padding: 10px 12px;

    border: 0;
    background: transparent;

    color: var(--text);
    text-align: left;

    font-family: inherit;

    cursor: pointer;
}

.pagina-caixa-app .item-venda-remover:hover{
    background:
        rgba(255,91,103,.06);
}

.pagina-caixa-app .item-venda-direita{
    text-align: right;
}

.pagina-caixa-app .item-venda-direita strong{
    display: block;
}

.pagina-caixa-app .item-venda-direita span{
    display: block;

    margin-top: 4px;

    color: var(--danger);

    font-size: 8px;
    font-weight: 900;
}

.pagina-caixa-app .modal-cancelar-venda{
    position: fixed;
    inset: 0;

    z-index: 99999;

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

    padding: 16px;

    background:
        rgba(5,7,15,.80);

    backdrop-filter:
        blur(4px);
}

.pagina-caixa-app .modal-cancelar-venda.aberto{
    display: flex;
}

.pagina-caixa-app .modal-cancelar-venda-card{
    width:
        min(
            460px,
            100%
        );

    padding: 22px;

    background:
        var(--card);

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

    border-radius: 13px;

    box-shadow:
        0 20px 55px
        rgba(0,0,0,.50);
}

.pagina-caixa-app .modal-cancelar-venda-card h3{
    margin:
        0 0 8px;

    color:
        var(--danger);

    font-size: 20px;
}

.pagina-caixa-app .modal-cancelar-venda-card p{
    margin:
        0 0 16px;

    color:
        var(--muted);

    line-height: 1.5;

    font-size: 13px;
}

.pagina-caixa-app .modal-cancelar-venda-card p strong{
    color:
        var(--text);
}

.pagina-caixa-app .modal-cancelar-venda-acoes{
    display: grid;
    grid-template-columns:
        1fr 1fr;

    gap: 9px;

    margin-top: 14px;
}

@media(max-width:620px) {

    .pagina-caixa-app .item-venda-remover{
        min-height: 66px;
    }

    .pagina-caixa-app .item-venda-direita span{
        font-size: 9px;
    }

    .pagina-caixa-app .modal-cancelar-venda-card{
        padding: 18px;
    }

    .pagina-caixa-app .modal-cancelar-venda-card h3{
        font-size: 22px;
    }

    .pagina-caixa-app .modal-cancelar-venda-card p{
        font-size: 14px;
    }

    .pagina-caixa-app .modal-cancelar-venda-card input{
        min-height: 54px;
        font-size: 16px;
    }

    .pagina-caixa-app .modal-cancelar-venda-acoes{
        grid-template-columns:
            1fr;
    }

    .pagina-caixa-app .modal-cancelar-venda-acoes .botao{
        min-height: 56px;
        font-size: 14px;
    }
}


/* =========================================================
   V1.8 - MENU DA VENDA REALMENTE RECOLHIDO
========================================================= */

.pagina-caixa-app .topo-caixa-venda .topo-caixa-nav-venda[hidden]{
    display: none !important;
}

.pagina-caixa-app .topo-caixa-venda .topo-caixa-nav-venda:not([hidden]){
    display: grid !important;
    grid-template-columns:
        repeat(4, minmax(0,1fr));
    gap: 7px;
}

@media(max-width:620px) {

    .pagina-caixa-app .topo-caixa-venda .topo-caixa-nav-venda[hidden]{
        display: none !important;
    }

    .pagina-caixa-app .topo-caixa-venda .topo-caixa-nav-venda:not([hidden]){
        display: grid !important;
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }
}



/* =========================================================
   CAMADA DE PADRONIZAÇÃO VISUAL
   Mantém layouts existentes, mas aproxima todas as áreas
   da identidade do Blog.
========================================================= */

/* Painéis e cards da área principal */
.fin-app .card,
.fin-app .card-dashboard,
.fin-app .painel-dashboard,
.fin-app .cartao-formulario,
.fin-app .cadastro-formulario,
.fin-app .lista-categorias {
    border-color: var(--fc-border);
    box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

/* Menus da área logada: mesma leitura do topo do Blog */
.fin-app .sidebar-fincontrole {
    background:
        linear-gradient(180deg, rgba(8,18,37,.985), rgba(5,12,26,.985));
    border-right-color: var(--fc-border);
}

.fin-app .menu-fincontrole a {
    background: linear-gradient(180deg, rgba(16,28,51,.92), rgba(12,22,41,.94));
    border-color: var(--fc-border);
}

.fin-app .menu-fincontrole a:hover,
.fin-app .menu-fincontrole a.menu-item-ativo {
    background: rgba(0,229,255,.055);
    border-color: rgba(0,229,255,.55);
    box-shadow: inset 3px 0 0 var(--fc-primary);
}

/* Inputs padronizados */
.fin-app input,
.fin-app select,
.fin-app textarea,
.pagina-admin input,
.pagina-admin select,
.pagina-admin textarea,
.pagina-caixa-app input,
.pagina-caixa-app select,
.pagina-caixa-app textarea {
    border-color: var(--fc-border);
}

/* Blog: mantém exatamente a linguagem visual escolhida */
.pagina-blog .card,
.pagina-blog .hero-grid,
.pagina-blog .cta-final,
.pagina-blog .art-img,
.pagina-blog .cta {
    box-shadow: var(--fc-shadow-cyan);
}

/* Admin */
.pagina-admin .admin-sidebar {
    background: linear-gradient(180deg, rgba(8,18,37,.99), rgba(5,12,26,.99));
    border-right-color: var(--fc-border);
}

.pagina-admin .admin-card,
.pagina-admin .admin-painel,
.pagina-admin .admin-online-item {
    background: linear-gradient(180deg, var(--fc-card-2), var(--fc-card));
    border-color: var(--fc-border);
}

/* Caixa */
.pagina-caixa-app .topo-caixa {
    background: rgba(4,10,22,.96);
    border-bottom-color: var(--fc-border);
    backdrop-filter: blur(14px);
}

.pagina-caixa-app .card-caixa,
.pagina-caixa-app .botao-produto {
    background: linear-gradient(180deg, var(--fc-card-2), var(--fc-card));
    border-color: var(--fc-border);
}


/* =========================================================
   FINCONTROLE — REFINAMENTO VISUAL V2
   Padronização progressiva sem alteração de lógica.
========================================================= */

/* ---------- superfícies ---------- */
.fin-app .card-dashboard,
.fin-app .painel-dashboard,
.fin-app .card,
.fin-app .box,
.fin-app .cartao-item,
.fin-app .conta-item,
.pagina-admin .admin-card,
.pagina-admin .admin-painel,
.pagina-caixa-app .card-caixa,
.pagina-blog .card {
    border: 1px solid var(--fc-border);
    border-radius: var(--fc-radius);
}

/* ---------- títulos ---------- */
.fin-app h1,
.fin-app h2,
.fin-app h3,
.pagina-blog h1,
.pagina-blog h2,
.pagina-blog h3,
.pagina-admin h1,
.pagina-admin h2,
.pagina-admin h3,
.pagina-caixa-app h1,
.pagina-caixa-app h2,
.pagina-caixa-app h3 {
    letter-spacing: -.015em;
}

/* ---------- botões e links de ação ---------- */
.fin-app button,
.fin-app .botao,
.fin-app .btn,
.fin-app .link-dashboard,
.pagina-admin button,
.pagina-admin .btn,
.pagina-caixa-app button,
.pagina-caixa-app .btn {
    border-radius: var(--fc-radius-sm);
    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.fin-app button:hover,
.fin-app .botao:hover,
.fin-app .btn:hover,
.pagina-admin button:hover,
.pagina-admin .btn:hover,
.pagina-caixa-app button:hover,
.pagina-caixa-app .btn:hover {
    border-color: rgba(0,229,255,.55);
}

/* ---------- formulários ---------- */
.fin-app input,
.fin-app select,
.fin-app textarea,
.pagina-admin input,
.pagina-admin select,
.pagina-admin textarea,
.pagina-caixa-app input,
.pagina-caixa-app select,
.pagina-caixa-app textarea {
    background-color: rgba(7, 19, 38, .82);
    color: var(--fc-text);
    border: 1px solid var(--fc-border);
    border-radius: var(--fc-radius-sm);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.fin-app input:focus,
.fin-app select:focus,
.fin-app textarea:focus,
.pagina-admin input:focus,
.pagina-admin select:focus,
.pagina-admin textarea:focus,
.pagina-caixa-app input:focus,
.pagina-caixa-app select:focus,
.pagina-caixa-app textarea:focus {
    border-color: rgba(0,229,255,.72);
    box-shadow: 0 0 0 3px rgba(0,229,255,.07);
}

/* ---------- tabelas ---------- */
.fin-app table,
.pagina-admin table,
.pagina-caixa-app table {
    border-color: var(--fc-border);
}

.fin-app th,
.pagina-admin th,
.pagina-caixa-app th {
    background: rgba(16,28,51,.94);
    color: var(--fc-text);
}

.fin-app td,
.fin-app th,
.pagina-admin td,
.pagina-admin th,
.pagina-caixa-app td,
.pagina-caixa-app th {
    border-color: var(--fc-border-soft);
}

/* ---------- dashboard: indicadores mais uniformes ---------- */
.fin-app .cards-dashboard {
    gap: 12px;
}

.fin-app .card-dashboard {
    background:
        linear-gradient(180deg, rgba(16,28,51,.96), rgba(10,20,38,.96));
    box-shadow: 0 10px 28px rgba(0,0,0,.12);
}

.fin-app .card-dashboard-titulo {
    color: var(--fc-text-light);
}

.fin-app .card-dashboard-valor {
    letter-spacing: -.025em;
}

/* ---------- cabeçalhos dos painéis ---------- */
.fin-app .painel-dashboard-cabecalho {
    border-bottom-color: var(--fc-border-soft);
}

/* ---------- menu lateral ---------- */
.fin-app .logo-fincontrole {
    border-bottom-color: var(--fc-border-soft);
}

.fin-app .usuario-logado {
    border-color: var(--fc-border);
    background: rgba(12,22,41,.72);
}

/* ---------- Blog ---------- */
.pagina-blog .card,
.pagina-blog .art,
.pagina-blog .hero-grid {
    border-color: var(--fc-border);
}

.pagina-blog a:focus-visible {
    border-radius: 6px;
}

/* ---------- Admin ---------- */
.pagina-admin .admin-sidebar a:hover,
.pagina-admin .admin-sidebar a.ativo {
    border-color: rgba(0,229,255,.48);
}

/* ---------- mobile ---------- */
@media (max-width: 900px) {
    .fin-app .cards-dashboard {
        gap: 10px;
    }

    .fin-app .card-dashboard {
        border-radius: 10px;
    }

    .fin-app input,
    .fin-app select,
    .fin-app textarea,
    .pagina-admin input,
    .pagina-admin select,
    .pagina-admin textarea,
    .pagina-caixa-app input,
    .pagina-caixa-app select,
    .pagina-caixa-app textarea {
        font-size: 16px;
    }
}


/* =========================================================
   INDEX — ESTILOS ESPECÍFICOS
   CSS antes inline em index.php
   Agora isolado por classe específica da página.
========================================================= */

/* --- bloco 1 originalmente inline em index.php --- */


        /* =====================================================
           HOME PÚBLICA - FINCONTROLE
        ====================================================== */

        html:has(body.fin-app.pagina-index){
            scroll-behavior: smooth;
        }

        body.fin-app.pagina-index.pagina-home{
            margin: 0;
            overflow-x: hidden;
        }

        body.fin-app.pagina-index .home-container{
            width: min(1180px, calc(100% - 32px));
            margin: 0 auto;
        }


        /* =====================================================
           TOPO
        ====================================================== */

        body.fin-app.pagina-index .home-topo{
            position: sticky;
            top: 0;
            z-index: 100;

            background:
                rgba(15, 17, 32, .92);

            backdrop-filter:
                blur(12px);

            border-bottom:
                1px solid rgba(53, 57, 92, .75);
        }

        body.fin-app.pagina-index .home-topo-interno{
            min-height: 72px;

            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
        }

        body.fin-app.pagina-index .home-logo{
            color: var(--primary);
            text-decoration: none;

            font-size: 24px;
            font-weight: 900;
            letter-spacing: .5px;
        }

        body.fin-app.pagina-index .home-topo-acoes{
            display: flex;
            align-items: center;
            gap: 8px;
        }

        body.fin-app.pagina-index .home-botao{
            min-height: 42px;

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

            padding: 0 17px;

            border: 1px solid var(--border);
            border-radius: 9px;

            background: transparent;
            color: var(--text-light);

            text-decoration: none;

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

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

        body.fin-app.pagina-index .home-botao:hover{
            background: var(--bg-hover);
            transform: translateY(-1px);
        }

        body.fin-app.pagina-index .home-botao.principal{
            border-color: var(--primary);
            color: var(--primary);

            background:
                rgba(0, 229, 255, .05);
        }


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

        body.fin-app.pagina-index .home-hero{
            position: relative;

            padding:
                88px 0 68px;

            overflow: hidden;
        }

        body.fin-app.pagina-index .home-hero::before{
            content: "";

            position: absolute;

            width: 520px;
            height: 520px;

            top: -260px;
            right: -120px;

            border-radius: 50%;

            background:
                radial-gradient(
                    circle,
                    rgba(0, 229, 255, .12),
                    transparent 70%
                );

            pointer-events: none;
        }

        body.fin-app.pagina-index .home-hero-grid{
            position: relative;
            z-index: 1;

            display: grid;
            grid-template-columns:
                minmax(0, 1fr)
                minmax(420px, .9fr);

            gap: 54px;
            align-items: center;
        }

        body.fin-app.pagina-index .home-etiqueta{
            display: inline-flex;
            align-items: center;
            gap: 7px;

            margin-bottom: 18px;

            padding: 6px 9px;

            border:
                1px solid
                rgba(0, 229, 255, .35);

            border-radius: 999px;

            background:
                rgba(0, 229, 255, .05);

            color: var(--primary);

            font-size: 9px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .5px;
        }

        body.fin-app.pagina-index .home-hero h1{
            margin: 0;

            color: var(--text);

            font-size:
                clamp(40px, 5vw, 68px);

            line-height: 1.02;
            letter-spacing: -2px;
        }

        body.fin-app.pagina-index .home-hero h1 span{
            color: var(--primary);
        }

        body.fin-app.pagina-index .home-hero-texto{
            max-width: 650px;

            margin:
                22px 0 0;

            color: var(--text-light);

            font-size:
                clamp(15px, 1.7vw, 19px);

            line-height: 1.6;
        }

        body.fin-app.pagina-index .home-hero-acoes{
            display: flex;
            flex-wrap: wrap;
            gap: 10px;

            margin-top: 30px;
        }

        body.fin-app.pagina-index .home-hero-acoes .home-botao{
            min-height: 48px;
            padding: 0 22px;
        }

        body.fin-app.pagina-index .home-microtexto{
            margin-top: 14px;

            color:
                rgba(191, 198, 255, .72);

            font-size: 9px;
        }


        /* =====================================================
           PREVIEW DASHBOARD
        ====================================================== */

        body.fin-app.pagina-index .home-preview{
            position: relative;

            padding: 18px;

            border:
                1px solid
                rgba(0, 229, 255, .28);

            border-radius: 18px;

            background:
                linear-gradient(
                    145deg,
                    rgba(26, 29, 51, .97),
                    rgba(15, 17, 32, .97)
                );

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

        body.fin-app.pagina-index .home-preview-topo{
            display: flex;
            align-items: center;
            justify-content: space-between;

            margin-bottom: 14px;
        }

        body.fin-app.pagina-index .home-preview-topo strong{
            color: var(--text);
            font-size: 12px;
        }

        body.fin-app.pagina-index .home-preview-demo{
            padding: 4px 7px;

            border:
                1px solid
                rgba(0, 229, 255, .38);

            border-radius: 999px;

            color: var(--primary);

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

        body.fin-app.pagina-index .home-preview-indicadores{
            display: grid;
            grid-template-columns:
                repeat(2, minmax(0, 1fr));

            gap: 10px;
        }

        body.fin-app.pagina-index .home-preview-card{
            min-width: 0;
            min-height: 116px;

            padding: 15px;

            border: 1px solid var(--border);
            border-radius: 11px;

            background:
                rgba(26, 29, 51, .72);
        }

        body.fin-app.pagina-index .home-preview-card span{
            display: block;

            color: var(--text-light);

            font-size: 8px;
            font-weight: 800;
            text-transform: uppercase;
        }

        body.fin-app.pagina-index .home-preview-card strong{
            display: block;

            margin-top: 15px;

            font-size: 22px;
        }

        body.fin-app.pagina-index .home-preview-card small{
            display: block;

            margin-top: 14px;

            color:
                rgba(191, 198, 255, .72);

            font-size: 8px;
        }

        body.fin-app.pagina-index .home-valor-verde{
            color: var(--success);
        }

        body.fin-app.pagina-index .home-valor-vermelho{
            color: #ff5d67;
        }

        body.fin-app.pagina-index .home-valor-ciano{
            color: var(--primary);
        }

        body.fin-app.pagina-index .home-preview-grafico{
            height: 110px;

            margin-top: 10px;
            padding: 15px;

            display: flex;
            align-items: flex-end;
            gap: 8px;

            border: 1px solid var(--border);
            border-radius: 11px;

            background:
                rgba(26, 29, 51, .72);
        }

        body.fin-app.pagina-index .home-preview-grafico i{
            flex: 1;

            min-width: 8px;

            border-radius:
                4px 4px 1px 1px;

            background:
                linear-gradient(
                    to top,
                    rgba(0, 229, 255, .25),
                    rgba(0, 229, 255, .95)
                );
        }


        /* =====================================================
           SEÇÕES
        ====================================================== */

        body.fin-app.pagina-index .home-secao{
            padding: 72px 0;
        }

        body.fin-app.pagina-index .home-secao-titulo{
            max-width: 720px;
            margin-bottom: 30px;
        }

        body.fin-app.pagina-index .home-secao-titulo span{
            color: var(--primary);

            font-size: 9px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .5px;
        }

        body.fin-app.pagina-index .home-secao-titulo h2{
            margin:
                8px 0 10px;

            color: var(--text);

            font-size:
                clamp(27px, 3.5vw, 40px);

            line-height: 1.12;
        }

        body.fin-app.pagina-index .home-secao-titulo p{
            margin: 0;

            color: var(--text-light);

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


        /* =====================================================
           RECURSOS
        ====================================================== */

        body.fin-app.pagina-index .home-recursos{
            display: grid;
            grid-template-columns:
                repeat(3, minmax(0, 1fr));

            gap: 13px;
        }

        body.fin-app.pagina-index .home-recurso{
            min-height: 205px;

            padding: 22px;

            border: 1px solid var(--border);
            border-radius: 13px;

            background: var(--bg-card);

            transition:
                transform .2s ease,
                border-color .2s ease;
        }

        body.fin-app.pagina-index .home-recurso:hover{
            transform: translateY(-3px);
            border-color:
                rgba(0, 229, 255, .48);
        }

        body.fin-app.pagina-index .home-recurso-icone{
            width: 42px;
            height: 42px;

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

            margin-bottom: 18px;

            border:
                1px solid
                rgba(0, 229, 255, .35);

            border-radius: 10px;

            background:
                rgba(0, 229, 255, .05);

            color: var(--primary);
        }

        body.fin-app.pagina-index .home-recurso-icone svg{
            width: 22px;
            height: 22px;

            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
        }

        body.fin-app.pagina-index .home-recurso h3{
            margin: 0 0 9px;

            color: var(--text);

            font-size: 15px;
        }

        body.fin-app.pagina-index .home-recurso p{
            margin: 0;

            color: var(--text-light);

            font-size: 11px;
            line-height: 1.55;
        }


        /* =====================================================
           VISÃO FINANCEIRA
        ====================================================== */

        body.fin-app.pagina-index .home-visao{
            display: grid;
            grid-template-columns:
                .82fr 1.18fr;

            gap: 26px;
            align-items: stretch;
        }

        body.fin-app.pagina-index .home-visao-texto,
body.fin-app.pagina-index .home-visao-painel{
            padding: 28px;

            border: 1px solid var(--border);
            border-radius: 14px;

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

        body.fin-app.pagina-index .home-visao-texto h3{
            margin: 0;

            color: var(--text);

            font-size: 24px;
        }

        body.fin-app.pagina-index .home-visao-texto p{
            color: var(--text-light);

            font-size: 12px;
            line-height: 1.65;
        }

        body.fin-app.pagina-index .home-checks{
            display: grid;
            gap: 9px;

            margin-top: 20px;
        }

        body.fin-app.pagina-index .home-check{
            display: flex;
            align-items: center;
            gap: 9px;

            color: var(--text-light);

            font-size: 11px;
        }

        body.fin-app.pagina-index .home-check b{
            width: 22px;
            height: 22px;

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

            flex: 0 0 auto;

            border-radius: 50%;

            background:
                rgba(0, 255, 179, .08);

            color: var(--success);
        }

        body.fin-app.pagina-index .home-visao-painel{
            display: grid;
            grid-template-columns:
                repeat(4, minmax(0, 1fr));

            gap: 9px;
        }

        body.fin-app.pagina-index .home-mini-indicador{
            min-width: 0;
            min-height: 128px;

            padding: 14px;

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

            background:
                rgba(15, 17, 32, .44);
        }

        body.fin-app.pagina-index .home-mini-indicador span{
            display: block;

            min-height: 28px;

            color: var(--text-light);

            font-size: 8px;
            font-weight: 800;
            text-transform: uppercase;
        }

        body.fin-app.pagina-index .home-mini-indicador strong{
            display: block;

            margin-top: 12px;

            font-size: 17px;
        }


        /* =====================================================
           CELULAR / ETAPAS
        ====================================================== */

        body.fin-app.pagina-index .home-mobile-grid{
            display: grid;
            grid-template-columns:
                minmax(280px, .72fr)
                minmax(0, 1fr);

            gap: 38px;
            align-items: center;
        }

        body.fin-app.pagina-index .home-celular{
            width: min(320px, 100%);

            margin: 0 auto;

            padding: 11px;

            border:
                1px solid
                rgba(0, 229, 255, .45);

            border-radius: 28px;

            background: #080a13;

            box-shadow:
                0 25px 70px
                rgba(0, 0, 0, .35);
        }

        body.fin-app.pagina-index .home-celular-tela{
            min-height: 520px;

            padding: 18px 14px;

            border-radius: 20px;

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

        body.fin-app.pagina-index .home-celular-tela h4{
            margin: 0 0 18px;

            color: var(--text);

            font-size: 20px;
        }

        body.fin-app.pagina-index .home-celular-cards{
            display: grid;
            grid-template-columns:
                repeat(2, minmax(0, 1fr));

            gap: 8px;
        }

        body.fin-app.pagina-index .home-celular-card{
            min-height: 112px;

            padding: 11px;

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

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

        body.fin-app.pagina-index .home-celular-card small{
            display: block;

            color: var(--text-light);

            font-size: 7px;
            text-transform: uppercase;
        }

        body.fin-app.pagina-index .home-celular-card strong{
            display: block;

            margin-top: 20px;

            font-size: 15px;
        }

        body.fin-app.pagina-index .home-etapas{
            display: grid;
            gap: 10px;
        }

        body.fin-app.pagina-index .home-etapa{
            display: grid;
            grid-template-columns:
                42px minmax(0, 1fr);

            gap: 12px;
            align-items: start;

            padding: 16px;

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

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

        body.fin-app.pagina-index .home-etapa-numero{
            width: 38px;
            height: 38px;

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

            border:
                1px solid
                rgba(0, 229, 255, .42);

            border-radius: 9px;

            color: var(--primary);

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

        body.fin-app.pagina-index .home-etapa h3{
            margin: 0 0 5px;

            color: var(--text);

            font-size: 13px;
        }

        body.fin-app.pagina-index .home-etapa p{
            margin: 0;

            color: var(--text-light);

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


        /* =====================================================
           CTA FINAL
        ====================================================== */

        body.fin-app.pagina-index .home-cta{
            padding:
                28px 0 86px;
        }

        body.fin-app.pagina-index .home-cta-card{
            position: relative;

            padding:
                54px 28px;

            overflow: hidden;

            text-align: center;

            border:
                1px solid
                rgba(0, 229, 255, .38);

            border-radius: 18px;

            background:
                linear-gradient(
                    145deg,
                    rgba(26, 29, 51, .98),
                    rgba(15, 17, 32, .98)
                );
        }

        body.fin-app.pagina-index .home-cta-card::after{
            content: "";

            position: absolute;

            width: 360px;
            height: 360px;

            left: 50%;
            bottom: -300px;

            transform:
                translateX(-50%);

            border-radius: 50%;

            background:
                rgba(0, 229, 255, .14);

            filter:
                blur(70px);

            pointer-events: none;
        }

        body.fin-app.pagina-index .home-cta-card h2{
            position: relative;
            z-index: 1;

            margin: 0;

            color: var(--text);

            font-size:
                clamp(28px, 4vw, 42px);
        }

        body.fin-app.pagina-index .home-cta-card p{
            position: relative;
            z-index: 1;

            max-width: 620px;

            margin:
                13px auto 23px;

            color: var(--text-light);

            font-size: 12px;
            line-height: 1.6;
        }

        body.fin-app.pagina-index .home-cta-acoes{
            position: relative;
            z-index: 1;

            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 9px;
        }


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

        body.fin-app.pagina-index .home-rodape{
            padding: 24px 0;

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

        body.fin-app.pagina-index .home-rodape-interno{
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
        }

        body.fin-app.pagina-index .home-rodape strong{
            color: var(--primary);
            font-size: 14px;
        }

        body.fin-app.pagina-index .home-rodape span{
            color:
                rgba(191, 198, 255, .65);

            font-size: 9px;
        }


        /* =====================================================
           ASSISTENTE FINCONTROLE
        ====================================================== */

        body.fin-app.pagina-index .home-ia-grid{
            display: grid;
            grid-template-columns:
                minmax(0, 1fr)
                minmax(0, .9fr);

            gap: 18px;
            align-items: stretch;
        }

        body.fin-app.pagina-index .home-ia-chat,
body.fin-app.pagina-index .home-ia-beneficios{
            min-width: 0;
        }

        body.fin-app.pagina-index .home-ia-chat{
            padding: 18px;

            border:
                1px solid
                rgba(0, 229, 255, .32);

            border-radius: 14px;

            background:
                linear-gradient(
                    145deg,
                    rgba(26, 29, 51, .98),
                    rgba(15, 17, 32, .98)
                );
        }

        body.fin-app.pagina-index .home-ia-chat-topo{
            display: flex;
            align-items: center;
            justify-content: space-between;

            margin-bottom: 18px;
            padding-bottom: 13px;

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

        body.fin-app.pagina-index .home-ia-chat-topo strong{
            display: block;

            color: var(--primary);

            font-size: 13px;
        }

        body.fin-app.pagina-index .home-ia-chat-topo small{
            display: block;

            margin-top: 4px;

            color: var(--text-light);

            font-size: 8px;
        }

        body.fin-app.pagina-index .home-ia-mensagem{
            width: fit-content;
            max-width: 83%;

            margin-bottom: 10px;
            padding: 11px 12px;

            border-radius: 10px;

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

        body.fin-app.pagina-index .home-ia-mensagem.usuario{
            margin-left: auto;

            background:
                rgba(0, 229, 255, .08);

            border:
                1px solid
                rgba(0, 229, 255, .35);

            color: var(--text);
        }

        body.fin-app.pagina-index .home-ia-mensagem.assistente{
            background: var(--bg-main);

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

            color: var(--text-light);
        }

        body.fin-app.pagina-index .home-ia-exemplo{
            min-height: 44px;

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

            margin-top: 18px;
            padding: 0 12px;

            background: var(--bg-main);

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

            border-radius: 8px;

            color:
                rgba(191, 198, 255, .72);

            font-size: 9px;
        }

        body.fin-app.pagina-index .home-ia-exemplo span{
            color: var(--primary);

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

        body.fin-app.pagina-index .home-ia-beneficios{
            display: grid;
            grid-template-columns:
                repeat(2, minmax(0, 1fr));

            gap: 10px;
        }

        body.fin-app.pagina-index .home-ia-beneficio{
            padding: 18px;

            background: var(--bg-card);

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

            border-radius: 11px;
        }

        body.fin-app.pagina-index .home-ia-beneficio strong{
            display: block;

            margin-bottom: 8px;

            color: var(--text);

            font-size: 12px;
        }

        body.fin-app.pagina-index .home-ia-beneficio p{
            margin: 0;

            color: var(--text-light);

            font-size: 10px;
            line-height: 1.55;
        }

        body.fin-app.pagina-index .home-recurso-ia{
            border-color:
                rgba(0, 229, 255, .38);
        }



        /* =====================================================
           NAVEGAÇÃO INTERNA / ATALHOS
        ====================================================== */

        body.fin-app.pagina-index .home-nav-interno{
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            flex-wrap: wrap;
        }

        body.fin-app.pagina-index .home-nav-interno a{
            min-height: 34px;

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

            padding: 0 9px;

            border-radius: 7px;

            color: var(--text-light);

            text-decoration: none;

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

            transition:
                background .2s ease,
                color .2s ease;
        }

        body.fin-app.pagina-index .home-nav-interno a:hover{
            background: var(--bg-hover);
            color: var(--primary);
        }

        body.fin-app.pagina-index .home-botao-explorar{
            border-color:
                rgba(0, 229, 255, .35);
        }

        body.fin-app.pagina-index .home-atalhos{
            padding: 6px 0 28px;
        }

        body.fin-app.pagina-index .home-atalhos-grid{
            display: grid;
            grid-template-columns:
                repeat(6, minmax(0, 1fr));

            gap: 9px;
        }

        body.fin-app.pagina-index .home-atalho-card{
            min-width: 0;
            min-height: 110px;

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

            padding: 15px;

            background: var(--bg-card);

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

            border-radius: 11px;

            color: inherit;

            text-decoration: none;

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

        body.fin-app.pagina-index .home-atalho-card:hover{
            transform:
                translateY(-2px);

            border-color:
                rgba(0, 229, 255, .45);

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

        body.fin-app.pagina-index .home-atalho-card.destaque{
            border-color:
                rgba(0, 229, 255, .42);
        }

        body.fin-app.pagina-index .home-atalho-icone{
            width: 34px;
            height: 34px;

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

            border:
                1px solid
                rgba(0, 229, 255, .30);

            border-radius: 8px;

            color: var(--primary);

            font-size: 17px;
            font-weight: 900;
        }

        body.fin-app.pagina-index .home-atalho-card strong{
            display: block;

            color: var(--text);

            font-size: 12px;
            line-height: 1.25;
        }

        body.fin-app.pagina-index .home-atalho-card small{
            display: block;

            margin-top: 5px;

            color: var(--text-light);

            font-size: 10px;
            line-height: 1.4;
        }

        body.fin-app.pagina-index section[id]{
            scroll-margin-top: 88px;
        }

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

        @media (max-width: 900px) {

            body.fin-app.pagina-index .home-nav-interno{
                display: none;
            }

            body.fin-app.pagina-index .home-atalhos-grid{
                grid-template-columns:
                    repeat(3, minmax(0, 1fr));
            }

            body.fin-app.pagina-index .home-hero-grid,
body.fin-app.pagina-index .home-visao,
body.fin-app.pagina-index .home-mobile-grid{
                grid-template-columns: 1fr;
            }

            body.fin-app.pagina-index .home-preview{
                max-width: 650px;
            }

            body.fin-app.pagina-index .home-recursos{
                grid-template-columns:
                    repeat(2, minmax(0, 1fr));
            }

            body.fin-app.pagina-index .home-ia-grid{
                grid-template-columns: 1fr;
            }

            body.fin-app.pagina-index .home-visao-painel{
                grid-template-columns:
                    repeat(2, minmax(0, 1fr));
            }
        }


        @media (max-width: 620px) {

            body.fin-app.pagina-index .home-atalhos{
                padding-bottom: 20px;
            }

            body.fin-app.pagina-index .home-atalhos-grid{
                grid-template-columns:
                    repeat(2, minmax(0, 1fr));

                gap: 7px;
            }

            body.fin-app.pagina-index .home-atalho-card{
                min-height: 105px;
                padding: 12px;
            }

            body.fin-app.pagina-index .home-atalho-card strong{
                font-size: 13px;
            }

            body.fin-app.pagina-index .home-atalho-card small{
                font-size: 11px;
            }

            body.fin-app.pagina-index .home-container{
                width:
                    min(
                        100% - 22px,
                        1180px
                    );
            }

            body.fin-app.pagina-index .home-topo-interno{
                min-height: 64px;
            }

            body.fin-app.pagina-index .home-logo{
                font-size: 19px;
            }

            body.fin-app.pagina-index .home-topo-acoes{
                gap: 5px;
            }

            body.fin-app.pagina-index .home-topo-acoes .home-botao{
                min-height: 36px;
                padding: 0 10px;
                font-size: 9px;
            }

            body.fin-app.pagina-index .home-hero{
                padding:
                    54px 0 42px;
            }

            body.fin-app.pagina-index .home-hero h1{
                letter-spacing: -1px;
            }

            body.fin-app.pagina-index .home-hero-acoes{
                display: grid;
                grid-template-columns:
                    1fr 1fr;
            }

            body.fin-app.pagina-index .home-hero-acoes .home-botao{
                width: 100%;
                padding: 0 8px;
                box-sizing: border-box;
            }

            body.fin-app.pagina-index .home-preview{
                padding: 12px;
            }

            body.fin-app.pagina-index .home-preview-card{
                min-height: 105px;
                padding: 12px;
            }

            body.fin-app.pagina-index .home-preview-card strong{
                font-size: 17px;
            }

            body.fin-app.pagina-index .home-secao{
                padding: 48px 0;
            }

            body.fin-app.pagina-index .home-recursos{
                grid-template-columns: 1fr;
            }

            body.fin-app.pagina-index .home-ia-beneficios{
                grid-template-columns: 1fr;
            }

            body.fin-app.pagina-index .home-ia-mensagem{
                max-width: 92%;
                font-size: 12px;
            }

            body.fin-app.pagina-index .home-ia-exemplo{
                font-size: 10px;
            }

            body.fin-app.pagina-index .home-recurso{
                min-height: 0;
            }

            body.fin-app.pagina-index .home-visao-texto,
body.fin-app.pagina-index .home-visao-painel{
                padding: 18px;
            }

            body.fin-app.pagina-index .home-visao-painel{
                grid-template-columns:
                    repeat(2, minmax(0, 1fr));
            }

            body.fin-app.pagina-index .home-mini-indicador{
                min-height: 108px;
                padding: 11px;
            }

            body.fin-app.pagina-index .home-mini-indicador strong{
                font-size: 14px;
            }

            body.fin-app.pagina-index .home-celular{
                width: min(290px, 100%);
            }

            body.fin-app.pagina-index .home-celular-tela{
                min-height: 450px;
            }

            body.fin-app.pagina-index .home-cta-card{
                padding:
                    38px 18px;
            }

            body.fin-app.pagina-index .home-rodape-interno{
                flex-direction: column;
                align-items: flex-start;
            }
        }

    
        /* =====================================================
           AJUSTE DE LEGIBILIDADE - FONTES MAIORES
        ====================================================== */

        body.fin-app.pagina-index .home-marca{
            font-size: 17px;
        }

        body.fin-app.pagina-index .home-nav a,
body.fin-app.pagina-index .home-link-login{
            font-size: 12px;
        }

        body.fin-app.pagina-index .home-botao{
            font-size: 12px;
        }

        body.fin-app.pagina-index .home-badge{
            font-size: 11px;
        }

        body.fin-app.pagina-index .home-hero-texto p{
            font-size: 15px;
            line-height: 1.65;
        }

        body.fin-app.pagina-index .home-secao-titulo span{
            font-size: 12px;
        }

        body.fin-app.pagina-index .home-secao-titulo p{
            font-size: 14px;
            line-height: 1.65;
        }

        body.fin-app.pagina-index .home-recurso h3{
            font-size: 15px;
        }

        body.fin-app.pagina-index .home-recurso p{
            font-size: 13px;
            line-height: 1.6;
        }

        body.fin-app.pagina-index .home-visao-card span,
body.fin-app.pagina-index .home-visao-linha span{
            font-size: 11px;
        }

        body.fin-app.pagina-index .home-visao-card strong,
body.fin-app.pagina-index .home-visao-linha strong{
            font-size: 15px;
        }

        body.fin-app.pagina-index .home-ia-chat-topo strong{
            font-size: 16px;
        }

        body.fin-app.pagina-index .home-ia-chat-topo small{
            font-size: 11px;
        }

        body.fin-app.pagina-index .home-ia-mensagem{
            font-size: 13px;
            line-height: 1.6;
        }

        body.fin-app.pagina-index .home-ia-exemplo{
            font-size: 12px;
            line-height: 1.4;
        }

        body.fin-app.pagina-index .home-ia-beneficio strong{
            font-size: 14px;
        }

        body.fin-app.pagina-index .home-ia-beneficio p{
            font-size: 12px;
            line-height: 1.65;
        }

        body.fin-app.pagina-index .home-mobile-card strong{
            font-size: 15px;
        }

        body.fin-app.pagina-index .home-mobile-card p{
            font-size: 13px;
            line-height: 1.6;
        }

        body.fin-app.pagina-index .home-passo-numero{
            font-size: 13px;
        }

        body.fin-app.pagina-index .home-passo h3{
            font-size: 15px;
        }

        body.fin-app.pagina-index .home-passo p{
            font-size: 13px;
            line-height: 1.6;
        }

        body.fin-app.pagina-index .home-cta p{
            font-size: 14px;
            line-height: 1.6;
        }

        body.fin-app.pagina-index .home-footer{
            font-size: 11px;
        }

        @media (max-width: 760px) {

            body.fin-app.pagina-index .home-hero-texto p{
                font-size: 16px;
            }

            body.fin-app.pagina-index .home-secao-titulo p{
                font-size: 15px;
            }

            body.fin-app.pagina-index .home-recurso h3{
                font-size: 17px;
            }

            body.fin-app.pagina-index .home-recurso p{
                font-size: 14px;
            }

            body.fin-app.pagina-index .home-ia-chat-topo strong{
                font-size: 17px;
            }

            body.fin-app.pagina-index .home-ia-chat-topo small{
                font-size: 12px;
            }

            body.fin-app.pagina-index .home-ia-mensagem{
                font-size: 15px;
            }

            body.fin-app.pagina-index .home-ia-exemplo{
                min-height: 50px;
                font-size: 13px;
            }

            body.fin-app.pagina-index .home-ia-beneficio strong{
                font-size: 16px;
            }

            body.fin-app.pagina-index .home-ia-beneficio p{
                font-size: 14px;
            }

            body.fin-app.pagina-index .home-mobile-card strong,
body.fin-app.pagina-index .home-passo h3{
                font-size: 16px;
            }

            body.fin-app.pagina-index .home-mobile-card p,
body.fin-app.pagina-index .home-passo p{
                font-size: 14px;
            }

            body.fin-app.pagina-index .home-cta p{
                font-size: 15px;
            }
        }

        body.fin-app.pagina-index .home-artigo-card{color:inherit;text-decoration:none}
        body.fin-app.pagina-index .home-artigo-card h3{line-height:1.35}


        /* =====================================================
           TOPO UNIFICADO FINCONTROLE V9
           Mesmo padrão visual do Blog
        ====================================================== */

        body.fin-app.pagina-index .topo-fincontrole{
            position: sticky;
            top: 0;
            z-index: 1000;

            background:
                rgba(4, 10, 22, .96);

            border-top:
                2px solid
                rgba(0, 229, 255, .62);

            border-bottom:
                1px solid
                #17385a;

            backdrop-filter:
                blur(14px);

            box-shadow:
                0 8px 28px
                rgba(0, 0, 0, .16);
        }

        body.fin-app.pagina-index .topo-fincontrole-interno{
            position: relative;

            min-height: 82px;

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

            gap: 24px;
        }

        body.fin-app.pagina-index .topo-fincontrole-logo{
            width: 250px;
            height: 58px;

            flex:
                0 0
                250px;

            display: flex;
            align-items: center;

            padding: 0;

            text-decoration: none;
        }

        body.fin-app.pagina-index .topo-fincontrole-logo img{
            display: block;

            width: 250px;
            height: 58px;

            object-fit: contain;
            object-position: left center;
        }

        body.fin-app.pagina-index .topo-fincontrole-nav{
            display: flex;
            align-items: center;

            gap: 8px;

            margin-left: auto;
        }

        body.fin-app.pagina-index .topo-fincontrole-nav a{
            min-height: 44px;

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

            padding:
                0 15px;

            border:
                1px solid
                transparent;

            border-radius:
                9px;

            color:
                #e8f0ff;

            text-decoration: none;

            font-size:
                13px;

            font-weight:
                800;

            white-space:
                nowrap;

            transition:
                .2s ease;
        }

        body.fin-app.pagina-index .topo-fincontrole-nav a:hover,
body.fin-app.pagina-index .topo-fincontrole-nav a.ativo{
            color:
                var(--primary);

            background:
                rgba(0, 229, 255, .055);

            border-color:
                rgba(0, 229, 255, .18);
        }

        body.fin-app.pagina-index .topo-fincontrole-nav
        .topo-fincontrole-cta{
            min-height: 46px;

            padding:
                0 19px;

            margin-left:
                3px;

            background:
                var(--primary);

            border-color:
                var(--primary);

            color:
                #03121a;

            font-size:
                13px;

            font-weight:
                900;

            box-shadow:
                0 0 18px
                rgba(0, 229, 255, .13);
        }

        body.fin-app.pagina-index .topo-fincontrole-nav
        .topo-fincontrole-cta:hover{
            background:
                #33ebff;

            color:
                #03121a;

            transform:
                translateY(-1px);
        }

        /* Botão mobile bem visível */
        body.fin-app.pagina-index .topo-menu-toggle{
            display: none;

            width: 52px;
            height: 52px;

            flex:
                0 0
                52px;

            padding: 0;

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

            gap: 5px;

            background:
                var(--primary);

            border:
                2px solid
                #7bf3ff;

            border-radius:
                11px;

            box-shadow:
                0 0 22px
                rgba(0, 229, 255, .26);

            cursor:
                pointer;
        }

        body.fin-app.pagina-index .topo-menu-toggle span{
            width: 24px;
            height: 3px;

            display: block;

            border-radius:
                999px;

            background:
                #03121a;

            transition:
                .2s ease;
        }


        @media(max-width: 820px) {

            body.fin-app.pagina-index .topo-fincontrole-interno{
                min-height:
                    78px;

                padding:
                    7px 0;
            }

            body.fin-app.pagina-index .topo-fincontrole-logo{
                width:
                    225px;

                height:
                    54px;

                flex-basis:
                    225px;
            }

            body.fin-app.pagina-index .topo-fincontrole-logo img{
                width:
                    225px;

                height:
                    54px;
            }

            body.fin-app.pagina-index .topo-menu-toggle{
                display:
                    flex;
            }

            body.fin-app.pagina-index .topo-fincontrole-nav{
                display:
                    none;

                position:
                    absolute;

                top:
                    calc(100% + 8px);

                left:
                    0;

                right:
                    0;

                width:
                    100%;

                padding:
                    12px;

                margin:
                    0;

                flex-direction:
                    column;

                align-items:
                    stretch;

                gap:
                    6px;

                background:
                    #071326;

                border:
                    1px solid
                    rgba(0, 229, 255, .48);

                border-radius:
                    14px;

                box-shadow:
                    0 22px 60px
                    rgba(0, 0, 0, .52);
            }

            body.fin-app.pagina-index.topo-menu-aberto
            .topo-fincontrole-nav{
                display:
                    flex;
            }

            body.fin-app.pagina-index .topo-fincontrole-nav a{
                width:
                    100%;

                min-height:
                    52px;

                justify-content:
                    flex-start;

                padding:
                    0 16px;

                font-size:
                    15px;

                background:
                    #0b1a30;

                border:
                    1px solid
                    #17385a;

                border-radius:
                    9px;

                color:
                    #ffffff;
            }

            body.fin-app.pagina-index .topo-fincontrole-nav a:hover,
body.fin-app.pagina-index .topo-fincontrole-nav a.ativo{
                color:
                    var(--primary);

                background:
                    #10243d;

                border-color:
                    rgba(0, 229, 255, .45);
            }

            body.fin-app.pagina-index .topo-fincontrole-nav
            .topo-fincontrole-cta{
                min-height:
                    54px;

                justify-content:
                    center;

                margin:
                    3px 0 0;

                background:
                    var(--primary);

                color:
                    #03121a;

                border-color:
                    var(--primary);

                font-size:
                    15px;
            }

            body.fin-app.pagina-index.topo-menu-aberto
            .topo-menu-toggle
            span:nth-child(1){
                transform:
                    translateY(8px)
                    rotate(45deg);
            }

            body.fin-app.pagina-index.topo-menu-aberto
            .topo-menu-toggle
            span:nth-child(2){
                opacity:
                    0;
            }

            body.fin-app.pagina-index.topo-menu-aberto
            .topo-menu-toggle
            span:nth-child(3){
                transform:
                    translateY(-8px)
                    rotate(-45deg);
            }
        }


        @media(max-width: 480px) {

            body.fin-app.pagina-index .topo-fincontrole-interno{
                min-height:
                    74px;
            }

            body.fin-app.pagina-index .topo-fincontrole-logo{
                width:
                    195px;

                height:
                    50px;

                flex-basis:
                    195px;
            }

            body.fin-app.pagina-index .topo-fincontrole-logo img{
                width:
                    195px;

                height:
                    50px;
            }

            body.fin-app.pagina-index .topo-menu-toggle{
                width:
                    50px;

                height:
                    50px;

                flex-basis:
                    50px;
            }
        }

    
        /* =====================================================
           V11 - ATALHOS INTERNOS RESTAURADOS
           Mantém o topo principal igual ao Blog.
        ====================================================== */

        body.fin-app.pagina-index .home-atalhos-topo{
            position: sticky;
            top: 82px;
            z-index: 990;
            background: rgba(7, 19, 38, .96);
            border-bottom: 1px solid rgba(53, 57, 92, .78);
            backdrop-filter: blur(12px);
        }

        body.fin-app.pagina-index .home-atalhos-topo-interno{
            min-height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            overflow-x: auto;
            scrollbar-width: thin;
            scrollbar-color: rgba(0,229,255,.35) transparent;
        }

        body.fin-app.pagina-index .home-atalhos-topo-interno a{
            flex: 0 0 auto;
            min-height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 10px;
            border: 1px solid transparent;
            border-radius: 8px;
            color: var(--text-light);
            text-decoration: none;
            font-size: 11px;
            font-weight: 800;
            white-space: nowrap;
            transition: .2s ease;
        }

        body.fin-app.pagina-index .home-atalhos-topo-interno a:hover{
            color: var(--primary);
            background: rgba(0,229,255,.06);
            border-color: rgba(0,229,255,.18);
        }

        /* Compensa os dois cabeçalhos fixos ao navegar por âncoras */
        body.fin-app.pagina-index section[id]{
            scroll-margin-top: 138px !important;
        }

        @media(max-width:820px) {
            body.fin-app.pagina-index .home-atalhos-topo{
                top: 78px;
            }

            body.fin-app.pagina-index .home-atalhos-topo-interno{
                justify-content: flex-start;
                min-height: 46px;
                padding: 0 2px;
            }

            body.fin-app.pagina-index .home-atalhos-topo-interno a{
                min-height: 36px;
                padding: 0 11px;
                font-size: 12px;
            }

            body.fin-app.pagina-index section[id]{
                scroll-margin-top: 136px !important;
            }
        }

        @media(max-width:480px) {
            body.fin-app.pagina-index .home-atalhos-topo{
                top: 74px;
            }

            body.fin-app.pagina-index .home-atalhos-topo-interno{
                min-height: 44px;
            }

            body.fin-app.pagina-index .home-atalhos-topo-interno a{
                font-size: 11px;
            }

            body.fin-app.pagina-index section[id]{
                scroll-margin-top: 130px !important;
            }
        }

    

/* =========================================================
   DASHBOARD — ESTILOS ESPECÍFICOS
   CSS antes inline em dashboard.php
   Agora isolado por classe específica da página.
========================================================= */

/* --- bloco 1 originalmente inline em dashboard.php --- */

/* ===== CORREÇÃO GARANTIDA DO BLOCO DE LANÇAMENTOS ===== */

body.fin-app.pagina-dashboard .lista-vencimentos-dashboard{
    width:100%;
    display:block;
}

body.fin-app.pagina-dashboard .cabecalho-lancamentos-dashboard,
body.fin-app.pagina-dashboard .linha-lancamento-final{
    display:grid !important;
    grid-template-columns:95px minmax(175px,1.15fr) minmax(170px,1fr) 105px 110px 220px 95px !important;
    gap:12px !important;
    align-items:center !important;
    width:100% !important;
}

body.fin-app.pagina-dashboard .cabecalho-lancamentos-dashboard{
    padding:12px 14px !important;
    border:1px solid var(--border) !important;
    border-bottom:0 !important;
    border-radius:10px 10px 0 0 !important;
    color:var(--text) !important;
    font-size:11px !important;
}

body.fin-app.pagina-dashboard .cabecalho-lancamentos-dashboard small{
    display:block !important;
    margin-top:4px !important;
    color:var(--text-light) !important;
    font-size:10px !important;
}

body.fin-app.pagina-dashboard .linha-lancamento-final{
    min-height:96px !important;
    padding:12px 14px !important;
    background:var(--bg-card) !important;
    border:1px solid var(--border) !important;
    border-bottom:0 !important;
}

body.fin-app.pagina-dashboard .linha-lancamento-final:last-child{
    border-bottom:1px solid var(--border) !important;
    border-radius:0 0 10px 10px !important;
}

body.fin-app.pagina-dashboard .data-lancamento-final{
    width:58px !important;
    min-height:68px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    border:1px solid var(--border) !important;
    border-radius:8px !important;
}

body.fin-app.pagina-dashboard .data-lancamento-final strong{
    color:var(--primary) !important;
    font-size:22px !important;
    line-height:1 !important;
}

body.fin-app.pagina-dashboard .data-lancamento-final span{
    margin-top:4px !important;
    color:var(--text) !important;
    font-size:10px !important;
    text-transform:uppercase !important;
}

body.fin-app.pagina-dashboard .coluna-principal-final{
    display:flex !important;
    flex-direction:column !important;
    gap:7px !important;
    min-width:0 !important;
}

body.fin-app.pagina-dashboard .coluna-principal-final strong{
    color:var(--primary) !important;
    font-size:14px !important;
    font-weight:700 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

body.fin-app.pagina-dashboard .coluna-principal-final span{
    color:var(--text) !important;
    font-size:11px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

body.fin-app.pagina-dashboard .status-final{
    display:flex !important;
    justify-content:center !important;
}

body.fin-app.pagina-dashboard .status-final .badge-status{
    min-width:82px !important;
    padding:6px 8px !important;
    font-size:11px !important;
}

body.fin-app.pagina-dashboard .valor-final{
    color:var(--text) !important;
    text-align:right !important;
    white-space:nowrap !important;
}

body.fin-app.pagina-dashboard .valor-final strong{
    font-size:14px !important;
}

body.fin-app.pagina-dashboard .acoes-final{
    display:grid !important;
    grid-template-columns:100px 100px !important;
    gap:6px !important;
    align-items:center !important;
    justify-content:center !important;
}

body.fin-app.pagina-dashboard .botao-pagar-final,
body.fin-app.pagina-dashboard .botao-editar-final,
body.fin-app.pagina-dashboard .botao-cancelar-final{
    width:100px !important;
    min-height:33px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:5px 8px !important;
    border-radius:7px !important;
    font-family:inherit !important;
    font-size:11px !important;
    font-weight:bold !important;
    text-decoration:none !important;
    cursor:pointer !important;
}

body.fin-app.pagina-dashboard .botao-pagar-final{
    border:1px solid #00c853 !important;
    background:transparent !important;
    color:#00e65c !important;
}

body.fin-app.pagina-dashboard .botao-editar-final{
    border:1px solid var(--primary) !important;
    background:transparent !important;
    color:var(--primary) !important;
}

body.fin-app.pagina-dashboard .botao-cancelar-final{
    grid-column:2 !important;
    grid-row:1 / span 2 !important;
    min-height:72px !important;
    border:1px solid var(--border) !important;
    background:var(--bg-main) !important;
    color:var(--text) !important;
    line-height:1.15 !important;
    text-align:center !important;
}

body.fin-app.pagina-dashboard .dias-final{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    line-height:1.05 !important;
}

body.fin-app.pagina-dashboard .dias-vencido-texto,
body.fin-app.pagina-dashboard .dias-vencido-numero{
    color:#ff4d4d !important;
}

body.fin-app.pagina-dashboard .dias-falta-texto,
body.fin-app.pagina-dashboard .dias-falta-numero{
    color:#ff9f1a !important;
}

body.fin-app.pagina-dashboard .dias-vencido-numero,
body.fin-app.pagina-dashboard .dias-falta-numero{
    margin:3px 0 !important;
    font-size:23px !important;
}

body.fin-app.pagina-dashboard .dias-vencido-texto,
body.fin-app.pagina-dashboard .dias-falta-texto{
    font-size:10px !important;
}

body.fin-app.pagina-dashboard .dias-hoje-final{
    color:#ff9f1a !important;
    font-size:11px !important;
}

/* em telas menores, vira 2 linhas sem quebrar */
@media (max-width:1250px){
    body.fin-app.pagina-dashboard .cabecalho-lancamentos-dashboard{
        display:none !important;
    }

    body.fin-app.pagina-dashboard .linha-lancamento-final{
        grid-template-columns:65px minmax(150px,1fr) minmax(150px,1fr) 90px !important;
        grid-template-areas:
            "data lancamento categoria status"
            "data valor acoes dias" !important;
        row-gap:9px !important;
        margin-bottom:8px !important;
        border-bottom:1px solid var(--border) !important;
        border-radius:9px !important;
    }

    body.fin-app.pagina-dashboard .data-lancamento-final{grid-area:data !important;}
    body.fin-app.pagina-dashboard .coluna-principal-final:not(.categoria-final){grid-area:lancamento !important;}
    body.fin-app.pagina-dashboard .categoria-final{grid-area:categoria !important;}
    body.fin-app.pagina-dashboard .status-final{grid-area:status !important;}
    body.fin-app.pagina-dashboard .valor-final{grid-area:valor !important;text-align:left !important;}
    body.fin-app.pagina-dashboard .acoes-final{grid-area:acoes !important;justify-content:start !important;}
    body.fin-app.pagina-dashboard .dias-final{grid-area:dias !important;}
}

@media (max-width:800px){
    body.fin-app.pagina-dashboard .linha-lancamento-final{
        grid-template-columns:58px minmax(0,1fr) !important;
        grid-template-areas:
            "data lancamento"
            "data categoria"
            "data status"
            "data valor"
            "data acoes"
            "data dias" !important;
    }

    body.fin-app.pagina-dashboard .status-final,
body.fin-app.pagina-dashboard .dias-final{
        justify-content:flex-start !important;
        align-items:flex-start !important;
        text-align:left !important;
    }
}


/* --- bloco 2 originalmente inline em dashboard.php --- */

/* ===== AJUSTE FINAL PARA NÃO ESTOURAR A LARGURA ===== */

body.fin-app.pagina-dashboard .painel-vencimentos,
body.fin-app.pagina-dashboard .lista-vencimentos-dashboard,
body.fin-app.pagina-dashboard .cabecalho-lancamentos-dashboard,
body.fin-app.pagina-dashboard .linha-lancamento-final{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

body.fin-app.pagina-dashboard .cabecalho-lancamentos-dashboard,
body.fin-app.pagina-dashboard .linha-lancamento-final{
    grid-template-columns:
        82px
        minmax(145px, 1.15fr)
        minmax(145px, 1fr)
        92px
        95px
        165px
        82px !important;
    gap: 8px !important;
}

body.fin-app.pagina-dashboard .cabecalho-lancamentos-dashboard > div,
body.fin-app.pagina-dashboard .linha-lancamento-final > div{
    min-width: 0 !important;
}

body.fin-app.pagina-dashboard .acoes-final{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 100% !important;
}

body.fin-app.pagina-dashboard .botao-pagar-final,
body.fin-app.pagina-dashboard .botao-editar-final,
body.fin-app.pagina-dashboard .botao-cancelar-final{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 30px !important;
    height: auto !important;
    padding: 5px 6px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    box-sizing: border-box !important;
}

body.fin-app.pagina-dashboard .botao-cancelar-final{
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 40px !important;
}

body.fin-app.pagina-dashboard .valor-final{
    text-align: center !important;
}

body.fin-app.pagina-dashboard .dias-final{
    min-width: 0 !important;
    overflow: hidden !important;
}

body.fin-app.pagina-dashboard .dias-vencido-numero,
body.fin-app.pagina-dashboard .dias-falta-numero{
    font-size: 19px !important;
}

body.fin-app.pagina-dashboard .dias-vencido-texto,
body.fin-app.pagina-dashboard .dias-falta-texto,
body.fin-app.pagina-dashboard .dias-hoje-final{
    font-size: 9px !important;
}

/* telas até aproximadamente notebook */
@media (max-width: 1450px) {

    body.fin-app.pagina-dashboard .cabecalho-lancamentos-dashboard,
body.fin-app.pagina-dashboard .linha-lancamento-final{
        grid-template-columns:
            72px
            minmax(135px, 1fr)
            minmax(135px, 1fr)
            85px
            90px
            145px
            75px !important;
        gap: 7px !important;
    }

    body.fin-app.pagina-dashboard .cabecalho-lancamentos-dashboard{
        font-size: 10px !important;
    }

    body.fin-app.pagina-dashboard .cabecalho-lancamentos-dashboard small{
        font-size: 9px !important;
    }

    body.fin-app.pagina-dashboard .coluna-principal-final strong{
        font-size: 12px !important;
    }

    body.fin-app.pagina-dashboard .coluna-principal-final span{
        font-size: 10px !important;
    }
}

/* abaixo de 1150 reorganiza sem deixar nada sair do painel */
@media (max-width: 1150px) {

    body.fin-app.pagina-dashboard .cabecalho-lancamentos-dashboard{
        display: none !important;
    }

    body.fin-app.pagina-dashboard .linha-lancamento-final{
        grid-template-columns:
            58px
            minmax(130px, 1fr)
            minmax(130px, 1fr)
            85px !important;
        grid-template-areas:
            "data lancamento categoria status"
            "data valor acoes dias" !important;
        row-gap: 8px !important;
    }

    body.fin-app.pagina-dashboard .data-lancamento-final{
        grid-area: data !important;
    }

    body.fin-app.pagina-dashboard .coluna-principal-final:not(.categoria-final){
        grid-area: lancamento !important;
    }

    body.fin-app.pagina-dashboard .categoria-final{
        grid-area: categoria !important;
    }

    body.fin-app.pagina-dashboard .status-final{
        grid-area: status !important;
    }

    body.fin-app.pagina-dashboard .valor-final{
        grid-area: valor !important;
        text-align: left !important;
    }

    body.fin-app.pagina-dashboard .acoes-final{
        grid-area: acoes !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }

    body.fin-app.pagina-dashboard .dias-final{
        grid-area: dias !important;
    }

    body.fin-app.pagina-dashboard .botao-pagar-final,
body.fin-app.pagina-dashboard .botao-editar-final,
body.fin-app.pagina-dashboard .botao-cancelar-final{
        width: auto !important;
        min-width: 72px !important;
    }
}


/* --- bloco 3 originalmente inline em dashboard.php --- */

/* =========================================================
AJUSTE MOBILE FINAL - DASHBOARD
========================================================= */

@media (max-width: 900px) {

    html:has(body.fin-app.pagina-dashboard),
body.fin-app.pagina-dashboard{
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body.fin-app.pagina-dashboard .conteudo,
body.fin-app.pagina-dashboard .conteudo.dashboard-financeiro{
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        padding: 72px 14px 35px !important;
        box-sizing: border-box !important;
    }

    body.fin-app.pagina-dashboard .dashboard-financeiro,
body.fin-app.pagina-dashboard .dashboard-financeiro *{
        box-sizing: border-box;
    }

    body.fin-app.pagina-dashboard .painel-dashboard,
body.fin-app.pagina-dashboard .painel-vencimentos,
body.fin-app.pagina-dashboard .lista-vencimentos-dashboard,
body.fin-app.pagina-dashboard .grade-faturas-dashboard,
body.fin-app.pagina-dashboard .grade-contas-dashboard{
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body.fin-app.pagina-dashboard .painel-dashboard{
        padding: 16px !important;
        border-radius: 12px !important;
    }

    body.fin-app.pagina-dashboard .painel-dashboard-cabecalho{
        align-items: flex-start !important;
        gap: 12px !important;
    }

    body.fin-app.pagina-dashboard .painel-dashboard-cabecalho h2{
        font-size: 21px !important;
        line-height: 1.15 !important;
    }

    body.fin-app.pagina-dashboard .painel-dashboard-cabecalho p{
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    body.fin-app.pagina-dashboard .painel-dashboard-cabecalho .link-dashboard{
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 115px !important;
        text-align: center !important;
    }

    /* cabeçalho da tabela não aparece no celular */
    body.fin-app.pagina-dashboard .cabecalho-lancamentos-dashboard{
        display: none !important;
    }

    /* cada lançamento vira um card vertical limpo */
    body.fin-app.pagina-dashboard .linha-lancamento-final{
        display: grid !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        grid-template-columns: 74px minmax(0, 1fr) !important;
        grid-template-areas:
            "data lancamento"
            "data categoria"
            "data status"
            "data valor"
            "data acoes"
            "data dias" !important;

        gap: 9px 14px !important;
        align-items: start !important;

        min-height: 0 !important;
        margin-bottom: 12px !important;
        padding: 14px !important;

        border: 1px solid var(--border) !important;
        border-radius: 11px !important;
        background: var(--bg-card) !important;

        overflow: hidden !important;
    }

    body.fin-app.pagina-dashboard .data-lancamento-final{
        grid-area: data !important;
        width: 64px !important;
        min-height: 90px !important;
        align-self: stretch !important;
        justify-self: start !important;
    }

    body.fin-app.pagina-dashboard .data-lancamento-final strong{
        font-size: 25px !important;
    }

    body.fin-app.pagina-dashboard .data-lancamento-final span{
        font-size: 11px !important;
    }

    body.fin-app.pagina-dashboard .coluna-principal-final:not(.categoria-final){
        grid-area: lancamento !important;
    }

    body.fin-app.pagina-dashboard .categoria-final{
        grid-area: categoria !important;
    }

    body.fin-app.pagina-dashboard .coluna-principal-final{
        gap: 4px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body.fin-app.pagina-dashboard .coluna-principal-final strong{
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        white-space: normal !important;
        text-overflow: clip !important;

        color: var(--primary) !important;
        font-size: 15px !important;
        line-height: 1.25 !important;
    }

    body.fin-app.pagina-dashboard .coluna-principal-final span{
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        white-space: normal !important;
        text-overflow: clip !important;

        color: var(--text) !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    body.fin-app.pagina-dashboard .status-final{
        grid-area: status !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }

    body.fin-app.pagina-dashboard .status-final .badge-status{
        width: auto !important;
        min-width: 92px !important;
        max-width: 100% !important;
        padding: 6px 12px !important;
        font-size: 11px !important;
    }

    body.fin-app.pagina-dashboard .valor-final{
        grid-area: valor !important;
        width: 100% !important;
        min-width: 0 !important;
        text-align: left !important;
    }

    body.fin-app.pagina-dashboard .valor-final strong{
        font-size: 17px !important;
    }

    body.fin-app.pagina-dashboard .acoes-final{
        grid-area: acoes !important;

        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;

        width: 100% !important;
        min-width: 0 !important;
        justify-content: stretch !important;
    }

    body.fin-app.pagina-dashboard .botao-pagar-final,
body.fin-app.pagina-dashboard .botao-editar-final,
body.fin-app.pagina-dashboard .botao-cancelar-final{
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 38px !important;
        height: auto !important;
        padding: 7px 8px !important;

        font-size: 11px !important;
        line-height: 1.15 !important;

        box-sizing: border-box !important;
    }

    /* se estiver pago: editar + cancelar lado a lado */
    body.fin-app.pagina-dashboard .botao-cancelar-final{
        grid-column: auto !important;
        grid-row: auto !important;
    }

    body.fin-app.pagina-dashboard .dias-final{
        grid-area: dias !important;

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

        align-items: flex-start !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    body.fin-app.pagina-dashboard .dias-vencido-numero,
body.fin-app.pagina-dashboard .dias-falta-numero{
        font-size: 21px !important;
    }

    /* cartões superiores - 2 por linha no celular */
    body.fin-app.pagina-dashboard .cards-dashboard{
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
    }

    body.fin-app.pagina-dashboard .card-dashboard{
        width: 100% !important;
        min-width: 0 !important;
        min-height: 124px !important;
        padding: 12px !important;
        box-sizing: border-box !important;
    }

    body.fin-app.pagina-dashboard .card-dashboard-titulo{
        min-height: 23px !important;
        margin-bottom: 4px !important;
        font-size: 10px !important;
        line-height: 1.12 !important;
    }

    body.fin-app.pagina-dashboard .card-dashboard-valor{
        margin-bottom: 6px !important;
        font-size: 18px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    body.fin-app.pagina-dashboard .card-dashboard-periodo{
        font-size: 9px !important;
        line-height: 1.25 !important;
    }

    body.fin-app.pagina-dashboard .mini-indicador-investimento{
        margin-top: 7px !important;
        padding-top: 7px !important;
        gap: 5px !important;
    }

    body.fin-app.pagina-dashboard .mini-indicador-investimento span{
        font-size: 8px !important;
    }

    body.fin-app.pagina-dashboard .mini-indicador-investimento strong{
        font-size: 10px !important;
    }

    /* faturas */
    body.fin-app.pagina-dashboard .grade-faturas-dashboard{
        grid-template-columns: 1fr !important;
    }

    body.fin-app.pagina-dashboard .fatura-dashboard{
        width: 100% !important;
        min-width: 0 !important;
    }

    body.fin-app.pagina-dashboard .fatura-dashboard-acoes{
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    body.fin-app.pagina-dashboard .fatura-dashboard-acoes button{
        width: 100% !important;
    }

    /* bancos */
    body.fin-app.pagina-dashboard .grade-contas-dashboard{
        grid-template-columns: 1fr !important;
    }

    body.fin-app.pagina-dashboard .conta-dashboard{
        width: 100% !important;
        min-width: 0 !important;
    }

    body.fin-app.pagina-dashboard .acoes-contas-dashboard{
        justify-content: stretch !important;
    }

    body.fin-app.pagina-dashboard .acoes-contas-dashboard .link-dashboard,
body.fin-app.pagina-dashboard .acoes-contas-dashboard a,
body.fin-app.pagina-dashboard .acoes-contas-dashboard button{
        width: 100% !important;
        max-width: none !important;
    }

    /* modais */
    body.fin-app.pagina-dashboard .modal-dashboard{
        padding: 12px !important;
    }

    body.fin-app.pagina-dashboard .modal-dashboard-conteudo,
body.fin-app.pagina-dashboard .modal-fatura-conteudo{
        width: 100% !important;
        max-width: 100% !important;
    }
}


@media (max-width: 480px) {

    body.fin-app.pagina-dashboard .conteudo,
body.fin-app.pagina-dashboard .conteudo.dashboard-financeiro{
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    body.fin-app.pagina-dashboard .painel-dashboard{
        padding: 13px !important;
    }

    body.fin-app.pagina-dashboard .painel-dashboard-cabecalho{
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    body.fin-app.pagina-dashboard .painel-dashboard-cabecalho h2{
        font-size: 20px !important;
    }

    body.fin-app.pagina-dashboard .painel-dashboard-cabecalho .link-dashboard{
        min-width: 105px !important;
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    body.fin-app.pagina-dashboard .linha-lancamento-final{
        grid-template-columns: 66px minmax(0, 1fr) !important;
        gap: 8px 11px !important;
        padding: 12px !important;
    }

    body.fin-app.pagina-dashboard .data-lancamento-final{
        width: 58px !important;
        min-height: 84px !important;
    }

    body.fin-app.pagina-dashboard .acoes-final{
        grid-template-columns: 1fr !important;
    }

    body.fin-app.pagina-dashboard .botao-pagar-final,
body.fin-app.pagina-dashboard .botao-editar-final,
body.fin-app.pagina-dashboard .botao-cancelar-final{
        min-height: 40px !important;
    }
}


/* --- bloco 4 originalmente inline em dashboard.php --- */

body.fin-app.pagina-dashboard .investimentos-dashboard-resumo{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}
body.fin-app.pagina-dashboard .investimentos-dashboard-resumo>div{
    padding:15px;
    background:var(--bg-card,#1a1d33);
    border:1px solid var(--border,#35395c);
    border-radius:9px;
}
body.fin-app.pagina-dashboard .investimentos-dashboard-resumo span{
    display:block;
    color:var(--text-light,#bfc6ff);
    font-size:11px;
}
body.fin-app.pagina-dashboard .investimentos-dashboard-resumo strong{
    display:block;
    margin-top:7px;
    color:var(--primary,#00e5ff);
    font-size:20px;
}
body.fin-app.pagina-dashboard .saldo-conta-positivo{color:var(--primary,#00e5ff)!important;font-weight:700}
body.fin-app.pagina-dashboard .saldo-conta-negativo,
body.fin-app.pagina-dashboard .saldo-invest-negativo{color:#ff4d4d!important;font-weight:700}
@media(max-width:620px){
    body.fin-app.pagina-dashboard .investimentos-dashboard-resumo{grid-template-columns:1fr}
}


/* --- bloco 5 originalmente inline em dashboard.php --- */

/* =========================================================
   BOTÃO EXCLUIR - DASHBOARD / FATURA
========================================================= */

body.fin-app.pagina-dashboard .botao-excluir-final{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 6px !important;

    background: transparent !important;

    border: 1px solid #ff4d4d !important;
    border-radius: 7px !important;

    color: #ff4d4d !important;

    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: bold !important;

    cursor: pointer !important;
}

body.fin-app.pagina-dashboard .botao-excluir-final:hover{
    background: rgba(255, 77, 77, .08) !important;
}

@media (max-width: 900px) {

    body.fin-app.pagina-dashboard .botao-excluir-final{
        min-height: 38px !important;
        font-size: 11px !important;
    }
}


/* --- bloco 6 originalmente inline em dashboard.php --- */

body.fin-app.pagina-dashboard .seletor-tipo-lancamentos-dashboard{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-width: 430px;
    margin: 0 0 18px;
    padding: 5px;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: 10px;
}

body.fin-app.pagina-dashboard .tipo-lista-dashboard{
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: var(--text-light);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

body.fin-app.pagina-dashboard .tipo-lista-dashboard:hover{
    background: var(--bg-hover);
    color: var(--primary);
}

body.fin-app.pagina-dashboard .tipo-lista-dashboard.ativo{
    background: rgba(255, 107, 107, .08);
    border-color: rgba(255, 107, 107, .42);
    color: #ff6b6b;
}

body.fin-app.pagina-dashboard .tipo-lista-dashboard.ativo.receita{
    background: rgba(0, 255, 179, .07);
    border-color: rgba(0, 255, 179, .38);
    color: var(--success);
}

body.fin-app.pagina-dashboard .botao-receber-final{
    border-color: var(--success) !important;
    color: var(--success) !important;
}

@media (max-width: 620px) {
    body.fin-app.pagina-dashboard .seletor-tipo-lancamentos-dashboard{
        width: 100%;
        max-width: none;
    }
}


/* --- bloco 7 originalmente inline em dashboard.php --- */

body.fin-app.pagina-dashboard .mini-indicador-investimento{
    margin-top:10px;
    padding-top:9px;
    border-top:1px solid var(--border);

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

body.fin-app.pagina-dashboard .mini-indicador-investimento span{
    color:var(--text-light);
    font-size:10px;
    line-height:1;
    text-transform:uppercase;
}

body.fin-app.pagina-dashboard .mini-indicador-investimento strong{
    color:var(--success);
    font-size:13px;
    line-height:1;
    white-space:nowrap;
}


/* --- bloco 8 originalmente inline em dashboard.php --- */

/* =========================================================
   DASHBOARD - RESUMO FINAL / RODAPÉ V131
   Mantém o layout mesmo se o theme.css estiver em cache
   ou não possuir as classes desta versão.
========================================================= */

body.fin-app.pagina-dashboard .dashboard-resumo-final{
    width: 100% !important;

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

    gap: 14px !important;

    margin-top: 18px !important;
    margin-bottom: 22px !important;

    box-sizing: border-box !important;
}

body.fin-app.pagina-dashboard .dashboard-resumo-final-card{
    min-width: 0 !important;
    min-height: 164px !important;

    padding: 18px !important;

    background: var(--bg-card, #1a1d33) !important;

    border:
        1px solid
        var(--border, #35395c) !important;

    border-radius: 12px !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
}

body.fin-app.pagina-dashboard .dashboard-resumo-final-titulo{
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;

    margin-bottom: 17px !important;
}

body.fin-app.pagina-dashboard .dashboard-resumo-final-titulo strong{
    color: var(--text, #ffffff) !important;

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

    text-transform: uppercase !important;
}

body.fin-app.pagina-dashboard .dashboard-resumo-final-icone{
    color: var(--primary, #00e5ff) !important;
    font-size: 17px !important;
}

body.fin-app.pagina-dashboard .dashboard-resumo-categoria-conteudo,
body.fin-app.pagina-dashboard .dashboard-resumo-vazio{
    min-width: 0 !important;

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

body.fin-app.pagina-dashboard .dashboard-resumo-categoria-conteudo > div:last-child{
    min-width: 0 !important;
}

body.fin-app.pagina-dashboard .dashboard-resumo-categoria-conteudo small,
body.fin-app.pagina-dashboard .dashboard-resumo-contas-conteudo small{
    display: block !important;

    margin-bottom: 5px !important;

    color: var(--text-light, #bfc6ff) !important;

    font-size: 10px !important;
    line-height: 1.25 !important;
}

body.fin-app.pagina-dashboard .dashboard-resumo-categoria-conteudo strong{
    display: inline-block !important;

    max-width: 100% !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;

    color: var(--text, #ffffff) !important;

    font-size: 15px !important;
    font-weight: 900 !important;
}

body.fin-app.pagina-dashboard .dashboard-resumo-categoria-conteudo .valor-despesa{
    display: inline-block !important;

    margin-left: 5px !important;

    color: #ff5b68 !important;

    font-size: 14px !important;
    font-weight: 900 !important;
}

body.fin-app.pagina-dashboard .dashboard-resumo-donut{
    flex: 0 0 68px !important;

    width: 68px !important;
    height: 68px !important;

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

    border: 11px solid
        var(--primary, #00e5ff) !important;

    border-radius: 50% !important;

    box-sizing: border-box !important;

    opacity: .78 !important;
}

body.fin-app.pagina-dashboard .dashboard-resumo-donut.vazio{
    border-color:
        var(--border, #35395c) !important;

    opacity: .58 !important;
}

body.fin-app.pagina-dashboard .dashboard-resumo-vazio{
    min-height: 82px !important;

    color:
        var(--text-light, #bfc6ff) !important;

    font-size: 11px !important;
}

body.fin-app.pagina-dashboard .dashboard-resumo-contas-conteudo{
    display: grid !important;
    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 10px !important;
}

body.fin-app.pagina-dashboard .dashboard-resumo-contas-conteudo > div{
    min-width: 0 !important;

    padding: 13px !important;

    background:
        rgba(15,17,32,.42) !important;

    border:
        1px solid
        var(--border, #35395c) !important;

    border-radius: 9px !important;
}

body.fin-app.pagina-dashboard .dashboard-resumo-contas-conteudo strong{
    display: block !important;

    margin-top: 3px !important;

    color: var(--text, #ffffff) !important;

    font-size: 17px !important;
    font-weight: 900 !important;
}

body.fin-app.pagina-dashboard .dashboard-resumo-contas-conteudo .valor-despesa{
    color: #ff5b68 !important;
}

body.fin-app.pagina-dashboard .dashboard-resumo-contas-conteudo .valor-receita{
    color: var(--success, #00ffb3) !important;
}

body.fin-app.pagina-dashboard .dashboard-resumo-banco-vazio{
    font-size: 27px !important;
    opacity: .72 !important;
}


@media(max-width: 900px) {

    body.fin-app.pagina-dashboard .dashboard-resumo-final{
        grid-template-columns:
            1fr !important;
    }
}


@media(max-width: 620px) {

    body.fin-app.pagina-dashboard .dashboard-resumo-final{
        gap: 10px !important;

        margin-top: 12px !important;
    }

    body.fin-app.pagina-dashboard .dashboard-resumo-final-card{
        min-height: 0 !important;

        padding: 14px !important;
    }

    body.fin-app.pagina-dashboard .dashboard-resumo-final-titulo{
        margin-bottom: 12px !important;
    }

    body.fin-app.pagina-dashboard .dashboard-resumo-final-titulo strong{
        font-size: 11px !important;
    }

    body.fin-app.pagina-dashboard .dashboard-resumo-categoria-conteudo{
        gap: 10px !important;
    }

    body.fin-app.pagina-dashboard .dashboard-resumo-donut{
        flex-basis: 50px !important;

        width: 50px !important;
        height: 50px !important;

        border-width: 8px !important;
    }

    body.fin-app.pagina-dashboard .dashboard-resumo-categoria-conteudo strong,
body.fin-app.pagina-dashboard .dashboard-resumo-categoria-conteudo .valor-despesa{
        font-size: 12px !important;
    }

    body.fin-app.pagina-dashboard .dashboard-resumo-contas-conteudo{
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }
}


/* --- bloco 9 originalmente inline em dashboard.php --- */

/* =========================================================
   DASHBOARD - EXPERIÊNCIA DE NOVO USUÁRIO V2
   O modo EXEMPLO não depende do CSS temporário do Tour.
========================================================= */

body.fin-app.pagina-dashboard .dashboard-exemplo-aviso{
    width: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;

    margin: 14px 0 18px !important;
    padding: 14px 16px !important;

    box-sizing: border-box !important;

    border: 1px solid rgba(0,229,255,.34) !important;
    border-radius: 12px !important;

    background:
        linear-gradient(
            135deg,
            rgba(0,229,255,.075),
            rgba(26,29,51,.94)
        ) !important;

    box-shadow:
        0 14px 34px rgba(0,0,0,.18) !important;
}

body.fin-app.pagina-dashboard .dashboard-exemplo-aviso > div{
    min-width: 0 !important;
}

body.fin-app.pagina-dashboard .dashboard-exemplo-aviso strong{
    display: block !important;

    margin: 0 0 5px !important;

    color: var(--primary, #00e5ff) !important;

    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.3 !important;
}

body.fin-app.pagina-dashboard .dashboard-exemplo-aviso span{
    display: block !important;

    max-width: 860px !important;

    color: var(--text-light, #bfc6ff) !important;

    font-size: 11px !important;
    line-height: 1.48 !important;
}


/* BOTÃO FECHAR DO MODO EXEMPLO */
body.fin-app.pagina-dashboard .dashboard-exemplo-fechar{
    flex: 0 0 auto !important;

    min-width: 92px !important;
    min-height: 40px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;

    padding: 0 12px !important;

    border: 2px solid #ff5b68 !important;
    border-radius: 9px !important;

    background: rgba(255,91,104,.09) !important;
    color: #ff7b86 !important;

    font-family: inherit !important;
    font-weight: 900 !important;

    cursor: pointer !important;

    box-shadow:
        0 0 0 1px rgba(255,91,104,.10) !important;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease !important;
}

body.fin-app.pagina-dashboard .dashboard-exemplo-fechar span{
    display: inline !important;

    margin: 0 !important;

    color: inherit !important;

    font-size: 19px !important;
    line-height: 1 !important;
}

body.fin-app.pagina-dashboard .dashboard-exemplo-fechar small{
    display: inline !important;

    margin: 0 !important;

    color: inherit !important;

    font-size: 9px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

body.fin-app.pagina-dashboard .dashboard-exemplo-fechar:hover{
    background: rgba(255,91,104,.21) !important;
    border-color: #ff8992 !important;
    color: #ffffff !important;
}


/* =========================================================
   CARDS DEMONSTRATIVOS
========================================================= */

body.fin-app.pagina-dashboard .card-dashboard-exemplo{
    position: relative !important;

    overflow: hidden !important;

    border-color:
        rgba(0,229,255,.30) !important;

    background:
        linear-gradient(
            145deg,
            rgba(0,229,255,.035),
            var(--bg-card, #1a1d33) 42%
        ) !important;
}

body.fin-app.pagina-dashboard .card-dashboard-exemplo::after{
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    pointer-events: none !important;

    border-radius: inherit !important;

    box-shadow:
        inset 0 0 28px rgba(0,229,255,.025) !important;
}

body.fin-app.pagina-dashboard .dashboard-exemplo-badge{
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 2 !important;

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

    min-height: 22px !important;

    padding: 0 7px !important;

    border: 1px solid rgba(0,229,255,.42) !important;
    border-radius: 999px !important;

    background: rgba(0,229,255,.08) !important;
    color: var(--primary, #00e5ff) !important;

    font-size: 8px !important;
    font-weight: 900 !important;
    letter-spacing: .35px !important;
}


/* =========================================================
   EXEMPLOS DE LANÇAMENTO
========================================================= */

body.fin-app.pagina-dashboard .dashboard-exemplo-lancamentos{
    display: grid !important;
    gap: 9px !important;

    padding: 3px 0 !important;
}

body.fin-app.pagina-dashboard .dashboard-exemplo-lancamento{
    display: grid !important;

    grid-template-columns:
        76px
        minmax(150px, 1.4fr)
        minmax(130px, 1fr)
        92px
        110px !important;

    align-items: center !important;
    gap: 12px !important;

    min-height: 66px !important;

    padding: 10px 12px !important;

    border: 1px solid var(--border, #35395c) !important;
    border-radius: 9px !important;

    background: rgba(15,17,32,.34) !important;

    color: var(--text, #ffffff) !important;

    box-sizing: border-box !important;
}

body.fin-app.pagina-dashboard .dashboard-exemplo-lancamento > *{
    min-width: 0 !important;
}

body.fin-app.pagina-dashboard .dashboard-exemplo-lancamento strong{
    color: var(--primary, #00e5ff) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}

body.fin-app.pagina-dashboard .dashboard-exemplo-lancamento span,
body.fin-app.pagina-dashboard .dashboard-exemplo-lancamento small{
    color: var(--text-light, #bfc6ff) !important;
    font-size: 9px !important;
    line-height: 1.35 !important;
}


/* =========================================================
   MOBILE - NOVO USUÁRIO
========================================================= */

@media(max-width: 720px) {

    body.fin-app.pagina-dashboard .dashboard-exemplo-aviso{
        align-items: stretch !important;
        flex-direction: column !important;

        gap: 11px !important;

        padding: 13px !important;
    }

    body.fin-app.pagina-dashboard .dashboard-exemplo-aviso strong{
        font-size: 15px !important;
    }

    body.fin-app.pagina-dashboard .dashboard-exemplo-aviso span{
        font-size: 12px !important;
    }

    body.fin-app.pagina-dashboard .dashboard-exemplo-fechar{
        width: 100% !important;
        min-height: 46px !important;
    }

    body.fin-app.pagina-dashboard .dashboard-exemplo-fechar small{
        font-size: 11px !important;
    }

    body.fin-app.pagina-dashboard .dashboard-exemplo-lancamento{
        grid-template-columns:
            62px
            minmax(0, 1fr) !important;

        gap: 8px 10px !important;

        padding: 11px !important;
    }

    body.fin-app.pagina-dashboard .dashboard-exemplo-lancamento > *:nth-child(n/**/+3){
        grid-column: 2 !important;
    }

    body.fin-app.pagina-dashboard .dashboard-exemplo-badge{
        top: 8px !important;
        right: 8px !important;
    }
}


/* --- bloco 10 originalmente inline em dashboard.php --- */


body.fin-app.pagina-dashboard #dashboardGraficos{
    margin-top: 18px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-card);
}

body.fin-app.pagina-dashboard .dashboard-graficos-topo{
    margin-bottom: 16px;
}

body.fin-app.pagina-dashboard .dashboard-graficos-topo h2{
    margin: 0 0 4px;
    color: var(--text);
    font-size: 17px;
}

body.fin-app.pagina-dashboard .dashboard-graficos-topo p{
    margin: 0;
    color: var(--text-light);
    font-size: 10px;
    line-height: 1.45;
}

body.fin-app.pagina-dashboard .dashboard-graficos-grade{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

body.fin-app.pagina-dashboard .dashboard-grafico-card{
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: rgba(255,255,255,.015);
}

body.fin-app.pagina-dashboard .dashboard-grafico-card h3{
    margin: 0;
    color: var(--text);
    font-size: 12px;
}

body.fin-app.pagina-dashboard .dashboard-grafico-card > p{
    margin: 4px 0 13px;
    color: var(--text-light);
    font-size: 9px;
    line-height: 1.4;
}

body.fin-app.pagina-dashboard .dashboard-grafico-corpo{
    display: flex;
    align-items: center;
    gap: 15px;
}

body.fin-app.pagina-dashboard .dashboard-donut{
    width: 132px;
    height: 132px;
    flex: 0 0 132px;
    position: relative;
    border-radius: 50%;
    background: var(--grafico);
}

body.fin-app.pagina-dashboard .dashboard-donut::after{
    content: "";
    position: absolute;
    inset: 26px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,.04);
}

body.fin-app.pagina-dashboard .dashboard-donut-centro{
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-align: center;
}

body.fin-app.pagina-dashboard .dashboard-donut-centro small{
    color: var(--text-light);
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

body.fin-app.pagina-dashboard .dashboard-donut-centro strong{
    margin-top: 3px;
    color: var(--text);
    font-size: 13px;
}

body.fin-app.pagina-dashboard .dashboard-grafico-legenda{
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

body.fin-app.pagina-dashboard .dashboard-legenda-item{
    display: grid;
    grid-template-columns: 9px minmax(0,1fr) auto;
    align-items: center;
    gap: 6px;
}

body.fin-app.pagina-dashboard .dashboard-legenda-cor{
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

body.fin-app.pagina-dashboard .dashboard-legenda-nome{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-light);
    font-size: 9px;
}

body.fin-app.pagina-dashboard .dashboard-legenda-valor{
    color: var(--text);
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

body.fin-app.pagina-dashboard .dashboard-grafico-vazio{
    min-height: 132px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    font-size: 10px;
    text-align: center;
}

body.fin-app.pagina-dashboard .dashboard-donut-geral{
    width: 154px;
    height: 154px;
    flex-basis: 154px;
}

body.fin-app.pagina-dashboard .dashboard-donut-geral::after{
    inset: 31px;
}

body.fin-app.pagina-dashboard .dashboard-comparacao{
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.fin-app.pagina-dashboard .dashboard-comparacao-item{
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
}

body.fin-app.pagina-dashboard .dashboard-comparacao-item span,
body.fin-app.pagina-dashboard .dashboard-comparacao-item strong,
body.fin-app.pagina-dashboard .dashboard-comparacao-item small{
    display: block;
}

body.fin-app.pagina-dashboard .dashboard-comparacao-item span{
    color: var(--text-light);
    font-size: 8px;
    text-transform: uppercase;
}

body.fin-app.pagina-dashboard .dashboard-comparacao-item strong{
    margin-top: 3px;
    font-size: 12px;
}

body.fin-app.pagina-dashboard .dashboard-comparacao-item small{
    margin-top: 2px;
    color: var(--text-light);
    font-size: 8px;
}

@media (max-width: 1050px) {
    body.fin-app.pagina-dashboard .dashboard-graficos-grade{
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {

    body.fin-app.pagina-dashboard #dashboardGraficos{
        margin-top: 12px;
        padding: 12px;
        border-radius: 10px;
    }

    body.fin-app.pagina-dashboard .dashboard-grafico-card{
        padding: 12px;
    }

    body.fin-app.pagina-dashboard .dashboard-grafico-corpo{
        gap: 11px;
    }

    body.fin-app.pagina-dashboard .dashboard-donut{
        width: 112px;
        height: 112px;
        flex-basis: 112px;
    }

    body.fin-app.pagina-dashboard .dashboard-donut::after{
        inset: 22px;
    }

    body.fin-app.pagina-dashboard .dashboard-donut-geral{
        width: 122px;
        height: 122px;
        flex-basis: 122px;
    }

    body.fin-app.pagina-dashboard .dashboard-donut-geral::after{
        inset: 24px;
    }

    body.fin-app.pagina-dashboard .dashboard-legenda-nome,
body.fin-app.pagina-dashboard .dashboard-legenda-valor{
        font-size: 8px;
    }
}



/* --- bloco 11 originalmente inline em dashboard.php --- */

/* =========================================================
   FINCONTROLE - ANÁLISE VISUAL V6
========================================================= */

body.fin-app.pagina-dashboard #dashboardGraficos{
    padding:18px!important;
    overflow:visible!important;
}

body.fin-app.pagina-dashboard .dashboard-graficos-grade{
    grid-template-columns:minmax(0,1.15fr) minmax(0,1.15fr) minmax(280px,.9fr)!important;
    gap:12px!important;
}

body.fin-app.pagina-dashboard .dashboard-grafico-card{
    overflow:visible!important;
}

body.fin-app.pagina-dashboard .dashboard-grafico-categorias .dashboard-grafico-corpo{
    display:grid!important;
    grid-template-columns:minmax(125px,145px) minmax(0,1fr)!important;
    align-items:center!important;
    gap:14px!important;
}

body.fin-app.pagina-dashboard .dashboard-grafico-categorias .dashboard-donut{
    width:145px!important;
    height:145px!important;
    flex-basis:145px!important;
    justify-self:center;
}

body.fin-app.pagina-dashboard .dashboard-grafico-categorias .dashboard-donut::after{
    inset:29px!important;
}

body.fin-app.pagina-dashboard .dashboard-grafico-legenda{
    gap:2px!important;
}

body.fin-app.pagina-dashboard .dashboard-legenda-item{
    grid-template-columns:9px minmax(0,1fr) auto auto!important;
    gap:6px!important;
    min-height:30px;
    padding:5px 4px!important;
    border-bottom:1px solid rgba(53,57,92,.48);
    border-radius:5px;
    cursor:pointer;
}

body.fin-app.pagina-dashboard .dashboard-legenda-item:last-child{
    border-bottom:0;
}

body.fin-app.pagina-dashboard .dashboard-legenda-item:hover,
body.fin-app.pagina-dashboard .dashboard-legenda-item:focus-visible{
    background:rgba(0,229,255,.045);
    outline:none;
}

body.fin-app.pagina-dashboard .dashboard-legenda-nome{
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    line-height:1.18!important;
    font-size:9px!important;
}

body.fin-app.pagina-dashboard .dashboard-legenda-valor{
    font-size:9px!important;
}

body.fin-app.pagina-dashboard .dashboard-legenda-percentual{
    min-width:37px;
    text-align:right;
    font-size:9px;
    font-weight:900;
    color:var(--primary);
}

body.fin-app.pagina-dashboard .dashboard-grafico-comparativo .dashboard-grafico-corpo{
    display:grid!important;
    grid-template-columns:1fr!important;
    justify-items:center;
    gap:12px!important;
}

body.fin-app.pagina-dashboard .dashboard-grafico-comparativo .dashboard-comparacao{
    width:100%;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
}

body.fin-app.pagina-dashboard .dashboard-grafico-comparativo .dashboard-comparacao-item{
    min-width:0;
}

body.fin-app.pagina-dashboard .dashboard-donut{
    cursor:crosshair;
    transition:transform .16s ease,filter .16s ease;
}

body.fin-app.pagina-dashboard .dashboard-donut:hover{
    transform:scale(1.015);
    filter:brightness(1.04);
}

body.fin-app.pagina-dashboard .dashboard-donut-subtexto{
    width:78px;
    margin-top:2px!important;
    font-size:7px!important;
    line-height:1.25!important;
    text-transform:none!important;
}

body.fin-app.pagina-dashboard .dashboard-graficos-explicacao{
    margin-top:12px;
    padding:10px 12px;
    display:flex;
    align-items:flex-start;
    gap:9px;
    border:1px solid rgba(0,229,255,.24);
    border-radius:9px;
    background:rgba(0,229,255,.035);
}

body.fin-app.pagina-dashboard .dashboard-graficos-explicacao-icone{
    width:24px;
    height:24px;
    flex:0 0 24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(0,229,255,.36);
    border-radius:50%;
    color:var(--primary);
    font-size:11px;
    font-weight:900;
}

body.fin-app.pagina-dashboard .dashboard-graficos-explicacao p{
    margin:0;
    color:var(--text-light);
    font-size:9px;
    line-height:1.55;
}

body.fin-app.pagina-dashboard .dashboard-graficos-explicacao strong{
    font-weight:900;
}

body.fin-app.pagina-dashboard .dashboard-grafico-tooltip-v6{
    position:fixed;
    z-index:30000;
    min-width:165px;
    max-width:min(260px,calc(100vw - 18px));
    padding:10px 12px;
    border:1px solid rgba(0,229,255,.45);
    border-radius:9px;
    background:#101426;
    box-shadow:0 14px 34px rgba(0,0,0,.42);
    color:var(--text);
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    transform:translateY(4px);
    transition:opacity .12s ease,transform .12s ease,visibility .12s ease;
}

body.fin-app.pagina-dashboard .dashboard-grafico-tooltip-v6.ativo{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

body.fin-app.pagina-dashboard .dashboard-grafico-tooltip-v6 .tip-topo{
    display:flex;
    align-items:center;
    gap:7px;
}

body.fin-app.pagina-dashboard .dashboard-grafico-tooltip-v6 .tip-cor{
    width:9px;
    height:9px;
    flex:0 0 9px;
    border-radius:50%;
}

body.fin-app.pagina-dashboard .dashboard-grafico-tooltip-v6 .tip-nome{
    font-size:11px;
    font-weight:900;
}

body.fin-app.pagina-dashboard .dashboard-grafico-tooltip-v6 .tip-valor{
    display:block;
    margin-top:6px;
    color:var(--primary);
    font-size:14px;
    font-weight:900;
}

body.fin-app.pagina-dashboard .dashboard-grafico-tooltip-v6 .tip-pct{
    display:block;
    margin-top:3px;
    color:var(--text-light);
    font-size:9px;
}

@media(max-width:1180px){
    body.fin-app.pagina-dashboard .dashboard-graficos-grade{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }

    body.fin-app.pagina-dashboard .dashboard-grafico-comparativo{
        grid-column:1/-1;
    }

    body.fin-app.pagina-dashboard .dashboard-grafico-comparativo .dashboard-grafico-corpo{
        grid-template-columns:auto minmax(260px,420px)!important;
    }
}

@media(max-width:760px){
    body.fin-app.pagina-dashboard #dashboardGraficos{
        padding:12px!important;
    }

    body.fin-app.pagina-dashboard .dashboard-graficos-grade{
        grid-template-columns:1fr!important;
    }

    body.fin-app.pagina-dashboard .dashboard-grafico-comparativo{
        grid-column:auto;
    }

    body.fin-app.pagina-dashboard .dashboard-grafico-categorias .dashboard-grafico-corpo,
body.fin-app.pagina-dashboard .dashboard-grafico-comparativo .dashboard-grafico-corpo{
        grid-template-columns:1fr!important;
    }

    body.fin-app.pagina-dashboard .dashboard-grafico-categorias .dashboard-donut{
        width:128px!important;
        height:128px!important;
        flex-basis:128px!important;
    }

    body.fin-app.pagina-dashboard .dashboard-grafico-categorias .dashboard-donut::after{
        inset:25px!important;
    }

    body.fin-app.pagina-dashboard .dashboard-legenda-item{
        grid-template-columns:9px minmax(0,1fr) auto auto!important;
    }

    body.fin-app.pagina-dashboard .dashboard-graficos-explicacao{
        flex-direction:row;
    }
}


/* --- bloco 12 originalmente inline em dashboard.php --- */

/* =========================================================
   FINCONTROLE - ANALISE VISUAL V6.2
   Correção definitiva de sobreposição das legendas
========================================================= */

/* Em larguras comuns de desktop/notebook, usa 2 colunas.
   O comparativo ocupa a largura inteira na linha seguinte. */
@media (min-width: 761px) and (max-width: 1399px) {

    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-graficos-grade{
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo{
        grid-column: 1 / -1 !important;
    }

    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-grafico-corpo{
        display: grid !important;
        grid-template-columns: auto minmax(280px, 420px) !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 24px !important;
    }
}

/* Só em telas realmente largas ficam 3 cards lado a lado. */
@media (min-width: 1400px) {

    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-graficos-grade{
        display: grid !important;
        grid-template-columns:
            minmax(0, 1.12fr)
            minmax(0, 1.12fr)
            minmax(300px, .90fr) !important;
        gap: 12px !important;
    }
}

/* Cards de categoria */
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias{
    min-width: 0 !important;
    overflow: visible !important;
}

/* Dentro de cada card, reserva largura real para gráfico e tabela. */
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias .dashboard-grafico-corpo{
    display: grid !important;
    grid-template-columns: 150px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 16px !important;
    min-width: 0 !important;
}

/* Donut menor e estável */
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias .dashboard-donut{
    width: 145px !important;
    height: 145px !important;
    min-width: 145px !important;
    max-width: 145px !important;
    flex: 0 0 145px !important;
    justify-self: center !important;
}

body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias .dashboard-donut::after{
    inset: 29px !important;
}

/* Legenda vira uma mini tabela limpa */
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-legenda{
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
}

body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-item{
    display: grid !important;
    grid-template-columns:
        9px
        minmax(88px, 1fr)
        minmax(70px, auto)
        42px !important;

    align-items: center !important;
    gap: 7px !important;

    min-width: 0 !important;
    min-height: 31px !important;

    padding: 5px 3px !important;

    border-bottom:
        1px solid
        rgba(53,57,92,.48) !important;

    border-radius: 0 !important;
}

body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-item:last-child{
    border-bottom: 0 !important;
}

body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-cor{
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
}

/* Categoria pode quebrar linha, mas nunca invade valor/percentual */
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-nome{
    display: block !important;

    min-width: 0 !important;
    max-width: 100% !important;

    overflow: hidden !important;

    color: var(--text-light) !important;

    font-size: 9px !important;
    line-height: 1.18 !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

/* Valor e percentual ficam em colunas próprias */
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-valor{
    display: block !important;

    min-width: 70px !important;

    color: var(--text) !important;

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

    text-align: right !important;
    white-space: nowrap !important;
}

body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-percentual{
    display: block !important;

    min-width: 42px !important;

    color: var(--primary) !important;

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

    text-align: right !important;
    white-space: nowrap !important;
}

/* Comparativo */
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-comparacao{
    width: 100% !important;
}

body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-donut-subtexto{
    width: 80px !important;
    margin-top: 2px !important;
    font-size: 7px !important;
    line-height: 1.2 !important;
    text-transform: none !important;
}

/* Faixa explicativa */
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-graficos-explicacao{
    position: relative !important;
    z-index: 1 !important;

    margin-top: 12px !important;

    clear: both !important;
}

/* Em telas menores, tudo fica em 1 coluna e a legenda abaixo do gráfico. */
@media (max-width: 760px) {

    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-graficos-grade{
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo{
        grid-column: auto !important;
    }

    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias .dashboard-grafico-corpo,
body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-comparativo .dashboard-grafico-corpo{
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 11px !important;
    }

    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias .dashboard-donut{
        width: 128px !important;
        height: 128px !important;
        min-width: 128px !important;
        max-width: 128px !important;
        flex-basis: 128px !important;
    }

    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias .dashboard-donut::after{
        inset: 25px !important;
    }

    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-item{
        grid-template-columns:
            9px
            minmax(0,1fr)
            auto
            40px !important;
    }

    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-legenda-valor{
        min-width: 0 !important;
    }
}

/* Em notebooks muito estreitos, não força gráfico e tabela lado a lado. */
@media (min-width: 761px) and (max-width: 1050px) {

    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias .dashboard-grafico-corpo{
        grid-template-columns: 1fr !important;
        gap: 11px !important;
    }

    body.fin-app.pagina-dashboard #dashboardGraficos .dashboard-grafico-categorias .dashboard-donut{
        justify-self: center !important;
    }
}


/* --- bloco 13 originalmente inline em dashboard.php --- */

body.fin-app.pagina-dashboard .fatura-dashboard-identidade{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}
body.fin-app.pagina-dashboard .fatura-dashboard-marca{
    width:72px;
    height:32px;
    flex:0 0 72px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:4px;
    border:1px solid var(--border);
    border-radius:7px;
    background:rgba(255,255,255,.025);
}
body.fin-app.pagina-dashboard .fatura-dashboard-marca{
    gap:5px;
}
body.fin-app.pagina-dashboard .fatura-dashboard-marca img{
    display:block;
    width:auto;
    height:auto;
    object-fit:contain;
}
body.fin-app.pagina-dashboard .fatura-dashboard-marca .fatura-logo-instituicao{
    max-width:38px;
    max-height:23px;
}
body.fin-app.pagina-dashboard .fatura-dashboard-marca .fatura-logo-bandeira{
    max-width:25px;
    max-height:17px;
}
body.fin-app.pagina-dashboard .fatura-dashboard-marca span{
    font-size:21px;
    line-height:1;
}
@media(max-width:620px){
    body.fin-app.pagina-dashboard .fatura-dashboard-marca{
        width:64px;
        height:29px;
        flex-basis:64px;
    }
    body.fin-app.pagina-dashboard .fatura-dashboard-marca .fatura-logo-instituicao{
        max-width:34px;
        max-height:21px;
    }
    body.fin-app.pagina-dashboard .fatura-dashboard-marca .fatura-logo-bandeira{
        max-width:22px;
        max-height:15px;
    }
}


/* --- bloco 14 originalmente inline em dashboard.php --- */


/* =========================================================
   FINCONTROLE - LOGOS DASHBOARD V2.2
========================================================= */

body.fin-app.pagina-dashboard .conta-dashboard-icone{
    width: 58px !important;
    height: 42px !important;
    min-width: 58px !important;

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

    padding: 5px !important;

    background: #ffffff !important;
    border: 1px solid rgba(255,255,255,.75) !important;
    border-radius: 8px !important;

    overflow: hidden !important;
}

body.fin-app.pagina-dashboard .conta-dashboard-icone img{
    display: block !important;

    max-width: 48px !important;
    max-height: 30px !important;

    width: auto !important;
    height: auto !important;

    object-fit: contain !important;
}

body.fin-app.pagina-dashboard .conta-dashboard-icone span{
    font-size: 21px !important;
    line-height: 1 !important;
}


/*
 * Fundo branco também nos logos do cartão.
 * Melhora bastante a leitura de logos escuros/coloridos.
 */
body.fin-app.pagina-dashboard .fatura-dashboard-marca{
    background: #ffffff !important;
    border-color: rgba(255,255,255,.78) !important;
}

body.fin-app.pagina-dashboard .fatura-dashboard-marca img{
    object-fit: contain !important;
}


/*
 * Mantém o texto do cartão fora da caixa branca.
 */
body.fin-app.pagina-dashboard .fatura-dashboard-identidade{
    align-items: center !important;
}


/* Mobile */
@media(max-width:620px) {

    body.fin-app.pagina-dashboard .conta-dashboard-icone{
        width: 54px !important;
        height: 39px !important;
        min-width: 54px !important;
    }

    body.fin-app.pagina-dashboard .conta-dashboard-icone img{
        max-width: 44px !important;
        max-height: 27px !important;
    }
}



/* --- bloco 15 originalmente inline em dashboard.php --- */

/* Logos quadrados 120x120 no Dashboard */
body.fin-app.pagina-dashboard .conta-dashboard-icone,
body.fin-app.pagina-dashboard .fatura-dashboard-marca{
    width:120px !important;
    height:120px !important;
    min-width:120px !important;
    flex:0 0 120px !important;
    box-sizing:border-box !important;
    padding:10px !important;
    background:#fff !important;
    border-radius:10px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    overflow:hidden !important;
}
body.fin-app.pagina-dashboard .conta-dashboard-icone img{
    max-width:100px !important;
    max-height:100px !important;
    width:auto !important;
    height:auto !important;
    object-fit:contain !important;
}
body.fin-app.pagina-dashboard .fatura-dashboard-marca .fatura-logo-instituicao{
    max-width:68px !important;
    max-height:92px !important;
    width:auto !important;
    height:auto !important;
}
body.fin-app.pagina-dashboard .fatura-dashboard-marca .fatura-logo-bandeira{
    max-width:32px !important;
    max-height:52px !important;
    width:auto !important;
    height:auto !important;
}
body.fin-app.pagina-dashboard .fatura-dashboard-identidade{
    display:grid !important;
    grid-template-columns:120px minmax(0,1fr) !important;
    gap:14px !important;
    align-items:start !important;
}
body.fin-app.pagina-dashboard .fatura-dashboard-texto{
    min-width:0 !important;
}
body.fin-app.pagina-dashboard .fatura-dashboard-topo,
body.fin-app.pagina-dashboard .fatura-dashboard-cabecalho{
    min-width:0 !important;
}
@media(max-width:620px){
    body.fin-app.pagina-dashboard .conta-dashboard-icone,
body.fin-app.pagina-dashboard .fatura-dashboard-marca{
        width:96px !important;
        height:96px !important;
        min-width:96px !important;
        flex-basis:96px !important;
        padding:8px !important;
    }
    body.fin-app.pagina-dashboard .conta-dashboard-icone img{
        max-width:80px !important;
        max-height:80px !important;
    }
    body.fin-app.pagina-dashboard .fatura-dashboard-identidade{
        grid-template-columns:96px minmax(0,1fr) !important;
        gap:10px !important;
    }
}


/* --- bloco 16 originalmente inline em dashboard.php --- */

/* V2.4 - logos 85x85 e cabeçalho da fatura sem sobreposição */

body.fin-app.pagina-dashboard .conta-dashboard-icone,
body.fin-app.pagina-dashboard .fatura-dashboard-marca{
    width:85px !important;
    height:85px !important;
    min-width:85px !important;
    flex:0 0 85px !important;
    box-sizing:border-box !important;
    padding:7px !important;
    background:#fff !important;
    border-radius:9px !important;
    overflow:hidden !important;
}

/* Banco em cima e bandeira embaixo */
body.fin-app.pagina-dashboard .fatura-dashboard-marca{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
}

body.fin-app.pagina-dashboard .conta-dashboard-icone img{
    max-width:69px !important;
    max-height:69px !important;
    width:auto !important;
    height:auto !important;
    object-fit:contain !important;
}

body.fin-app.pagina-dashboard .fatura-dashboard-marca .fatura-logo-instituicao{
    display:block !important;
    max-width:68px !important;
    max-height:37px !important;
    width:auto !important;
    height:auto !important;
    object-fit:contain !important;
}

body.fin-app.pagina-dashboard .fatura-dashboard-marca .fatura-logo-bandeira{
    display:block !important;
    max-width:58px !important;
    max-height:27px !important;
    width:auto !important;
    height:auto !important;
    object-fit:contain !important;
}

/*
 * A imagem ocupa uma coluna própria.
 * Os textos ficam na segunda coluna e não entram na área do logo.
 */
body.fin-app.pagina-dashboard .fatura-dashboard-identidade{
    display:grid !important;
    grid-template-columns:85px minmax(0,1fr) !important;
    column-gap:12px !important;
    align-items:start !important;
    width:100% !important;
    min-width:0 !important;
}

body.fin-app.pagina-dashboard .fatura-dashboard-texto{
    min-width:0 !important;
    width:100% !important;
}

/*
 * Linha superior: instituição/bandeira à esquerda e status à direita.
 */
body.fin-app.pagina-dashboard .fatura-dashboard-topo,
body.fin-app.pagina-dashboard .fatura-dashboard-cabecalho{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:8px !important;
    min-width:0 !important;
    width:100% !important;
}

body.fin-app.pagina-dashboard .fatura-dashboard-bandeira,
body.fin-app.pagina-dashboard .fatura-dashboard-subtitulo{
    min-width:0 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    line-height:1.25 !important;
}

body.fin-app.pagina-dashboard .fatura-dashboard-status,
body.fin-app.pagina-dashboard .status-fatura{
    flex:0 0 auto !important;
    white-space:nowrap !important;
    position:static !important;
    transform:none !important;
}

/* Nome do cartão sempre em linha própria */
body.fin-app.pagina-dashboard .fatura-dashboard-nome{
    display:block !important;
    clear:both !important;
    margin-top:4px !important;
    line-height:1.15 !important;
    overflow-wrap:anywhere !important;
}

/* Mobile: mantém 85px; o card reorganiza sem esmagar os textos. */
@media(max-width:620px){
    body.fin-app.pagina-dashboard .conta-dashboard-icone,
body.fin-app.pagina-dashboard .fatura-dashboard-marca{
        width:85px !important;
        height:85px !important;
        min-width:85px !important;
        flex-basis:85px !important;
    }

    body.fin-app.pagina-dashboard .fatura-dashboard-identidade{
        grid-template-columns:85px minmax(0,1fr) !important;
        column-gap:10px !important;
    }
}


/* =========================================================
   ASSISTENTE FINCONTROLE — RESTAURADO V3.1
   Interface funcional recuperada; backend preservado.
========================================================= */
.fin-app .assistente-ia-botao {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 2800;

    width: 58px;
    height: 58px;

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

    border: 1px solid var(--primary, #00e5ff);
    border-radius: 50%;

    background: var(--bg-card, #1a1d33);
    color: var(--primary, #00e5ff);

    box-shadow: 0 12px 32px rgba(0,0,0,.35);

    cursor: pointer;

    font-size: 25px;
    font-weight: 900;
}

.fin-app .assistente-ia-painel {
    position: fixed;
    right: 22px;
    bottom: 92px;
    z-index: 3200;

    width: min(430px, calc(100vw - 28px));
    max-height: min(650px, 76vh);

    display: none;
    flex-direction: column;

    overflow: hidden;

    background: var(--bg-card, #1a1d33);
    border: 1px solid var(--border, #35395c);
    border-radius: 16px;

    box-shadow: 0 20px 55px rgba(0,0,0,.48);
}

.fin-app .assistente-ia-painel.aberto {
    display: flex;
}

.fin-app .assistente-ia-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 16px;

    border-bottom: 1px solid var(--border, #35395c);
}

.fin-app .assistente-ia-topo strong {
    color: var(--primary, #00e5ff);
    font-size: 15px;
}

.fin-app .assistente-ia-topo small {
    display: block;
    margin-top: 4px;

    color: var(--text-light, #bfc6ff);
    font-size: 11px;
}

.fin-app .assistente-ia-fechar {
    width: 38px;
    height: 38px;

    border: 0;
    background: transparent;

    color: var(--text-light, #bfc6ff);

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

.fin-app .assistente-ia-mensagens {
    min-height: 210px;

    display: flex;
    flex-direction: column;
    gap: 12px;

    padding: 16px;

    overflow-y: auto;
}

.fin-app .assistente-msg {
    max-width: 88%;

    padding: 12px 13px;

    border-radius: 12px;

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

    white-space: pre-wrap;
}

.fin-app .assistente-msg.ia {
    align-self: flex-start;

    background: var(--bg-main, #0f1120);
    color: var(--text-light, #bfc6ff);

    border: 1px solid var(--border, #35395c);
}

.fin-app .assistente-msg.usuario {
    align-self: flex-end;

    background: rgba(0,229,255,.08);
    color: var(--text, #fff);

    border: 1px solid rgba(0,229,255,.35);
}

.fin-app .assistente-ia-acoes {
    display: none;
    gap: 9px;

    padding: 0 16px 12px;
}

.fin-app .assistente-ia-acoes.visivel {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.fin-app .assistente-ia-acoes button {
    min-height: 43px;

    border-radius: 9px;

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

    cursor: pointer;
}

.fin-app .assistente-confirmar {
    border: 1px solid var(--primary, #00e5ff);

    background: rgba(0,229,255,.07);
    color: var(--primary, #00e5ff);
}

.fin-app .assistente-cancelar {
    border: 1px solid var(--border, #35395c);

    background: transparent;
    color: var(--text-light, #bfc6ff);
}

.fin-app .assistente-ia-form {
    display: grid;
    grid-template-columns: minmax(0,1fr) 48px 48px 48px;
    gap: 9px;

    padding: 13px 16px 16px;

    border-top: 1px solid var(--border, #35395c);
}

.fin-app .assistente-ia-form input {
    width: 100%;
    min-width: 0;
    min-height: 48px;

    padding: 0 13px;

    box-sizing: border-box;

    background: var(--bg-main, #0f1120);
    border: 1px solid var(--border, #35395c);
    border-radius: 9px;

    color: var(--text, #fff);

    font-size: 13px;

    outline: none;
}

.fin-app .assistente-ia-form input:focus {
    border-color: var(--primary, #00e5ff);
}

.fin-app .assistente-ia-voz,
.fin-app .assistente-ia-audio,
.fin-app .assistente-ia-enviar {
    min-width: 0;
    min-height: 48px;

    border: 1px solid var(--primary, #00e5ff);
    border-radius: 9px;

    background: rgba(0,229,255,.07);
    color: var(--primary, #00e5ff);

    cursor: pointer;

    font-size: 20px;
}

.fin-app .assistente-ia-voz.ouvindo {
    border-color: #ff6b6b;
    color: #ff6b6b;
    background: rgba(255,107,107,.10);
    animation: assistenteIaPulsoVoz 1s ease-in-out infinite;
}

.fin-app .assistente-ia-voz.indisponivel,
.fin-app .assistente-ia-audio.indisponivel {
    opacity: .45;
    cursor: not-allowed;
}

@keyframes assistenteIaPulsoVoz {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255,107,107,.25);
    }

    50% {
        transform: scale(1.04);
        box-shadow: 0 0 0 5px rgba(255,107,107,0);
    }
}

.fin-app .assistente-ia-enviar {
    border: 1px solid var(--primary, #00e5ff);
    border-radius: 9px;

    background: rgba(0,229,255,.07);
    color: var(--primary, #00e5ff);

    cursor: pointer;

    font-size: 20px;
}

@media (max-width: 900px) {

    .fin-app .assistente-ia-botao {
        right: 14px;
        bottom: 18px;

        width: 58px;
        height: 58px;
    }

    .fin-app .assistente-ia-painel {
        left: 7px;
        right: 7px;
        bottom: 84px;

        width: auto;
        max-height: 78vh;

        border-radius: 15px;
    }

    .fin-app .assistente-ia-topo {
        padding: 15px 16px;
    }

    .fin-app .assistente-ia-topo strong {
        font-size: 17px;
    }

    .fin-app .assistente-ia-topo small {
        font-size: 12px;
    }

    .fin-app .assistente-ia-mensagens {
        min-height: 220px;

        padding: 15px;

        gap: 12px;
    }

    .fin-app .assistente-msg {
        max-width: 91%;

        padding: 12px 14px;

        font-size: 15px;
        line-height: 1.48;
    }

    .fin-app .assistente-ia-form {
        grid-template-columns:
            minmax(0,1fr)
            48px
            48px
            52px;

        padding: 12px 14px 15px;
    }

    .fin-app .assistente-ia-form input {
        min-height: 52px;

        font-size: 16px;
    }

    .fin-app .assistente-ia-voz,
    .fin-app .assistente-ia-audio,
    .fin-app .assistente-ia-enviar {
        min-height: 52px;
        font-size: 21px;
    }

    .fin-app .assistente-ia-enviar {
        font-size: 22px;
    }

    .fin-app .assistente-ia-acoes {
        padding: 0 14px 12px;
    }

    .fin-app .assistente-ia-acoes button {
        min-height: 46px;

        font-size: 13px;
    }
}

/* =========================================================
   ASSISTENTE FINCONTROLE V3.3
   Hierarquia de ações + controles de voz no mesmo layout.
========================================================= */
.fin-app .assistente-ia-acoes.visivel {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.fin-app .assistente-executar {
    width: 100%;
    min-height: 52px !important;

    border: 1px solid #00d990;
    border-radius: 10px;

    background: #00c982;
    color: #06150f;

    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: .2px;

    box-shadow: 0 8px 22px rgba(0, 201, 130, .18);
}

.fin-app .assistente-executar:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.fin-app .assistente-executar:disabled,
.fin-app .assistente-confirmar:disabled,
.fin-app .assistente-cancelar:disabled {
    opacity: .55;
    cursor: wait;
    transform: none;
}

.fin-app .assistente-ia-acoes-secundarias {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.fin-app .assistente-confirmar,
.fin-app .assistente-cancelar {
    min-height: 39px !important;
    background: transparent;
    box-shadow: none;
}

.fin-app .assistente-confirmar {
    border-color: rgba(0, 229, 255, .36);
    color: var(--text-light, #bfc6ff);
}

.fin-app .assistente-cancelar {
    border-color: rgba(191, 198, 255, .16);
    color: rgba(191, 198, 255, .72);
}

.fin-app .assistente-ia-voz,
.fin-app .assistente-ia-audio,
.fin-app .assistente-ia-enviar {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--border, #35395c);
    border-radius: 10px;

    background: var(--bg-main, #0f1120);
    color: var(--primary, #00e5ff);

    box-shadow: inset 0 0 0 1px rgba(255,255,255,.012);
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.fin-app .assistente-ia-voz:hover,
.fin-app .assistente-ia-audio:hover,
.fin-app .assistente-ia-enviar:hover {
    border-color: var(--primary, #00e5ff);
    background: rgba(0,229,255,.06);
    transform: translateY(-1px);
}

.fin-app .assistente-ia-audio[aria-pressed="true"] {
    border-color: rgba(0,229,255,.52);
    background: rgba(0,229,255,.07);
}

.fin-app .assistente-ia-voz.ouvindo {
    border-color: #ff6b6b;
    color: #ff6b6b;
    background: rgba(255,107,107,.10);
}

@media (max-width: 900px) {
    .fin-app .assistente-executar {
        min-height: 54px !important;
        font-size: 14px !important;
    }

    .fin-app .assistente-confirmar,
    .fin-app .assistente-cancelar {
        min-height: 42px !important;
        font-size: 12px !important;
    }
}


/* =========================================================
   ASSISTENTE FINCONTROLE V3.4
   Controles de voz alinhados à paleta do Assistente.
   Override final para evitar aparência cinza/nativa.
========================================================= */
.fin-app .assistente-ia-form .assistente-ia-voz,
.fin-app .assistente-ia-form .assistente-ia-audio,
.fin-app .assistente-ia-form .assistente-ia-enviar {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: #07101f !important;
    color: #00e5ff !important;
    border: 1px solid #00e5ff !important;
    box-shadow: none !important;
    border-radius: 10px !important;
    opacity: 1 !important;
}

.fin-app .assistente-ia-form .assistente-ia-voz:hover,
.fin-app .assistente-ia-form .assistente-ia-audio:hover,
.fin-app .assistente-ia-form .assistente-ia-enviar:hover {
    background: #10233a !important;
    color: #ffffff !important;
    border-color: #00e5ff !important;
}

.fin-app .assistente-ia-form .assistente-ia-audio[aria-pressed="true"] {
    background: #10233a !important;
    color: #00e5ff !important;
    border-color: #00e5ff !important;
}

.fin-app .assistente-ia-form .assistente-ia-voz.ouvindo {
    background: #10233a !important;
    color: #ffffff !important;
    border-color: #00e5ff !important;
}

.fin-app .assistente-ia-form .assistente-ia-voz:disabled,
.fin-app .assistente-ia-form .assistente-ia-audio:disabled {
    background: #0b1628 !important;
    color: #68758b !important;
    border-color: #26364d !important;
    opacity: .75 !important;
}


/* ===== FATURA DETALHES - MIGRADO V32 ===== */
/* =========================================================
   DETALHE DA FATURA
   Sem data de vencimento e sem "Venceu há X dias"
========================================================= */

.cabecalho-fatura-final,
.linha-fatura-final {
    display: grid !important;
    grid-template-columns:
        minmax(180px, 1.35fr)
        minmax(150px, 1fr)
        80px
        110px
        90px !important;

    gap: 12px !important;
    align-items: center !important;
    width: 100% !important;
}

.acao-fatura-final {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.acao-fatura-final .botao-editar-final,
.acao-fatura-final .botao-excluir-final {
    width: 100% !important;
    min-width: 70px !important;
    box-sizing: border-box !important;
}

.botao-excluir-final {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;
    padding: 5px 8px;

    background: transparent;

    border: 1px solid #ff4d4d;
    border-radius: 7px;

    color: #ff4d4d;

    font-family: inherit;
    font-size: 11px;
    font-weight: bold;

    cursor: pointer;
}

@media (max-width: 620px) {

    .cabecalho-fatura-final {
        display: none !important;
    }

    .linha-fatura-final {
        grid-template-columns:
            minmax(0, 1fr)
            auto !important;

        gap: 9px 12px !important;
    }

    .descricao-fatura-final,
    .categoria-fatura-final {
        min-width: 0;
    }

    .descricao-fatura-final {
        grid-column: 1 / 2;
    }

    .categoria-fatura-final {
        grid-column: 1 / 2;
    }

    .parcela-fatura-final {
        grid-column: 2;
        grid-row: 1;
    }

    .valor-fatura-final {
        grid-column: 2;
        grid-row: 2;
        text-align: right;
    }

    .acao-fatura-final {
        grid-column: 1 / -1;
        grid-row: auto;

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

        gap: 7px;
    }
}


/* ===== REVISAR IA - MIGRADO V32 ===== */
.ia-revisao-card {
            max-width: 720px;

            padding: 22px;

            background:
                var(--bg-card, #1a1d33);

            border:
                1px solid
                var(--border, #35395c);

            border-radius: 12px;
        }

        .ia-revisao-titulo {
            margin-bottom: 18px;
        }

        .ia-revisao-titulo span {
            color:
                var(--primary, #00e5ff);

            font-size: 11px;
            font-weight: 800;
        }

        .ia-revisao-titulo h2 {
            margin: 6px 0;

            color:
                var(--text, #fff);
        }

        .ia-revisao-titulo p {
            color:
                var(--text-light, #bfc6ff);

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

            white-space: pre-line;
        }

        .ia-revisao-dados {
            display: grid;
            grid-template-columns:
                repeat(2, minmax(0, 1fr));

            gap: 9px;
        }

        .ia-revisao-campo {
            padding: 12px;

            background:
                var(--bg-main, #0f1120);

            border:
                1px solid
                var(--border, #35395c);

            border-radius: 8px;
        }

        .ia-revisao-campo small,
        .ia-revisao-campo strong {
            display: block;
        }

        .ia-revisao-campo small {
            margin-bottom: 5px;

            color:
                var(--text-light, #bfc6ff);

            font-size: 10px;
        }

        .ia-revisao-campo strong {
            color:
                var(--text, #fff);

            font-size: 13px;

            overflow-wrap: anywhere;
        }

        .ia-revisao-acoes {
            display: grid;
            grid-template-columns:
                repeat(2, minmax(0, 1fr));

            gap: 9px;

            margin-top: 18px;
        }

        .ia-revisao-acoes button,
        .ia-revisao-acoes a {
            min-height: 44px;

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

            border-radius: 8px;

            font-family: inherit;
            font-size: 12px;
            font-weight: 800;

            text-decoration: none;

            cursor: pointer;

            box-sizing: border-box;
        }

        .ia-confirmar-revisao {
            background:
                rgba(0, 229, 255, .07);

            border:
                1px solid
                var(--primary, #00e5ff);

            color:
                var(--primary, #00e5ff);
        }

        .ia-cancelar-revisao {
            background:
                transparent;

            border:
                1px solid
                var(--border, #35395c);

            color:
                var(--text-light, #bfc6ff);
        }

        .ia-revisao-status {
            margin-top: 15px;

            padding: 12px;

            border-radius: 8px;

            display: none;

            font-size: 12px;
        }

        .ia-revisao-status.sucesso {
            display: block;

            color:
                var(--success, #00ffb3);

            border:
                1px solid
                rgba(0, 255, 179, .35);

            background:
                rgba(0, 255, 179, .05);
        }

        .ia-revisao-status.erro {
            display: block;

            color: #ff7777;

            border:
                1px solid
                rgba(255, 77, 77, .35);

            background:
                rgba(255, 77, 77, .05);
        }

        @media (
            max-width: 620px
        ) {

            .ia-revisao-dados,
            .ia-revisao-acoes {
                grid-template-columns:
                    1fr;
            }

            .ia-revisao-card {
                padding: 16px;
            }
        }


/* ===== MODAL EXCLUSÃO - MIGRADO V32 ===== */
/* =========================================================
   MODAL EXCLUSÃO DE LANÇAMENTO / PARCELAS
========================================================= */

.modal-exclusao-lancamento {
    position: fixed;
    inset: 0;
    z-index: 99999;

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

    padding: 16px;

    background: rgba(5, 7, 15, .82);
    backdrop-filter: blur(4px);
}

.modal-exclusao-lancamento.aberto {
    display: flex;
}

.modal-exclusao-card {
    width: min(500px, 100%);

    padding: 22px;

    background: var(--bg-card, #1a1d33);
    border: 1px solid var(--border, #35395c);
    border-radius: 13px;

    box-shadow: 0 22px 60px rgba(0,0,0,.48);
}

.modal-exclusao-card h3 {
    margin: 0 0 8px;

    color: #ff6666;
    font-size: 20px;
}

.modal-exclusao-card p {
    margin: 0;

    color: var(--text-light, #bfc6ff);

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

.modal-exclusao-descricao {
    margin-top: 14px;
    padding: 12px;

    background: var(--bg-main, #0f1120);
    border: 1px solid var(--border, #35395c);
    border-radius: 9px;
}

.modal-exclusao-descricao small {
    display: block;
    margin-bottom: 5px;

    color: var(--text-light, #bfc6ff);
    font-size: 10px;
}

.modal-exclusao-descricao strong {
    color: var(--text, #fff);
    font-size: 13px;
}

.modal-exclusao-parcela-info {
    display: none;

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

    border: 1px solid rgba(255, 200, 87, .35);
    border-radius: 9px;

    background: rgba(255, 200, 87, .04);
    color: #ffd36b;

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

.modal-exclusao-parcela-info.visivel {
    display: block;
}

.modal-exclusao-acoes {
    display: grid;
    gap: 8px;

    margin-top: 16px;
}

.modal-exclusao-acoes.duas {
    grid-template-columns: repeat(2, minmax(0,1fr));
}

.modal-exclusao-acoes.tres {
    grid-template-columns: repeat(3, minmax(0,1fr));
}

.modal-exclusao-acoes button {
    min-height: 44px;

    border-radius: 8px;

    font-family: inherit;
    font-size: 11px;
    font-weight: 800;

    cursor: pointer;
}

.botao-exclusao-cancelar {
    border: 1px solid var(--border, #35395c);
    background: transparent;
    color: var(--text-light, #bfc6ff);
}

.botao-exclusao-atual {
    border: 1px solid #ff6666;
    background: rgba(255, 77, 77, .06);
    color: #ff6666;
}

.botao-exclusao-proximas {
    border: 1px solid #ffc857;
    background: rgba(255, 200, 87, .06);
    color: #ffc857;
}

.modal-exclusao-status {
    display: none;

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

    border-radius: 8px;

    font-size: 12px;
    line-height: 1.45;
}

.modal-exclusao-status.erro {
    display: block;

    color: #ff7777;

    border: 1px solid rgba(255, 77, 77, .35);
    background: rgba(255, 77, 77, .04);
}

.modal-exclusao-status.sucesso {
    display: block;

    color: var(--success, #00ffb3);

    border: 1px solid rgba(0, 255, 179, .35);
    background: rgba(0, 255, 179, .04);
}

@media (max-width: 620px) {

    .modal-exclusao-card {
        padding: 18px;
    }

    .modal-exclusao-card h3 {
        font-size: 21px;
    }

    .modal-exclusao-card p {
        font-size: 14px;
    }

    .modal-exclusao-acoes.duas,
    .modal-exclusao-acoes.tres {
        grid-template-columns: 1fr;
    }

    .modal-exclusao-acoes button {
        min-height: 52px;
        font-size: 13px;
    }
}


/* =========================================================
   FEEDBACK / ERROS PADRONIZADOS V32
========================================================= */
.fin-app .mensagem-erro,
.fin-app .mensagem-sucesso,
.fin-app .mensagem-aviso {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border-radius: 9px;
    font-size: 12px;
    line-height: 1.5;
}
.fin-app .mensagem-erro {
    color: #ff8585;
    background: rgba(255, 77, 77, .06);
    border: 1px solid rgba(255, 77, 77, .34);
}
.fin-app .mensagem-sucesso {
    color: var(--success, #00ffb3);
    background: rgba(0, 255, 179, .05);
    border: 1px solid rgba(0, 255, 179, .30);
}
.fin-app .mensagem-aviso {
    color: #ffd36b;
    background: rgba(255, 200, 87, .05);
    border: 1px solid rgba(255, 200, 87, .30);
}

/* edição simples de categoria */
.fin-app .cadastro-formulario form { max-width: 720px; }
.fin-app .cadastro-formulario input,
.fin-app .cadastro-formulario select { width: 100%; box-sizing: border-box; }


/* =========================================================
   FEEDBACK FLUTUANTE DO DASHBOARD V32
========================================================= */
.fin-app .feedback-dashboard {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 100500;
    width: min(420px, calc(100vw - 32px));
    box-sizing: border-box;
    padding: 13px 15px;
    border-radius: 10px;
    background: #0b1425;
    box-shadow: 0 18px 45px rgba(0,0,0,.40);
    font-size: 12px;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}
.fin-app .feedback-dashboard.visivel { opacity: 1; transform: translateY(0); }
.fin-app .feedback-dashboard.erro { color:#ff8585; border:1px solid rgba(255,77,77,.42); }
.fin-app .feedback-dashboard.sucesso { color:var(--success,#00ffb3); border:1px solid rgba(0,255,179,.38); }
@media (max-width:620px){
    .fin-app .feedback-dashboard { left:16px; right:16px; bottom:16px; width:auto; }
}

/* =========================================================
   FINCONTROLE V33 - SELETOR DE ORIGEM MOBILE
   Evita o seletor nativo em tela cheia do Android e mantém
   o <select> original como fonte de dados/POST.
========================================================= */
.fin-app .fc-origem-mobile-trigger,
.fin-app .fc-origem-mobile-overlay {
    display: none;
}

@media (max-width: 760px) {
    body.fin-app.fc-modal-mobile-aberto {
        overflow: hidden !important;
    }

    .fin-app #tourCampoOrigem {
        position: relative;
    }

    .fin-app #origem {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        min-height: 1px !important;
        padding: 0 !important;
        margin: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        clip-path: inset(50%) !important;
        overflow: hidden !important;
    }

    .fin-app .fc-origem-mobile-trigger {
        width: 100%;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0 14px;
        border: 1px solid var(--border);
        border-radius: 9px;
        background: var(--bg-main);
        color: var(--text-light);
        font: inherit;
        font-size: 13px;
        font-weight: 700;
        text-align: left;
        cursor: pointer;
        box-sizing: border-box;
    }

    .fin-app .fc-origem-mobile-trigger:focus,
    .fin-app .fc-origem-mobile-trigger:active {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 2px rgba(0,229,255,.10);
    }

    .fin-app .fc-origem-mobile-trigger.preenchido { color: var(--text); }

    .fin-app .fc-origem-mobile-trigger-icone {
        flex: 0 0 auto;
        color: var(--primary);
        font-size: 20px;
        line-height: 1;
        transform: translateY(-2px);
    }

    .fin-app .fc-origem-mobile-overlay {
        position: fixed;
        inset: 0;
        z-index: 40000;
        padding: max(12px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
        align-items: flex-end;
        justify-content: center;
        background: rgba(3,7,16,.78);
        backdrop-filter: blur(4px);
    }

    .fin-app .fc-origem-mobile-overlay.ativo { display: flex; }

    .fin-app .fc-origem-mobile-painel {
        width: min(100%, 560px);
        max-height: min(82dvh, 720px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 18px;
        background: var(--bg-card);
        box-shadow: 0 24px 80px rgba(0,0,0,.46);
        animation: fcOrigemMobileEntrar .18s ease-out;
    }

    @keyframes fcOrigemMobileEntrar {
        from { transform: translateY(18px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    .fin-app .fc-origem-mobile-topo {
        flex: 0 0 auto;
        min-height: 68px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 14px 12px 16px;
        border-bottom: 1px solid var(--border);
    }

    .fin-app .fc-origem-mobile-topo strong,
    .fin-app .fc-origem-mobile-topo small { display: block; }

    .fin-app .fc-origem-mobile-topo strong {
        color: var(--primary);
        font-size: 15px;
        font-weight: 900;
    }

    .fin-app .fc-origem-mobile-topo small {
        margin-top: 4px;
        color: var(--text-light);
        font-size: 10px;
        line-height: 1.35;
    }

    .fin-app .fc-origem-mobile-fechar {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: rgba(255,255,255,.025);
        color: var(--text-light);
        font: inherit;
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
    }

    .fin-app .fc-origem-mobile-fechar:focus,
    .fin-app .fc-origem-mobile-fechar:active {
        outline: none;
        border-color: var(--primary);
        color: var(--primary);
    }

    .fin-app .fc-origem-mobile-lista {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 8px 10px 14px;
        scrollbar-width: thin;
    }

    .fin-app .fc-origem-mobile-grupo + .fc-origem-mobile-grupo { margin-top: 9px; }

    .fin-app .fc-origem-mobile-grupo-titulo {
        padding: 10px 8px 7px;
        color: var(--text-light);
        font-size: 10px;
        font-weight: 900;
        letter-spacing: .05em;
        text-transform: uppercase;
    }

    .fin-app .fc-origem-mobile-item {
        width: 100%;
        min-height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0 13px;
        border: 1px solid transparent;
        border-bottom-color: var(--border);
        background: transparent;
        color: var(--text);
        font: inherit;
        font-size: 13px;
        font-weight: 800;
        text-align: left;
        cursor: pointer;
    }

    .fin-app .fc-origem-mobile-item:hover,
    .fin-app .fc-origem-mobile-item:focus {
        outline: none;
        border-color: var(--primary);
        background: rgba(0,229,255,.055);
        color: var(--primary);
    }

    .fin-app .fc-origem-mobile-item.selecionado {
        border-color: rgba(0,229,255,.34);
        background: rgba(0,229,255,.075);
        color: var(--primary);
        border-radius: 9px;
    }

    .fin-app .fc-origem-mobile-item.acao {
        margin-top: 6px;
        border: 1px solid rgba(0,229,255,.28);
        border-radius: 9px;
        background: rgba(0,229,255,.045);
        color: var(--primary);
    }

    .fin-app .fc-origem-mobile-item-texto {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .fin-app .fc-origem-mobile-item-marca {
        min-width: 24px;
        flex: 0 0 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--primary);
        font-size: 17px;
        font-weight: 900;
    }
}