/* =============================================================================
   MyBudget — folha de estilo
   A paleta da marca em um lugar só: trocar a cor do grupo é trocar estes tokens.

   O ouro carrega estrutura e estado; o azul-marinho carrega informação. Não é
   preferência: ouro sobre branco dá 2,8:1 de contraste, ilegível para texto.
   ========================================================================== */
:root{
  --navy:#0B193C; --gold:#B29568; --gold-l:#C8AF87; --gold-d:#8C7248;
  --bg:#F4F3F0; --white:#FFFFFF;
  --green:#1A6B3A; --green-bg:#E8F5E9;
  --red:#C0392B;   --red-bg:#FDECEA;
  --amber:#F39C12; --amber-bg:#FEF9E7;
  --blue:#0369A1;  --blue-bg:#EFF6FF;
  --text:#0B193C;  --text2:#4B5563; --border:#E2E0DC;
  --gold-bar:linear-gradient(90deg,#8C7248,#B29568,#C8AF87,#B29568,#8C7248);
  --shadow:0 2px 12px rgba(11,25,60,.10);
  --shadow-lg:0 8px 32px rgba(11,25,60,.16);
  --radius:10px; --radius-ctrl:6px;

  /* derivados: tons de texto que atingem 4,5:1 */
  --text3:#727681;
  --amber-t:#A0660B;
  --linha:rgba(11,25,60,.07);
  --grupo-bg:rgba(11,25,60,.045);
  --gold-bg:rgba(178,149,104,.16);
  --zebra:#FAF9F7;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font:400 13.5px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--gold-d)}
h1,h2,h3{margin:0 0 6px;font-weight:600;letter-spacing:-.01em}
h1{font-size:20px} h2{font-size:17px} h3{font-size:14px}
p{margin:0 0 10px}
.sub{color:var(--text2);font-size:12.5px;max-width:74ch}
.rot{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text2)}

/* ---------- topo ---------- */
.topo{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;
  height:52px;padding:0 18px;background:var(--white);box-shadow:var(--shadow);
}
.topo::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--gold-bar)}
.marca{font-weight:600;font-size:15px;letter-spacing:-.01em;text-decoration:none;color:var(--text)}
.marca span{color:var(--gold-d)}
.espaco{flex:1}

/* ---------- botões ---------- */
.btn{
  display:inline-block;background:var(--navy);color:var(--white);border:1px solid var(--navy);
  padding:8px 15px;border-radius:var(--radius-ctrl);font:inherit;font-size:12.5px;font-weight:500;
  cursor:pointer;text-decoration:none;transition:background .12s,border-color .12s;
}
.btn:hover{background:#152750;border-color:#152750}
.btn.sec{background:transparent;color:var(--navy);border-color:var(--border)}
.btn.sec:hover{border-color:var(--gold-d);color:var(--gold-d);background:var(--gold-bg)}
.btn.mini{padding:5px 11px;font-size:12px}

/* ---------- layout ---------- */
.shell{display:flex;align-items:flex-start;min-height:calc(100vh - 52px)}
.lado{
  width:200px;flex:0 0 200px;padding:16px 10px 16px 6px;
  border-right:1px solid var(--border);min-height:calc(100vh - 52px);
}
main{flex:1;padding:20px 22px 60px;min-width:0}
.nav{
  display:flex;justify-content:space-between;align-items:baseline;gap:6px;width:100%;
  text-align:left;background:transparent;border:0;border-left:3px solid transparent;
  padding:6px 9px;border-radius:0 var(--radius-ctrl) var(--radius-ctrl) 0;
  font:inherit;font-size:12.5px;color:var(--text);text-decoration:none;cursor:pointer;
}
.nav:hover{background:var(--bg)}
.nav.on{background:var(--gold-bg);border-left-color:var(--gold-d);font-weight:600}

/* ---------- cabeçalho de tela ---------- */
.cab{
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-bottom:10px;border-bottom:2px solid var(--navy);margin-bottom:16px;
}

/* ---------- cartões e tabela ---------- */
.faixa{
  display:flex;flex-wrap:wrap;border:1px solid var(--border);background:var(--white);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-bottom:16px;
}
.faixa > div{flex:1 1 190px;padding:13px 16px;border-right:1px solid var(--border)}
.faixa > div:last-child{border-right:0}
.faixa .k{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text2)}
.faixa .v{display:block;font-size:19px;font-weight:600;margin:3px 0 1px}
.faixa .o{display:block;font-size:11.5px;color:var(--text3)}

.grade{border:1px solid var(--border);background:var(--white);border-radius:var(--radius);
       overflow:auto;box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;font-size:12.5px}
th{
  text-align:left;font-weight:500;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text2);padding:9px 12px;border-bottom:1px solid var(--border);background:var(--white);
  position:sticky;top:0;
}
td{padding:9px 12px;border-bottom:1px solid var(--linha)}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:var(--zebra)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
.cod{color:var(--text3);font-variant-numeric:tabular-nums;font-size:10.5px;margin-right:8px}

/* ---------- formulário ---------- */
.form{
  background:var(--white);border:1px solid var(--gold-d);border-top:3px solid var(--gold-d);
  border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow-lg);
}
.f{margin-bottom:12px}
.f label{display:block;margin-bottom:4px;font-size:10px;letter-spacing:.1em;
         text-transform:uppercase;color:var(--text2)}
.f input,.f select,.f textarea{
  width:100%;padding:8px 10px;border:1px solid var(--border);background:var(--white);
  font:inherit;font-size:13px;color:var(--text);border-radius:var(--radius-ctrl);
}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:2px solid var(--navy);outline-offset:-1px;border-color:var(--navy);
}

/* ---------- estados ---------- */
.aviso{padding:10px 12px;border-radius:var(--radius-ctrl);font-size:12.5px;margin-bottom:14px}
.aviso.erro{border:1px solid var(--red);background:var(--red-bg);color:var(--red)}
.aviso.ok{border:1px solid var(--green);background:var(--green-bg);color:var(--green)}
.aviso.info{border:1px solid var(--blue);background:var(--blue-bg);color:var(--blue)}
.ok{color:var(--green)} .bad{color:var(--red)} .fraco{color:var(--text3)}
.tag{display:inline-block;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
     padding:2px 7px;border:1px solid currentColor;border-radius:var(--radius-ctrl)}
.tag.rascunho{color:var(--amber-t);background:var(--amber-bg);border-color:var(--amber)}
.tag.aprovado{color:var(--green);background:var(--green-bg)}
.vazio{border:1px dashed var(--border);background:var(--white);border-radius:var(--radius);
       padding:34px 20px;text-align:center}

/* ---------- login ---------- */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{
  width:100%;max-width:360px;background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius);padding:34px 30px 30px;box-shadow:var(--shadow-lg);
  position:relative;overflow:hidden;
}
.login-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--gold-bar)}

@media (max-width:760px){
  .shell{flex-direction:column}
  .lado{width:100%;flex:none;min-height:0;border-right:0;border-bottom:1px solid var(--border)}
  main{padding:16px 14px 48px}
}