/* Poppins hospedada aqui mesmo (nada de fonte vinda de terceiros) */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/poppins-700.woff2") format("woff2"); }

/* Paleta Etheus: navy #0A1D3D, verde #22B573, teal #00A896, cinza #6B7280,
   claro #F3F5F7. Os tons "-ink"/"link"/"good" sao versoes ajustadas pra
   manter contraste de leitura (o verde da marca com texto branco ficaria
   fraco demais). */
:root {
  color-scheme: light;
  --brand-navy: #0A1D3D;
  --brand-green: #22B573;
  --brand-teal: #00A896;
  --brand-gray: #6B7280;
  --brand-light: #F3F5F7;

  --page: #F3F5F7;
  --surface-1: #FFFFFF;
  --surface-2: #ECEFF3;
  --text-primary: #0A1D3D;
  --text-secondary: #465670;
  --text-muted: #626D7F;
  --border: rgba(10,29,61,0.12);
  --gridline: #DFE4EA;
  --accent: #0A1D3D;
  --accent-ink: #FFFFFF;
  --accent-bg: rgba(10,29,61,0.07);
  --link: #00796B;
  --good: #16874F;
  --good-ink: #FFFFFF;
  --good-bg: rgba(34,181,115,0.14);
  --warning: #B9790A;
  --warning-bg: #fab21922;
  --critical: #D03B3B;
  --critical-bg: #d03b3b1a;
  --trial: #3568B0;
  --shadow: 0 1px 2px rgba(10,29,61,0.05), 0 8px 24px -12px rgba(10,29,61,0.16);
  --radius: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page: #081630;
    --surface-1: #0F2347;
    --surface-2: #16305C;
    --text-primary: #EEF2F8;
    --text-secondary: #B6C2D6;
    --text-muted: #8EA0BA;
    --border: rgba(255,255,255,0.10);
    --gridline: #1C3160;
    --accent: #22B573;
    --accent-ink: #0A1D3D;
    --accent-bg: rgba(34,181,115,0.16);
    --link: #3DDBB4;
    --good: #3CCB85;
    --good-ink: #06210F;
    --good-bg: rgba(60,203,133,0.16);
    --warning: #FAB219;
    --warning-bg: #fab21922;
    --critical: #E66767;
    --critical-bg: #e667671f;
    --trial: #6FA0E6;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #081630;
  --surface-1: #0F2347;
  --surface-2: #16305C;
  --text-primary: #EEF2F8;
  --text-secondary: #B6C2D6;
  --text-muted: #8EA0BA;
  --border: rgba(255,255,255,0.10);
  --gridline: #1C3160;
  --accent: #22B573;
  --accent-ink: #0A1D3D;
  --accent-bg: rgba(34,181,115,0.16);
  --link: #3DDBB4;
  --good: #3CCB85;
  --good-ink: #06210F;
  --good-bg: rgba(60,203,133,0.16);
  --warning: #FAB219;
  --warning-bg: #fab21922;
  --critical: #E66767;
  --critical-bg: #e667671f;
  --trial: #6FA0E6;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.5);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--page);
  color: var(--text-primary);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body { min-height: 100vh; }
a { color: inherit; }

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 20px 80px;
}
/* Portal do cliente: ocupa a largura toda da tela, sem o limite do admin. */
body.tela-cheia .wrap,
body.tela-cheia .nav-inner {
  max-width: none;
}

/* ---------- Navbar ---------- */
.navbar {
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  height: 58px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.95rem; flex-shrink: 0; }
.brand-logo { width: 22px; height: 22px; border-radius: 6px; display: block; }
/* No tema escuro o icone navy quase some no fundo navy — um filete claro devolve o contorno. */
:root[data-theme="dark"] .brand-logo, :root[data-theme="dark"] .lp-brand img { box-shadow: 0 0 0 1px rgba(255,255,255,0.16); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo, :root:not([data-theme="light"]) .lp-brand img { box-shadow: 0 0 0 1px rgba(255,255,255,0.16); }
}
a.btn { text-decoration: none; }
.nav-links { display: flex; gap: 4px; flex: 1; justify-content: center; }
.nav-links-inicio { justify-content: flex-start; }
.nav-links a {
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 0.87rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  white-space: nowrap;
}
.nav-links a:hover { background: var(--surface-2); color: var(--text-primary); }
.nav-links a.active { background: var(--surface-2); color: var(--accent); }
.nav-user {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--text-muted);
  flex-shrink: 0;
}
.nav-user button {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.8rem;
  cursor: pointer;
  font-family: inherit;
}
.nav-user button:hover { color: var(--text-primary); border-color: var(--text-muted); }
.nav-user .icon-btn { width: 32px; height: 32px; padding: 0; }

header.top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
header.top h1 { font-size: 1.5rem; margin: 0 0 4px; letter-spacing: -0.01em; }
header.top p { margin: 0; color: var(--text-secondary); font-size: 0.92rem; max-width: 58ch; }

.secao-titulo { font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin: 0 0 10px; }

.periodo-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.periodo-nav h1 { font-size: 1.5rem; margin: 0; letter-spacing: -0.01em; white-space: nowrap; }
.periodo-nav .icon-btn { width: 30px; height: 30px; flex-shrink: 0; }
.periodo-nav #btn-hoje { margin-left: 4px; }
.periodo-label { font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }

.icon-btn {
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.icon-btn:hover { color: var(--text-primary); border-color: var(--text-muted); }

/* ---------- Stat tiles ---------- */
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 24px; }
.stats.cols-3 { grid-template-columns: repeat(3, 1fr); }
.stats.cols-4 { grid-template-columns: repeat(4, 1fr); }
.stat-tile {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.stat-tile.clickable {
  cursor: pointer; text-align: left; font-family: inherit; width: 100%;
  transition: border-color 0.12s ease, background-color 0.12s ease, transform 0.08s ease;
}
.stat-tile.clickable:hover { border-color: var(--text-muted); }
.stat-tile.clickable:active { transform: scale(0.98); }
.stat-tile.clickable.active { border-color: var(--accent); background: var(--accent-bg); }
.stat-tile .n { font-size: 1.7rem; font-weight: 600; line-height: 1.1; margin-bottom: 4px; }
.stat-tile .l { font-size: 0.8rem; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot.trial, .dot.pendente { background: var(--trial); }
.dot.ativo, .dot.pago { background: var(--good); }
.dot.inativo { background: var(--warning); }
.dot.cancelado, .dot.atrasado { background: var(--critical); }
.dot.total { background: var(--text-muted); }
.dot.vencendo_hoje { background: var(--warning); }
.dot.em_analise { background: var(--warning); }
.stat-tile.destaque-hoje { border-left: 3px solid var(--warning); }
.warning-text { color: var(--warning); font-weight: 600; }

/* ---------- Banners ---------- */
.banner {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 0.88rem;
  color: var(--text-secondary);
  display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
}
.banner strong { color: var(--text-primary); }
.banner button { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.85rem; flex-shrink: 0; }

.error-banner {
  background: var(--surface-1);
  border: 1px solid var(--critical);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 0.88rem;
  color: var(--text-primary);
  display: none;
}
.error-banner.show { display: block; }
.error-banner code { background: var(--surface-2); padding: 1px 6px; border-radius: 4px; font-size: 0.85em; }

/* ---------- Toolbar ---------- */
.toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar input[type="text"], .toolbar input[type="date"], .toolbar select {
  background: var(--surface-1);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 0.88rem;
  font-family: inherit;
}
.toolbar input[type="text"] { flex: 1; min-width: 180px; }
.toolbar select, .toolbar input[type="date"] { cursor: pointer; }
.spacer { flex: 1; }

.btn {
  border: none; border-radius: 10px; padding: 9px 16px;
  font-size: 0.88rem; font-weight: 600; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); }
.btn-ghost:hover { color: var(--text-primary); border-color: var(--text-muted); }
.periodo-rapido-btn.active { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.btn-ghost.active { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.toolbar-divisor { width: 1px; align-self: stretch; background: var(--border); margin: 2px 2px; }
@media (max-width: 640px) { .toolbar-divisor { display: none; } }

.btn-danger { background: var(--critical); color: #fff; }
.btn-danger:hover { filter: brightness(1.08); }
.btn-text { background: none; color: var(--link); padding: 4px 6px; font-size: 0.82rem; border: none; cursor: pointer; font-family: inherit; }
.btn-text.danger { color: var(--critical); }
.btn-text.good { color: var(--good); }
.btn-row {
  border: 1px solid var(--border); border-radius: 8px; padding: 0 12px; height: 28px;
  font-size: 0.8rem; font-weight: 600; cursor: pointer; font-family: inherit;
  background: var(--surface-2); color: var(--text-secondary); white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-row:hover { color: var(--text-primary); border-color: var(--text-muted); }
.btn-row.good { background: var(--good); color: var(--good-ink); border-color: var(--good); }
.btn-row.good:hover { filter: brightness(1.08); }
.btn:disabled { opacity: 0.6; cursor: default; }

/* ---------- Table ---------- */
.table-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); font-weight: 600; padding: 12px 16px;
  border-bottom: 1px solid var(--gridline); white-space: nowrap;
}
thead th .help { cursor: help; border-bottom: 1px dotted var(--text-muted); }
tbody td { padding: 13px 16px; font-size: 0.88rem; border-bottom: 1px solid var(--gridline); vertical-align: middle; white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
td.nome { font-weight: 600; }
td.muted, .sub { color: var(--text-muted); font-size: 0.8rem; }
.critical { color: var(--critical); font-weight: 600; }
td.valor { font-variant-numeric: tabular-nums; font-weight: 600; }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 7px; border-radius: 999px; font-size: 0.76rem; font-weight: 600;
  background: var(--surface-2); color: var(--text-secondary); white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; }
.badge.vencida { color: var(--critical); }
.badge.vence-hoje { color: var(--warning); }
tbody tr.linha-destaque-hoje td:first-child { box-shadow: inset 3px 0 0 var(--warning); }

.plano-badge {
  font-size: 0.76rem; color: var(--text-secondary); background: var(--surface-2);
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}

.row-actions { display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.row-actions .menu-btn { width: 28px; height: 28px; border-radius: 8px; font-size: 1.3rem; line-height: 0; }

.acoes-header {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 16px; margin-bottom: 12px;
  border-bottom: 1px solid var(--gridline);
}
.acoes-header h2 { margin: 0; font-size: 1.05rem; }
.acoes-header .sub { margin: 2px 0 0; }
.acoes-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.15rem; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--trial) 60%, var(--good));
  box-shadow: 0 4px 12px -2px var(--accent-bg);
}

.action-list { display: flex; flex-direction: column; gap: 4px; }
.action-list button {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left; background: none; border: 1px solid transparent;
  padding: 11px; border-radius: 14px; cursor: pointer; font-family: inherit;
  transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}
.action-list button:hover { background: var(--surface-2); border-color: var(--border); }
.action-list button:active { transform: scale(0.98); }
.action-list .action-icon {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; background: var(--accent-bg);
  box-shadow: inset 0 0 0 1px var(--accent-bg);
  transition: transform 0.12s ease;
}
.action-list button:hover .action-icon { transform: scale(1.06); }
.action-list button.danger .action-icon { background: var(--critical-bg); box-shadow: inset 0 0 0 1px var(--critical-bg); }
.action-list .action-texto { min-width: 0; }
.action-list .action-titulo { display: block; font-size: 0.9rem; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.action-list button.danger .action-titulo { color: var(--critical); }
.action-list .action-desc { display: block; font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.action-list .divider { border-top: 1px solid var(--gridline); margin: 8px 6px; }

.empty-state { text-align: center; padding: 60px 20px; color: var(--text-secondary); }
.empty-state .big { font-size: 2rem; margin-bottom: 8px; }
.empty-state p { margin: 0 0 16px; font-size: 0.9rem; }

/* ---------- Combobox (busca + criar) ---------- */
.combo { position: relative; }
.combo-lista {
  display: none;
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  max-height: 220px; overflow-y: auto; padding: 6px;
}
.combo-lista.show { display: block; }
.combo-item {
  padding: 9px 10px; border-radius: 8px; font-size: 0.88rem; cursor: pointer;
  color: var(--text-primary);
}
.combo-item:hover { background: var(--surface-2); }
.combo-item.combo-add { color: var(--link); font-weight: 600; }
.combo-vazio { padding: 9px 10px; font-size: 0.85rem; color: var(--text-muted); }

/* ---------- Popover de periodo customizado ---------- */
.popover-anchor { position: relative; display: inline-flex; }
.periodo-popover {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  white-space: nowrap;
}
.periodo-popover input[type="date"] {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-primary);
  border-radius: 8px; padding: 8px 10px; font-size: 0.85rem; font-family: inherit; cursor: pointer;
}
@media (max-width: 480px) {
  .periodo-popover { left: auto; right: 0; }
}

/* ---------- Dropzone (arrastar arquivo) ---------- */
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  text-align: center; border: 2px dashed var(--border); border-radius: 14px;
  padding: 22px 16px; cursor: pointer; color: var(--text-secondary); font-size: 0.85rem;
  transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
  margin-bottom: 16px;
}
.dropzone #dropzone-icone { font-size: 1.6rem; }
.dropzone:hover { border-color: var(--text-muted); }
.dropzone.dragover { border-color: var(--accent); background: var(--accent-bg); color: var(--text-primary); }
.dropzone.tem-arquivo { border-style: solid; border-color: var(--accent); color: var(--text-primary); }

/* ---------- Dashboard charts (relatorio) ---------- */
.chart-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 16px;
  margin-bottom: 24px;
}
#chart-tipo .rank-list { max-height: 320px; overflow-y: auto; padding-right: 4px; }
.chart-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
}
.chart-card h3 { margin: 0 0 4px; font-size: 0.95rem; }
.chart-card .chart-sub { margin: 0 0 18px; font-size: 0.78rem; color: var(--text-muted); }

.bar-chart { display: flex; align-items: flex-end; gap: 10px; height: 160px; border-bottom: 1px solid var(--gridline); }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.bar-col .bar-value { font-size: 0.7rem; color: var(--text-secondary); margin-bottom: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-col .bar { width: 100%; max-width: 24px; background: var(--accent); border-radius: 4px 4px 0 0; }
.bar-col .bar-label { font-size: 0.72rem; color: var(--text-muted); margin-top: 8px; }

.chart-legenda { display: flex; gap: 16px; margin-bottom: 14px; font-size: 0.78rem; color: var(--text-secondary); }
.chart-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legenda .ponto { width: 8px; height: 8px; border-radius: 50%; }
.chart-legenda .ponto.faturamento { background: var(--accent); }
.chart-legenda .ponto.custos { background: var(--warning); }

.bar-chart-dupla { display: flex; align-items: flex-end; gap: 10px; height: 180px; }
.bar-mes { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.bar-par { display: flex; align-items: flex-end; gap: 4px; justify-content: center; width: 100%; height: 100%; }
.bar-par .barra { width: 14px; border-radius: 4px 4px 2px 2px; min-height: 3px; }
.bar-par .barra.faturamento { background: var(--accent); }
.bar-par .barra.custos { background: var(--warning); }
.bar-mes .bar-label { font-size: 0.72rem; color: var(--text-muted); margin-top: 8px; }

/* ---------- KPI tiles (home) ---------- */
.kpi-tile {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow);
}
.kpi-tile .kpi-label { font-size: 0.78rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.kpi-tile .kpi-valor { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.kpi-tile .kpi-sub { font-size: 0.78rem; color: var(--text-secondary); margin-top: 6px; }
.kpi-tile .kpi-sub.up { color: var(--good); }
.kpi-tile .kpi-sub.down { color: var(--critical); }
.kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.kpi-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .kpi-grid, .kpi-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}

.rank-list { display: flex; flex-direction: column; gap: 10px; }
.rank-row { display: grid; grid-template-columns: 84px 1fr 84px; align-items: center; gap: 10px; font-size: 0.83rem; }
.rank-label { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-bar-track { background: var(--surface-2); border-radius: 5px; height: 10px; overflow: hidden; }
.rank-bar { height: 100%; background: var(--accent); border-radius: 5px; min-width: 3px; }
/* "Outros" e um resto agrupado, nao um tipo de verdade — cor neutra pra nao
   competir com os tipos individuais que sao o destaque da lista. */
.rank-bar-outros { background: var(--text-muted); }
.rank-value { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.rank-row-clicavel, .bar-col-clicavel { cursor: pointer; border-radius: 8px; transition: background-color 0.12s ease; }
.rank-row-clicavel:hover { background: var(--surface-2); }
.bar-col-clicavel:hover .bar { filter: brightness(1.15); }

/* Grafico "Por tipo de conta" (relatorio do portal): tipos sao texto livre
   do cliente (ex: "Escritorio de Contabilidade"), bem mais longo que os
   rotulos curtos usados em outros graficos com .rank-row — por isso essa
   coluna especifica ganha mais espaco e quebra linha em vez de cortar com "...". */
#chart-tipo .rank-row { grid-template-columns: 168px 1fr 84px; }
#chart-tipo .rank-label { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }

@media (max-width: 640px) {
  #chart-tipo .rank-row { grid-template-columns: 110px 1fr 74px; }
}

.chart-empty { color: var(--text-muted); font-size: 0.85rem; text-align: center; padding: 32px 0; }

@media (max-width: 720px) {
  .chart-grid { grid-template-columns: 1fr; }
}

/* ---------- Day list (agenda) ---------- */
.day-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.day-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  min-width: 118px;
  cursor: pointer;
  box-shadow: var(--shadow);
  text-align: left;
  font-family: inherit;
}
.day-card:hover { border-color: var(--text-muted); }
.day-card.selected { border-color: var(--accent); background: var(--surface-2); box-shadow: 0 0 0 1px var(--accent); }
.day-card .dia-semana { font-size: 0.7rem; text-transform: uppercase; color: var(--text-muted); font-weight: 600; letter-spacing: 0.03em; }
.day-card .dia-data { font-size: 1.05rem; font-weight: 700; margin: 2px 0 6px; }
.day-card.hoje .dia-data { color: var(--accent); }
.day-card.atrasado .dia-data { color: var(--critical); }
.day-card .dia-valor { font-size: 0.82rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.day-card .dia-count { font-size: 0.74rem; color: var(--text-secondary); }

/* ---------- Task list (lembretes) ---------- */
.task-list { display: flex; flex-direction: column; gap: 10px; }
.task-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: var(--shadow);
}
.task-card .tipo-tag {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  padding: 4px 8px; border-radius: 6px; flex-shrink: 0; white-space: nowrap;
}
.tipo-tag.antecipado { background: var(--trial); color: #fff; }
.tipo-tag.vencimento_dia { background: var(--warning); color: #1a1a19; }
.tipo-tag.atraso { background: var(--critical); color: #fff; }
.task-card .info { flex: 1; min-width: 0; }
.task-card .info .t1 { font-weight: 600; font-size: 0.9rem; }
.task-card .info .t2 { font-size: 0.8rem; color: var(--text-secondary); }
.task-card .valor { font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.task-card .acoes { flex-shrink: 0; display: flex; gap: 6px; }

/* ---------- Modal ---------- */
.overlay {
  position: fixed; inset: 0; background: rgba(8,8,7,0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center; padding: 20px; z-index: 50;
}
.overlay.show { display: flex; animation: overlayIn 0.15s ease-out; }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }

/* Indicador "ainda nao terminou": cobre a tela (acima dos popups) enquanto o
   sistema salva/consulta, pra ninguem achar que travou nem clicar 2 vezes. */
.overlay-carregando {
  position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center;
  background: rgba(10,29,61,0.30);
}
.overlay-carregando.show { display: flex; }
.carregando-caixa {
  display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 150px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 16px;
  padding: 22px 28px; box-shadow: var(--shadow); color: var(--text-secondary); font-size: 0.85rem; font-weight: 500;
}
.spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--gridline); border-top-color: var(--accent);
  animation: giroSpinner 0.8s linear infinite;
}
@keyframes giroSpinner { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal {
  position: relative;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 20px;
  width: 100%; max-width: 460px; padding: 26px; box-shadow: 0 24px 60px -20px rgba(0,0,0,0.35), 0 4px 16px rgba(0,0,0,0.08);
  max-height: 90vh; overflow-y: auto;
  animation: modalIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-fechar {
  position: absolute; top: 16px; right: 16px;
  width: 30px; height: 30px; border-radius: 50%;
  border: none; background: transparent; color: var(--text-muted);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.modal-fechar:hover { background: var(--surface-2); color: var(--text-primary); }
.modal h2 { margin: 0 0 4px; font-size: 1.15rem; letter-spacing: -0.01em; }
.modal .modal-sub { color: var(--text-secondary); font-size: 0.85rem; margin: 0 0 20px; }

/* Campo "Quantidade de parcelas": input compacto lado a lado com o botao
   de ajustar valor de cada parcela, na mesma linha. */
.campo-parcelas-linha { display: flex; align-items: center; gap: 8px; }
.campo-parcelas-linha input { flex: 1; min-width: 0; }
.icon-btn-sm {
  width: 38px; height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  font-size: 0.95rem;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.icon-btn-sm:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }

/* Popup "Valor de cada parcela" */
.modal-parcelas { max-width: 400px; }
.lista-parcelas { margin-top: 4px; }
.lista-parcelas-item { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.lista-parcelas-item:last-child { margin-bottom: 0; }
.lista-parcelas-badge {
  min-width: 40px; height: 34px; padding: 0 4px;
  border-radius: 999px; flex-shrink: 0;
  background: var(--surface-2); color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.lista-parcelas-item input {
  flex: 1; min-width: 0;
  height: 34px; padding: 0 12px;
  border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface-1); color: var(--text-primary);
  font-size: 0.88rem; font-variant-numeric: tabular-nums;
}
.lista-parcelas-item input:focus { outline: none; border-color: var(--accent); }
.soma-parcelas-box {
  display: flex; align-items: center; gap: 8px;
  margin: 16px 0 0; padding: 11px 14px;
  border-radius: 11px; background: var(--surface-2);
  font-size: 0.82rem; font-weight: 600; color: var(--text-secondary);
}
.soma-parcelas-box.ok { color: var(--good); }
.soma-parcelas-box.erro { color: var(--critical); }
.field { margin-bottom: 16px; }
.field.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Tipo (busca/criacao, precisa de mais espaco pro texto digitado) mais
   largo que a quantidade de parcelas, que e so um numero curto. */
.field.two-col.campo-tipo-parcelas { grid-template-columns: 1.6fr 1fr; }
.field label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 6px; color: var(--text-secondary); }
.field input, .field select, .field textarea {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-primary);
  border-radius: 9px; padding: 10px 12px; font-size: 0.9rem; font-family: inherit;
}
.field .hint { font-size: 0.76rem; color: var(--text-muted); margin-top: 5px; }

.input-com-botao { display: flex; }
.input-com-botao input {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-primary);
  border-radius: 9px 0 0 9px; border-right: none; padding: 8px 10px; font-size: 0.82rem; font-family: inherit;
  min-width: 0;
}
.input-com-botao .btn-copiar {
  flex-shrink: 0; border: 1px solid var(--good); border-radius: 0 9px 9px 0;
  background: var(--good); color: var(--good-ink); padding: 0 16px; font-size: 0.82rem; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.input-com-botao .btn-copiar:hover { filter: brightness(1.08); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }

/* ---------- Toasts ---------- */
#toasts { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 100; }
.toast {
  background: var(--surface-1); border: 1px solid var(--border); border-left: 3px solid var(--good);
  border-radius: 10px; padding: 12px 16px; font-size: 0.85rem; box-shadow: var(--shadow); max-width: 320px;
}
.toast.error { border-left-color: var(--critical); }

/* ---------- Login page ---------- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
}
.login-card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); width: 100%; max-width: 380px; padding: 32px;
}
.login-card .brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.5rem; margin-bottom: 4px; }
.login-card .brand .brand-logo { width: 30px; height: 30px; border-radius: 8px; }
.login-card .sub { color: var(--text-secondary); font-size: 0.88rem; margin: 0 0 24px; }
.login-card form { display: flex; flex-direction: column; gap: 14px; }
.login-card .error-msg { color: var(--critical); font-size: 0.82rem; min-height: 1.2em; }

@media (max-width: 720px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  /* O painel admin tem 8 links e nao cabe num telefone — some e vira
     scroll horizontal na tabela normalmente. Ja o portal do cliente
     (.nav-links-inicio) tem so 2 links e precisa continuar visivel,
     senao o cliente fica sem como trocar de tela no celular. */
  .nav-links:not(.nav-links-inicio) { display: none; }
}

/* ---------- Mobile (telas de celular) ---------- */
@media (max-width: 600px) {
  .wrap { padding: 14px 14px 60px; }

  .nav-inner { padding: 0 14px; gap: 10px; }
  .nav-brand { font-size: 0.85rem; }
  .nav-links-inicio { gap: 2px; }
  .nav-links-inicio a { padding: 7px 8px; font-size: 0.8rem; }
  .nav-user { gap: 6px; }
  .nav-user span { display: none; } /* nome do usuario admin some, so fica o essencial */

  header.top { flex-direction: column; align-items: stretch; gap: 10px; }
  header.top > div:last-child { display: flex; justify-content: flex-end; }
  .periodo-nav { flex-wrap: wrap; }
  .periodo-nav .icon-btn { width: 36px; height: 36px; }

  /* Botoes de filtro (Hoje, Amanha, Esta semana...) ficam lado a lado e
     quebram de linha, em vez de ocupar uma linha inteira cada — antes eram
     mais de 1000px de botoes empilhados antes do primeiro dado. Campos de
     texto/select e o botao principal continuam ocupando a largura toda. */
  .toolbar { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
  .toolbar .spacer { display: none; }
  .toolbar > select, .toolbar > input { flex: 1 1 100%; width: 100%; }
  .toolbar > button, .toolbar > a { flex: 1 1 auto; justify-content: center; }
  .toolbar > .btn-primary { flex: 1 1 100%; }
  .toolbar > label { flex: 1 1 100%; }
  .toolbar input[type="text"] { min-width: 0; }

  /* Quadros de resumo em 2 colunas e mais compactos (eram 1 por linha, ~190px
     de altura cada). Se sobrar um sozinho na ultima linha, ocupa a largura toda. */
  .stats, .stats.cols-3, .stats.cols-4 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stats > .stat-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stat-tile { padding: 12px 14px; }
  .stat-tile .n { font-size: 1.25rem; }
  .stat-tile .l { font-size: 0.76rem; }

  /* iPhone da zoom automatico em qualquer campo com fonte menor que 16px e
     nao volta sozinho — 16px evita o pulo de tela ao tocar num campo. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea {
    font-size: 16px !important;
  }
  /* Caixinhas de selecao maiores (alvo de toque). */
  .card-checkbox input[type="checkbox"] { width: 22px; height: 22px; }

  .field.two-col, .field.two-col.campo-tipo-parcelas { grid-template-columns: 1fr; }
  .modal { padding: 18px; border-radius: 16px; max-height: 85vh; }
  .overlay { padding: 12px; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions button { flex: 1; min-width: 120px; }

  #toasts { left: 12px; right: 12px; bottom: 12px; }
  .toast { max-width: none; }

  .table-scroll { -webkit-overflow-scrolling: touch; }
  table { font-size: 0.86rem; }
  .row-actions .menu-btn { width: 34px; height: 34px; }
  .icon-btn { width: 40px; height: 40px; }

  /* Tabelas marcadas como .table-cards-mobile viram uma lista de cartoes
     em vez de rolar pro lado — cada <td data-label="..."> mostra o
     rotulo antes do valor, exceto os marcados .card-titulo/.card-acoes. */
  .table-cards-mobile table, .table-cards-mobile thead, .table-cards-mobile tbody,
  .table-cards-mobile th, .table-cards-mobile td, .table-cards-mobile tr { display: block; }
  .table-cards-mobile thead { display: none; }
  .table-cards-mobile tbody tr { position: relative; padding: 4px 16px 10px 50px; border-bottom: 1px solid var(--gridline); }
  .table-cards-mobile tbody tr:last-child { border-bottom: none; }
  .table-cards-mobile tbody tr.linha-destaque-hoje { box-shadow: inset 3px 0 0 var(--warning); }
  .table-cards-mobile tbody tr.linha-destaque-hoje td:first-child { box-shadow: none; }
  .table-cards-mobile tbody td.card-checkbox {
    display: block; position: absolute; left: 16px; top: 14px; width: auto; padding: 0;
  }
  .table-cards-mobile tbody td.card-checkbox::before { content: none; }
  .table-cards-mobile tbody td {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 6px 0; border-bottom: none; white-space: normal; text-align: right;
  }
  .table-cards-mobile tbody td[data-label]::before {
    content: attr(data-label); flex-shrink: 0; text-align: left;
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-muted); font-weight: 600;
  }
  .table-cards-mobile tbody td.sem-valor { display: none; }
  .table-cards-mobile tbody td.card-titulo { display: block; text-align: left; padding: 12px 0 6px; }
  .table-cards-mobile tbody td.card-titulo::before { content: none; }
  .table-cards-mobile tbody td.card-acoes { justify-content: flex-end; padding: 10px 0 12px; }
  .table-cards-mobile tbody td.card-acoes::before { content: none; }
}


/* ---------- Escolha de plano / assinatura (portal) ---------- */
.planos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 12px; }
.plano-opcao {
  position: relative; display: flex; flex-direction: column; gap: 3px; cursor: pointer;
  border: 1.5px solid var(--border); border-radius: 14px; padding: 16px 14px 14px; background: var(--surface-1);
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.plano-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.plano-opcao:hover { border-color: var(--text-muted); }
.plano-opcao.selecionado { border-color: var(--accent); background: var(--accent-bg); }
.plano-opcao:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.plano-nome { font-weight: 600; font-size: 0.9rem; }
.plano-preco { font-size: 1.55rem; font-weight: 700; line-height: 1.15; }
.plano-preco small { font-size: 0.78rem; font-weight: 500; color: var(--text-secondary); }
.plano-sub { font-size: 0.78rem; color: var(--text-secondary); }
.plano-selo {
  position: absolute; top: -10px; right: 12px; background: var(--good); color: var(--good-ink);
  font-size: 0.68rem; font-weight: 700; padding: 2px 9px; border-radius: 999px;
}
.assinatura-box { padding: 14px; border-radius: 12px; background: var(--surface-2); font-size: 0.86rem; }
.assinatura-box .acoes { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 600px) { .planos-grid { grid-template-columns: 1fr; } }
.fiscal-box { margin: 18px 0 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.fiscal-box h3 { margin: 0 0 4px; font-size: 0.95rem; }
.fiscal-box .hint { font-size: 0.76rem; color: var(--text-muted); margin: 0 0 12px; line-height: 1.45; }
.fiscal-box .field { margin-bottom: 12px; }
.fiscal-linha { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.fiscal-linha-rua { grid-template-columns: 2.2fr 1fr; }

/* ---------- Avisos de fim de teste / carencia (portal) ---------- */
.faixa-teste {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 14px; font-size: 0.82rem; font-weight: 500;
  background: var(--accent-bg); color: var(--text-primary); border-bottom: 1px solid var(--border);
}
.faixa-teste a { color: var(--link); font-weight: 600; cursor: pointer; text-decoration: underline; }
.faixa-teste button { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; padding: 0 4px; }
.aviso-assinatura .chip-prazo {
  display: inline-block; margin: 2px 0 12px; padding: 5px 12px; border-radius: 999px;
  font-size: 0.8rem; font-weight: 600; background: var(--warning-bg); color: var(--warning);
}
.aviso-assinatura.urgente .chip-prazo { background: var(--critical-bg); color: var(--critical); }
.aviso-assinatura ul { list-style: none; margin: 4px 0 14px; padding: 0; font-size: 0.86rem; }
.aviso-assinatura li { padding: 3px 0; }
.aviso-assinatura .preco { font-size: 0.84rem; color: var(--text-secondary); margin: 0 0 4px; }

.modal .error-msg { color: var(--critical); font-size: 0.82rem; min-height: 1.2em; margin: 4px 0 8px; }
.modal .success-msg { color: var(--good); font-size: 0.82rem; font-weight: 600; margin: 4px 0 8px; }

/* Popup de incluir/editar conta (portal): mais compacto, pra caber sem rolagem em telas comuns */
#modal-conta { padding: 22px 24px; max-height: 94vh; }
#modal-conta .field { margin-bottom: 12px; }
#modal-conta h2 { margin-bottom: 12px; }
#modal-conta .modal-actions { margin-top: 14px; }
.field.linha-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .field.linha-2 { grid-template-columns: 1fr; } }

/* campos e botoes usam a mesma fonte do resto (alguns nasciam com a fonte padrao do navegador) */
input, select, textarea, button { font-family: inherit; }
.soma-parcelas-box { font-family: inherit; }

/* ---------- Nome "Etheus" (wordmark) — troca de versao conforme o tema ---------- */
.wordmark {
  display: inline-block; flex-shrink: 0; height: 22px; aspect-ratio: 4.6237 / 1; vertical-align: middle;
  background: url("/static/img/nome.svg") no-repeat left center / contain;
}
.wordmark.pequena { height: 20px; }
.wordmark.grande { height: 34px; }
:root[data-theme="dark"] .wordmark { background-image: url("/static/img/nome-branco.svg"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wordmark { background-image: url("/static/img/nome-branco.svg"); }
}
.login-card .brand .wordmark { height: 36px; }

.login-card .brand { margin-bottom: 12px; }

.nav-brand .wordmark { height: 27px; }
@media (max-width: 600px) { .nav-brand .wordmark { height: 23px; } }