/* ============================================================
   GRÊMIO ACADÊMICO — CONTROLE FINANCEIRO
   Sistema de design: "farda e insígnia"
   Verde-farda profundo + dourado-insígnia como destaque único,
   tipografia serifada (Fraunces) para títulos e Plex Sans/Mono
   para conteúdo e valores monetários (alinhamento de ledger).
   ============================================================ */

:root {

    --verde-farda: #e11d48;
    --verde-farda-suave: #be123c;
    --dourado-insignia: #7dd3fc;
    --dourado-insignia-forte: #38bdf8;
    --papel: #eef6ff;
    --papel-escuro: #0b1324;
    --superficie: rgba(255, 255, 255, 0.78);
    --superficie-mais-forte: #ffffff;
    --tinta: #0f172a;
    --tinta-suave: #475569;
    --linha: rgba(148, 163, 184, 0.22);
    --vinho-alerta: #8C1F1F;
    --vinho-alerta-fundo: #FBEAEA;
    --atencao: #92660C;
    --atencao-fundo: #FBF0DA;
    --sucesso: #1F7A4D;
    --sucesso-fundo: #E7F3EC;

    --fonte-titulo: "Fraunces", Georgia, serif;
    --fonte-base: "IBM Plex Sans", -apple-system, Segoe UI, sans-serif;
    --fonte-mono: "IBM Plex Mono", "Courier New", monospace;

    --largura-sidebar: 248px;
    --raio: 20px;
    --raio-peq: 12px;
    --sombra: 0 18px 40px rgba(15, 23, 42, 0.10), 0 6px 18px rgba(15, 23, 42, 0.04);

    color-scheme: light;
}


[data-tema="escuro"] {

    --verde-farda: #fb7185;
    --verde-farda-suave: #f43f5e;
    --dourado-insignia: #7dd3fc;
    --dourado-insignia-forte: #38bdf8;
    --papel: #07111f;
    --papel-escuro: #020817;
    --superficie: rgba(15, 23, 42, 0.82);
    --superficie-mais-forte: #111827;
    --tinta: #e2e8f0;
    --tinta-suave: #a5b4cf;
    --linha: rgba(148, 163, 184, 0.18);
    --vinho-alerta: #fca5a5;
    --vinho-alerta-fundo: rgba(127, 29, 29, 0.38);
    --atencao: #fbbf24;
    --atencao-fundo: rgba(146, 102, 12, 0.28);
    --sucesso: #86efac;
    --sucesso-fundo: rgba(20, 83, 45, 0.28);
    --sombra: 0 20px 50px rgba(2, 6, 23, 0.52), 0 4px 18px rgba(2, 6, 23, 0.38);

    color-scheme: dark;
}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    font-family: var(--fonte-base);

    background:
        radial-gradient(circle at top left, rgba(125, 211, 252, 0.22), transparent 26%),
        radial-gradient(circle at bottom right, rgba(225, 29, 72, 0.10), transparent 28%),
        linear-gradient(180deg, #f5faff 0%, var(--papel) 100%);

    color: var(--tinta);

    -webkit-font-smoothing: antialiased;

}

[data-tema="escuro"] body {
    background:
        radial-gradient(circle at top left, rgba(56, 189, 248, 0.12), transparent 28%),
        radial-gradient(circle at bottom right, rgba(244, 63, 94, 0.10), transparent 25%),
        linear-gradient(180deg, #050d1a 0%, var(--papel) 100%);
}


h1, h2, h3 {
    font-family: var(--fonte-titulo);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--tinta);
}


a {
    color: var(--verde-farda-suave);
}

[data-tema="escuro"] a {
    color: var(--dourado-insignia);
}


:focus-visible {
    outline: 2px solid var(--dourado-insignia);
    outline-offset: 2px;
}


/* ============================================================
   LOGIN
   ============================================================ */

.login-page {

    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    background:
        radial-gradient(circle at top left, rgba(56, 189, 248, 0.16), transparent 28%),
        radial-gradient(circle at bottom right, rgba(200, 16, 46, 0.12), transparent 25%),
        var(--papel);

    padding: 20px;

}


.login-box {

    width: 400px;

    max-width: 100%;

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

    padding: 0 36px 40px 36px;

    border-radius: 28px;

    border-top: 4px solid var(--verde-farda);

    box-shadow: 0 26px 70px rgba(15, 23, 42, 0.16);

    overflow: hidden;

    border: 1px solid rgba(148, 163, 184, 0.18);

    position: relative;

}

.login-box::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 130px;
    background: linear-gradient(135deg, rgba(125, 211, 252, 0.14), rgba(225, 29, 72, 0.08));
    pointer-events: none;
}

[data-tema="escuro"] .login-box {
    background: rgba(15, 23, 42, 0.82);
    box-shadow: 0 24px 70px rgba(2, 6, 23, 0.45);
}


.login-box .login-logo {

    display: block;

    margin: 28px auto 14px auto;

    width: 84px;

    height: auto;

}


.login-box h1 {

    text-align: center;

    margin: 0 0 4px 0;

    font-size: 22px;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    color: var(--tinta);

}


.login-box h2 {

    text-align: center;

    font-family: var(--fonte-base);

    font-size: 13px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.06em;

    color: var(--verde-farda);

    margin: 0 0 30px 0;

}


.login-box label {

    display: block;

    margin-top: 16px;

    margin-bottom: 6px;

    font-weight: 600;

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 0.06em;

    color: var(--tinta-suave);

}


.login-box input {

    width: 100%;

    padding: 12px 14px;

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

    border-radius: var(--raio-peq);

    font-size: 15px;

    font-family: var(--fonte-base);

    background: var(--papel);

    color: var(--tinta);

}



.login-box button[type="submit"] {

    width: 100%;

    margin-top: 26px;

    padding: 13px 14px;

    background: var(--verde-farda);

    color: #FFFFFF;

    border: none;

    border-radius: var(--raio-peq);

    font-size: 14px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    cursor: pointer;

    transition: background 0.15s ease;

}

.login-box button[type="submit"]:hover {
    background: var(--verde-farda-suave);
}


.login-box p {

    text-align: center;

    margin-top: 20px;

    color: var(--tinta-suave);

}


.login-box a {

    text-decoration: none;

    font-weight: 600;

}


/* ============================================================
   BOTÕES E CAMPOS (globais)
   ============================================================ */

button {

    font-family: var(--fonte-base);

}


.botao {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    background: linear-gradient(135deg, var(--verde-farda) 0%, var(--verde-farda-suave) 100%);

    color: #F5F4EE;

    padding: 10px 18px;

    border-radius: var(--raio-peq);

    text-decoration: none;

    border: none;

    cursor: pointer;

    font-size: 14px;

    font-weight: 600;

    font-family: var(--fonte-base);

    box-shadow: 0 10px 24px rgba(200, 16, 46, 0.20);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;

}


.botao:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
    box-shadow: 0 14px 28px rgba(200, 16, 46, 0.22);
}

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


.botao-secundario {

    background: rgba(255, 255, 255, 0.55);
    color: var(--tinta);
    border: 1px solid var(--linha);
    box-shadow: none;

}

.botao-secundario:hover {
    background: rgba(255, 255, 255, 0.9);
}


input,
select,
textarea {

    font-family: var(--fonte-base);

}


.filtros input,
.filtros select,
.formulario input,
.formulario select {

    padding: 10px 12px;

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

    border-radius: var(--raio-peq);

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

    color: var(--tinta);

    font-size: 14px;

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

}

.filtros input:focus,
.filtros select:focus,
.formulario input:focus,
.formulario select:focus,
.formulario textarea:focus {
    border-color: rgba(56, 189, 248, 0.7);
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
    outline: none;
    background: rgba(255, 255, 255, 0.96);
}

[data-tema="escuro"] .filtros input,
[data-tema="escuro"] .filtros select,
[data-tema="escuro"] .formulario input,
[data-tema="escuro"] .formulario select,
[data-tema="escuro"] .formulario textarea {
    background: rgba(15, 23, 42, 0.7);
}


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

.mensagem {

    padding: 12px 16px;

    border-radius: var(--raio-peq);

    margin-bottom: 18px;

    font-size: 14px;

    border-left: 3px solid transparent;

}


.mensagem.erro {

    background: var(--vinho-alerta-fundo);

    color: var(--vinho-alerta);

    border-left-color: var(--vinho-alerta);

}


.mensagem.sucesso {

    background: var(--sucesso-fundo);

    color: var(--sucesso);

    border-left-color: var(--sucesso);

}


/* ============================================================
   SIDEBAR (fixa)
   ============================================================ */

.sidebar {

    position: fixed;

    top: 0;

    left: 0;

    bottom: 0;

    width: var(--largura-sidebar);

    background: linear-gradient(180deg, rgba(7, 17, 31, 0.97) 0%, rgba(15, 23, 42, 0.94) 100%);
    border-right: 1px solid rgba(148, 163, 184, 0.18);
    color: #E9E8E0;

    display: flex;

    flex-direction: column;

    z-index: 40;

    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 22px 0 60px rgba(2, 6, 23, 0.24);

}

.sidebar::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(125, 211, 252, 0.08), transparent 30%, transparent 70%, rgba(225, 29, 72, 0.06));
    pointer-events: none;
}


.sidebar-marca {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 24px 20px 20px 20px;

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

}


.sidebar-brasao {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 38px;

    height: 38px;

    border-radius: var(--raio-peq);

    border: none;

    color: var(--dourado-insignia);

    background: transparent;

    overflow: visible;

    flex-shrink: 0;

}

.sidebar-brasao svg {
    width: 18px;
    height: 18px;
}

.sidebar-brasao img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.sidebar-marca strong {

    display: block;

    font-family: var(--fonte-titulo);

    font-size: 15px;

    line-height: 1.25;

    color: #F5F4EE;

}


.sidebar-marca span {

    display: block;

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 0.06em;

    color: rgba(233, 232, 224, 0.6);

}


.sidebar-nav {

    flex: 1;

    display: flex;

    flex-direction: column;

    padding: 14px 10px;

    gap: 2px;

    overflow-y: auto;

}


.sidebar-nav a {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px 12px;

    border-radius: 12px;

    color: rgba(233, 232, 224, 0.8);

    text-decoration: none;

    font-size: 14px;

    border-left: 3px solid transparent;
    transition: background 0.18s ease, transform 0.18s ease, color 0.18s ease, border-color 0.18s ease;

}


.sidebar-nav a svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}


.sidebar-nav a:hover {

    background: linear-gradient(90deg, rgba(125, 211, 252, 0.10), rgba(255, 255, 255, 0.03));
    transform: translateX(2px);
    color: #F5F4EE;

}


.sidebar-nav a.ativo {

    background: linear-gradient(90deg, rgba(125, 211, 252, 0.15), rgba(225, 29, 72, 0.18));
    border-left-color: var(--dourado-insignia);
    color: #F5F4EE;
    font-weight: 500;
    box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.10);

}


.sidebar-rodape {

    padding: 14px 20px 20px 20px;

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

}


.sidebar-usuario {

    margin-bottom: 12px;

}


.sidebar-usuario strong {

    display: block;

    font-size: 13px;

    color: #F5F4EE;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


.sidebar-usuario span {

    display: block;

    font-size: 11px;

    color: var(--dourado-insignia);

    text-transform: uppercase;

    letter-spacing: 0.05em;

    margin-top: 2px;

}


.sidebar-sair {

    display: flex;

    align-items: center;

    gap: 10px;

    color: rgba(233, 232, 224, 0.75);

    text-decoration: none;

    font-size: 14px;

}

.sidebar-sair:hover {
    color: #F5F4EE;
}

.sidebar-sair svg {
    width: 16px;
    height: 16px;
}


.sobreposicao-sidebar {

    display: none;

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, 0.4);

    z-index: 35;

}


.botao-menu-movel {

    display: none;

    position: fixed;

    top: 14px;

    left: 14px;

    z-index: 50;

    width: 40px;

    height: 40px;

    border-radius: var(--raio-peq);

    background: var(--verde-farda);

    color: #F5F4EE;

    border: none;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    box-shadow: var(--sombra);

}

.botao-menu-movel svg {
    width: 20px;
    height: 20px;
}


/* ============================================================
   ÁREA PRINCIPAL / TOPBAR
   ============================================================ */

.area-principal {

    margin-left: var(--largura-sidebar);

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    transition: margin-left 0.2s ease;

}


/* ============================================================
   MENU LATERAL RECOLHÍVEL (desktop)
   Clique no botão do topbar alterna [data-menu="recolhido"]
   no <html>; a sidebar encolhe para uma trilha de ícones e a
   área principal reflui, liberando espaço de tela.
   ============================================================ */

@media (min-width: 881px) {

    .sidebar {
        transition: width 0.2s ease;
    }

    [data-menu="recolhido"] .sidebar {
        width: 72px;
    }

    [data-menu="recolhido"] .area-principal {
        margin-left: 72px;
    }

    [data-menu="recolhido"] .sidebar-marca {
        justify-content: center;
        padding-left: 12px;
        padding-right: 12px;
    }

    [data-menu="recolhido"] .sidebar-marca > div {
        display: none;
    }

    [data-menu="recolhido"] .sidebar-nav a {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    [data-menu="recolhido"] .sidebar-nav a span,
    [data-menu="recolhido"] .sidebar-nav a .badge-notificacao,
    [data-menu="recolhido"] .sidebar-usuario,
    [data-menu="recolhido"] .sidebar-sair span {
        display: none;
    }

    [data-menu="recolhido"] .sidebar-sair {
        justify-content: center;
    }

    [data-menu="recolhido"] .sidebar-rodape {
        padding-left: 12px;
        padding-right: 12px;
    }

}


.alternador-menu {

    width: 36px;

    height: 36px;

    border-radius: var(--raio-peq);

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

    background: var(--papel);

    color: var(--tinta);

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    flex-shrink: 0;

}

.alternador-menu svg {
    width: 17px;
    height: 17px;
}

.topbar-esquerda {

    display: flex;

    align-items: center;

    gap: 16px;

    min-width: 0;

}

.topbar-esquerda h1 {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}


@media (max-width: 880px) {

    .alternador-menu {
        display: none;
    }

}


.topbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 18px 28px;

    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 20px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
    margin: 20px 28px 0 28px;
    position: sticky;

    top: 16px;

    z-index: 20;

    overflow: hidden;

}

.topbar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    border-radius: 20px 20px 0 0;
    background: linear-gradient(90deg, var(--verde-farda), var(--dourado-insignia), transparent);
}

[data-tema="escuro"] .topbar {
    background: rgba(15, 23, 42, 0.78);
    border-color: rgba(148, 163, 184, 0.14);
}


.topbar h1 {

    font-size: 21px;

    margin: 0;

}


.alternador-tema {

    width: 38px;

    height: 38px;

    border-radius: 50%;

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

    background: var(--papel);

    color: var(--tinta);

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

}

.alternador-tema svg {
    width: 17px;
    height: 17px;
}

.alternador-tema .icone-sol {
    display: none;
}

[data-tema="escuro"] .alternador-tema .icone-lua {
    display: none;
}

[data-tema="escuro"] .alternador-tema .icone-sol {
    display: block;
}


main {

    padding: 28px 32px 48px 32px;

    flex: 1;

}

main > * {
    position: relative;
    z-index: 1;
}


/* ============================================================
   CABEÇALHO DE PÁGINA / CARDS
   ============================================================ */

.pagina-topo {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 16px;

    margin-bottom: 26px;

    flex-wrap: wrap;

    padding: 6px 4px;

}


.pagina-topo h2 {

    margin: 0 0 4px 0;

    font-size: 28px;
    letter-spacing: -0.04em;

}


.destaque-vermelho {
    color: var(--verde-farda);
}


.secao-trocar-senha {
    display: none;
}

.secao-trocar-senha:target {
    display: block;
    scroll-margin-top: 24px;
}


.pagina-topo p {

    margin: 0;

    color: var(--tinta-suave);

    font-size: 14px;

}


.titulo-secao {

    font-size: 17px;

    margin: 34px 0 14px 0;

    padding: 10px 12px 10px 16px;

    border-left: 3px solid var(--dourado-insignia);
    background: linear-gradient(90deg, rgba(125, 211, 252, 0.08), transparent 92%);
    border-radius: 0 12px 12px 0;
    color: var(--tinta);

}


.cards {

    display: grid;

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

    gap: 18px;

}


.card {

    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.76));

    padding: 20px 22px;

    border-radius: var(--raio);

    box-shadow: var(--sombra);

    border: 1px solid var(--linha);
    border-top: 3px solid var(--dourado-insignia);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    position: relative;
    overflow: hidden;

}

.card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(130deg, rgba(125, 211, 252, 0.08), transparent 34%, transparent 100%);
    pointer-events: none;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 46px rgba(15, 23, 42, 0.14);
}

[data-tema="escuro"] .card {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.86), rgba(15, 23, 42, 0.72));
}


.card h3 {

    margin: 0 0 10px 0;

    font-size: 13px;

    font-weight: 500;

    font-family: var(--fonte-base);

    color: var(--tinta-suave);

    text-transform: uppercase;

    letter-spacing: 0.04em;

}


.card p {

    font-family: var(--fonte-mono);

    font-size: 26px;

    font-weight: 500;

    margin: 0;

    color: var(--tinta);

}


.card-alerta {

    display: block;

    text-decoration: none;

    color: inherit;

    border-top-color: var(--vinho-alerta);

    background: var(--vinho-alerta-fundo);

}


.card-alerta h3 {

    color: var(--vinho-alerta);

}


.card-alerta p {

    font-size: 16px;

    font-family: var(--fonte-base);

    color: var(--tinta);

}


.card-alerta-critico {

    border-left-color: var(--vinho-alerta);

    background: var(--vinho-alerta-fundo);

}


.card-alerta-critico h3 {

    color: var(--vinho-alerta);

}


.barra-progresso {

    width: 100%;

    height: 8px;

    background: rgba(148, 163, 184, 0.18);

    border-radius: 999px;

    overflow: hidden;

    margin-bottom: 6px;

    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);

}


.barra-progresso-preenchimento {

    height: 100%;

    background: linear-gradient(90deg, var(--sucesso), var(--dourado-insignia-forte));
    border-radius: inherit;

}


.grafico-container {

    background: var(--superficie);

    padding: 20px;

    border-radius: var(--raio);

    box-shadow: var(--sombra);

    margin-bottom: 20px;

    max-height: 340px;

}


.caixas {

    display: grid;

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

    gap: 18px;

    margin-top: 10px;

}


.caixa {

    background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,255,255,0.72));

    padding: 20px 22px;

    border-radius: var(--raio);

    box-shadow: var(--sombra);
    border: 1px solid var(--linha);
    position: relative;
    overflow: hidden;

}

.caixa::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--dourado-insignia), transparent);
}

[data-tema="escuro"] .caixa {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.86), rgba(15, 23, 42, 0.72));
}

.caixa h3 {

    margin: 0;

    font-size: 14px;

    font-weight: 500;

    font-family: var(--fonte-base);

    color: var(--tinta-suave);

}


.caixa strong {

    display: block;

    margin-top: 10px;

    font-size: 22px;

    font-family: var(--fonte-mono);

    font-weight: 500;

}


.caixa p {

    margin: 6px 0 0 0;

    font-size: 13px;

    color: var(--tinta-suave);

}


.botoes-dashboard {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}


/* ============================================================
   FILTROS
   ============================================================ */

.filtros {

    background: var(--superficie);

    padding: 18px 20px;

    border-radius: var(--raio);

    margin-bottom: 22px;

    display: flex;

    gap: 16px;

    flex-wrap: wrap;

    align-items: end;

    box-shadow: var(--sombra);

}


.filtros div {

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.filtros label {

    font-size: 12px;

    font-weight: 500;

    color: var(--tinta-suave);

    text-transform: uppercase;

    letter-spacing: 0.03em;

}


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

.tabela-container {

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

    border-radius: var(--raio);

    box-shadow: var(--sombra);
    border: 1px solid var(--linha);
    overflow-x: auto;
    backdrop-filter: blur(10px);

}

[data-tema="escuro"] .tabela-container {
    background: rgba(15, 23, 42, 0.72);
}

tbody tr:hover {
    background: rgba(125, 211, 252, 0.05);
}

th {
    background: rgba(125, 211, 252, 0.04);
}


table {

    width: 100%;

    border-collapse: collapse;

}


th,
td {

    padding: 13px 16px;

    text-align: left;

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

    font-size: 14px;

    white-space: nowrap;

}


th {

    background: transparent;

    font-family: var(--fonte-base);

    font-size: 12px;

    font-weight: 600;

    color: var(--tinta-suave);

    text-transform: uppercase;

    letter-spacing: 0.03em;

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

}


tbody tr:last-child td {
    border-bottom: none;
}


tbody tr:hover {
    background: var(--papel);
}


td:has(> form),
td.coluna-valor,
.valor-monetario {
    font-family: var(--fonte-mono);
}


.etiqueta-erro {

    display: inline-block;

    padding: 2px 8px;

    border-radius: 999px;

    background: var(--vinho-alerta-fundo);

    color: var(--vinho-alerta);

    font-size: 11px;

    font-weight: 700;

    margin-left: 6px;

}


.badge-notificacao {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 18px;

    height: 18px;

    padding: 0 5px;

    border-radius: 999px;

    background: var(--vinho-alerta);

    color: white;

    font-size: 11px;

    font-weight: 700;

    margin-left: auto;

}


/* ============================================================
   BOTÃO DE RETENÇÃO (segurar para confirmar)
   ============================================================ */

.botao-retencao {

    position: relative;

    overflow: hidden;

    isolation: isolate;

    user-select: none;

}


.botao-retencao-preenchimento {

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    width: 0%;

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

    z-index: 0;

    pointer-events: none;

}


.botao-retencao > :not(.botao-retencao-preenchimento) {

    position: relative;

    z-index: 1;

}


.botao-retencao.segurando {

    filter: brightness(0.95);

}


.botao-retencao-dica {

    display: block;

    font-size: 11px;

    font-weight: 400;

    opacity: 0.85;

    margin-top: 2px;

}


/* ============================================================
   LINHA CLICÁVEL E MODAL (projeção de pagamentos)
   ============================================================ */

.linha-clicavel {

    cursor: pointer;

}


.linha-clicavel:hover {

    background: var(--papel);

}


.dica-clique {

    font-size: 12px;

    color: var(--tinta-suave);

    margin-left: 6px;

}


.modal-fundo {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(8px) saturate(1.15);
    -webkit-backdrop-filter: blur(8px) saturate(1.15);
    z-index: 1000;

    align-items: center;

    justify-content: center;

}


.modal-caixa {

    /* Um pouco mais escuro que os cards comuns (--superficie),
       para se destacar melhor do conteúdo por trás do overlay. */
    background: var(--papel);

    border-radius: var(--raio);

    box-shadow: var(--sombra);

    padding: 24px;

    max-width: min(92vw, 980px);

    width: min(92vw, 980px);

    max-height: 80vh;

    overflow-y: auto;

    overflow-x: hidden;

}


.modal-caixa table {

    width: 100%;

    table-layout: fixed;

}


.modal-caixa th,
.modal-caixa td {

    white-space: normal;

    word-break: break-word;

    overflow-wrap: anywhere;

}


.modal-caixa td a {

    word-break: break-word;

    overflow-wrap: anywhere;

}


.modal-topo {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 16px;

}


.modal-topo h3 {

    margin: 0;

}


.modal-fechar {

    background: none;

    border: none;

    font-size: 22px;

    line-height: 1;

    color: var(--tinta-suave);

    cursor: pointer;

    padding: 4px 8px;

}


.modal-fechar:hover {

    color: var(--tinta);

    background: none;

}


.modal-total {

    text-align: right;

    font-weight: 700;

    margin-top: 12px;

}


/* ============================================================
   FICHA DE INFORMAÇÕES (largura total, compacta)
   ============================================================ */

.ficha-info {

    display: grid;

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

    gap: 16px 24px;

    background: var(--superficie);

    padding: 22px 24px;

    border-radius: var(--raio);

    box-shadow: var(--sombra);

    margin-bottom: 20px;

}


.ficha-info > div {

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.ficha-info span {

    font-size: 12px;

    font-weight: 600;

    color: var(--tinta-suave);

    text-transform: uppercase;

    letter-spacing: 0.03em;

}


.ficha-info strong {

    font-size: 14px;

    font-weight: 500;

    color: var(--tinta);

}


.ficha-info-linha-larga {

    grid-column: 1 / -1;

}


/* ============================================================
   FORMULÁRIOS
   ============================================================ */

.formulario {

    max-width: 600px;


    margin: 0 auto;

    background: var(--superficie);

    padding: 32px;

    border-radius: var(--raio);

    box-shadow: var(--sombra);

    border-top: 2px solid var(--dourado-insignia);

}


.formulario label {

    display: block;

    margin-top: 16px;

    margin-bottom: 6px;

    font-weight: 500;

    font-size: 13px;

    color: var(--tinta-suave);

}


.formulario input,
.formulario select {

    width: 100%;

}


.nota-campo,
.nota-formulario {

    display: block;

    margin-top: 6px;

    font-size: 12px;

    color: var(--tinta-suave);

    line-height: 1.5;

}


.acoes-formulario {

    display: flex;

    gap: 10px;

    margin-top: 26px;

}


/* ============================================================
   PAINEL DE PROJEÇÃO / GERAÇÃO DE MENSALIDADES
   ============================================================ */

.painel-geracao {

    background: var(--superficie);

    border-radius: var(--raio);

    box-shadow: var(--sombra);

    border-top: 2px solid var(--dourado-insignia);

    padding: 20px 22px;

    margin-bottom: 26px;

}


.painel-geracao-cabecalho h3 {

    margin: 0 0 4px 0;

    font-size: 16px;

}


.painel-geracao-cabecalho p {

    margin: 0 0 16px 0;

    font-size: 13px;

    color: var(--tinta-suave);

}


.painel-geracao-linha {

    display: flex;

    flex-wrap: wrap;

    align-items: end;

    gap: 14px;

    margin-bottom: 4px;

}


.painel-geracao-linha > div {

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.painel-geracao-linha label {

    font-size: 12px;

    font-weight: 500;

    color: var(--tinta-suave);

    text-transform: uppercase;

    letter-spacing: 0.03em;

}


.painel-geracao-linha input,
.painel-geracao-linha select {

    padding: 9px 11px;

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

    border-radius: var(--raio-peq);

    background: var(--papel);

    color: var(--tinta);

    font-size: 14px;

}


.mini-stats {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    background: var(--papel);

    border-radius: var(--raio-peq);

    padding: 14px 16px;

    margin: 16px 0;

}


.mini-stat {

    display: flex;

    flex-direction: column;

    gap: 3px;

    min-width: 130px;

    flex: 1;

}


.mini-stat span {

    font-size: 11px;

    color: var(--tinta-suave);

    text-transform: uppercase;

    letter-spacing: 0.03em;

}


.mini-stat strong {

    font-family: var(--fonte-mono);

    font-size: 16px;

    font-weight: 500;

}


.mini-stat-alerta strong {
    color: var(--vinho-alerta);
}


.mini-stat-destaque {

    border-left: 2px solid var(--dourado-insignia);

    padding-left: 12px;

}


.mini-stat-destaque strong {

    color: var(--dourado-insignia-forte);

    font-size: 18px;

}


.mini-stat-link {

    text-decoration: none;

    color: inherit;

    border-radius: var(--raio-peq);

    padding: 4px 6px;

    margin: -4px -6px;

    transition: background 0.15s ease;

}


.mini-stat-link:hover {

    background: rgba(176, 141, 87, 0.14);

}


.mini-stat-link span {

    text-decoration: underline;

    text-decoration-color: var(--linha);

    text-underline-offset: 3px;

}


.status-badge {

    display: inline-block;

    padding: 4px 12px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 600;

    white-space: nowrap;

}


.status-pago {

    background: var(--sucesso-fundo);

    color: var(--sucesso);

}


.status-pendente {

    background: var(--atencao-fundo);

    color: var(--atencao);

}


.status-vencido {

    background: var(--vinho-alerta-fundo);

    color: var(--vinho-alerta);

    font-weight: 700;

}


/* ============================================================
   LINHA DE PARCELA/MENSALIDADE VENCIDA
   Destaca a linha inteira da tabela para identificação rápida.
   ============================================================ */

tr.linha-vencida {

    background: var(--vinho-alerta-fundo);

}

tr.linha-vencida:hover {

    background: var(--vinho-alerta-fundo);

    filter: brightness(0.97);

}

[data-tema="escuro"] tr.linha-vencida:hover {

    filter: brightness(1.08);

}

tr.linha-vencida td {

    border-bottom-color: rgba(140, 59, 46, 0.25);

}


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

@media (max-width: 880px) {

    .sidebar {

        transform: translateX(-100%);

        z-index: 50;

    }

    .sidebar.aberta {
        transform: translateX(0);
    }

    .sobreposicao-sidebar.visivel {
        display: block;
    }

    .botao-menu-movel {
        display: flex;
    }

    .area-principal {
        margin-left: 0;
    }

    .topbar {
        padding: 16px 20px 16px 64px;
    }

    main {
        padding: 20px 18px 40px 18px;
    }

    .formulario {
        padding: 24px 20px;
    }

}


@media (prefers-reduced-motion: reduce) {

    * {
        transition: none !important;
        scroll-behavior: auto !important;
    }

}