/* Izzare — financeiro.
   Identidade: branco, dourado, nude e cinza. Fonte grande (monitor 32" ultrawide). */
/* Cores amostradas da propria marca (logo e posts do @izzareclinic):
   dourado champagne #C3A066, cetim nude #E0D0C0, branco quente, cinza taupe. */
:root{
  --bg:#FFFFFF;          /* fundo */
  --bg2:#FAF6F1;         /* cartao / superficie */
  --nude:#EFE5D9;        /* champagne claro */
  --nude2:#E0D0C0;       /* cetim da logo */
  --linha:#E6DACB;
  --txt:#3A3430;         /* grafite quente */
  --txt2:#9A8F84;        /* cinza taupe */
  --ouro:#C3A066;
  --ouro-claro:#DCC79B;
  --verde:#4F8A63; --vermelho:#B4544B; --azul:#5B7C99;
  --raio:14px;
  --sombra:0 1px 2px rgba(59,53,49,.05), 0 6px 20px rgba(59,53,49,.05);
}
*{box-sizing:border-box}
html{font-size:20px}
body{margin:0;background:var(--bg);color:var(--txt);font-family:Inter,system-ui,sans-serif;
     font-size:1rem;line-height:1.7;-webkit-font-smoothing:antialiased}
.marca{font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;font-size:1.75rem;
  letter-spacing:.22em;color:var(--ouro);font-weight:600;text-transform:uppercase}
.logo{width:52px;height:52px;border-radius:50%;object-fit:cover;border:1px solid var(--nude2)}
.logo-login{width:104px;height:104px;margin:0 auto .4rem;display:block}
h1,h2{margin:0}
input,select,button{font-family:inherit;font-size:1rem}
input,select{background:#fff;border:1px solid var(--linha);color:var(--txt);
  border-radius:10px;padding:.6rem .7rem;width:100%;min-height:52px}
input:focus,select:focus{outline:2px solid var(--ouro-claro);outline-offset:1px;border-color:var(--ouro)}
label{display:flex;flex-direction:column;gap:.3rem;font-size:.82rem;color:var(--txt2);font-weight:500}
label.check{flex-direction:row;align-items:center;gap:.6rem;font-size:.92rem;color:var(--txt);align-self:end;min-height:52px}
label.check input{width:24px;height:24px;min-height:0;flex:0 0 auto;accent-color:var(--ouro)}

.btn{background:#fff;border:1px solid var(--linha);color:var(--txt);border-radius:10px;
  padding:.7rem 1.2rem;cursor:pointer;min-height:52px;font-weight:500;transition:.15s}
.btn:hover{border-color:var(--ouro);color:var(--ouro)}
.btn.primario{background:var(--ouro);color:#fff;border-color:var(--ouro);font-weight:700}
.btn.primario:hover{filter:brightness(1.07);color:#fff}
.btn.destaque{border-color:var(--ouro);color:var(--ouro);background:var(--nude)}
.btn.fantasma{background:none;border-color:transparent;color:var(--txt2)}
.btn.mini{min-height:40px;padding:.3rem .8rem;font-size:.85rem}
.erro{color:var(--vermelho);min-height:1.4rem;margin:.4rem 0 0}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:1.5rem;
  background:linear-gradient(160deg,var(--nude) 0%,#fff 55%)}
.card{background:var(--bg2);border:1px solid var(--linha);border-radius:var(--raio);padding:1.6rem;box-shadow:var(--sombra)}
.login-card{width:min(420px,100%);display:flex;flex-direction:column;gap:1rem;background:#fff}
.login-card .sub{margin:-.8rem 0 .4rem;color:var(--txt2);font-size:.9rem}

/* ---------- topo ---------- */
.topo{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
  padding:.9rem 1.6rem;border-bottom:1px solid var(--linha);background:#fff;position:sticky;top:0;z-index:5}
.topo-marca{display:flex;align-items:baseline;gap:.5rem}
.tag{color:var(--txt2);font-size:.8rem;text-transform:uppercase;letter-spacing:.12em}
.abas{display:flex;gap:.3rem;flex:1;flex-wrap:wrap}
.aba{background:none;border:none;color:var(--txt2);padding:.6rem 1rem;border-radius:10px;cursor:pointer;font-weight:500}
.aba:hover{color:var(--txt);background:var(--bg2)}
.aba.ativa{background:var(--nude);color:var(--ouro);font-weight:600}
.topo-user{display:flex;align-items:center;gap:.8rem;color:var(--txt2);font-size:.9rem}

.aba-conteudo{display:none;padding:1.6rem;max-width:1700px;margin:0 auto}
.aba-conteudo.ativa{display:block}
.secao{font-size:1.05rem;font-weight:600;margin:2rem 0 .9rem;color:var(--txt)}
.secao.sem-topo{margin-top:0}
.nota{color:var(--txt2);font-size:.92rem;max-width:75ch}

.filtros{display:flex;gap:.8rem;align-items:end;flex-wrap:wrap;margin-bottom:1.2rem}
.filtros select,.filtros input{width:auto;min-width:170px}
.periodo-label{color:var(--txt2);font-size:.9rem;padding-bottom:.9rem}

/* ---------- cards ---------- */
.cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.kpi{background:var(--bg2);border:1px solid var(--linha);border-radius:var(--raio);padding:1.1rem 1.2rem;box-shadow:var(--sombra)}
.kpi .rot{color:var(--txt2);font-size:.78rem;text-transform:uppercase;letter-spacing:.09em}
.kpi .val{font-size:1.75rem;font-weight:700;margin-top:.25rem;line-height:1.25}
.kpi .pe{color:var(--txt2);font-size:.82rem}
.kpi.ouro{background:var(--nude);border-color:var(--nude2)}
.kpi.ouro .val{color:var(--ouro)} .kpi.verde .val{color:var(--verde)}
.kpi.vermelho .val{color:var(--vermelho)} .kpi.azul .val{color:var(--azul)}

.grid-unidades{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.un-card{background:var(--bg2);border:1px solid var(--linha);border-radius:var(--raio);padding:1.3rem;box-shadow:var(--sombra)}
.un-card h3{margin:0 0 .8rem;font-size:1.15rem;color:var(--ouro);font-family:'Playfair Display',serif;letter-spacing:.03em}
.un-linha{display:flex;justify-content:space-between;padding:.4rem 0;border-bottom:1px dashed var(--linha);font-size:.95rem}
.un-linha:last-child{border:none;font-weight:700}
.un-linha span:last-child{font-variant-numeric:tabular-nums}

.duas-colunas{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(430px,1fr))}

/* ---------- tabelas ---------- */
.tabela-wrap{overflow-x:auto;border:1px solid var(--linha);border-radius:var(--raio);background:#fff;box-shadow:var(--sombra)}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{padding:.7rem .9rem;text-align:left;border-bottom:1px solid var(--linha);white-space:nowrap}
th{color:var(--txt2);font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;font-weight:600;background:var(--bg2)}
tbody tr:hover{background:#FDFBF8}
tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr.destaque td{background:var(--nude);font-weight:700}
.vazio{padding:1.6rem;color:var(--txt2);text-align:center}
.pill{padding:.15rem .6rem;border-radius:999px;font-size:.78rem;border:1px solid var(--linha);background:#fff}
.pill.pago{color:var(--verde);border-color:#BCD6C5}
.pill.pendente{color:var(--ouro);border-color:var(--nude2);background:var(--nude)}
.pill.vencida{color:var(--vermelho);border-color:#E4C2BE}

/* ---------- formularios ---------- */
.form-linha{margin-bottom:1.6rem}
.campos{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));margin-bottom:1rem}
.campos .cresce{grid-column:span 2}
.previa{background:var(--nude);border:1px solid var(--nude2);border-radius:10px;padding:.8rem 1rem;
  margin-bottom:1rem;color:var(--txt2);font-size:.95rem}
.previa strong{color:var(--txt)}
.previa .alerta{color:var(--vermelho)}

@media (max-width:760px){
  html{font-size:18px}
  .aba-conteudo{padding:1rem}
  .campos .cresce{grid-column:span 1}
  .topo{padding:.8rem 1rem}
}