[hidden]{display:none !important;}

:root{
  /* Paleta oficial Faturio — ver /home/lg/repos/wp-mestres/docs/faturio/identidade-visual/guia-de-marca.md */
  --bg:#FCFCF8;
  --surface:#FFFFFF;
  --surface-2:#EAF5E7;
  --ink:#24322D;
  --ink-soft:#5B6B60;
  --line:#DCEBD6;
  --accent:#237B73;
  --accent-strong:#1B5E58;
  --accent-tint:#E3F1EF;
  --sage:#9DCC78;
  --sage-tint:#EAF5E7;
  --success:#9DCC78;
  --success-tint:#EAF5E7;
  --caution:#C9862D;
  --caution-tint:#F7E9D3;
  --danger:#B64D48;
  --danger-tint:#F5E1DF;
  --shadow: 0 1px 2px rgba(36,50,45,0.07), 0 18px 40px -22px rgba(35,123,115,0.3);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#16211C;
    --surface:#1E2B24;
    --surface-2:#24352C;
    --ink:#EAF3E7;
    --ink-soft:#9FB3A6;
    --line:#33453A;
    --accent:#4FA89D;
    --accent-strong:#6EC0B5;
    --accent-tint:#1B332F;
    --sage:#B9DE96;
    --sage-tint:#223227;
    --success:#B9DE96;
    --success-tint:#223227;
    --caution:#E0A94A;
    --caution-tint:#3A2C14;
    --danger:#E08076;
    --danger-tint:#3A211E;
    --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 24px 48px -24px rgba(79,168,157,0.35);
  }
}
:root[data-theme="dark"]{
  --bg:#16211C;
  --surface:#1E2B24;
  --surface-2:#24352C;
  --ink:#EAF3E7;
  --ink-soft:#9FB3A6;
  --line:#33453A;
  --accent:#4FA89D;
  --accent-strong:#6EC0B5;
  --accent-tint:#1B332F;
  --sage:#B9DE96;
  --sage-tint:#223227;
  --success:#B9DE96;
  --success-tint:#223227;
  --caution:#E0A94A;
  --caution-tint:#3A2C14;
  --danger:#E08076;
  --danger-tint:#3A211E;
  --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 24px 48px -24px rgba(79,168,157,0.35);
}

*{box-sizing:border-box;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  margin:0;
}
h1,h2{
  font-family:'Poppins', -apple-system, 'Segoe UI', sans-serif;
  font-weight:600;
  margin:0;
  letter-spacing:-0.01em;
}
.mono{font-family:'IBM Plex Mono', ui-monospace, monospace;}

/* login */
.auth-shell{
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.auth-card{
  width:100%;
  max-width:380px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:32px 28px;
}
.auth-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:24px;
}
.auth-logo .mark{
  width:30px;height:30px;
  display:block;
}
.auth-logo .wordmark{
  font-family:'Poppins', sans-serif;
  font-weight:600;
  font-size:19px;
  color:var(--ink);
}
.auth-card h1{font-size:20px;}
.auth-card p.sub{margin-top:6px; color:var(--ink-soft); font-size:14px;}
form{margin-top:24px; display:flex; flex-direction:column; gap:14px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:12.5px; color:var(--ink-soft);}
.field input{
  padding:11px 13px;
  border-radius:9px;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--ink);
  font-size:14.5px;
  font-family:inherit;
}
.field input:focus{outline:2px solid var(--accent); outline-offset:1px;}
button.primary{
  margin-top:4px;
  background:var(--accent);
  color:#fff;
  border:none;
  padding:12px;
  border-radius:9px;
  font-weight:600;
  font-size:14.5px;
  cursor:pointer;
}
button.primary:hover{filter:brightness(0.9);}
button.primary:disabled{opacity:0.6; cursor:default;}
.error-msg{
  background:var(--danger-tint);
  color:var(--danger);
  border-radius:8px;
  padding:10px 12px;
  font-size:13px;
  display:none;
}
.error-msg.show{display:block;}
.hint{margin-top:18px; font-size:12px; color:var(--ink-soft); text-align:center;}

/* dashboard shell */
.app-shell{min-height:100dvh; display:flex; flex-direction:column;}
.app-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 24px;
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
.app-top .logo{display:flex; align-items:center; gap:10px; font-family:'Poppins',sans-serif; font-weight:600; font-size:17px; flex-shrink:0;}
.app-top .logo .mark{width:26px;height:26px;display:block;}
.app-top .who{display:flex; align-items:center; gap:14px; font-size:13.5px; color:var(--ink-soft); margin-left:auto;}
.app-top .who strong{color:var(--ink);}

.app-nav{
  display:flex;
  align-items:center;
  gap:4px;
  margin-left:32px;
}
.app-nav .nav-link{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 14px;
  border-radius:999px;
  font-size:13.5px;
  line-height:1;
  color:var(--ink-soft);
  text-decoration:none;
}
.app-nav .nav-link svg{display:block; flex-shrink:0;}
.app-nav .nav-link:hover{color:var(--ink); background:var(--surface-2);}
.app-nav .nav-link.active{color:var(--accent-strong); background:var(--accent-tint); font-weight:600;}
@media (max-width:760px){
  .app-top{flex-wrap:wrap; row-gap:10px;}
  .app-nav{margin-left:0; order:3; width:100%; flex-wrap:wrap; row-gap:6px;}
  .app-top .who{order:2;}
}
.btn-logout{
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  padding:7px 14px;
  border-radius:999px;
  font-size:13px;
  cursor:pointer;
}
.btn-logout:hover{border-color:var(--accent);}
.app-body{flex:1; padding:40px 24px; max-width:720px; margin:0 auto; width:100%;}
.placeholder-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:32px;
  text-align:center;
}
.placeholder-card .eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--accent);
}
.placeholder-card h2{margin-top:10px; font-size:22px;}
.placeholder-card p{margin-top:10px; color:var(--ink-soft); font-size:14.5px;}

/* badges no cabeçalho */
.org-badge{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--ink-soft);
  background:var(--surface-2);
  border:1px solid var(--line);
  padding:4px 10px;
  border-radius:999px;
}
.role-badge{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--accent-strong);
  background:var(--accent-tint);
  padding:2px 8px;
  border-radius:999px;
  margin-left:4px;
}

/* equipa */
.team-section{
  margin-top:24px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:26px 28px;
  overflow-x:auto;
}
.team-header h2{font-size:19px;}
.team-header p{margin-top:6px; font-size:14px; color:var(--ink-soft);}
.team-table{
  width:100%;
  border-collapse:collapse;
  margin-top:18px;
  font-size:13.5px;
}
.team-table th{
  text-align:left;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--ink-soft);
  padding-block:8px;
  border-bottom:1px solid var(--line);
}
.team-table td{
  padding-block:10px;
  border-bottom:1px solid var(--line);
}
.role-pill{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:999px;
  background:var(--surface-2);
  color:var(--ink-soft);
}
.role-pill.role-admin{background:var(--danger-tint); color:var(--danger);}
.role-pill.role-gestor{background:var(--accent-tint); color:var(--accent-strong);}

.invite-form{margin-top:22px; padding-top:20px; border-top:1px solid var(--line);}
.invite-row{
  display:grid;
  grid-template-columns:1.2fr 1.4fr 1fr 1.2fr auto;
  gap:10px;
  align-items:end;
}
@media (max-width:820px){.invite-row{grid-template-columns:1fr 1fr;}}
.invite-row .field input, .invite-row .field select{
  padding:9px 10px;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--ink);
  font-size:13.5px;
  width:100%;
  font-family:inherit;
}
.invite-row button{white-space:nowrap; padding:10px 16px;}
.invite-result{
  margin-top:12px;
  font-size:13px;
  padding:10px 12px;
  border-radius:8px;
  background:var(--success-tint);
  color:var(--success);
  display:none;
}
.invite-result.show{display:block;}
.invite-result.error{background:var(--danger-tint); color:var(--danger);}

/* definições / conta */
.settings-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:28px;
}
.settings-card + .settings-card{margin-top:18px;}
.settings-card h2{font-size:18px;}
.settings-card .sub{margin-top:8px; font-size:13.5px; color:var(--ink-soft);}
.account-info{
  margin-top:16px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:8px 16px;
  font-size:14px;
}
.account-info dt{color:var(--ink-soft);}
.account-info dd{margin:0; font-weight:500;}
.settings-card form{margin-top:18px; display:flex; flex-direction:column; gap:14px; max-width:340px;}
.settings-card form .field input{
  padding:10px 12px;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
  width:100%;
  font-family:inherit;
}
.password-result{
  font-size:13px;
  padding:10px 12px;
  border-radius:8px;
  background:var(--success-tint);
  color:var(--success);
  display:none;
}
.password-result.show{display:block;}
.checkbox-field{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  font-size:14px;
  cursor:pointer;
}
.checkbox-field input{width:16px; height:16px; cursor:pointer;}
.platform-settings-result{
  margin-top:10px;
  font-size:13px;
  padding:10px 12px;
  border-radius:8px;
  background:var(--success-tint);
  color:var(--success);
  display:none;
}
.platform-settings-result.show{display:block;}
.platform-settings-result.show.error{background:var(--danger-tint); color:var(--danger);}
.password-result.error{background:var(--danger-tint); color:var(--danger);}

/* despesas */
.expense-card, .expense-list-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:26px 28px;
  overflow-x:auto;
}
.expense-list-card{margin-top:20px;}
.expense-card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.expense-card-head h2{font-size:19px;}
.expense-card-head p.sub{margin-top:6px; font-size:14px; color:var(--ink-soft);}
.expense-list-card h2{font-size:19px; margin-bottom:14px;}

button.ghost{
  background:transparent;
  color:var(--ink-soft);
  border:1px solid var(--line);
  padding:11px 18px;
  border-radius:9px;
  font-weight:600;
  font-size:14.5px;
  cursor:pointer;
}
button.ghost:hover{border-color:var(--accent); color:var(--ink);}

.upload-drop{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:36px 20px;
  border:2px dashed var(--line);
  border-radius:12px;
  cursor:pointer;
  text-align:center;
  color:var(--ink-soft);
  font-size:14px;
}
.upload-drop:hover{border-color:var(--accent); color:var(--ink);}
.upload-icon{
  font-size:20px;
  width:38px;height:38px;
  border-radius:50%;
  background:var(--accent-tint);
  color:var(--accent-strong);
  display:flex;align-items:center;justify-content:center;
}
.upload-hint{font-size:12px; color:var(--ink-soft);}
.upload-status{
  margin-top:12px;
  font-size:13.5px;
  padding:10px 12px;
  border-radius:8px;
  background:var(--accent-tint);
  color:var(--accent-strong);
}
.upload-status.error{background:var(--danger-tint); color:var(--danger);}

#expense-form{margin-top:18px;}
.qr-banner{
  font-size:13.5px;
  padding:10px 12px;
  border-radius:8px;
  margin-bottom:16px;
}
.qr-banner.ok{background:var(--success-tint); color:var(--success);}
.qr-banner.warn{background:var(--caution-tint); color:var(--caution);}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:14px;
}
@media (max-width:560px){.form-row{grid-template-columns:1fr;}}
#expense-form .field label{font-size:12.5px; color:var(--ink-soft); display:block; margin-bottom:6px;}
#expense-form .field input, #expense-form .field select{
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
  font-family:inherit;
}
.expense-form-actions{
  display:flex;
  gap:10px;
  margin-top:8px;
}
.form-result{
  margin-top:14px;
  font-size:13px;
  padding:10px 12px;
  border-radius:8px;
  background:var(--danger-tint);
  color:var(--danger);
  display:none;
}
.form-result.show{display:block;}

.empty-hint{margin-top:14px; font-size:13.5px; color:var(--ink-soft);}
.role-pill.estado-pendente{background:var(--caution-tint); color:var(--caution);}
.role-pill.estado-aprovada{background:var(--success-tint); color:var(--success);}
.role-pill.estado-rejeitada{background:var(--danger-tint); color:var(--danger);}
.role-pill.estado-cancelada{background:var(--surface-2); color:var(--ink-soft);}
.btn-edit-expense, .btn-cancel-expense{
  border:none;
  border-radius:7px;
  padding:6px 12px;
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
}
.btn-edit-expense{background:var(--accent-tint); color:var(--accent-strong);}
.btn-edit-expense:hover{filter:brightness(0.95);}
.btn-cancel-expense{background:var(--danger-tint); color:var(--danger);}
.btn-cancel-expense:hover{filter:brightness(0.95);}
.rejection-note{
  margin-top:4px;
  font-size:12px;
  color:var(--ink-soft);
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* aprovações / dashboard */
.app-body-wide{max-width:960px;}

.dashboard-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
  margin-bottom:20px;
}
@media (max-width:860px){.dashboard-grid{grid-template-columns:repeat(2, 1fr);}}
@media (max-width:560px){.dashboard-grid{grid-template-columns:1fr;}}
.stat-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px 20px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.stat-label{font-size:12px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em; font-family:'IBM Plex Mono',monospace;}
.stat-value{font-family:'Poppins',sans-serif; font-weight:700; font-size:24px; margin-top:4px;}
.stat-sub{font-size:12.5px; color:var(--ink-soft);}
.stat-card-list{gap:10px;}
.stat-list{display:flex; flex-direction:column; gap:6px; margin-top:4px;}
.stat-row{display:flex; justify-content:space-between; font-size:13.5px;}
.stat-row .mono{font-family:'IBM Plex Mono',monospace;}
.stat-empty{font-size:13px; color:var(--ink-soft);}

.pending-actions{display:flex; gap:8px; justify-content:flex-end;}
.btn-approve, .btn-reject{
  border:none;
  border-radius:7px;
  padding:6px 12px;
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
}
.btn-approve{background:var(--success-tint); color:var(--success);}
.btn-approve:hover{filter:brightness(0.95);}
.btn-reject{background:var(--danger-tint); color:var(--danger);}
.btn-reject:hover{filter:brightness(0.95);}

.modal-backdrop{
  position:fixed; inset:0;
  background:rgba(18,20,20,0.45);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  z-index:50;
}
.modal-card{
  background:var(--surface);
  border-radius:14px;
  padding:26px;
  width:100%;
  max-width:400px;
  box-shadow:var(--shadow);
}
.modal-card h2{font-size:18px;}
.modal-card .sub{margin-top:6px; font-size:13.5px; color:var(--ink-soft);}
.modal-card textarea{
  width:100%;
  margin-top:14px;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--ink);
  font-family:inherit;
  font-size:14px;
  resize:vertical;
}
.modal-actions{display:flex; gap:10px; margin-top:14px;}

/* histórico / exportação */
.export-controls{
  display:flex;
  align-items:end;
  gap:12px;
  flex-wrap:wrap;
  margin:18px 0 20px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
}
.export-controls .field{display:flex; flex-direction:column; gap:6px;}
.export-controls .field label{font-size:12.5px; color:var(--ink-soft);}
.export-controls .field input, .export-controls .field select{
  padding:9px 10px;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--ink);
  font-size:13.5px;
  font-family:inherit;
}
.export-buttons{display:flex; gap:8px; margin-left:auto;}
.export-btn{
  border:1px solid var(--accent);
  background:var(--accent-tint);
  color:var(--accent-strong);
  border-radius:8px;
  padding:9px 14px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}
.export-btn:hover{background:var(--accent); color:#fff;}
@media (max-width:760px){.export-buttons{margin-left:0; width:100%;}}

/* onboarding */
.onboarding-shell{min-height:100dvh; display:flex; flex-direction:column;}
.onboarding-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 24px;
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
.onboarding-topbar .logo{
  display:flex; align-items:center; gap:10px;
  font-family:'Poppins',sans-serif; font-weight:600; font-size:17px;
}
.onboarding-wrap{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:40px 24px 60px;
}
.onboarding-steps{
  display:flex;
  gap:28px;
  margin-bottom:28px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12.5px;
  color:var(--ink-soft);
}
.onboarding-step.active{color:var(--accent-strong); font-weight:600;}
.onboarding-step.done{color:var(--success);}
.onboarding-card{
  width:100%;
  max-width:640px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:36px 40px;
}
@media (max-width:680px){.onboarding-card{padding:28px 22px;}}
.onboarding-panel h1{font-size:24px; margin-top:10px;}
.onboarding-panel p.sub{margin-top:10px; color:var(--ink-soft); font-size:14.5px;}
.onboarding-panel .field{margin-top:18px;}
.onboarding-panel .field label{font-size:12.5px; color:var(--ink-soft); display:block; margin-bottom:6px;}
.onboarding-panel .field input{
  width:100%;
  padding:11px 13px;
  border-radius:9px;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--ink);
  font-size:14.5px;
  font-family:inherit;
}
.onboarding-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:26px;}
.onboarding-panel .invite-row{grid-template-columns:1fr 1.2fr 0.8fr 1fr auto;}
@media (max-width:680px){.onboarding-panel .invite-row{grid-template-columns:1fr 1fr;}}