/* Fundo Fixo Semanal — folha de estilos
   Paleta e tipografia próprias do sistema (não ligadas à marca da loja). */

/* Paleta inspirada no sistema de inventário de referência: fundo lavanda bem
   claro, cartões brancos, roxo como cor de ação e cabeçalho em degradê. */
:root{
  --bg:#F4F4FA;
  --surface:#FFFFFF;
  --surface-2:#F5F5FB;
  --surface-hover:#EFEEFA;
  --ink:#20212B;
  --muted:#5E6172;
  --faint:#9395A6;
  --line:#E6E6F0;
  --line-strong:#D2D3E2;

  --accent:#6D3FE0;
  --accent-hover:#5C31CC;
  --accent-ink:#FFFFFF;
  --accent-soft:#EFE9FC;
  --accent-soft-strong:#DFD2F8;
  --header-de:#6D3FE0;
  --header-ate:#8657F5;

  --ok:#1D8348;
  --ok-soft:#E1F3E8;
  --warn:#B4700A;
  --warn-soft:#FBEBD3;
  --crit:#C13A2E;
  --crit-soft:#FAE1DD;

  --shadow-sm:0 1px 2px rgba(32,33,55,.05);
  --shadow-md:0 2px 4px rgba(32,33,55,.04), 0 10px 24px -12px rgba(32,33,55,.16);
  --shadow-lg:0 4px 10px rgba(32,33,55,.06), 0 20px 40px -16px rgba(32,33,55,.22);

  --r-sm:10px; --r-md:12px; --r-lg:16px; --r-pill:999px;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;

  --font-display:"Urbanist", "Segoe UI", system-ui, sans-serif;
  --font-body:"Urbanist", "Segoe UI", system-ui, sans-serif;
  --font-mono:"JetBrains Mono", "Consolas", ui-monospace, monospace;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#16151F;
    --surface:#1E1D2A;
    --surface-2:#262533;
    --surface-hover:#2E2C3D;
    --ink:#EFEEF7;
    --muted:#A6A6BC;
    --faint:#716F87;
    --line:#2E2C3D;
    --line-strong:#3D3B4F;

    --accent:#9C7CF5;
    --accent-hover:#AC90F7;
    --accent-ink:#1A1226;
    --accent-soft:#2C2444;
    --accent-soft-strong:#3A2F5A;
    --header-de:#4A2E9C;
    --header-ate:#6B47C9;

    --ok:#5FCB8D;
    --ok-soft:#17301F;
    --warn:#E4B056;
    --warn-soft:#332608;
    --crit:#EA8A7C;
    --crit-soft:#361B16;

    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 2px 4px rgba(0,0,0,.35), 0 12px 28px -14px rgba(0,0,0,.65);
    --shadow-lg:0 4px 10px rgba(0,0,0,.4), 0 24px 48px -18px rgba(0,0,0,.75);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-display); margin:0; line-height:1.2; letter-spacing:-.01em; text-wrap:balance}
p{margin:0}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.num{font-family:var(--font-mono); font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
::selection{background:var(--accent-soft-strong)}

/* ---------- topo ---------- */
.topo{
  background:linear-gradient(115deg, var(--header-de), var(--header-ate));
  padding:0 var(--sp-5); position:sticky; top:0; z-index:20; box-shadow:var(--shadow-md);
}
.topo .interno{
  max-width:1280px; margin:0 auto; min-height:64px;
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap;
  padding:var(--sp-2) 0;
}
.marca{display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:800; font-size:17px; color:#fff; letter-spacing:-.01em}
.marca .selo-marca{
  width:34px; height:34px; border-radius:var(--r-sm); background:rgba(255,255,255,.16); color:#fff;
  display:grid; place-items:center; flex:none;
  font-family:var(--font-display); font-weight:800; font-style:italic; font-size:18px; line-height:1;
}
.marca small{display:block; font-weight:500; font-size:12.5px; color:rgba(255,255,255,.72); font-family:var(--font-body); letter-spacing:.01em}

.nav-dp{display:flex; align-items:center; gap:4px; flex-wrap:wrap}
.nav-dp a{
  display:flex; align-items:center; gap:7px; color:rgba(255,255,255,.82); font-weight:600; font-size:14px;
  padding:9px 14px; border-radius:var(--r-sm); text-decoration:none; transition:background-color .12s, color .12s;
}
.nav-dp a:hover{background:rgba(255,255,255,.10); color:#fff; text-decoration:none}
.nav-dp a.ativo{background:rgba(255,255,255,.18); color:#fff}
.conta-dp{display:flex; align-items:center; gap:14px; font-size:14px; color:rgba(255,255,255,.85)}
.conta-dp a{color:rgba(255,255,255,.85); font-weight:600; display:inline-flex; align-items:center; gap:6px}
.conta-dp a:hover{color:#fff; text-decoration:none}

/* ---------- estrutura de página ---------- */
.conteudo{max-width:1180px; margin:0 auto; padding:var(--sp-6) var(--sp-5) 88px}
.estreito{max-width:520px}
@media (max-width:640px){ .conteudo{padding:var(--sp-4) var(--sp-4) 96px} }

.cabecalho-pagina{
  display:flex; justify-content:space-between; align-items:flex-end; gap:var(--sp-4);
  flex-wrap:wrap; margin-bottom:var(--sp-6);
}
.cabecalho-pagina h2{font-size:1.5rem; font-weight:700}
.cabecalho-pagina .sub{color:var(--muted); font-size:14px; margin-top:2px}
.eyebrow{font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--faint)}

/* ---------- cartões ---------- */
.cartao{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm)}
.cartao .cabeca{
  padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
}
.cartao .cabeca h3{font-size:16px; font-weight:700}
.cartao.pad{padding:var(--sp-5)}

.semana{
  background:var(--accent-soft); border-radius:var(--r-lg); padding:var(--sp-4) var(--sp-5);
  margin-bottom:var(--sp-5); display:flex; flex-direction:column; gap:2px;
}
.semana .rot{font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--accent)}
.semana .val{font-family:var(--font-display); font-weight:700; font-size:19px}
.semana .obs{font-size:13.5px; color:var(--muted)}

.aviso{border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-4); font-size:14.5px; line-height:1.5}
.aviso.erro{background:var(--crit-soft); color:var(--crit); font-weight:600}
.aviso.info{background:var(--surface-2); color:var(--muted)}
.aviso.alerta{background:var(--warn-soft); color:var(--warn); font-weight:600}

/* ---------- formulário ---------- */
form{margin:0}
fieldset{border:0; margin:0 0 var(--sp-6); padding:0; display:flex; flex-direction:column; gap:var(--sp-3)}
legend{padding:0 0 var(--sp-1); display:flex; align-items:center; gap:9px; width:100%}
.legenda-txt{font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--faint)}
.legenda-num{
  width:22px; height:22px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
  display:grid; place-items:center; font-family:var(--font-display); font-size:12px; font-weight:700; flex:none;
}
label{display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:600; color:var(--muted)}
input,select,textarea{
  font:inherit; font-size:16px; color:var(--ink); background:var(--surface);
  border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:11px 13px; width:100%; min-height:46px;
  transition:border-color .12s, box-shadow .12s;
}
input:hover,select:hover,textarea:hover{border-color:var(--faint)}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
textarea{resize:vertical; min-height:78px; line-height:1.5}
.dica{font-size:12.5px; color:var(--faint); font-weight:400}
select{cursor:pointer}

.linhas{display:flex; flex-direction:column; gap:var(--sp-3)}
.linha{
  border:1px solid var(--line); border-radius:var(--r-md); padding:var(--sp-4);
  display:flex; flex-direction:column; gap:var(--sp-3); background:var(--surface-2);
}
.linha .topo-linha{display:flex; justify-content:space-between; align-items:center}
.linha .n{font-family:var(--font-display); font-size:13.5px; font-weight:700; color:var(--muted)}
.duas{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3)}
.remover{background:none; border:0; color:var(--crit); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; padding:4px}
.arquivo{font-size:14px; color:var(--muted)}
.arquivo input{padding:9px; font-size:13.5px; background:var(--surface)}

.botao{
  font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:-.005em;
  border-radius:var(--r-sm); padding:13px 18px; cursor:pointer; border:1px solid transparent;
  min-height:48px; width:100%; transition:background-color .12s, border-color .12s, transform .05s;
}
.botao:active{transform:scale(.99)}
.botao.principal{background:var(--accent); color:var(--accent-ink)}
.botao.principal:hover{background:var(--accent-hover)}
.botao.secundario{background:var(--surface); color:var(--accent); border-color:var(--line-strong)}
.botao.secundario:hover{border-color:var(--accent); background:var(--accent-soft)}
.botao.discreto{background:none; border:0; color:var(--muted); text-decoration:underline; font-size:13.5px; font-weight:600; min-height:auto; padding:8px}
.botao.discreto:hover{color:var(--ink)}
.botao.perigo{background:var(--crit); color:#fff}
.botao.perigo:hover{filter:brightness(1.08)}

.barra-total{
  position:sticky; bottom:0; background:var(--surface); border-top:1px solid var(--line);
  padding:var(--sp-4) 0 calc(var(--sp-5) + env(safe-area-inset-bottom));
  margin-top:var(--sp-2); display:flex; flex-direction:column; gap:var(--sp-3);
}
.barra-total .l{display:flex; justify-content:space-between; align-items:baseline}
.barra-total .k{font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--faint)}
.barra-total .v{font-size:28px; font-weight:700; font-family:var(--font-display)}

/* ---------- comprovante ---------- */
.recibo{text-align:center; padding:var(--sp-8) var(--sp-5)}
.selo{
  width:60px; height:60px; border-radius:50%; background:var(--ok-soft); color:var(--ok);
  display:grid; place-items:center; margin:0 auto var(--sp-4);
}
.recibo h2{font-size:1.5rem}
.recibo .lead{color:var(--muted); font-size:14.5px; margin:var(--sp-2) 0 0; max-width:38ch; margin-inline:auto}
.protocolo{
  background:var(--surface-2); border:1px dashed var(--line-strong); border-radius:var(--r-md); padding:var(--sp-4);
  margin:var(--sp-5) 0;
}
.protocolo .rot{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); font-weight:700}
.protocolo .cod{font-size:19px; font-weight:700; letter-spacing:.02em; margin-top:2px}
.lista-dados{margin:0; text-align:left}
.lista-dados div{display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--line); font-size:14px}
.lista-dados div:last-child{border-bottom:0}
.lista-dados dt{color:var(--muted); font-weight:600; margin:0}
.lista-dados dd{margin:0; text-align:right}
.assinatura{font-size:12px; color:var(--faint); text-align:left; border-top:1px dashed var(--line); padding-top:var(--sp-3); margin-top:var(--sp-4); line-height:1.6}

/* ---------- painel do DP ---------- */
.acoes{display:flex; gap:8px; flex-wrap:wrap}
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--sp-3); margin-bottom:var(--sp-6)}
.kpi{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-4) var(--sp-5); box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
}
.kpi::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--line-strong)}
.kpi .k{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); font-weight:700}
.kpi .v{font-family:var(--font-display); font-size:28px; font-weight:700; line-height:1.2; margin-top:2px}
.kpi .n{font-size:12.5px; color:var(--muted); margin-top:3px}
.kpi.alerta::before{background:var(--crit)}
.kpi.alerta .v{color:var(--crit)}
.kpi.destaque::before{background:var(--accent)}

.rolagem{overflow-x:auto}
table{border-collapse:collapse; width:100%; min-width:640px}
th,td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:middle}
th{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); background:var(--surface-2); font-weight:700}
tbody tr{transition:background-color .1s}
tbody tr:hover{background:var(--surface-hover)}
tbody tr:last-child td{border-bottom:0}
tr.atrasada{background:var(--crit-soft)}
tr.atrasada:hover{background:var(--crit-soft)}
td.dinheiro,th.dinheiro{text-align:right; font-variant-numeric:tabular-nums}
.quem b{display:block; font-weight:600} .quem small{color:var(--faint)}

.selo-status{
  display:inline-flex; align-items:center; border-radius:var(--r-pill); padding:6px 14px;
  font-size:12.5px; font-weight:700; white-space:nowrap; color:#fff; line-height:1;
}
.s-enviada{background:var(--warn)}
.s-aprovada{background:var(--ok)}
.s-devolvida{background:var(--crit)}
.s-sem_despesa{background:var(--faint)}
.s-faltando{background:var(--crit)}

.tabela-acoes{display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap}
.mini{
  font-family:var(--font-display); font-weight:700; font-size:12.5px; padding:7px 12px; border-radius:var(--r-sm);
  border:1px solid var(--line-strong); background:var(--surface); color:var(--muted); cursor:pointer;
  text-decoration:none; display:inline-block; transition:border-color .12s, color .12s;
}
.mini:hover{border-color:var(--accent); color:var(--accent); text-decoration:none}
.mini.go{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.mini.go:hover{background:var(--accent-hover); color:var(--accent-ink)}

.colunas{display:grid; grid-template-columns:1fr; gap:var(--sp-5)}
@media (min-width:960px){ .colunas{grid-template-columns:1.7fr 1fr; align-items:start} }
.barra-filtros{
  display:flex; align-items:flex-end; gap:var(--sp-3); flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-5); box-shadow:var(--shadow-sm);
}
.barra-filtros label{flex:1 1 180px; min-width:160px; gap:5px; font-size:12.5px}
.barra-filtros select{min-height:42px; padding:9px 12px; font-size:14px}
.barra-filtros .mini{margin-bottom:1px}
.destaque-gasto{
  background:var(--accent-soft); color:var(--ink); border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4); font-size:14px; margin:0 0 var(--sp-1);
}
.destaque-gasto b{color:var(--accent)}
.categorias{padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-3)}
.cat{display:grid; grid-template-columns:1fr auto; gap:8px; font-size:14px}
.cat .barra{grid-column:1/-1; height:6px; border-radius:3px; background:var(--surface-2); overflow:hidden}
.cat .barra i{display:block; height:100%; background:var(--accent); border-radius:3px}

/* Tabelas de dados -> lista de cartões no celular (mais legível que rolar de lado) */
@media (max-width:760px){
  .rolagem{overflow-x:visible}
  table, thead, tbody, th, td, tr{display:block; width:100%}
  table{min-width:0}
  thead{position:absolute; left:-9999px; top:-9999px}
  tbody tr{
    border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:var(--sp-3);
    padding:var(--sp-2) var(--sp-4); background:var(--surface);
  }
  tbody tr:hover{background:var(--surface)}
  tbody tr.atrasada{background:var(--crit-soft)}
  td{
    border-bottom:1px dashed var(--line); padding:10px 0; display:flex;
    justify-content:space-between; align-items:center; gap:var(--sp-3); text-align:right;
  }
  td:last-child{border-bottom:0}
  td::before{content:attr(data-label); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); text-align:left}
  td.dinheiro{justify-content:space-between}
  .quem{text-align:right}
  .tabela-acoes{justify-content:flex-end; width:100%}
}

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