/* ==========================================================================
   TEMA MODERNO - FEBRAFAR NOTAS
   --------------------------------------------------------------------------
   Este arquivo e carregado DEPOIS do <style> de cada tela, entao ele vence a
   cascata e repagina o sistema inteiro sem precisar reescrever o HTML/JS.

   PARA DESLIGAR O TEMA: remova a linha
       <link rel="stylesheet" href="/css/tema.css">
   dos arquivos admin.html, user.html e index.html. O visual antigo volta.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    /* Base mais profunda e menos "cinza sujo" que a anterior */
    --bg-main: #0b0f1a;
    --bg-sidebar: #0e1320;
    --bg-card: #141a2a;
    --border-color: rgba(255, 255, 255, 0.07);
    --text-main: #f1f5f9;
    --text-light: #94a3b8;

    --febrafar-yellow: #fbbf24;
    --febrafar-green: #22c55e;
    --febrafar-blue: #3b82f6;
    --febrafar-red: #f43f5e;
    --febrafar-purple: #a855f7;

    --glass: rgba(255, 255, 255, 0.04);
    --glass-hover: rgba(255, 255, 255, 0.07);

    --raio: 16px;
    --sombra: 0 4px 24px rgba(0, 0, 0, 0.4);
    --sombra-alta: 0 12px 40px rgba(0, 0, 0, 0.55);

    /* Curva de animacao unica: da o "liso" pedido */
    --mola: cubic-bezier(0.22, 1, 0.36, 1);
    --suave: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- FUNDO COM LUZ AMBIENTE ---------- */
body {
    background-color: var(--bg-main) !important;
    background-image:
        radial-gradient(1000px 560px at 10% -10%, rgba(59, 130, 246, 0.20), transparent 60%),
        radial-gradient(800px 560px at 100% 0%, rgba(168, 85, 247, 0.17), transparent 55%),
        radial-gradient(900px 700px at 50% 115%, rgba(34, 197, 94, 0.13), transparent 60%);
    background-attachment: fixed;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    letter-spacing: -0.011em;
    -webkit-font-smoothing: antialiased;
}

/* ---------- CORREÇÃO DO BOOTSTRAP PARA O TEMA ESCURO ----------
   O .text-muted do Bootstrap é #6c757d, pensado para fundo BRANCO. Sobre o nosso fundo
   (#0b0f1a) ele quase desaparece - foi o que sumiu a mensagem "Conectando ao Gmail...".
   Corrigido na raiz, em vez de caçar cada uso: vale para os que existem e para os próximos.
   Precisa de !important porque a utilitária do Bootstrap também usa. */
.text-muted { color: var(--text-light) !important; }

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.18); background-clip: content-box; }

/* ---------- SIDEBAR ---------- */
/* Sem backdrop-filter aqui de propósito: é um elemento fixo com conteúdo rolando por baixo,
   então o navegador teria que refazer o desfoque em todo scroll/animação - muito pesado em
   GPUs mais fracas/integradas. O fundo já é bem opaco (0.9-0.95), então visualmente quase
   não se perde nada ao trocar "vidro desfocado" por "vidro sólido". */
.sidebar {
    background: linear-gradient(180deg, rgba(20, 26, 42, 0.94), rgba(11, 15, 26, 0.97)) !important;
    border-right: 1px solid var(--border-color) !important;
    box-shadow: 1px 0 30px rgba(0, 0, 0, 0.35);
}
.brand {
    border-bottom: 1px solid var(--border-color) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
}
.brand img { transition: transform 0.5s var(--mola); }
.brand:hover img { transform: rotate(-8deg) scale(1.12); }

.nav-item {
    position: relative;
    margin: 4px 12px;
    padding: 12px 16px !important;
    border-radius: 12px;
    font-weight: 500;
    border-right: none !important;
    overflow: hidden;
    transition: color 0.25s var(--suave), background 0.25s var(--suave), transform 0.25s var(--mola);
}
.nav-item i { transition: transform 0.35s var(--mola); }
.nav-item:hover { background: var(--glass-hover) !important; transform: translateX(4px); color: var(--text-main) !important; }
.nav-item:hover i { transform: scale(1.15); }

/* Barra luminosa que marca a aba ativa */
.nav-item.active {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.18), rgba(59, 130, 246, 0.02)) !important;
    color: #fff !important;
}
.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 60%;
    border-radius: 0 4px 4px 0;
    background: var(--febrafar-blue);
    box-shadow: 0 0 12px var(--febrafar-blue);
    animation: crescerBarra 0.4s var(--mola);
}
.nav-item.nav-error.active { background: linear-gradient(90deg, rgba(244, 63, 94, 0.18), transparent) !important; color: #fff !important; }
.nav-item.nav-error.active::before { background: var(--febrafar-red); box-shadow: 0 0 12px var(--febrafar-red); }
.nav-item.nav-super.active { background: linear-gradient(90deg, rgba(168, 85, 247, 0.18), transparent) !important; color: #fff !important; }
.nav-item.nav-super.active::before { background: var(--febrafar-purple); box-shadow: 0 0 12px var(--febrafar-purple); }

@keyframes crescerBarra { from { height: 0; opacity: 0; } to { height: 60%; opacity: 1; } }

/* ---------- TOPO ---------- */
/* Mesmo motivo do .sidebar: fica fixo no topo com o conteúdo rolando por baixo. Tirei o
   backdrop-filter e subi a opacidade pra compensar - visual quase igual, sem o custo de
   desfocar tudo que passa por baixo a cada scroll. */
.topbar {
    background: rgba(11, 15, 26, 0.86) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 18px 40px !important;
}
#titulo-pagina { font-weight: 700 !important; letter-spacing: -0.03em; }

.avatar-top {
    background: linear-gradient(135deg, var(--febrafar-blue), var(--febrafar-purple)) !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
    transition: transform 0.4s var(--mola), box-shadow 0.4s var(--suave);
}
.avatar-top:hover { transform: scale(1.12) rotate(6deg); box-shadow: 0 6px 22px rgba(59, 130, 246, 0.55); }

/* ---------- CARDS DE VIDRO ----------
   Reforcado: antes o brilho so aparecia MUITO de leve (opacidade quase zero) e o friso
   colorido do topo so existia em telas isoladas (login/financeiro). Agora todo card-custom
   do sistema (dashboards, gestao de documentos, alertas etc.) ganha o mesmo tratamento:
   vidro mais opaco, sombra permanente (nao so no hover) e uma linha de luz no topo. */
.card-custom, .filter-card, .modal-content {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)) !important;
    /* Raio de blur bem menor que antes (era 18px): custo de desfoque cresce ~quadraticamente
       com o raio, então isso já cai bastante o consumo de GPU sem perder o efeito vidro,
       mesmo quando várias dessas caixas aparecem juntas na tela (ex: dashboard). */
    backdrop-filter: blur(6px) saturate(130%);
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: var(--raio) !important;
    box-shadow: var(--sombra), 0 1px 0 rgba(255,255,255,0.06) inset !important;
}
.card-custom {
    position: relative;
    transition: transform 0.4s var(--mola), box-shadow 0.4s var(--suave), border-color 0.3s var(--suave);
    animation: subirEntrada 0.55s var(--mola) both;
}
.card-custom::before {
    content: '';
    position: absolute; top: 0; left: 14px; right: 14px; height: 3px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, var(--febrafar-blue), var(--febrafar-purple), var(--febrafar-green));
    box-shadow: 0 0 12px rgba(59,130,246,0.5);
    opacity: 0.9;
    pointer-events: none;
}
.card-custom:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-alta), 0 0 0 1px rgba(255,255,255,0.06) inset !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}
.modal-content { box-shadow: var(--sombra-alta) !important; }

/* ---------- BOTOES ---------- */
.btn { border-radius: 12px !important; font-weight: 600 !important; letter-spacing: -0.01em; }
.btn-primary-custom, .btn-yellow, .btn-import, .btn-outline-light, .btn-outline-warning, .btn-outline-secondary, .btn-success, .btn-danger {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s var(--mola), box-shadow 0.3s var(--suave), filter 0.3s var(--suave) !important;
}
/* Brilho que atravessa o botao no hover */
.btn-primary-custom::after, .btn-yellow::after, .btn-success::after {
    content: '';
    position: absolute;
    top: 0; left: -80%;
    width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s var(--suave);
}
.btn-primary-custom:hover::after, .btn-yellow:hover::after, .btn-success:hover::after { left: 130%; }

.btn-primary-custom {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);
}
.btn-primary-custom:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(59, 130, 246, 0.45); }

.btn-yellow {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    color: #0b0f1a !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(251, 191, 36, 0.28);
}
.btn-yellow:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(251, 191, 36, 0.42); }

.btn-import {
    background: var(--glass) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
}
.btn-import:hover { background: var(--glass-hover) !important; transform: translateY(-2px); border-color: rgba(255,255,255,0.25) !important; }

.btn-success { background: linear-gradient(135deg, #22c55e, #16a34a) !important; border: none !important; }
.btn-success:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(34, 197, 94, 0.4); }
.btn:active { transform: translateY(0) scale(0.97) !important; }

/* ---------- FORMULARIOS ---------- */
.form-control, .form-select {
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1.5px solid rgba(148, 163, 184, 0.45) !important;
    border-radius: 12px !important;
    color: var(--text-main) !important;
    padding: 10px 14px;
    transition: border-color 0.25s var(--suave), box-shadow 0.25s var(--suave), background 0.25s var(--suave) !important;
}
.form-control:hover, .form-select:hover { border-color: rgba(148, 163, 184, 0.7) !important; }
.form-control:focus, .form-select:focus {
    background: rgba(0, 0, 0, 0.35) !important;
    border-color: var(--febrafar-blue) !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15) !important;
}
.form-control::placeholder { color: #64748b !important; }

/* ---------- TABELAS ---------- */
.table-custom th {
    background: rgba(0, 0, 0, 0.25) !important;
    color: var(--text-light) !important;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--border-color) !important;
}
.table-custom td { border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important; }
.table-custom tbody tr {
    transition: background 0.25s var(--suave), transform 0.25s var(--mola), box-shadow 0.25s var(--suave);
}
.table-custom tbody tr:hover {
    background: rgba(255, 255, 255, 0.045) !important;
    transform: scale(1.004);
    box-shadow: inset 3px 0 0 var(--febrafar-blue);
}

/* ---------- ICONES DE ACAO ---------- */
.action-icon {
    border-radius: 10px !important;
    transition: transform 0.3s var(--mola), color 0.2s var(--suave), background 0.2s var(--suave) !important;
}
.action-icon:hover { transform: translateY(-2px) scale(1.18) !important; }

/* ---------- BADGES ---------- */
.badge {
    border-radius: 8px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    padding: 0.4em 0.7em !important;
}
/* Badge de alerta na sidebar pulsa discretamente para chamar atencao */
#badge-erros, #badge-radar { animation: pulsar 2.4s ease-in-out infinite; }
@keyframes pulsar {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.5); }
    50% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(251, 191, 36, 0); }
}

/* ---------- MODAIS E TOASTS ---------- */
.modal.fade .modal-dialog { transform: scale(0.94) translateY(24px) !important; opacity: 0 !important; transition: all 0.45s var(--mola) !important; }
.modal.show .modal-dialog { transform: scale(1) translateY(0) !important; opacity: 1 !important; }
.modal-backdrop.show { backdrop-filter: blur(6px); opacity: 0.7 !important; }

/* ---------- NOTIFICACOES ---------- */
#toast-container {
    /* Acima do sino (que fica no canto), para nao se sobreporem */
    position: fixed; bottom: 76px; right: 24px; z-index: 1060;
    display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
    max-width: 380px;
}
.toast-custom {
    display: flex; align-items: center; gap: 10px;
    background: rgba(20, 26, 42, 0.95);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--febrafar-green);
    border-radius: 12px;
    box-shadow: var(--sombra-alta);
    padding: 12px 14px; color: var(--text-main); font-weight: 600; font-size: 0.86rem;
    /* Entra deslizando da direita; a transicao serve para entrar E sair */
    opacity: 0; transform: translateX(40px);
    transition: opacity 0.3s var(--suave), transform 0.3s var(--mola);
}
.toast-custom.entrou { opacity: 1; transform: translateX(0); }
.toast-custom.saindo { opacity: 0; transform: translateX(40px); }
.toast-custom .toast-conteudo { display: flex; align-items: center; gap: 8px; flex: 1; }
.toast-custom .toast-fechar {
    background: none; border: none; color: var(--text-light);
    font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 2px;
}
.toast-custom .toast-fechar:hover { color: var(--text-main); }
.toast-error { border-left-color: var(--febrafar-red); }
.toast-warning { border-left-color: var(--febrafar-yellow); }

/* Sino pequeno com o histórico de notificações */
#notif-hist-btn {
    position: fixed; bottom: 24px; right: 24px; z-index: 1059;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--glass); border: 1px solid var(--border-color);
    color: var(--text-light); cursor: pointer;
    box-shadow: var(--sombra);
    transition: all 0.25s var(--suave);
}
#notif-hist-btn:hover { background: var(--glass-hover); color: var(--text-main); transform: translateY(-2px); }
#notif-hist-badge {
    position: absolute; top: -6px; right: -6px;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--febrafar-blue); color: #fff;
    border-radius: 999px; font-size: 0.66rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.notif-hist-corpo { max-height: 50vh; overflow-y: auto; }
.notif-hist-vazio { color: var(--text-light); text-align: center; padding: 24px; }
.notif-hist-item {
    display: flex; gap: 10px; align-items: baseline;
    padding: 9px 4px; border-bottom: 1px solid var(--border-color);
    color: var(--text-main); font-size: 0.84rem;
}
.notif-hist-item:last-child { border-bottom: none; }
.notif-hist-hora { color: var(--text-light); font-size: 0.72rem; white-space: nowrap; min-width: 60px; }

/* ---------- ENTRADA DAS TELAS E LINHAS ---------- */
.tela-ativa { animation: entrarTela 0.5s var(--mola) both !important; }
@keyframes entrarTela { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes subirEntrada { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.anim-row { animation: entrarLinha 0.45s var(--mola) both !important; }
@keyframes entrarLinha { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }

/* ---------- TIMELINE ---------- */
.timeline-item::before { box-shadow: 0 0 0 4px var(--bg-card), 0 0 14px currentColor !important; }

/* ==========================================================================
   RADAR - LAYOUT NOVO
   Principio: a tela e monocromatica por padrao. Cor = problema.
   Se tudo esta certo, nada brilha - e o olho vai direto no que importa.
   ========================================================================== */

/* ---------- Resumo em numeros ---------- */
.radar-resumo { display: flex; gap: 14px; flex-wrap: wrap; }
.radar-stat {
    flex: 1; min-width: 150px;
    padding: 18px 20px;
    border-radius: var(--raio);
    background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
    border: 1px solid rgba(255,255,255,0.09);
    box-shadow: var(--sombra);
    display: flex; flex-direction: column;
    transition: border-color 0.3s var(--suave), transform 0.35s var(--mola), box-shadow 0.3s var(--suave);
}
.radar-stat:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.22); box-shadow: var(--sombra-alta); }
.radar-stat-num { font-size: 2.1rem; font-weight: 800; color: var(--text-main); line-height: 1.1; font-variant-numeric: tabular-nums; text-shadow: 0 0 22px rgba(255,255,255,0.12); }
.radar-stat-label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-light); margin-top: 4px; }
/* Cor so quando ha algo a resolver */
.radar-stat.alerta { border-color: rgba(251, 191, 36, 0.55); background: linear-gradient(160deg, rgba(251,191,36,0.14), rgba(251,191,36,0.03)); }
.radar-stat.alerta .radar-stat-num { color: var(--febrafar-yellow); text-shadow: 0 0 22px rgba(251,191,36,0.35); }
.radar-stat.critico { border-color: rgba(244, 63, 94, 0.55); background: linear-gradient(160deg, rgba(244,63,94,0.14), rgba(244,63,94,0.03)); }
.radar-stat.critico .radar-stat-num { color: var(--febrafar-red); text-shadow: 0 0 22px rgba(244,63,94,0.35); }

/* ---------- Painel "Precisa de voce" ----------
   Reforcado: borda mais visivel, sombra permanente e um friso colorido no topo (azul para
   listas neutras, amarelo quando ha algo pra resolver) - o mesmo "toque especial" do login
   e do financeiro, so que aplicado aqui tambem. */
.painel-acao, .painel-lista {
    position: relative;
    border-radius: var(--raio);
    border: 1px solid rgba(255,255,255,0.1);
    background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.018));
    backdrop-filter: blur(6px);
    box-shadow: var(--sombra);
    overflow: hidden;
    animation: subirEntrada 0.5s var(--mola) both;
    transition: box-shadow 0.3s var(--suave), border-color 0.3s var(--suave), transform 0.3s var(--mola);
}
.painel-acao::before, .painel-lista::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--febrafar-blue);
    box-shadow: 0 0 14px var(--febrafar-blue);
}
.painel-acao { border-color: rgba(251, 191, 36, 0.35); }
.painel-acao::before { background: var(--febrafar-yellow); box-shadow: 0 0 14px var(--febrafar-yellow); }
.painel-acao.tudo-certo { border-color: rgba(255,255,255,0.1); }
.painel-acao.tudo-certo::before { background: var(--febrafar-green); box-shadow: 0 0 14px var(--febrafar-green); }

.painel-acao-topo, .painel-lista-topo {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}
.painel-acao-topo h6 { color: var(--febrafar-yellow); font-weight: 600; font-size: 0.95rem; }
.painel-acao.tudo-certo .painel-acao-topo h6 { color: var(--text-light); }
.contador-acao {
    min-width: 26px; text-align: center;
    padding: 2px 9px; border-radius: 999px;
    background: rgba(251, 191, 36, 0.16); color: var(--febrafar-yellow);
    font-weight: 700; font-size: 0.8rem;
}
.painel-acao.tudo-certo .contador-acao { background: var(--glass); color: var(--text-light); }

.acao-item {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    animation: entrarLinha 0.4s var(--mola) both;
    transition: background 0.25s var(--suave);
}
.acao-item:last-child { border-bottom: none; }
.acao-item:hover { background: rgba(255,255,255,0.03); }
.acao-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.acao-nome { color: var(--text-main); font-weight: 600; }
.acao-detalhe { color: var(--text-light); font-size: 0.82rem; }
.acao-controles { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.acao-tag {
    font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700;
    padding: 3px 8px; border-radius: 6px;
}
.acao-tag.classificar { background: rgba(59, 130, 246, 0.16); color: #93c5fd; }
.acao-tag.juntar      { background: rgba(168, 85, 247, 0.16); color: #d8b4fe; }
.acao-tag.conferir    { background: rgba(34, 197, 94, 0.16); color: #86efac; }
.bloco-conferencia { align-items: flex-start; }
.bloco-conferencia .acao-info { flex-direction: column; align-items: flex-start; gap: 6px; }
.bloco-conferencia .acao-detalhe { line-height: 1.5; }

/* "ver detalhe técnico" nos alertas: o texto cru fica escondido até alguém pedir */
.alerta-detalhe { margin-top: 6px; }
.alerta-detalhe summary {
    cursor: pointer; color: var(--text-light); font-size: 0.75rem;
    list-style: none; user-select: none; opacity: 0.7;
}
.alerta-detalhe summary:hover { opacity: 1; color: var(--febrafar-blue); }
.alerta-detalhe summary::before { content: "\f0da"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 6px; }
.alerta-detalhe[open] summary::before { content: "\f0d7"; }
.alerta-detalhe pre {
    margin: 6px 0 0; padding: 10px; max-height: 180px; overflow: auto;
    background: rgba(0,0,0,0.35); border: 1px solid var(--border-color); border-radius: 8px;
    color: #94a3b8; font-size: 0.72rem; white-space: pre-wrap; word-break: break-word;
}

/* "Jira e Atlassian são a mesma ferramenta?" - precisa de mais espaço que uma linha comum */
.bloco-sugestao { align-items: flex-start; }
.bloco-sugestao .acao-info { flex-direction: column; align-items: flex-start; gap: 6px; }
.bloco-sugestao .acao-detalhe { line-height: 1.5; }
.sugestao-pdfs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px;
                 color: var(--text-light); font-size: 0.76rem; }
.sugestao-pdfs .btn-pdf { padding: 4px 10px; font-size: 0.72rem; }
.acao-tag.faltando    { background: rgba(251, 191, 36, 0.16); color: #fcd34d; }
.acao-tag.atrasada    { background: rgba(244, 63, 94, 0.16); color: #fda4af; }

.sel-mini {
    background: rgba(255,255,255,0.05); color: var(--text-main);
    border: 1.5px solid rgba(148,163,184,0.45); border-radius: 9px;
    padding: 6px 10px; font-size: 0.82rem; outline: none;
    transition: border-color 0.25s var(--suave), box-shadow 0.25s var(--suave);
}
.sel-mini:focus { border-color: var(--febrafar-blue); box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }

.btn-resolver {
    background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff;
    border: none; border-radius: 9px; padding: 7px 16px;
    font-weight: 600; font-size: 0.82rem;
    transition: transform 0.3s var(--mola), box-shadow 0.3s var(--suave);
}
.btn-resolver:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(34,197,94,0.35); }
.btn-ghost {
    background: var(--glass); color: var(--text-light);
    border: 1px solid var(--border-color); border-radius: 9px;
    padding: 7px 14px; font-size: 0.82rem;
    transition: all 0.25s var(--suave);
}
.btn-ghost:hover { background: var(--glass-hover); color: var(--text-main); }
.btn-excluir-nota:hover { background: rgba(239, 83, 80, 0.15); color: #ef5350; border-color: rgba(239, 83, 80, 0.5); }

/* ---------- Lista de ferramentas ---------- */
.busca-wrap { position: relative; display: flex; align-items: center; }
.busca-wrap i { position: absolute; left: 12px; color: var(--text-light); font-size: 0.8rem; }
.busca-wrap input {
    background: rgba(0,0,0,0.3); border: 1px solid var(--border-color);
    border-radius: 10px; padding: 8px 14px 8px 32px;
    color: var(--text-main); font-size: 0.85rem; outline: none; width: 240px;
    transition: width 0.35s var(--mola), border-color 0.25s var(--suave), box-shadow 0.25s var(--suave);
}
.busca-wrap input:focus { width: 300px; border-color: var(--febrafar-blue); box-shadow: 0 0 0 3px rgba(59,130,246,0.13); }

/* Fica DENTRO do painel, que ja tem padding proprio - sem margem negativa, que era o que
   fazia esta linha subir por cima da linha dos campos. */
.busca-nota-pe {
    margin-top: 10px;
    color: var(--text-light); font-size: 0.76rem;
}

/* ---------- Painel de filtros (no topo da tela, vale para a lista toda) ---------- */
.painel-filtros {
    position: relative;
    background: linear-gradient(160deg, rgba(255,255,255,0.055), rgba(255,255,255,0.014));
    border: 1px solid rgba(255,255,255,0.09);
    box-shadow: var(--sombra);
    border-radius: 16px; overflow: hidden;
}
.painel-filtros::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--febrafar-purple);
    box-shadow: 0 0 14px rgba(168,85,247,0.5);
}
.grade-filtros {
    display: grid; gap: 12px 14px; padding: 16px 20px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    align-items: end;
}
.campo-filtro { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.campo-filtro > span {
    color: var(--text-light); font-size: 0.72rem;
    text-transform: uppercase; letter-spacing: 0.06em;
}
/* A busca por nome e a busca por numero precisam de mais espaco que um seletor */
.campo-filtro.campo-largo { grid-column: span 2; }
@media (max-width: 700px) { .campo-filtro.campo-largo { grid-column: span 1; } }

.campo-filtro .busca-wrap input,
.campo-filtro .busca-wrap input:focus { width: 100%; }
.campo-filtro .sel-mini { width: 100%; padding: 8px 10px; }

.filtro-valor { -moz-appearance: textfield; }
/* O Chrome poe setinhas de +/- que so atrapalham num campo de preco */
.filtro-valor::-webkit-outer-spin-button,
.filtro-valor::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ferramenta-linha {
    display: grid;
    /* nome | notas | status | acoes | seta */
    grid-template-columns: 1fr 150px 190px 110px 24px;
    align-items: center; gap: 12px;
    padding: 14px 18px;
    margin: 8px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
    border-left: 3px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.02);
    cursor: pointer;
    overflow: visible;
    animation: entrarLinha 0.4s var(--mola) both;
    transition: background 0.25s var(--suave), transform 0.25s var(--mola), box-shadow 0.25s var(--suave), border-color 0.25s var(--suave);
}
.ferramenta-linha:hover {
    background: rgba(255,255,255,0.055);
    transform: translateX(4px) translateY(-1px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.3);
    border-color: rgba(255,255,255,0.14);
}
.ferramenta-linha:hover .fl-seta { transform: translateX(4px); color: var(--text-main); }
/* Frisa a lateral com a cor da situacao, sem precisar mexer no JS que monta a linha */
.ferramenta-linha:has(.pilula.ok)    { border-left-color: var(--febrafar-green); }
.ferramenta-linha:has(.pilula.aviso) { border-left-color: var(--febrafar-yellow); }
.ferramenta-linha:has(.pilula.erro)  { border-left-color: var(--febrafar-red); }
.fl-nome strong { color: var(--text-main); font-weight: 600; display: block; }
.fl-meta { display: block; color: var(--text-light); font-size: 0.76rem; margin-top: 2px; }
.fl-notas { color: var(--text-light); font-size: 0.84rem; }
.fl-seta { color: var(--text-light); transition: transform 0.3s var(--mola), color 0.25s var(--suave); text-align: right; }

/* Pilula de status: cinza quando esta tudo bem - reforcada com mais saturacao e um leve
   brilho na cor, pra ficar visivel de relance (antes era quase transparente). */
.pilula {
    display: inline-block; padding: 4px 11px; border-radius: 999px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
    border: 1px solid transparent;
}
.pilula.ok     { background: rgba(34,197,94,0.14); color: #6ee7a5; border-color: rgba(34,197,94,0.35); box-shadow: 0 0 10px rgba(34,197,94,0.15); }
.pilula.neutro { background: rgba(148,163,184,0.1); color: #94a3b8; border-color: rgba(148,163,184,0.25); }
.pilula.aviso  { background: rgba(251, 191, 36, 0.18); color: #fcd34d; border-color: rgba(251,191,36,0.4); box-shadow: 0 0 10px rgba(251,191,36,0.18); }
.pilula.erro   { background: rgba(244, 63, 94, 0.18); color: #fda4af; border-color: rgba(244,63,94,0.42); box-shadow: 0 0 10px rgba(244,63,94,0.18); }

.painel-lista-rodape { padding: 12px 20px; border-top: 1px solid var(--border-color); }
.vazio-msg { padding: 32px 20px; text-align: center; color: var(--text-light); font-size: 0.88rem; }
.vazio-msg i { color: var(--febrafar-green); margin-right: 6px; }

/* ---------- Gaveta lateral (historico da ferramenta) ---------- */
.gaveta-fundo {
    position: fixed; inset: 0; z-index: 1040;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
    opacity: 0; visibility: hidden;
    transition: opacity 0.35s var(--suave), visibility 0.35s;
}
.gaveta-fundo.visivel { opacity: 1; visibility: visible; }

.gaveta {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 1050;
    width: min(520px, 92vw);
    background: linear-gradient(160deg, #141a2a, #0e1320);
    border-left: 1px solid var(--border-color);
    box-shadow: -20px 0 60px rgba(0,0,0,0.5);
    transform: translateX(100%);
    transition: transform 0.45s var(--mola);
    display: flex; flex-direction: column;
}
.gaveta.aberta { transform: translateX(0); }
.gaveta-topo {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 22px 24px; border-bottom: 1px solid var(--border-color);
}
.btn-fechar-gaveta {
    background: var(--glass); border: 1px solid var(--border-color);
    color: var(--text-light); border-radius: 10px;
    width: 34px; height: 34px;
    transition: all 0.25s var(--suave);
}
.btn-fechar-gaveta:hover { background: var(--glass-hover); color: #fff; transform: rotate(90deg); }
.gaveta-corpo { padding: 20px 24px; overflow-y: auto; flex: 1; }
.gaveta-bloco { margin-bottom: 30px; }
/* Destaque das seções "Pendências" e "Notas recebidas": título mais forte + linha azul
   de separação embaixo, para separar bem as partes dentro da ferramenta. */
.gaveta-titulo {
    font-size: 0.95rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-main); margin: 0 0 14px; padding-bottom: 8px;
    border-bottom: 2px solid var(--febrafar-blue);
}
.gaveta-falta { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--text-main); font-size: 0.88rem; }
.gaveta-nota {
    display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 14px;
    padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
    animation: entrarLinha 0.35s var(--mola) both;
}
.gaveta-nota strong { color: var(--text-main); }

/* ---------- Gestao de centros por nota (aba Notas do modal de centros) ---------- */
.cf-abas .nav-link {
    color: var(--text-light); background: transparent;
    border: 1px solid var(--border-color); border-radius: 8px; margin-right: 8px;
    font-size: 0.82rem; padding: 6px 14px;
}
.cf-abas .nav-link.active { background: var(--febrafar-blue); color: #fff; border-color: var(--febrafar-blue); }
.cf-nota {
    display: grid; grid-template-columns: 1fr auto 150px; align-items: center; gap: 12px;
    padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.cf-nota:last-child { border-bottom: none; }
.cf-nota.esperando { border-left: 2px solid var(--febrafar-yellow); padding-left: 10px; }
.cf-nota-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cf-nota .sel-mini { width: 100%; }

/* ---------- Centros de custo de uma ferramenta (o caso dos 3 Jiras) ---------- */
.cf-linha {
    display: grid; grid-template-columns: 140px 1fr auto; align-items: center; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cf-linha:last-child { border-bottom: none; }
.cf-linha code { word-break: break-all; }
.cf-form {
    margin-top: 14px; padding: 14px;
    background: rgba(59,130,246,0.06); border: 1px solid rgba(59,130,246,0.2);
    border-radius: 12px;
}

/* ---------- Notas iguais (a mesma cobrança que chegou duas vezes) ---------- */
.check-nota { width: 16px; height: 16px; accent-color: var(--febrafar-blue); cursor: pointer; }

.dica-iguais {
    color: var(--text-light); font-size: 0.78rem; line-height: 1.5;
    padding: 10px 12px; margin-bottom: 10px;
    background: rgba(59,130,246,0.07); border: 1px solid rgba(59,130,246,0.18);
    border-radius: 10px;
}
.barra-iguais {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 0 12px; border-bottom: 1px solid var(--border-color);
    color: var(--text-light); font-size: 0.8rem;
}
.barra-iguais .btn-resolver:disabled {
    opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none;
    background: var(--glass); color: var(--text-light);
}

/* A segunda via fica recuada embaixo da nota que ela repete - a hierarquia é a explicação */
.gaveta-nota.igual {
    padding-left: 16px; border-left: 2px solid rgba(59,130,246,0.35);
    background: rgba(59,130,246,0.04);
}
.gaveta-nota.igual .btn-ghost { padding: 5px 10px; font-size: 0.75rem; }
.gaveta-valor { color: var(--text-light); font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.btn-pdf {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 9px; font-size: 0.78rem; font-weight: 600;
    background: rgba(244, 63, 94, 0.12); color: #fda4af;
    border: 1px solid rgba(244,63,94,0.28); text-decoration: none;
    transition: all 0.25s var(--suave);
}
.btn-pdf:hover { background: rgba(244,63,94,0.2); color: #fff; transform: translateY(-1px); }
.btn-pdf.desativado {
    background: transparent; color: #475569;
    border-color: var(--border-color); cursor: not-allowed;
}

/* ---------- Busca de e-mails ---------- */
.painel-busca {
    position: relative;
    border-radius: var(--raio);
    border: 1px solid rgba(255,255,255,0.1);
    background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.018));
    backdrop-filter: blur(6px);
    box-shadow: var(--sombra);
    padding: 16px 20px;
    overflow: hidden;
    animation: subirEntrada 0.5s var(--mola) both;
}
.painel-busca::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--febrafar-blue), var(--febrafar-purple));
    box-shadow: 0 0 14px rgba(59,130,246,0.5);
}
.busca-linha { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.busca-campo { display: flex; flex-direction: column; gap: 5px; }
.busca-campo label {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-light); margin: 0;
}
.busca-dica { font-size: 11px; color: var(--text-light); white-space: nowrap; }
.busca-check {
    display: flex; align-items: center; gap: 7px;
    color: var(--text-light); font-size: 0.84rem; cursor: pointer;
    padding-bottom: 7px; margin: 0;
}
.busca-check input { accent-color: var(--febrafar-blue); width: 15px; height: 15px; cursor: pointer; }
.busca-check:hover span { color: var(--text-main); }

.btn-buscar {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff; border: none; border-radius: 10px;
    padding: 9px 18px; font-weight: 600; font-size: 0.86rem;
    margin-left: auto;
    box-shadow: 0 4px 14px rgba(59,130,246,0.28);
    transition: transform 0.3s var(--mola), box-shadow 0.3s var(--suave);
}
.btn-buscar.compacto { margin-left: 0; padding: 7px 14px; font-size: 0.82rem; }
.btn-buscar:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(59,130,246,0.42); }
.btn-buscar:disabled { opacity: 0.6; transform: none; }

.busca-resultado:not(:empty) {
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid var(--border-color);
    display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
    font-size: 0.85rem; color: var(--text-light);
    animation: entrarLinha 0.4s var(--mola) both;
}
.res-item strong { color: var(--text-main); }
.res-item.ok strong { color: var(--febrafar-green); }
.res-erro { color: #fda4af; }
.res-dica { color: var(--febrafar-yellow); font-size: 0.82rem; }
/* Enquanto a varredura roda. Nao usar .text-muted do Bootstrap: e cinza escuro e some
   no fundo escuro do tema - a mensagem ficava invisivel justo quando importa. */
.res-aguardando { color: var(--text-main); }

/* Caixa "tem só um centro de custo" na linha de classificar */
.check-um-centro {
    display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 0;
    color: var(--text-light); font-size: 0.78rem; cursor: pointer;
}
.check-um-centro input { width: 14px; height: 14px; accent-color: var(--febrafar-blue); cursor: pointer; }
.check-um-centro:hover span { color: var(--text-main); }

/* Os documentos de uma mesma despesa (a fatura e o recibo dela), na linha da nota */
.docs-da-nota { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.docs-da-nota .btn-pdf { padding: 3px 9px; font-size: 0.7rem; }

/* ---------- Comparar as duas notas de uma possivel duplicata ---------- */
.comparar-notas { margin-top: 10px; }
.dup-par { display: flex; gap: 12px; flex-wrap: wrap; }
.dup-col {
    flex: 1 1 220px; min-width: 200px;
    padding: 10px 12px; border-radius: 10px;
    background: rgba(255,255,255,0.03); border: 1px solid var(--border-color);
    font-size: 0.8rem; line-height: 1.7;
}
.dup-titulo {
    color: var(--text-main); font-weight: 600; font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: 0.05em;
    padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--border-color);
}
.dup-id { color: var(--text-light); font-weight: 400; text-transform: none; letter-spacing: 0; }
/* O campo que DIFERE e o que responde "e a mesma nota?" - por isso ganha destaque */
.dup-dif { color: var(--febrafar-yellow); }
.dup-col .fl-meta { display: inline-block; min-width: 108px; }

/* ---------- Procurar uma nota pelo numero ---------- */
/* Aqui existia uma segunda regra .painel-busca, criada para um painel que depois virou
   .painel-filtros. Por vir depois no arquivo, ela vencia a original e ANULAVA o padding do
   painel de busca de e-mails - o conteudo colava nas bordas e o texto saia atravessado. */
.nota-achada {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 20px;
    animation: entrarLinha 0.35s var(--mola) both;
}

/* ---------- Escolher quais ferramentas juntar ---------- */
.sug-membros { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; width: 100%; }
.sug-membro {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 10px; border-radius: 8px; cursor: pointer;
    background: rgba(255,255,255,0.02); border: 1px solid transparent;
    transition: background 0.2s var(--suave), border-color 0.2s var(--suave);
}
.sug-membro:hover { background: rgba(255,255,255,0.05); border-color: var(--border-color); }
.sug-membro input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--febrafar-blue); cursor: pointer; }
/* Desmarcada = vai ficar de fora do grupo; o apagado diz isso sem precisar de texto */
.sug-membro:has(input:not(:checked)) { opacity: 0.45; }
.sug-nome { color: var(--text-main); font-weight: 600; font-size: 0.85rem; }
.btn-resolver:disabled {
    opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none;
    background: var(--glass); color: var(--text-light);
}

/* ---------- Botoes de acao na linha da ferramenta ---------- */
.fl-acoes { display: flex; justify-content: flex-end; gap: 4px; position: relative; overflow: visible; }
.btn-linha {
    background: transparent; border: 1px solid var(--border-color);
    color: var(--text-light); border-radius: 8px;
    width: 30px; height: 30px; font-size: 0.78rem; flex: none;
    opacity: 0; transition: all 0.25s var(--suave);
}
.ferramenta-linha:hover .btn-linha { opacity: 1; }
.btn-linha:hover { background: rgba(168, 85, 247, 0.15); color: #d8b4fe; border-color: rgba(168,85,247,0.4); }

/* Pilula que marca ferramenta com outras agrupadas dentro */
.pilula.grupo {
    background: rgba(168,85,247,.12); color: #d8b4fe;
    border-color: rgba(168,85,247,.32); margin-left: 4px;
}

/* (A grade da linha da ferramenta fica na definicao unica de .ferramenta-linha, la em cima.
   Ter a mesma regra em dois lugares do arquivo ja causou bug: a segunda vencia a primeira e
   anulava o que ela definia.) */

/* ---------- Modal de agrupamento ---------- */
.agr-membro {
    border: 1px solid var(--border-color); border-radius: 12px;
    padding: 12px 14px; margin-bottom: 10px; background: var(--glass);
}
.agr-membro.principal { border-color: rgba(59,130,246,.35); background: rgba(59,130,246,.06); }
.agr-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.agr-topo strong { color: var(--text-main); margin-right: 6px; }
.agr-notas { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.agr-nota {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px; border-radius: 8px; background: rgba(0,0,0,.18);
    font-size: 0.82rem; color: var(--text-light);
}

/* ---------- Selo de tipo de documento (boleto / fatura de cartão) ---------- */
.doc-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 600; letter-spacing: .01em;
    padding: 2px 9px; border-radius: 999px; border: 1px solid transparent;
    white-space: nowrap;
}
.doc-badge.doc-boleto { background: rgba(59,130,246,.13); color: #93c5fd; border-color: rgba(59,130,246,.34); }
.doc-badge.doc-nota   { background: rgba(16,185,129,.14); color: #6ee7b7; border-color: rgba(16,185,129,.34); }
.doc-badge.doc-cartao { background: rgba(168,85,247,.14); color: #d8b4fe; border-color: rgba(168,85,247,.36); }
.doc-badge.doc-outro  { background: rgba(148,163,184,.13); color: #cbd5e1; border-color: rgba(148,163,184,.3); }

/* Nota dividida entre dois centros (rateio, ex. AWS) */
.rateio-linha { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; font-size: 0.78rem; color: #6ee7b7; }
.rateio-tag { background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.32); color: #6ee7b7; border-radius: 999px; padding: 1px 9px; font-weight: 600; }

/* Seletor de documentos no modal do Financeiro (boleto + nota da mesma despesa) */
.doc-item { transition: all .18s ease; }
.doc-item:hover { background: rgba(255,255,255,.04); }
.doc-item-ativo { border-color: rgba(59,130,246,.6) !important; background: rgba(59,130,246,.10); }

/* ---------- Chips de filtro por tipo de documento ---------- */
.filtro-doc { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-doc {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--glass); color: var(--text-light);
    border: 1px solid var(--border-color); border-radius: 999px;
    padding: 7px 15px; font-size: 13px; font-weight: 500;
    transition: all .25s var(--suave);
}
.chip-doc:hover { background: var(--glass-hover); color: var(--text-main); transform: translateY(-1px); }
.chip-doc.ativo {
    background: linear-gradient(135deg, rgba(59,130,246,.9), rgba(37,99,235,.9));
    color: #fff; border-color: transparent;
    box-shadow: 0 4px 14px rgba(59,130,246,.3);
}

/* ---------- Quadrado de aviso (Gestão Pendente) ---------- */
.aviso-box {
    background: linear-gradient(135deg, rgba(251,191,36,.12), rgba(245,158,11,.06));
    border: 1px solid rgba(251,191,36,.4);
    border-left: 4px solid var(--febrafar-yellow);
    border-radius: var(--raio);
    padding: 16px 20px;
    margin-bottom: 24px;
    display: flex; flex-direction: column; gap: 8px;
    animation: subirEntrada 0.5s var(--mola) both;
}
.aviso-titulo { font-weight: 700; color: var(--febrafar-yellow); font-size: 0.95rem; margin-bottom: 4px; }
/* Cada pendência vira um BOTÃO próprio, num flex com espaço - antes eram links inline que
   se sobrepunham/emendavam num texto só. */
.aviso-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.aviso-btn {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    background: rgba(251, 192, 45, 0.08); border: 1px solid rgba(251, 192, 45, 0.35);
    color: var(--text-main); font-size: 0.86rem; border-radius: 999px; padding: 7px 14px;
    transition: background 0.2s var(--suave), border-color 0.2s var(--suave), transform 0.15s var(--mola);
}
.aviso-btn:hover { background: rgba(251, 192, 45, 0.16); border-color: var(--febrafar-yellow); transform: translateY(-1px); }
.aviso-btn strong { color: var(--febrafar-yellow); }
.aviso-btn .aviso-cta { color: var(--febrafar-yellow); font-weight: 600; border-left: 1px solid rgba(251,192,45,.3); padding-left: 8px; margin-left: 2px; }

/* ---------- Botao pequeno "ver quais" dentro do cartao de notas faltando ---------- */
.btn-mini-stat {
    display: inline-flex; align-items: center; margin-top: 8px;
    padding: 3px 10px; font-size: 0.72rem; font-weight: 600;
    background: var(--glass); border: 1px solid var(--border-color);
    border-radius: 999px; color: var(--text-light); cursor: pointer;
    transition: all 0.2s var(--suave);
}
.btn-mini-stat:hover { background: var(--glass-hover); color: var(--text-main); transform: translateY(-1px); }

/* ---------- Filtro do Financeiro (user) ---------- */
.filtro-fin { background: var(--glass); border: 1px solid var(--border-color); border-radius: 14px; padding: 14px 16px; }
.doc-badge.doc-nf { background: rgba(59,130,246,0.15); color: #93c5fd; }

/* ---------- ACESSIBILIDADE: respeita quem desliga animacoes no sistema ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   RESPONSIVO - funciona em qualquer proporcao, zoom e no celular
   --------------------------------------------------------------------------
   O sistema nasceu numa unica largura de tela: a sidebar fixa de 260px + o
   conteudo ao lado so cabiam num monitor. Com zoom ou num celular, o conteudo
   passava da largura e os botoes da direita (Resolver, acoes do Alerta) saiam
   para fora e "sumiam". Aqui a sidebar vira uma GAVETA no celular e todo o
   conteudo passa a caber e rolar dentro da tela, seja qual for o tamanho.
   ========================================================================== */

/* O botao hamburguer e a cortina da gaveta so existem no mobile. Ficam escondidos
   por padrao para nao aparecerem no desktop. */
.menu-toggle { display: none; }
.sidebar-overlay { display: none; }

/* Toda tabela larga rola na horizontal dentro da propria caixa, em vez de
   empurrar a pagina e esconder as colunas da direita. Vale em qualquer largura. */
.table-responsive, .tabela-rolavel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wrapper, .main-content, .content-body { min-width: 0; }
/* A pagina nunca rola na horizontal: o overflow fica DENTRO das caixas. */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas { max-width: 100%; }

/* --------- TABLET e telas medias (ate 992px): a sidebar vira gaveta --------- */
@media (max-width: 992px) {
    .wrapper { flex-direction: column; height: auto; min-height: 100vh; }

    /* Sidebar sai do fluxo e desliza por cima, a partir da esquerda. */
    .sidebar {
        position: fixed; top: 0; left: 0; height: 100%; width: 82vw; max-width: 300px;
        transform: translateX(-100%);
        transition: transform 0.3s var(--mola);
        z-index: 1050; overflow-y: auto;
    }
    .sidebar.aberta { transform: translateX(0); box-shadow: var(--sombra-alta); }

    /* A cortina escura atras da gaveta aberta: clicar nela fecha. */
    .sidebar-overlay {
        display: block; position: fixed; inset: 0; z-index: 1040;
        background: rgba(0,0,0,0.55); opacity: 0; pointer-events: none;
        transition: opacity 0.3s var(--suave);
    }
    .sidebar-overlay.ativa { opacity: 1; pointer-events: auto; }

    .main-content { width: 100%; overflow-y: visible; }

    /* O hamburguer aparece na barra de cima. */
    .menu-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 42px; height: 42px; margin-right: 12px; flex: 0 0 auto;
        background: var(--glass); border: 1px solid var(--border-color);
        border-radius: 12px; color: var(--text-main); font-size: 1.2rem; cursor: pointer;
    }
    .menu-toggle:hover { background: var(--glass-hover); }

    .topbar { padding: 12px 16px !important; }
    .content-body { padding: 20px 16px !important; }

    /* Cabecalhos e cartoes que eram lado-a-lado empilham. */
    .topbar { gap: 8px; }
}

/* --------- CELULAR (ate 640px): layout diferenciado, tudo em coluna --------- */
@media (max-width: 640px) {
    .content-body { padding: 14px 12px !important; }

    /* Titulos e blocos flex do topo de cada aba passam a empilhar e alinhar a esquerda. */
    .content-body .d-flex.justify-content-between { flex-wrap: wrap; gap: 12px; }

    /* Cartoes ocupam a largura toda, com menos canto e menos respiro interno. */
    .card-custom, .filter-card, .card-moderno { border-radius: 12px; }
    .card-custom .p-3, .card-custom .p-4 { padding: 14px !important; }

    /* Tabelas: fonte e respiro menores para caber mais coluna antes de precisar rolar. */
    .table-custom th, .table-custom td { padding: 10px 12px !important; font-size: 0.82rem; }

    /* Grupos de botoes de acao empilham e ocupam a largura toda (nada mais "some" na direita). */
    td .btn, .acoes-nota .btn { white-space: normal; }

    /* Modais: colam nas bordas com uma folga, em vez de estourar a tela. */
    .modal-dialog { margin: 8px !important; max-width: calc(100vw - 16px) !important; }
    .modal-body { padding: 16px !important; }

    /* Formularios em grade viram uma coluna so. */
    .grade-campos, .filtros-grade, .campos-grade { grid-template-columns: 1fr !important; }

    /* Avatar e perfil no topo encolhem para sobrar espaco ao hamburguer + titulo. */
    .user-profile .nome-usuario, .user-profile .cargo-usuario { display: none; }

    /* Os toasts deixam de ficar num canto estreito (onde tapavam os botoes) e passam
       a ocupar a largura da tela, na base, empilhando para cima. */
    #toast-container {
        left: 10px; right: 10px; bottom: 74px; max-width: none; align-items: stretch;
    }
    .toast-custom { font-size: 0.82rem; }
    #notif-hist-btn { bottom: 14px; right: 14px; }
}

/* --------- Telas muito estreitas (ate 400px): aperta o essencial --------- */
@media (max-width: 400px) {
    .content-body { padding: 10px 8px !important; }
    .table-custom th, .table-custom td { padding: 8px 8px !important; font-size: 0.78rem; }
    .brand span { font-size: 0.95rem; }
}

/* ===== Item 3/11: Conferência do mês (esperadas x recebidas) ===== */
.conf-cabecalho { font-weight: 700; text-transform: uppercase; font-size: .72rem; letter-spacing: .5px;
    color: #94a3b8; padding: 10px 14px; border-bottom: 1px solid var(--border-color, #2a3350); }
.conf-col-esq, .conf-col-dir { flex: 1 1 0; min-width: 0; padding: 4px 10px; display: flex;
    flex-direction: column; justify-content: center; }
.conf-col-dir { border-left: 1px solid var(--border-color, #2a3350); }
.conf-linha { padding: 8px 4px; border-bottom: 1px solid rgba(148,163,184,.12); align-items: stretch; }
.conf-linha:hover { background: rgba(148,163,184,.06); }
.conf-linha-falta { background: rgba(239,68,68,.06); }
.conf-linha .fl-meta { display: block; font-size: .76rem; color: #94a3b8; margin-top: 2px; }
.conf-apagado { opacity: .55; }
.conf-nao-chegou { color: #f87171; font-weight: 600; font-size: .85rem; }
.conf-col-dir .btn-pdf { align-self: flex-start; margin-top: 4px; }
@media (max-width: 640px) {
    .conf-linha { flex-direction: column; }
    .conf-col-dir { border-left: none; border-top: 1px dashed var(--border-color, #2a3350); }
    .conf-cabecalho .conf-col-dir { border-top: none; }
}

/* ===== Paginação: padrão ÚNICO (vanilla + todas as ilhas Svelte usam este) =====
   Botões com AUTO width + white-space:nowrap, para caber "‹ Anterior" / "Próxima ›" sem quebrar.
   (Antes tinham width/height 34px fixos, feitos só para setinhas, e o texto empilhava.) */
.paginacao { display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 12px; flex-wrap: wrap; }
.pg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    white-space: nowrap; min-width: 40px; min-height: 36px;
    background: rgba(255,255,255,0.05); color: var(--text-main, #cbd5e1);
    border: 1.5px solid rgba(148,163,184,0.4); border-radius: 10px; padding: 8px 16px;
    font: inherit; font-size: .82rem; font-weight: 600; line-height: 1; cursor: pointer;
    transition: background .18s, border-color .18s, transform .18s, color .18s; }
.pg-btn:hover:not(:disabled) { background: rgba(59,130,246,0.16);
    border-color: var(--febrafar-blue, #3b82f6); color: #fff; transform: translateY(-1px); }
.pg-btn:disabled { opacity: .4; cursor: default; }
.pg-info { color: var(--text-light, #94a3b8); font-size: .82rem; font-weight: 700;
    font-variant-numeric: tabular-nums; white-space: nowrap; padding: 0 8px; }

/* ===== Modal "qual nota manter": vidro fosco moderno + PDF das duas ===== */
/* Fundo: escurece e desfoca o que está atrás, dando profundidade sem "sujeira" translúcida. */
.modal-vidro + .modal-backdrop.show,
.modal-backdrop.escolher-backdrop { opacity: 1; background: rgba(9, 12, 20, .55);
    -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); }

/* O cartão em si passa a ser SÓLIDO (nada de texto vazando por trás), com uma borda que brilha
   de leve e um respiro superior colorido - visual atual, "orgânico". */
.modal-vidro .modal-content {
    background:
        radial-gradient(120% 120% at 50% -20%, rgba(63,125,255,.16), transparent 60%),
        linear-gradient(180deg, #1b2233, #141a28);
    border: 1px solid rgba(120,150,220,.22);
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
}
.escolha-linha { display: flex; align-items: stretch; gap: 10px; }
.escolha-opcao {
    background: rgba(63,125,255,.08);
    border: 1px solid rgba(120,150,220,.28);
    color: #e8edf6; border-radius: 12px; padding: 12px 15px; line-height: 1.35;
    transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.escolha-opcao:hover {
    background: rgba(63,125,255,.16); border-color: var(--febrafar-blue, #3f7dff);
    color: #fff; transform: translateY(-1px);
}
.escolha-opcao strong { color: #fff; }
.escolha-pdf {
    display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
    background: rgba(59,130,246,.16); border: 1.5px solid rgba(59,130,246,.55); color: #93c5fd;
    border-radius: 12px; padding: 0 18px; font-weight: 700; font-size: .86rem; min-width: 110px;
    transition: background .15s ease, color .15s ease, transform .12s ease;
}
.escolha-pdf:hover { background: rgba(59,130,246,.3); color: #fff; transform: translateY(-1px); }

/* ============================================================================
   VISUAL MODERNO 2.8 — seletores, campos e botões repaginados de uma vez.
   Carregado por último, então prevalece sobre o que veio antes.
   ============================================================================ */

/* ---- Seletores (o "botão feio" da lista suspensa) ---- */
select, .sel-mini, .form-select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-color: #1a2130;
    /* seta própria (chevron), no lugar da seta padrão do sistema */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2393a0b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
    padding-right: 34px !important;
    border: 1px solid #2b3450; border-radius: 11px;
    color: #e8edf6; cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
select:hover, .sel-mini:hover, .form-select:hover { border-color: #3f7dff; background-color: #1e2740; }
select:focus, .sel-mini:focus, .form-select:focus {
    outline: none; border-color: #3f7dff;
    box-shadow: 0 0 0 3px rgba(63,125,255,.22); background-color: #1e2740; color: #fff;
}
/* A lista aberta (funciona no navegador do Windows): fundo escuro em vez do cinza do sistema */
select option, .sel-mini option, .form-select option {
    background-color: #161d2e; color: #e8edf6;
}

/* ---- Campos de texto/numero: mesma linguagem visual ---- */
.form-control, input[type="text"], input[type="number"], input[type="email"], input[type="search"], textarea {
    border-radius: 11px; transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.form-control:focus, input[type="text"]:focus, input[type="number"]:focus,
input[type="email"]:focus, input[type="search"]:focus, textarea:focus {
    box-shadow: 0 0 0 3px rgba(63,125,255,.20);
}

/* ---- Botões: cantos mais suaves, toque com micro-animação ---- */
.btn { border-radius: 11px; font-weight: 600;
    transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, filter .18s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(63,125,255,.30); }
/* dá um leve brilho nas cores fortes ao passar o mouse, em vez de só escurecer */
.btn-primary-custom:hover, .btn-green:hover, .btn-primary:hover, .btn-success:hover { filter: brightness(1.08); }

/* ---- Pílula do centro de custo (na gaveta) ---- */
.pilula-centro {
    display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .02em;
    text-transform: lowercase; padding: 1px 9px; border-radius: 999px; vertical-align: middle;
    background: rgba(63,125,255,.16); color: #9dc0ff; border: 1px solid rgba(63,125,255,.28);
}

/* Respeita quem prefere menos animação */
@media (prefers-reduced-motion: reduce) {
    .btn, select, .sel-mini, .form-select, .form-control { transition: none !important; }
    .btn:hover, .btn:active { transform: none; }
}

/* ===== Gaveta da ferramenta: notas agrupadas por centro de custo ===== */
.gaveta-centro-titulo {
    font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: #9dc0ff; margin: 16px 0 6px; padding-bottom: 5px;
    border-bottom: 1px solid rgba(63,125,255,.22);
}
.gaveta-centro-titulo:first-child { margin-top: 4px; }

/* ===== Checkboxes de SELECIONAR NOTAS: maiores, modernas e fáceis de apertar (v3.3) =====
   Antes eram a caixinha nativa minúscula (difícil de acertar). Agora é uma caixa custom de
   22px, com hover e um "check" desenhado quando marcada. Vale para a lista de notas, a janela
   da linha, a gaveta e a visão do Financeiro. */
.check-pendente,
.check-linha-nota,
.check-nota,
.check-fin {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    margin: 0;
    border: 2px solid rgba(147, 173, 230, .45);
    border-radius: 7px;
    background: rgba(255, 255, 255, .04);
    cursor: pointer;
    position: relative;
    flex: 0 0 auto;
    vertical-align: middle;
    overflow: hidden;
    box-sizing: border-box;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.check-pendente:hover,
.check-linha-nota:hover,
.check-nota:hover,
.check-fin:hover {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, .14);
}
.check-pendente:active,
.check-linha-nota:active,
.check-nota:active,
.check-fin:active { transform: scale(.92); }
.check-pendente:checked,
.check-linha-nota:checked,
.check-nota:checked,
.check-fin:checked {
    background: #3b82f6;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .25);
}
/* O "check" (✓) desenhado, para não depender de imagem */
.check-pendente:checked::after,
.check-linha-nota:checked::after,
.check-nota:checked::after,
.check-fin:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

/* ===== Itens da LISTA de linhas de cobrança (modalLinha) — v3.8 ===== */
.linha-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    border: 1px solid var(--border-color, #2a3350);
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.linha-item:hover {
    background: rgba(59, 130, 246, .10);
    border-color: #3b82f6;
}
.linha-item:active { transform: scale(.99); }

/* ===== Botão único de ações da ferramenta (⋮) que revela as opções — v4.2 ===== */
.fl-acoes-extra { display: none; gap: 4px; align-items: center; }
.fl-acoes-extra.aberto {
    display: flex;
    position: absolute;
    right: 36px;
    top: 50%;
    transform: translateY(-50%);
    background: #1a1e2d;
    border: 1px solid #2d3345;
    border-radius: 10px;
    padding: 6px;
    z-index: 30;
    box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
.fl-acoes-extra.aberto .btn-linha { opacity: 1; }
/* O botão ⋮ fica sempre visível (discreto), destacando no hover da linha. */
.btn-acoes-toggle { opacity: .5 !important; }
.ferramenta-linha:hover .btn-acoes-toggle { opacity: 1 !important; }

/* ===== Responsividade: textos/URLs longos quebram e não empurram o layout para fora ===== */
/* O link gigante da NFS-e no Alerta do Sistema empurrava a coluna "Ação" para fora da tela. */
.table-custom td, .table-custom th { overflow-wrap: anywhere; }
.table-custom a { word-break: break-all; }
#corpo-alerta-sistema td { overflow-wrap: anywhere; word-break: break-word; }
/* A coluna de ações não encolhe abaixo do necessário para os botões */
#corpo-alerta-sistema td:last-child { min-width: 170px; }

/* ===== Menu lateral retrátil (aumenta a área do sistema) ===== */
.sidebar { transition: width .25s var(--suave); }
.btn-min-menu { margin-left: auto; background: var(--glass, rgba(255,255,255,.05)); border: 1px solid var(--border-color);
    color: var(--text-light, #cbd5e1); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; flex: none;
    display: inline-grid; place-items: center; transition: .2s; }
.btn-min-menu:hover { color: var(--text-main); border-color: var(--febrafar-green, #388e3c); }
.wrapper.menu-min .btn-min-menu i { transform: rotate(180deg); }
@media (min-width: 993px) {
    .wrapper.menu-min .sidebar { width: 78px; }
    /* Logo em cima, seta LOGO ABAIXO (empilhadas) - a seta não fica mais sobre a imagem. */
    .wrapper.menu-min .brand { flex-direction: column; gap: 10px; justify-content: center; padding: 16px 6px; }
    .wrapper.menu-min .brand span { display: none; }
    .wrapper.menu-min .brand .btn-min-menu { position: static; margin: 0; }
    /* Cada item vira só o ícone, perfeitamente centralizado e alinhado. */
    .wrapper.menu-min .nav-item { font-size: 0 !important; gap: 0 !important; justify-content: center;
        padding: 12px 0 !important; margin: 5px 10px; text-align: center; }
    .wrapper.menu-min .nav-item i { font-size: 1.2rem !important; margin: 0 !important; width: 1.4rem; text-align: center; }
    /* Esconde o NÚMERO do badge (o style inline vencia o CSS e desalinhava o ícone). */
    .wrapper.menu-min .nav-item .badge { display: none !important; }
    /* Em vez do número, o ícone que TEM notificação fica CONTORNADO + destacado.
       O badge ativo tem style="display: inline-block", então casa por [style*="inline"]. */
    .wrapper.menu-min .nav-item:has(.badge[style*="inline"]) {
        box-shadow: inset 0 0 0 1.5px var(--febrafar-yellow, #fbc02d);
        background: rgba(251, 192, 45, 0.08) !important;
    }
    .wrapper.menu-min .nav-item:has(.badge[style*="inline"]) i { color: var(--febrafar-yellow, #fbc02d) !important; }
    /* O Alerta Financeiro é vermelho. */
    .wrapper.menu-min #nav-alertafin:has(.badge[style*="inline"]) { box-shadow: inset 0 0 0 1.5px #ef5350; background: rgba(239,83,80,.08) !important; }
    .wrapper.menu-min #nav-alertafin:has(.badge[style*="inline"]) i { color: #ef5350 !important; }
    .wrapper.menu-min .nav-item:hover { transform: none !important; }
    .wrapper.menu-min .nav-item.nav-super { justify-content: center; }
}

/* ===== Página inicial (boas-vindas com a imagem da empresa ao fundo) ===== */
.tela-inicio {
    position: relative; min-height: calc(100vh - 160px);
    display: flex; align-items: center; justify-content: center; text-align: center;
    border-radius: 18px; overflow: hidden;
    background:
      radial-gradient(1000px 500px at 80% -10%, rgba(59,125,255,.10), transparent 60%),
      radial-gradient(800px 500px at 0% 110%, rgba(56,142,60,.10), transparent 55%);
}
/* A logo da empresa, grande e discreta, no fundo */
.tela-inicio::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: url("/logo.png?v=3") center 40% / min(520px, 60%) no-repeat;
    opacity: 0.06; filter: grayscale(0.2);
}
.inicio-conteudo { position: relative; z-index: 1; max-width: 640px; padding: 40px 24px; animation: subirEntrada .6s var(--mola) both; }
.inicio-logo { width: 84px; height: auto; margin: 0 auto 22px; display: block; filter: drop-shadow(0 8px 24px rgba(0,0,0,.5)); }
.inicio-titulo { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 800; color: var(--text-main, #f8fafc); letter-spacing: -.02em; line-height: 1.1; margin-bottom: 14px; }
.text-gradient-inicio { background: linear-gradient(120deg, #4493f8, #7c3aed); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.inicio-sub { color: var(--muted, #93a0b8); font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.55; margin-bottom: 26px; }
.inicio-acoes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* Botão que leva à página de dashboards (a ilha Svelte). */
.btn-dash-entrar { margin-top: 24px; display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(120deg, #4493f8, #7c3aed); color: #fff; border: 0; border-radius: 12px;
    padding: 13px 28px; font-weight: 700; font-size: 1rem; cursor: pointer;
    box-shadow: 0 10px 26px rgba(68,147,248,.35); transition: transform .2s var(--mola), box-shadow .2s; }
.btn-dash-entrar:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(124,58,237,.45); }
.btn-dash-entrar .seta { display: inline-block; transition: transform .2s; }
.btn-dash-entrar:hover .seta { transform: translateX(5px); }
#dash-container { animation: subirEntrada .45s var(--mola) both; }

/* ===== Financeiro: lista compacta (linhas juntas e maiores, como a Gestão do admin) =====
   Era a visao PADRAO do portal e ainda estava com o visual antigo (cinza chapado, sem
   nenhum vidro) - por isso as mudancas nao apareciam pra quem abre o Financeiro e ve as
   notas em lista. Agora usa o mesmo vidro/friso lateral colorido do resto do sistema. */
.fin-lista-wrap { display: flex; flex-direction: column; gap: 8px; }
.fin-linha {
    position: relative;
    display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 12px;
    /* Sem backdrop-filter: isso aqui repete em toda linha da lista, e desfoque multiplicado
       por N linhas rolando na tela é o combo mais pesado que existe pra GPU. O gradiente
       já dá o efeito "vidro" sem o custo. */
    background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.08);
    border-left: 5px solid rgba(255,255,255,0.16);
    box-shadow: 0 3px 14px rgba(0,0,0,0.25);
    font-size: .95rem;
    transition: transform .2s var(--mola, ease), box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.fin-linha:hover {
    border-color: rgba(34,197,94,0.4);
    background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
    transform: translateX(3px) translateY(-1px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.32);
}
.fin-linha:has(.badge.bg-success)   { border-left-color: var(--febrafar-green, #22c55e); }
.fin-linha:has(.badge.bg-danger)    { border-left-color: var(--febrafar-red, #f43f5e); }
.fin-linha:has(.badge.bg-secondary) { border-left-color: #64748b; opacity: 0.92; }
.fin-linha strong { font-size: 1.02rem; }

/* ===== Modal "Notas que não chegaram" (agrupadas por mês) ===== */
.faltantes-grupo { margin-bottom: 16px; }
.faltantes-mes { font-weight: 700; color: #cbd5e1; font-size: .82rem; text-transform: uppercase;
    letter-spacing: .04em; padding: 6px 2px; border-bottom: 1px solid var(--border-color, #2a3350); margin-bottom: 8px; }

/* ===== Cliques na linha da Gestão (nome/centro/pílula levam à ferramenta/centro/linha) ===== */
.row-nav { cursor: pointer; transition: color .12s, text-decoration-color .12s; }
.row-nav:hover { text-decoration: underline; text-underline-offset: 2px; filter: brightness(1.15); }
/* clicar no vazio seleciona a linha - só nas tabelas de Gestão (não na de alertas) */
#corpo-tabela tr, #corpo-tabela-enviadas tr { cursor: pointer; }
#corpo-tabela tr:hover, #corpo-tabela-enviadas tr:hover { background: rgba(63,125,255,.06); }

/* ===== Zoom grande / tela estreita / celular: tabelas param de espremer o texto ===== */
/* A partir de 992px (mesma faixa em que a barra lateral vira gaveta), cada linha da tabela
   vira um CARTÃO empilhado - os dados um embaixo do outro e a AÇÃO (ex.: "Buscar no site do
   fornecedor") vai para baixo, ocupando a largura toda. Entra bem antes de o texto começar a
   quebrar letra por letra no zoom grande. */
@media (max-width: 992px) {
    .table-custom thead { display: none; }                     /* sem cabeçalho na versão empilhada */
    .table-custom, .table-custom tbody { display: block; width: 100%; }
    .table-custom tr {
        display: block; width: 100%;
        border: 1px solid var(--border-color); border-radius: 12px;
        margin: 0 0 12px; padding: 10px 14px; background: rgba(255,255,255,.02);
    }
    .table-custom td {
        display: block; width: 100%; text-align: left !important;
        border-bottom: none !important; padding: 5px 0 !important; white-space: normal;
    }
    /* A célula de ações (última) desce para o fim do cartão, com o botão em largura total. */
    .table-custom td:last-child,
    #corpo-alerta-sistema td:last-child { min-width: 0; padding-top: 10px !important; }
    .table-custom td:last-child .btn,
    .table-custom td:last-child a.btn { display: block; width: 100%; margin: 3px 0; }
}

/* ==========================================================================
   IDENTIDADE VISUAL PRÓPRIA DO PORTAL FINANCEIRO (usuário padrão)
   --------------------------------------------------------------------------
   O portal do Financeiro usava exatamente a mesma paleta azul/roxa do painel
   Admin - dava a impressão de que "nada tinha mudado". Aqui a cor de destaque
   vira um verde-esmeralda/dourado ("dinheiro"), só dentro de .portal-financeiro,
   trocando a variável --febrafar-blue (usada em botões, aba ativa, pílulas,
   bordas de foco etc. em cascata) sem precisar reescrever cada regra.
   ========================================================================== */
body.portal-financeiro {
    --febrafar-blue: #14b8a6;              /* teal-esmeralda no lugar do azul do admin */
    --acento-fin: #14b8a6;
    --acento-fin-ouro: #eab676;
    background-color: var(--bg-main) !important;
    background-image:
        radial-gradient(1000px 560px at 8% -10%, rgba(20, 184, 166, 0.20), transparent 60%),
        radial-gradient(800px 560px at 100% 0%, rgba(234, 179, 8, 0.12), transparent 55%),
        radial-gradient(900px 700px at 50% 115%, rgba(34, 197, 94, 0.15), transparent 60%) !important;
}
/* Sidebar e topo com um friso esmeralda sutil, pra ficar claro (à primeira vista)
   que este é um espaço diferente do painel Admin. */
.portal-financeiro .sidebar { position: relative; }
.portal-financeiro .sidebar::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1px;
    background: linear-gradient(180deg, rgba(20,184,166,.5), transparent 70%);
}
.portal-financeiro .brand { position: relative; }
.portal-financeiro .brand::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: linear-gradient(90deg, var(--acento-fin), var(--acento-fin-ouro), transparent);
    opacity: .8;
}
.portal-financeiro .topbar {
    background: linear-gradient(180deg, rgba(20,184,166,.05), transparent) , var(--bg-main) !important;
    box-shadow: 0 1px 0 rgba(20,184,166,.15);
}
/* Avatar do usuário com o acento esmeralda do Financeiro (em vez do verde padrão). */
.portal-financeiro .avatar-top {
    background: linear-gradient(135deg, var(--acento-fin), #0f8f81) !important;
    box-shadow: 0 0 0 3px rgba(20,184,166,.18);
}
/* Valor em destaque nos cartões/linhas ganha um leve brilho dourado no hover,
   reforçando a identidade "financeira" sem mudar a cor de sucesso/erro. */
.portal-financeiro .fin-linha:hover, .portal-financeiro .note-card:hover {
    box-shadow: 0 10px 26px rgba(0,0,0,.34), 0 0 22px rgba(234,179,8,.10);
}