/* ==========================================================================
   PAINEL FINANCEIRO - folha de estilo unica
   Direcao visual: "livro-caixa industrial"
   grafite quase-preto, hairlines, micro-labels em caixa alta,
   numeros em mono tabular, acento verde-lima.
   ========================================================================== */

/* ---------- TOKENS ---------- */
:root {
    /* superficies */
    --bg:        #0a0b0c;
    --bg-painel: #101214;
    --bg-alto:   #16191c;
    --bg-topo:   #0d0f11;
    --bg-input:  #0b0d0e;

    /* linhas */
    --linha:      #21262b;
    --linha-forte:#2d343a;

    /* texto */
    --txt:   #e9ecef;
    --txt-2: #8d959e;
    --txt-3: #5b646d;

    /* semantica */
    --verde:     #3fd98b;
    --verde-bg:  rgba(63, 217, 139, .11);
    --vermelho:  #ff5f5f;
    --vermelho-bg: rgba(255, 95, 95, .11);
    --amarelo:   #ffbd3d;
    --amarelo-bg:rgba(255, 189, 61, .12);
    --azul:      #4d9bff;
    --azul-bg:   rgba(77, 155, 255, .12);
    --cinza-bg:  rgba(141, 149, 158, .12);

    /* medidas */
    --raio:    12px;
    --raio-sm: 8px;
    --sidebar: 248px;
    --topo:    62px;

    --sombra: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);

    --fonte-ui:   'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fonte-tit:  'Archivo', var(--fonte-ui);
    --fonte-num:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--txt);
    font-family: var(--fonte-ui);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* textura de fundo: brilho frio no topo + grao sutil */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(1000px 420px at 72% -12%, rgba(63, 217, 139, .055), transparent 70%),
        radial-gradient(760px 360px at 8% -6%, rgba(77, 155, 255, .045), transparent 70%);
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .022;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4 {
    font-family: var(--fonte-tit);
    font-weight: 600;
    letter-spacing: -.015em;
    margin: 0;
}

a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

/* numeros sempre tabulares */
.num, .valor, td.num, .card-valor {
    font-family: var(--fonte-num);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #262c32; border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #343c44; }

/* ==========================================================================
   ESTRUTURA
   ========================================================================== */
.app { position: relative; z-index: 1; }

/* ---------- SIDEBAR ---------- */
.sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar);
    background: var(--bg-topo);
    border-right: 1px solid var(--linha);
    display: flex;
    flex-direction: column;
    z-index: 60;
    transition: transform .22s ease;
}

.marca {
    height: var(--topo);
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 18px;
    border-bottom: 1px solid var(--linha);
    flex-shrink: 0;
}

.marca-icone {
    width: 32px; height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #4ae79a, #1f9e61);
    color: #04150c;
    font-size: 15px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 10px -2px rgba(63,217,139,.5);
    flex-shrink: 0;
}

.marca-txt { min-width: 0; }
.marca-txt strong {
    display: block;
    font-family: var(--fonte-tit);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.01em;
    white-space: nowrap;
}
.marca-txt span {
    display: block;
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--txt-3);
}

.nav {
    flex: 1;
    overflow-y: auto;
    padding: 14px 10px 24px;
}

.nav-grupo {
    margin: 0 0 4px;
    padding: 14px 10px 7px;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--txt-3);
}
.nav-grupo:first-child { padding-top: 2px; }

.nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    margin-bottom: 1px;
    border-radius: var(--raio-sm);
    color: var(--txt-2);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background .14s, color .14s;
}
.nav a i { width: 16px; font-size: 13px; text-align: center; flex-shrink: 0; }
.nav a:hover { background: rgba(255,255,255,.04); color: var(--txt); text-decoration: none; }

.nav a.ativo {
    background: var(--verde-bg);
    color: var(--verde);
}
.nav a.ativo::before {
    content: '';
    position: absolute;
    left: -10px; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 17px;
    border-radius: 0 3px 3px 0;
    background: var(--verde);
}

.nav-saldo {
    margin: 10px;
    padding: 13px 14px;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: linear-gradient(170deg, rgba(63,217,139,.07), transparent 85%);
    flex-shrink: 0;
}
.nav-saldo span {
    display: block;
    font-size: 9.5px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--txt-3);
    margin-bottom: 4px;
}
.nav-saldo strong {
    font-family: var(--fonte-num);
    font-variant-numeric: tabular-nums;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.02em;
}

/* ---------- TOPO ---------- */
.topo {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--topo);
    margin-left: var(--sidebar);
    padding: 0 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(10, 11, 12, .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--linha);
}

.topo h1 {
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topo-sub {
    font-size: 11.5px;
    color: var(--txt-3);
    white-space: nowrap;
}
.topo-dir { margin-left: auto; display: flex; align-items: center; gap: 9px; }

.btn-menu {
    display: none;
    width: 36px; height: 36px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-sm);
    background: var(--bg-painel);
    color: var(--txt);
    font-size: 15px;
    cursor: pointer;
}

.conteudo {
    margin-left: var(--sidebar);
    padding: 22px;
    max-width: 1560px;
}

.overlay-menu {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 55;
}
.overlay-menu.aberto { display: block; }

/* ==========================================================================
   COMPONENTES
   ========================================================================== */

/* ---------- TITULO DE SECAO ---------- */
.secao-tit {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 26px 0 13px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--txt-3);
}
.secao-tit::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--linha), transparent);
}
.secao-tit:first-child { margin-top: 0; }
.secao-tit i { color: var(--txt-3); font-size: 11px; }

/* ---------- CARDS DE METRICA ---------- */
.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
    gap: 12px;
}
.grid-cards.g3 { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.grid-cards.g2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }

.card {
    position: relative;
    overflow: hidden;
    padding: 15px 16px 16px;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--bg-painel);
    box-shadow: var(--sombra);
    animation: sobe .4s cubic-bezier(.2,.7,.3,1) backwards;
}
.card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.07) 40%, transparent);
}

/* barra de acento a esquerda */
.card.ac::after {
    content: '';
    position: absolute;
    left: 0; top: 14px; bottom: 14px;
    width: 2px;
    border-radius: 0 2px 2px 0;
    background: var(--txt-3);
}
.card.ac-verde::after    { background: var(--verde); }
.card.ac-vermelho::after { background: var(--vermelho); }
.card.ac-amarelo::after  { background: var(--amarelo); }
.card.ac-azul::after     { background: var(--azul); }

.card-topo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
}
.card-rotulo {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--txt-3);
    line-height: 1.3;
}
.card-icone {
    margin-left: auto;
    width: 26px; height: 26px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    font-size: 11px;
    background: var(--cinza-bg);
    color: var(--txt-2);
    flex-shrink: 0;
}
.card-icone.verde    { background: var(--verde-bg);    color: var(--verde); }
.card-icone.vermelho { background: var(--vermelho-bg); color: var(--vermelho); }
.card-icone.amarelo  { background: var(--amarelo-bg);  color: var(--amarelo); }
.card-icone.azul     { background: var(--azul-bg);     color: var(--azul); }

.card-valor {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.035em;
    line-height: 1.15;
    word-break: break-word;
}
.card-valor.sm { font-size: 18px; }
.card-valor.lg { font-size: 28px; }

.card-pe {
    margin-top: 7px;
    font-size: 11.5px;
    color: var(--txt-3);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* cores de valor */
.v-pos  { color: var(--verde); }
.v-neg  { color: var(--vermelho); }
.v-zero { color: var(--txt-2); }
.v-amar { color: var(--amarelo); }
.v-azul { color: var(--azul); }

@keyframes sobe {
    from { opacity: 0; transform: translateY(9px); }
    to   { opacity: 1; transform: none; }
}
.card:nth-child(1) { animation-delay: .02s }
.card:nth-child(2) { animation-delay: .06s }
.card:nth-child(3) { animation-delay: .10s }
.card:nth-child(4) { animation-delay: .14s }
.card:nth-child(5) { animation-delay: .18s }
.card:nth-child(6) { animation-delay: .22s }
.card:nth-child(7) { animation-delay: .26s }
.card:nth-child(8) { animation-delay: .30s }

/* ---------- PAINEL (bloco com cabecalho) ---------- */
.painel {
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--bg-painel);
    box-shadow: var(--sombra);
    overflow: hidden;
}
.painel + .painel { margin-top: 14px; }

.painel-topo {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
    padding: 13px 16px;
    border-bottom: 1px solid var(--linha);
    background: linear-gradient(180deg, rgba(255,255,255,.018), transparent);
}
.painel-topo h3 {
    font-size: 13.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.painel-topo h3 i { color: var(--txt-3); font-size: 12px; }
.painel-topo .dir { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.painel-corpo { padding: 16px; }
.painel-corpo.sem-pad { padding: 0; }

/* ---------- BOTOES ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-sm);
    background: var(--bg-alto);
    color: var(--txt);
    font-family: var(--fonte-ui);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background .14s, border-color .14s, transform .08s;
    text-decoration: none;
}
.btn:hover { background: #1e2227; border-color: #3a4249; text-decoration: none; color: var(--txt); }
.btn:active { transform: translateY(1px); }
.btn i { font-size: 12px; }

.btn-primario {
    background: linear-gradient(160deg, #4ae79a, #22a768);
    border-color: transparent;
    color: #04150c;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-primario:hover { background: linear-gradient(160deg, #5bf0a7, #26b573); color: #04150c; }

.btn-perigo { border-color: rgba(255,95,95,.4); color: var(--vermelho); background: var(--vermelho-bg); }
.btn-perigo:hover { background: rgba(255,95,95,.2); border-color: var(--vermelho); color: var(--vermelho); }

.btn-perigo-cheio { background: #c0392b; border-color: #c0392b; color: #fff; font-weight: 600; }
.btn-perigo-cheio:hover { background: #d8432f; border-color: #d8432f; color: #fff; }

.btn-azul { border-color: rgba(77,155,255,.4); color: var(--azul); background: var(--azul-bg); }
.btn-azul:hover { background: rgba(77,155,255,.22); border-color: var(--azul); color: var(--azul); }

.btn-sm { height: 30px; padding: 0 10px; font-size: 12px; }
.btn-icone { width: 30px; height: 30px; padding: 0; }
.btn-bloco { width: 100%; }

/* ---------- BADGES ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 100px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .055em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid transparent;
}
.badge-verde    { background: var(--verde-bg);    color: var(--verde);    border-color: rgba(63,217,139,.26); }
.badge-vermelho { background: var(--vermelho-bg); color: var(--vermelho); border-color: rgba(255,95,95,.26); }
.badge-amarelo  { background: var(--amarelo-bg);  color: var(--amarelo);  border-color: rgba(255,189,61,.26); }
.badge-azul     { background: var(--azul-bg);     color: var(--azul);     border-color: rgba(77,155,255,.26); }
.badge-cinza    { background: var(--cinza-bg);    color: var(--txt-2);    border-color: var(--linha-forte); }

/* ---------- TABELAS ---------- */
.tabela-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 560px;
}
table.tabela th {
    position: sticky;
    top: 0;
    padding: 9px 14px;
    background: var(--bg-topo);
    border-bottom: 1px solid var(--linha);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--txt-3);
    text-align: left;
    white-space: nowrap;
}
table.tabela td {
    padding: 11px 14px;
    border-bottom: 1px solid rgba(33,38,43,.6);
    vertical-align: middle;
}
table.tabela tbody tr { transition: background .12s; }
table.tabela tbody tr:hover { background: rgba(255,255,255,.022); }
table.tabela tbody tr:last-child td { border-bottom: none; }

.t-dir   { text-align: right; }
.t-centro{ text-align: center; }
.t-nowrap{ white-space: nowrap; }
.t-forte { font-weight: 600; }
.t-fraco { color: var(--txt-3); font-size: 12px; }
.t-acoes { width: 1%; white-space: nowrap; text-align: right; }
.t-acoes .btn { margin-left: 4px; }

table.tabela tfoot td {
    padding: 11px 14px;
    border-top: 1px solid var(--linha-forte);
    background: var(--bg-topo);
    font-weight: 600;
    font-size: 12.5px;
}

.celula-tit { display: flex; flex-direction: column; gap: 1px; }
.celula-tit strong { font-weight: 600; font-size: 13px; }
.celula-tit span { font-size: 11.5px; color: var(--txt-3); }

/* linha com pontinho de tipo */
.ponto {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: 0;
}
.ponto-verde    { background: var(--verde); box-shadow: 0 0 7px rgba(63,217,139,.7); }
.ponto-vermelho { background: var(--vermelho); box-shadow: 0 0 7px rgba(255,95,95,.7); }
.ponto-amarelo  { background: var(--amarelo); box-shadow: 0 0 7px rgba(255,189,61,.7); }
.ponto-azul     { background: var(--azul); box-shadow: 0 0 7px rgba(77,155,255,.7); }
.ponto-cinza    { background: var(--txt-3); }

/* ---------- FORMULARIOS ---------- */
.linha-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}
.linha-form.c1 { grid-template-columns: 1fr; }
.linha-form:last-of-type { margin-bottom: 0; }

.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo.largo { grid-column: 1 / -1; }

.campo label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--txt-3);
}

.campo input, .campo select, .campo textarea {
    width: 100%;
    height: 38px;
    padding: 0 11px;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-sm);
    background: var(--bg-input);
    color: var(--txt);
    font-family: var(--fonte-ui);
    font-size: 13.5px;
    transition: border-color .14s, box-shadow .14s;
    appearance: none;
    -webkit-appearance: none;
}
.campo input.num-input { font-family: var(--fonte-num); font-variant-numeric: tabular-nums; }
.campo textarea { height: auto; min-height: 66px; padding: 9px 11px; resize: vertical; line-height: 1.5; }

.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none;
    border-color: var(--verde);
    box-shadow: 0 0 0 3px rgba(63,217,139,.13);
}
.campo input::placeholder, .campo textarea::placeholder { color: #4a5259; }

.campo select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%238d959e' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    padding-right: 30px;
    cursor: pointer;
}
.campo select option { background: var(--bg-alto); color: var(--txt); }

.campo input[type="date"] { position: relative; }
.campo input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(.65);
    cursor: pointer;
}
.campo .ajuda { font-size: 11px; color: var(--txt-3); line-height: 1.4; }

/* prefixo R$ */
.input-moeda { position: relative; }
.input-moeda span {
    position: absolute;
    left: 11px; top: 50%;
    transform: translateY(-50%);
    font-size: 12.5px;
    color: var(--txt-3);
    pointer-events: none;
    font-family: var(--fonte-num);
}
.input-moeda input { padding-left: 34px; }

/* checkbox / switch */
.check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-sm);
    background: rgba(255,255,255,.016);
    cursor: pointer;
    user-select: none;
}
.check:hover { border-color: var(--linha-forte); }
.check input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--verde); cursor: pointer; flex-shrink: 0; }
.check-txt { font-size: 12.5px; line-height: 1.45; }
.check-txt strong { display: block; font-size: 13px; font-weight: 600; margin-bottom: 1px; }
.check-txt span { color: var(--txt-3); }

/* ---------- FILTROS ---------- */
.filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}
.filtros .campo { min-width: 140px; flex: 0 1 auto; }
.filtros .campo input, .filtros .campo select { height: 34px; font-size: 13px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    padding: 6px 12px;
    border: 1px solid var(--linha-forte);
    border-radius: 100px;
    background: var(--bg-alto);
    color: var(--txt-2);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all .14s;
}
.chip:hover { color: var(--txt); border-color: #3a4249; text-decoration: none; }
.chip.ativo {
    background: var(--verde-bg);
    border-color: rgba(63,217,139,.45);
    color: var(--verde);
}

/* ---------- MODAIS ---------- */
/* IMPORTANTE: nao usar "display:flex + margin:auto" aqui.
   Quando a caixa fica mais alta que a tela, a margem automatica centraliza e
   o topo do modal sai da area rolavel - fica impossivel de alcancar.
   Com "display:block" o container rola normalmente e o topo sempre aparece. */
.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    padding: 20px 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(4, 5, 6, .74);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.modal.aberto { display: block; }

.modal-caixa {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;                 /* centraliza so na horizontal */

    /* a caixa nunca passa da altura da tela: o miolo e que rola,
       entao o titulo e os botoes Cancelar/Salvar ficam sempre visiveis */
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);

    border: 1px solid var(--linha-forte);
    border-radius: 14px;
    background: var(--bg-painel);
    box-shadow: 0 24px 70px -18px rgba(0,0,0,.9);
    animation: modalEntra .2s cubic-bezier(.2,.7,.3,1);
}
.modal-caixa.larga { max-width: 760px; }

/* o datalist de categorias nao pode ocupar espaco dentro do modal */
datalist { display: none !important; }

@keyframes modalEntra {
    from { opacity: 0; transform: translateY(-12px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

.modal-topo {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--linha);
    flex-shrink: 0;
}
.modal-topo h3 { font-size: 15px; font-weight: 600; }
.modal-topo .fechar {
    margin-left: auto;
    width: 30px; height: 30px;
    border: 1px solid var(--linha);
    border-radius: 7px;
    background: transparent;
    color: var(--txt-2);
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
}
.modal-topo .fechar:hover { background: var(--bg-alto); color: var(--txt); }

.modal-corpo {
    padding: 18px;
    overflow-y: auto;      /* so o miolo rola */
    min-height: 0;         /* sem isso o flex nao deixa encolher */
    flex: 1 1 auto;
}
.modal-pe {
    display: flex;
    gap: 9px;
    justify-content: flex-end;
    padding: 14px 18px;
    border-top: 1px solid var(--linha);
    background: rgba(0,0,0,.18);
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* o form tambem precisa ser coluna flexivel para o corpo poder rolar */
.modal-caixa > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    border-radius: 0 0 14px 14px;
}

/* ---------- ALERTAS / FLASH ---------- */
.flash-area {
    position: fixed;
    top: 14px; right: 14px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 9px;
    max-width: 380px;
}
.flash {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    background: var(--bg-alto);
    box-shadow: 0 14px 40px -12px rgba(0,0,0,.85);
    font-size: 13px;
    line-height: 1.45;
    animation: flashEntra .25s cubic-bezier(.2,.7,.3,1);
}
.flash i { margin-top: 2px; flex-shrink: 0; }
.flash.ok   { border-color: rgba(63,217,139,.4); }
.flash.ok i { color: var(--verde); }
.flash.erro   { border-color: rgba(255,95,95,.45); }
.flash.erro i { color: var(--vermelho); }
.flash.aviso   { border-color: rgba(255,189,61,.45); }
.flash.aviso i { color: var(--amarelo); }
.flash .x {
    margin-left: auto;
    border: none;
    background: none;
    color: var(--txt-3);
    cursor: pointer;
    font-size: 13px;
    padding: 0 0 0 6px;
}
@keyframes flashEntra {
    from { opacity: 0; transform: translateX(26px); }
    to   { opacity: 1; transform: none; }
}

.aviso-caixa {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(255,189,61,.35);
    border-radius: var(--raio-sm);
    background: var(--amarelo-bg);
    font-size: 12.5px;
    line-height: 1.5;
}
.aviso-caixa i { color: var(--amarelo); margin-top: 2px; flex-shrink: 0; }
.aviso-caixa.azul { border-color: rgba(77,155,255,.3); background: var(--azul-bg); }
.aviso-caixa.azul i { color: var(--azul); }
.aviso-caixa.vermelho { border-color: rgba(255,95,95,.35); background: var(--vermelho-bg); }
.aviso-caixa.vermelho i { color: var(--vermelho); }

/* ---------- EMPTY STATE ---------- */
.vazio {
    padding: 46px 22px;
    text-align: center;
    color: var(--txt-3);
}
.vazio-icone {
    width: 48px; height: 48px;
    margin: 0 auto 13px;
    border: 1px solid var(--linha);
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 18px;
    color: var(--txt-3);
    background: var(--bg-alto);
}
.vazio p { margin: 0 0 15px; font-size: 13.5px; }
.vazio strong { display: block; color: var(--txt-2); font-size: 14.5px; font-weight: 600; margin-bottom: 4px; }

/* ---------- LISTA AGENDA ---------- */
.agenda { display: flex; flex-direction: column; }
.agenda-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(33,38,43,.6);
    text-decoration: none;
    color: inherit;
    transition: background .12s;
}
.agenda-item:last-child { border-bottom: none; }
.agenda-item:hover { background: rgba(255,255,255,.022); text-decoration: none; color: inherit; }

.agenda-icone {
    width: 34px; height: 34px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 13px;
    flex-shrink: 0;
    background: var(--cinza-bg);
    color: var(--txt-2);
}
.agenda-icone.verde    { background: var(--verde-bg);    color: var(--verde); }
.agenda-icone.vermelho { background: var(--vermelho-bg); color: var(--vermelho); }
.agenda-icone.amarelo  { background: var(--amarelo-bg);  color: var(--amarelo); }
.agenda-icone.azul     { background: var(--azul-bg);     color: var(--azul); }

.agenda-txt { flex: 1; min-width: 0; }
.agenda-txt strong {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agenda-txt span {
    font-size: 11.5px;
    color: var(--txt-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.agenda-dir { text-align: right; flex-shrink: 0; }
.agenda-dir .valor { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.02em; }
.agenda-dir .quando { font-size: 11px; color: var(--txt-3); }

/* ---------- GRAFICOS ---------- */
.grafico-caixa { position: relative; height: 290px; width: 100%; }
.grafico-caixa.baixo { height: 230px; }
.grafico-caixa.rosca { height: 260px; }

/* ---------- CARDS DE MOTO ---------- */
.grid-motos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 13px;
}

.moto-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background: var(--bg-painel);
    box-shadow: var(--sombra);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color .16s, transform .16s;
}
.moto-card:hover {
    border-color: var(--linha-forte);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}
.moto-card-topo {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px 15px;
    border-bottom: 1px solid var(--linha);
}
.moto-card-topo .ic {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 15px;
    background: var(--bg-alto);
    border: 1px solid var(--linha);
    color: var(--txt-2);
    flex-shrink: 0;
}
.moto-card-tit { flex: 1; min-width: 0; }
.moto-card-tit strong {
    display: block;
    font-family: var(--fonte-tit);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.moto-placa {
    display: inline-block;
    margin-top: 3px;
    padding: 1px 7px;
    border: 1px solid var(--linha-forte);
    border-radius: 5px;
    background: var(--bg-input);
    font-family: var(--fonte-num);
    font-size: 11px;
    letter-spacing: .09em;
    color: var(--txt-2);
}
.moto-card-dados {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--linha);
}
.moto-dado {
    padding: 11px 14px;
    background: var(--bg-painel);
}
.moto-dado span {
    display: block;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--txt-3);
    margin-bottom: 3px;
}
.moto-dado strong {
    font-family: var(--fonte-num);
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.02em;
}
.moto-dado .peq { font-family: var(--fonte-ui); font-size: 12.5px; font-weight: 500; }
.moto-card-pe {
    padding: 11px 15px;
    font-size: 11.5px;
    color: var(--txt-3);
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--linha);
}

/* barra de progresso (retorno do investimento) */
.barra {
    height: 5px;
    border-radius: 100px;
    background: var(--bg-input);
    border: 1px solid var(--linha);
    overflow: hidden;
}
.barra i {
    display: block;
    height: 100%;
    border-radius: 100px;
    background: linear-gradient(90deg, #22a768, #4ae79a);
    transition: width .5s ease;
}
.barra.cheia i { background: linear-gradient(90deg, #4ae79a, #8af7c2); }

/* ---------- CABECALHO DE DETALHE ---------- */
.detalhe-topo {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    padding: 18px;
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    background:
        linear-gradient(135deg, rgba(63,217,139,.055), transparent 55%),
        var(--bg-painel);
    box-shadow: var(--sombra);
    margin-bottom: 16px;
}
.detalhe-icone {
    width: 56px; height: 56px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 22px;
    background: var(--bg-alto);
    border: 1px solid var(--linha-forte);
    color: var(--verde);
    flex-shrink: 0;
}
.detalhe-txt { min-width: 0; flex: 1; }
.detalhe-txt h2 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.03em;
    text-transform: uppercase;
    line-height: 1.15;
}
.detalhe-meta {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 7px;
    font-size: 12.5px;
    color: var(--txt-3);
}
.detalhe-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- ABAS ---------- */
.abas {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--linha);
    margin-bottom: 14px;
    overflow-x: auto;
}
.abas button {
    padding: 10px 15px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--txt-3);
    font-family: var(--fonte-ui);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.abas button:hover { color: var(--txt-2); }
.abas button.ativo { color: var(--verde); border-bottom-color: var(--verde); }
.aba-painel { display: none; }
.aba-painel.ativo { display: block; }

/* ---------- UTILITARIOS ---------- */
.flex { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.flex-entre { display: flex; align-items: center; justify-content: space-between; gap: 11px; flex-wrap: wrap; }
.mt-0 { margin-top: 0 } .mt-8 { margin-top: 8px } .mt-14 { margin-top: 14px } .mt-22 { margin-top: 22px }
.mb-0 { margin-bottom: 0 } .mb-8 { margin-bottom: 8px } .mb-14 { margin-bottom: 14px }
.esconde { display: none !important; }
.cresce { flex: 1; }
.linha-div { height: 1px; background: var(--linha); margin: 16px 0; border: none; }
.txt-2 { color: var(--txt-2) } .txt-3 { color: var(--txt-3) }
.peq { font-size: 11.5px } .forte { font-weight: 600 }

.kv { display: flex; flex-direction: column; gap: 0; }
.kv-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(33,38,43,.6);
    font-size: 13px;
}
.kv-item:last-child { border-bottom: none; }
.kv-item span:first-child { color: var(--txt-3); }
.kv-item span:last-child { margin-left: auto; font-weight: 600; text-align: right; word-break: break-word; }

/* legenda de grafico */
.legenda { display: flex; flex-direction: column; gap: 9px; }
.legenda-item { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.legenda-cor { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.legenda-item .legenda-valor {
    margin-left: auto;
    font-family: var(--fonte-num);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 1100px) {
    .grid-cards { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); }
    .card-valor { font-size: 20px; }
}

@media (max-width: 900px) {
    :root { --topo: 56px; }

    .sidebar { transform: translateX(-100%); box-shadow: 0 0 60px rgba(0,0,0,.8); }
    .sidebar.aberta { transform: none; }

    .topo, .conteudo { margin-left: 0; }
    .topo { padding: 0 14px; gap: 10px; }
    .conteudo { padding: 15px 14px 60px; }
    .btn-menu { display: grid; place-items: center; }
    .topo-sub { display: none; }
    .topo h1 { font-size: 15.5px; }

    .grid-cards, .grid-cards.g2, .grid-cards.g3 {
        grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
        gap: 10px;
    }
    .card { padding: 13px 14px; }
    .card-valor { font-size: 18px; }
    .card-valor.lg { font-size: 22px; }

    .grid-motos { grid-template-columns: 1fr; }

    .flash-area { left: 12px; right: 12px; max-width: none; }

    .modal { padding: 12px; }
    .modal-caixa {
        max-width: none;
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
    }
    .modal-pe .btn { flex: 1; }

    .detalhe-topo { padding: 15px; }
    .detalhe-txt h2 { font-size: 18px; }
    .detalhe-icone { width: 46px; height: 46px; font-size: 18px; }
    .detalhe-acoes { width: 100%; }
    .detalhe-acoes .btn { flex: 1; }

    .filtros { gap: 8px; }
    .filtros .campo { min-width: 0; flex: 1 1 140px; }

    /* alvos de toque maiores no celular */
    .btn { height: 40px; padding: 0 15px; }
    .btn-sm { height: 34px; }
    .btn-icone { width: 34px; height: 34px; }
    .campo input, .campo select { height: 42px; font-size: 14.5px; }

    .painel-topo { padding: 12px 14px; }
    .painel-topo .dir { width: 100%; }
    .painel-corpo { padding: 14px; }
    table.tabela th, table.tabela td { padding: 10px 12px; }
}

@media (max-width: 520px) {
    .grid-cards, .grid-cards.g2, .grid-cards.g3 { grid-template-columns: 1fr 1fr; }
    .moto-card-dados { grid-template-columns: 1fr 1fr; }
    .linha-form { grid-template-columns: 1fr; }
}

@media print {
    .sidebar, .topo, .btn, .flash-area, .modal { display: none !important; }
    .conteudo { margin: 0; padding: 0; }
    body { background: #fff; color: #000; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* grades de duas colunas do dashboard/relatorios viram coluna unica */
@media (max-width: 1000px) {
    .grid-dash { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ---------- COBRANCA QUE SE REPETE (modal A Receber) ---------- */
/* os campos extras so aparecem quando o usuario escolhe uma frequencia */
.rep-extra { display: none; }
.bloco-repeticao.repetindo .rep-extra { display: grid; }
.bloco-repeticao.repetindo .aviso-caixa.rep-extra { display: flex; }
.previa-datas {
    margin-top: 6px;
    font-family: var(--fonte-num);
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--txt-2);
    word-spacing: 3px;
}