:root{
  --laranja:#e8532b; --laranja-2:#c73f1c; --escuro:#1f2430; --escuro-2:#2b3242;
  --cinza:#6b7280; --linha:#e5e7eb; --fundo:#f5f6f8; --branco:#fff;
  --verde:#16a34a; --amarelo:#d97706; --vermelho:#dc2626; --azul:#2563eb;
  --sombra:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  --raio:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--fundo);color:var(--escuro);font-size:14px}
button{font-family:inherit;cursor:pointer}
a{color:var(--laranja)}

/* ---- Login ---- */
#login-view{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--escuro),var(--escuro-2))}
.login-card{background:var(--branco);padding:40px;border-radius:16px;width:360px;max-width:92vw;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.login-card h1{font-size:22px;margin:0 0 4px}
.login-card .sub{color:var(--cinza);margin:0 0 24px;font-size:13px}
.login-card input{width:100%;padding:13px;border:1px solid var(--linha);border-radius:10px;font-size:15px}
.login-card button{width:100%;margin-top:14px;padding:13px;background:var(--laranja);color:#fff;border:0;border-radius:10px;font-size:15px;font-weight:600}
.login-card button:hover{background:var(--laranja-2)}
.login-erro{color:var(--vermelho);font-size:13px;margin-top:10px;min-height:18px}
.logo-badge{width:44px;height:44px;border-radius:12px;background:var(--laranja);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;margin-bottom:16px}

/* ---- Shell ---- */
#app-view{display:none;min-height:100vh}
.layout{display:flex;min-height:100vh}
.sidebar{width:230px;background:var(--escuro);color:#cbd2e0;display:flex;flex-direction:column;position:fixed;height:100vh;overflow-y:auto}
.sidebar .brand{padding:20px 18px;display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:16px;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar .brand .b{width:30px;height:30px;border-radius:8px;background:var(--laranja);display:flex;align-items:center;justify-content:center;font-weight:800}
.nav{padding:10px 0;flex:1}
.nav .grupo{padding:14px 18px 6px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#6b7280}
.nav a{display:flex;align-items:center;gap:10px;padding:10px 18px;color:#cbd2e0;text-decoration:none;font-size:13.5px;border-left:3px solid transparent}
.nav a:hover{background:rgba(255,255,255,.05);color:#fff}
.nav a.ativo{background:rgba(232,83,43,.15);color:#fff;border-left-color:var(--laranja)}
.sidebar .sair{padding:14px 18px;border-top:1px solid rgba(255,255,255,.08)}
.sidebar .sair button{width:100%;background:transparent;border:1px solid rgba(255,255,255,.15);color:#cbd2e0;padding:9px;border-radius:8px}
.sidebar .sair button:hover{background:rgba(255,255,255,.06);color:#fff}

.main{margin-left:230px;flex:1;padding:26px 30px;min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;flex-wrap:wrap;gap:12px}
.topbar h2{margin:0;font-size:22px}
.btn{background:var(--laranja);color:#fff;border:0;padding:10px 16px;border-radius:9px;font-weight:600;font-size:13.5px}
.btn:hover{background:var(--laranja-2)}
.btn.sec{background:#fff;color:var(--escuro);border:1px solid var(--linha)}
.btn.sec:hover{background:#f0f0f0}
.btn.sm{padding:6px 10px;font-size:12.5px;border-radius:7px}
.btn.ghost{background:transparent;color:var(--laranja);border:1px solid var(--laranja)}

/* ---- Cards / grid ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:24px}
.card{background:#fff;border-radius:var(--raio);padding:18px;box-shadow:var(--sombra)}
.card .rot{color:var(--cinza);font-size:12.5px;margin-bottom:6px}
.card .val{font-size:24px;font-weight:700}
.card .val.pos{color:var(--verde)} .card .val.neg{color:var(--vermelho)}
.card .sub2{color:var(--cinza);font-size:12px;margin-top:4px}

/* ---- Tabela ---- */
.tabela-wrap{background:#fff;border-radius:var(--raio);box-shadow:var(--sombra);overflow:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--linha);white-space:nowrap}
th{background:#fafafa;color:var(--cinza);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.02em}
tr:hover td{background:#fcfcfd}
td.acoes{text-align:right}
.money{font-variant-numeric:tabular-nums;text-align:right}

/* ---- Badges ---- */
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11.5px;font-weight:600}
.badge.verde{background:#dcfce7;color:#166534}
.badge.amarelo{background:#fef3c7;color:#92400e}
.badge.vermelho{background:#fee2e2;color:#991b1b}
.badge.azul{background:#dbeafe;color:#1e40af}
.badge.cinza{background:#f1f2f4;color:#4b5563}

/* ---- Modal ---- */
.modal-bg{position:fixed;inset:0;background:rgba(15,20,30,.5);display:none;align-items:flex-start;justify-content:center;z-index:50;overflow-y:auto;padding:40px 16px}
.modal-bg.aberto{display:flex}
.modal{background:#fff;border-radius:14px;width:640px;max-width:96vw;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal .head{padding:18px 22px;border-bottom:1px solid var(--linha);display:flex;justify-content:space-between;align-items:center}
.modal .head h3{margin:0;font-size:17px}
.modal .head .x{background:none;border:0;font-size:22px;color:var(--cinza);line-height:1}
.modal .body{padding:22px;max-height:70vh;overflow-y:auto}
.modal .foot{padding:16px 22px;border-top:1px solid var(--linha);display:flex;justify-content:flex-end;gap:10px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.campo{display:flex;flex-direction:column;gap:5px}
.campo.full{grid-column:1/-1}
.campo label{font-size:12.5px;color:var(--cinza);font-weight:600}
.campo input,.campo select,.campo textarea{padding:9px 11px;border:1px solid var(--linha);border-radius:8px;font-size:14px;font-family:inherit;width:100%}
.campo textarea{min-height:70px;resize:vertical}

/* ---- Agenda contas a pagar ---- */
.bucket{margin-bottom:22px}
.bucket h4{margin:0 0 10px;font-size:14px;display:flex;align-items:center;gap:8px}
.bucket .dot{width:8px;height:8px;border-radius:50%}
.linha-conta{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--linha);border-radius:10px;padding:12px 14px;margin-bottom:8px}
.linha-conta.venc{border-color:#fca5a5;background:#fff5f5}
.linha-conta .info{display:flex;flex-direction:column;gap:2px}
.linha-conta .info small{color:var(--cinza)}
.linha-conta .dir{display:flex;align-items:center;gap:14px}

/* ---- Utilidades ---- */
.filtros{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;align-items:center}
.filtros select,.filtros input{padding:8px 10px;border:1px solid var(--linha);border-radius:8px;font-size:13px;background:#fff}
.vazio{padding:40px;text-align:center;color:var(--cinza)}
.toast{position:fixed;bottom:24px;right:24px;background:var(--escuro);color:#fff;padding:13px 18px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:100;opacity:0;transform:translateY(10px);transition:.25s}
.toast.show{opacity:1;transform:translateY(0)}
.toast.erro{background:var(--vermelho)}
.toast.ok{background:var(--verde)}
.secao-titulo{font-size:13px;color:var(--cinza);text-transform:uppercase;letter-spacing:.04em;margin:20px 0 10px;font-weight:700}
.dre-tabela td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.alerta-item{background:#fff7ed;border:1px solid #fed7aa;border-radius:9px;padding:10px 14px;margin-bottom:8px;font-size:13px;color:#9a3412}
@media(max-width:820px){
  .sidebar{width:60px}
  .sidebar .brand{justify-content:center;padding:16px 6px}
  .sidebar .brand span,.nav .grupo,.nav a .txt,.sidebar .sair span{display:none}
  .nav a{justify-content:center;padding:13px 0;font-size:18px}
  .main{margin-left:60px;padding:16px}
  .form-grid{grid-template-columns:1fr}
  .topbar h2{font-size:19px}
}

/* ---- Tabelas viram cards no celular (tabelas com classe .resp) ---- */
@media(max-width:640px){
  table.resp thead{display:none}
  table.resp,table.resp tbody,table.resp tr,table.resp td{display:block;width:100%}
  table.resp tr{border-bottom:6px solid var(--fundo);padding:10px 14px;background:#fff}
  table.resp tr:hover td{background:#fff}
  table.resp td{border:none;padding:5px 0;white-space:normal;display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:right}
  table.resp td::before{content:attr(data-label);font-weight:700;color:var(--cinza);font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;flex-shrink:0;text-align:left}
  table.resp td.acoes{justify-content:flex-end;flex-wrap:wrap;gap:6px;padding-top:10px}
  table.resp td.acoes::before{display:none}
  /* agenda de contas: empilha valor/botão quando aperta */
  .linha-conta{flex-wrap:wrap;gap:8px}
  .linha-conta .dir{margin-left:auto}
  .filtros{gap:8px}
  .filtros select,.filtros input{flex:1;min-width:120px}
  .cards{grid-template-columns:1fr 1fr;gap:10px}
  .card .val{font-size:19px}
  /* tabelas comuns (DRE, evolução anual): compactar para caber na tela */
  .tabela-wrap table:not(.resp) th,.tabela-wrap table:not(.resp) td{padding:8px 6px;font-size:12px;white-space:nowrap}
}