/* =============================================================================
   Protótipo v1 — Seu Financeiro
   Design system: "Shared Operate Desk" (DESIGN.md)
   -----------------------------------------------------------------------------
   Tokens copiados de src/static/assets/css/theme-cliente.css e
   theme-operador.css. Os dois arquivos são idênticos exceto --primary:
       cliente  = #2563eb (azul)
       operador = #14b8a6 (teal)
   DESIGN.md só documenta o lado operador. Aqui os dois são tratados como
   dois sabores do MESMO sistema — ver prototipo/DECISOES-DESIGN.md.

   ONDE QUEBRAMOS O SISTEMA — tudo registrado em DECISOES-DESIGN.md:
     1. "Confidence meter" — componente novo, não existe no theme.
     2. "Answer card" — cartão de pergunta com ação inline. Novo.
     3. Faixa de estado "Primeira vez" — cor purple usada como estado
        estrutural, o que DESIGN.md reserva para status pontual.
     4. Vista "Uma leitura" do relatório semanal — tipografia display em
        prosa, o que o sistema reserva para números de KPI.
     5. Cabeçalho de identidade no menu do usuário — o dropdown real abre
        direto nos links, sem dizer quem está logado.
     6. O blur da topbar desliga enquanto há dropdown aberto — senão os
        dropdowns são pintados atrás do conteúdo.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* O design é light único — sem isto o dark mode do sistema operacional
     pinta inputs, selects e barras de rolagem de preto, e os campos ficam
     ilegíveis mesmo com o resto da página clara. */
  color-scheme: light;

  --bg-body: #f0f4f8;
  --bg-card: #fff;
  --bg-sidebar: #fff;
  --bg-hover: #f8fafc;
  --bg-muted: #f1f5f9;
  --t-base: #1e293b;
  --t-muted: #64748b;
  --t-light: #94a3b8;
  --t-inverse: #fff;
  --border: #e4e8ef;
  --border-soft: #eef1f5;

  --primary: #2563eb;
  --primary-light: #3b82f6;
  --primary-dark: #1d4ed8;
  --primary-soft: #eff6ff;
  --primary-ring: rgba(37, 99, 235, .18);

  --success: #10b981;  --success-soft: #ecfdf5;
  --warning: #f59e0b;  --warning-soft: #fffbeb;
  --danger:  #ef4444;  --danger-soft:  #fef2f2;
  --info:    #0ea5e9;  --info-soft:    #f0f9ff;
  --purple:  #8b5cf6;  --purple-soft:  #f5f3ff;
  --teal:    #14b8a6;  --teal-soft:    #f0fdfa;
  --orange:  #f97316;  --orange-soft:  #fff7ed;

  --shadow-sm: 0 1px 2px 0 rgba(15,23,42,.04);
  --shadow-card: 0 1px 3px 0 rgba(15,23,42,.06), 0 1px 2px -1px rgba(15,23,42,.04);
  --shadow-lg: 0 10px 15px -3px rgba(15,23,42,.08), 0 4px 6px -4px rgba(15,23,42,.05);
  --overlay: rgba(240,244,248,.72);

  --sidebar-width: 248px;
  --ff-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-tight: 'Inter Tight', 'Inter', sans-serif;
  --ff-mono: 'JetBrains Mono', ui-monospace, monospace;
  --transition: all .18s ease;

  --r-control: 8px; --r-icon: 9px; --r-menu: 10px;
  --r-modal: 12px;  --r-card: 14px; --r-pill: 999px;
}

/* operador e admin herdam o accent teal */
body[data-painel="operador"], body[data-painel="admin"] {
  --primary: #14b8a6;
  --primary-light: #2dd4bf;
  --primary-dark: #0d9488;
  --primary-soft: #f0fdfa;
  --primary-ring: rgba(20,184,166,.18);
}

* { box-sizing: border-box; }
input, select, textarea, button { color-scheme: light; }
body {
  margin: 0; font-family: var(--ff-base); font-size: 14px; line-height: 1.5;
  color: var(--t-base); background: var(--bg-body);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ============================================================ FAIXA PROTÓTIPO */
.proto-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 90; height: 30px;
  display: flex; align-items: center; gap: 14px; padding: 0 16px;
  background: #1e293b; color: #cbd5e1;
  font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase;
}
.proto-bar strong { color: #fff; letter-spacing: .12em; }
.proto-bar .pb-sep { color: #475569; }
.proto-switch { margin-left: auto; display: flex; gap: 4px; }
.proto-switch button {
  background: transparent; border: 1px solid #334155; color: #94a3b8;
  border-radius: var(--r-pill); padding: 2px 10px;
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; transition: var(--transition);
}
.proto-switch button:hover { color: #fff; border-color: #64748b; }
.proto-switch button[aria-current="true"] { background: #fff; color: #0f172a; border-color: #fff; }

/* ==================================================================== SHELL */
.shell { display: flex; min-height: 100vh; padding-top: 30px; }

.sidebar {
  position: fixed; top: 30px; bottom: 0; left: 0; width: var(--sidebar-width);
  background: var(--bg-sidebar); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow-y: auto; z-index: 40;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 18px 16px 14px; }
.brand-tile {
  width: 34px; height: 34px; border-radius: var(--r-control); flex: none;
  background: var(--primary); color: #fff;
  display: grid; place-items: center;
  font-family: var(--ff-tight); font-weight: 700; font-size: 15px;
}
.brand-name { font-family: var(--ff-tight); font-weight: 700; font-size: 15.5px; letter-spacing: -.02em; }
.brand-tag {
  font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--t-light); margin-top: 1px;
}
.nav { padding: 4px 10px 20px; }
.nav-section-title {
  font-family: var(--ff-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--t-light);
  padding: 16px 12px 7px;
}
.nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--r-control);
  font-size: 13px; color: var(--t-muted); transition: var(--transition);
  position: relative;
}
.nav-link:hover { background: var(--bg-hover); color: var(--t-base); }
.nav-link[aria-current="page"] {
  background: var(--primary-soft); color: var(--primary); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--primary);
}
.nav-link .ico { width: 16px; flex: none; opacity: .85; }
.nav-badge {
  margin-left: auto; background: var(--danger); color: #fff;
  font-family: var(--ff-mono); font-size: 10px; font-weight: 500;
  padding: 1px 6px; border-radius: var(--r-pill);
}
.nav-link[aria-current="page"] .nav-badge { background: var(--danger); }

.main { flex: 1; margin-left: var(--sidebar-width); min-width: 0; }

.topbar {
  position: sticky; top: 30px; z-index: 30; height: 60px;
  display: flex; align-items: center; gap: 16px; padding: 0 32px;
  background: var(--overlay); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.crumbs { font-size: 13px; color: var(--t-muted); }
.crumbs b { color: var(--t-base); font-weight: 600; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 32px; height: 32px; border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff; display: grid; place-items: center;
  font-size: 12px; font-weight: 600;
}
.empresa-pick {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--r-control);
  background: var(--bg-card); font-size: 13px; font-weight: 500;
}
.empresa-pick .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
/* modo api: nome real da empresa pode ser longo — corta sem empurrar a topbar */
.empresa-pick--real { min-width: 0; }
.empresa-pick--real .nome { max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.content { padding: 32px 32px 56px; display: flex; flex-direction: column; gap: 20px; }

/* =================================================================== HEADINGS */
.page-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.page-head h1 {
  margin: 0; font-family: var(--ff-tight); font-size: 1.5rem; font-weight: 700;
  letter-spacing: -.03em; line-height: 1.2;
}
.page-head .sub { margin: 5px 0 0; font-size: 14px; color: var(--t-muted); max-width: 68ch; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* =================================================================== BUTTONS */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: var(--r-control);
  font-size: 13px; font-weight: 600; transition: var(--transition);
  border: 1px solid var(--border); background: var(--bg-card); color: var(--t-base);
}
.btn:hover { background: var(--bg-hover); }
.btn--primary {
  background: var(--primary); border-color: var(--primary); color: #fff;
  box-shadow: 0 1px 2px var(--primary-ring);
}
.btn--primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn--danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn--danger:hover { background: #dc2626; }
.btn--sm { padding: 6px 10px; font-size: 12px; }
.btn--link { border-color: transparent; background: transparent; color: var(--primary); padding: 6px 8px; }
.btn--link:hover { background: var(--primary-soft); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ===================================================================== CARDS */
.card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 22px;
}
.card--flush { padding: 0; overflow: hidden; }
.card-head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--border-soft);
}
.card--flush .card-head { padding: 18px 22px 14px; margin-bottom: 0; }
.card-title { font-family: var(--ff-tight); font-size: 16px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.card-head .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.card-note { font-size: 13px; color: var(--t-muted); margin: 0; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--shadow-card);
  padding: 18px 20px; transition: var(--transition);
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.kpi-ico {
  width: 32px; height: 32px; border-radius: var(--r-icon);
  display: grid; place-items: center; font-size: 15px; margin-bottom: 12px;
}
.kpi-label {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--t-light);
}
.kpi-value {
  font-family: var(--ff-tight); font-weight: 700; letter-spacing: -.035em;
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.05; margin-top: 5px;
}
.kpi-foot { font-size: 12px; color: var(--t-muted); margin-top: 6px; }

/* ===================================================================== PILLS */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.pill--success { background: var(--success-soft); color: #047857; }
.pill--warning { background: var(--warning-soft); color: #b45309; }
.pill--danger  { background: var(--danger-soft);  color: #b91c1c; }
.pill--info    { background: var(--info-soft);    color: #0369a1; }
.pill--purple  { background: var(--purple-soft);  color: #6d28d9; }
.pill--teal    { background: var(--teal-soft);    color: #0f766e; }
.pill--orange  { background: var(--orange-soft);  color: #c2410c; }
.pill--muted   { background: var(--bg-muted);     color: var(--t-muted); }
.pill--primary { background: var(--primary-soft); color: var(--primary-dark); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill--mono { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .06em; }

/* ==================================================================== TABLES */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th {
  text-align: left; font-family: var(--ff-base); font-size: 11px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--t-muted);
  padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.tbl tbody tr:hover { background: var(--bg-hover); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.num { font-family: var(--ff-mono); font-size: 13px; text-align: right; white-space: nowrap; }
.neg { color: var(--danger); }
.pos { color: #047857; }
.mono { font-family: var(--ff-mono); font-size: 12px; }
.muted { color: var(--t-muted); }
.light { color: var(--t-light); }
.tiny { font-size: 12px; }
.strong { font-weight: 600; }

/* ========================================================= CONFIDENCE METER
   COMPONENTE NOVO — não existe no theme. Ver DECISOES-DESIGN.md #1. */
.conf { display: flex; align-items: center; gap: 9px; }
.conf-bar {
  position: relative; width: 92px; height: 6px; border-radius: var(--r-pill);
  background: var(--bg-muted); overflow: hidden; flex: none;
}
.conf-fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--r-pill); }
.conf-bar::after {           /* a linha dos 80% — o limiar que decide */
  content: ''; position: absolute; top: -3px; bottom: -3px; left: 80%;
  width: 1.5px; background: var(--t-base); opacity: .45;
}
.conf-val { font-family: var(--ff-mono); font-size: 12px; font-weight: 500; }
.conf--auto  .conf-fill { background: var(--success); }
.conf--auto  .conf-val  { color: #047857; }
.conf--ask   .conf-fill { background: var(--warning); }
.conf--ask   .conf-val  { color: #b45309; }
.conf--low   .conf-fill { background: var(--danger); }
.conf--low   .conf-val  { color: #b91c1c; }
.conf-why { font-size: 12px; color: var(--t-muted); }

/* ============================================================== ANSWER CARD
   COMPONENTE NOVO — a pergunta com a resposta inline.
   Ver DECISOES-DESIGN.md #2. */
.qcard {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--shadow-card);
  overflow: hidden; border-left: 3px solid var(--warning);
}
.qcard--primeira { border-left-color: var(--purple); }
.qcard--urgente  { border-left-color: var(--danger); }
.qcard--transfer { border-left-color: var(--info); }
.qcard--aberto   { border-left-color: var(--t-light); border-left-style: dashed; }

.qcard-top {
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
  padding: 16px 20px 12px;
}
.qcard-kind {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--t-light);
}
.qcard-q {
  font-family: var(--ff-tight); font-size: 16px; font-weight: 700;
  letter-spacing: -.02em; margin: 3px 0 0;
}
.qcard-val {
  margin-left: auto; text-align: right; font-family: var(--ff-tight);
  font-weight: 700; font-size: 20px; letter-spacing: -.03em;
}
.qcard-val small { display: block; font-family: var(--ff-mono); font-size: 11px; font-weight: 400; color: var(--t-muted); letter-spacing: 0; }

.qcard-body { padding: 0 20px 14px; display: flex; flex-direction: column; gap: 12px; }

.raw {
  font-family: var(--ff-mono); font-size: 11.5px; line-height: 1.55;
  background: var(--bg-muted); border: 1px solid var(--border-soft);
  border-radius: var(--r-control); padding: 9px 11px;
  color: #475569; word-break: break-all;
}
.raw-label {
  font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--t-light); margin-bottom: 5px;
}

.why {
  display: flex; gap: 10px; font-size: 13px; line-height: 1.55;
  background: var(--primary-soft); border-radius: var(--r-control);
  padding: 11px 13px; color: #1e3a8a;
}
body[data-painel="operador"] .why, body[data-painel="admin"] .why { color: #115e59; }
.why .why-ico { flex: none; opacity: .7; }
.why b { font-weight: 600; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 18px; }
.fact-k {
  font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--t-light);
}
.fact-v { font-size: 13.5px; font-weight: 500; margin-top: 2px; }
.fact-v.empty {
  color: var(--danger); font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.fact-v.empty::before {
  content: ''; width: 44px; height: 1.5px; background: var(--danger); opacity: .5;
}

/* comparação do valor — CNPJ bate, valor diverge */
.cmp { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center;
  background: var(--warning-soft); border-radius: var(--r-control); padding: 12px 14px; }
.cmp-side { text-align: center; }
.cmp-side .k { font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: #b45309; }
.cmp-side .v { font-family: var(--ff-tight); font-size: 19px; font-weight: 700; letter-spacing: -.03em; color: #92400e; margin-top: 2px; }
.cmp-mid { font-family: var(--ff-mono); font-size: 12px; font-weight: 500; color: #b45309; text-align: center; }

.qcard-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 13px 20px; background: var(--bg-muted); border-top: 1px solid var(--border-soft);
}
.qcard-foot .spacer { margin-left: auto; }
.qcard-foot .hint { font-size: 12px; color: var(--t-muted); }

/* escolha de categoria inline */
.picker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.picker select {
  height: 36px; min-width: 230px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--r-control);
  background: var(--bg-card); font: inherit; font-size: 13px; color: var(--t-base);
}
.picker select:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.picker select.empty { border-color: var(--danger); background: var(--danger-soft); }
.picker-note { font-size: 12px; color: var(--t-muted); }

/* ======================================================== LINHA DE MOVIMENTO */
.mov-desc { font-weight: 500; }
.mov-raw {
  font-family: var(--ff-mono); font-size: 11px; color: var(--t-light);
  margin-top: 3px; max-width: 46ch; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; display: block;
}
.row--auto td { background: #fbfefc; }
.row--ask { box-shadow: inset 3px 0 0 var(--warning); }
.row--ask.row--primeira { box-shadow: inset 3px 0 0 var(--purple); }
.tbl tbody tr.row--ask:hover { background: var(--warning-soft); }

/* ===================================================================== TABS */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.tab {
  border: 0; background: transparent; padding: 10px 13px 11px;
  font-size: 13px; font-weight: 500; color: var(--t-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 7px; transition: var(--transition);
}
.tab:hover { color: var(--t-base); }
.tab[aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.tab .n {
  font-family: var(--ff-mono); font-size: 10.5px; background: var(--bg-muted);
  color: var(--t-muted); padding: 1px 6px; border-radius: var(--r-pill);
}
.tab[aria-selected="true"] .n { background: var(--primary-soft); color: var(--primary); }
.tab[data-fora="1"] { opacity: .45; }

/* ================================================================== BANNERS */
.banner {
  display: flex; gap: 13px; align-items: flex-start;
  border-radius: var(--r-card); padding: 15px 18px; font-size: 13.5px; line-height: 1.55;
  border: 1px solid transparent;
}
.banner .b-ico { flex: none; font-size: 16px; line-height: 1.3; }
.banner b { display: block; font-weight: 600; margin-bottom: 2px; }
.banner .b-act { margin-left: auto; flex: none; }
.banner--danger  { background: var(--danger-soft);  border-color: #fecaca; color: #991b1b; }
.banner--warning { background: var(--warning-soft); border-color: #fde68a; color: #92400e; }
.banner--info    { background: var(--info-soft);    border-color: #bae6fd; color: #075985; }
.banner--purple  { background: var(--purple-soft);  border-color: #ddd6fe; color: #5b21b6; }
.banner--muted   { background: var(--bg-muted);     border-color: var(--border); color: var(--t-muted); }

/* ================================================================== EMPTY */
.empty-state { text-align: center; padding: 56px 24px; }
.empty-ico {
  width: 52px; height: 52px; margin: 0 auto 18px; border-radius: var(--r-card);
  background: var(--bg-muted); display: grid; place-items: center; font-size: 22px;
}
.empty-state h2 { font-family: var(--ff-tight); font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 7px; }
.empty-state p { max-width: 52ch; margin: 0 auto 20px; color: var(--t-muted); font-size: 14px; line-height: 1.6; }
.checklist { max-width: 460px; margin: 0 auto; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.check-item {
  display: flex; align-items: center; gap: 11px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--r-control); background: var(--bg-card);
  font-size: 13.5px;
}
.check-item .cbox {
  width: 19px; height: 19px; border-radius: 5px; flex: none;
  border: 1.5px solid var(--border); display: grid; place-items: center;
  font-size: 11px; color: #fff;
}
.check-item.done .cbox { background: var(--success); border-color: var(--success); }
.check-item.done { color: var(--t-muted); }
.check-item .cta { margin-left: auto; }

/* ============================================== RECORRÊNCIA vs PARCELAMENTO
   Têm de PARECER diferentes. Ver DECISOES-DESIGN.md #5. */
.rec { display: inline-flex; align-items: center; gap: 7px; }
.rec-glyph { font-family: var(--ff-mono); font-size: 11px; letter-spacing: .04em; }
.rec--fixo .rec-glyph { color: var(--teal); }
.rec--parcelado .rec-glyph { color: var(--orange); }
.rec-txt { font-size: 12px; color: var(--t-muted); }

.rec-panel { border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.rec-panel-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid var(--border-soft);
}
.rec-panel--fixo .rec-panel-head { background: var(--teal-soft); }
.rec-panel--parcelado .rec-panel-head { background: var(--orange-soft); }
.rec-panel-head h3 { font-family: var(--ff-tight); font-size: 15px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.rec-panel-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }

/* trilho visual: fixo = infinito; parcelado = tem fim */
.rail { display: flex; align-items: center; gap: 3px; padding: 4px 0; overflow: hidden; }
.rail i {
  width: 9px; height: 9px; border-radius: 2px; flex: none; display: block;
  background: var(--border);
}
.rail i.on { background: var(--teal); }
.rail--parcelado i.on { background: var(--orange); }
.rail i.pago { background: #94a3b8; }
.rail .inf { font-family: var(--ff-mono); font-size: 15px; color: var(--teal); margin-left: 5px; }
.rail .stop { font-family: var(--ff-mono); font-size: 11px; color: var(--orange); margin-left: 7px; letter-spacing: .1em; }

/* =========================================================== WHATSAPP MOCK */
.phone {
  width: 340px; flex: none; background: #0b141a; border-radius: 26px;
  padding: 10px; box-shadow: var(--shadow-lg); border: 1px solid #1f2c34;
}
.phone-screen { background: #0b141a; border-radius: 18px; overflow: hidden; }
.phone-bar {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: #1f2c34; color: #e9edef;
}
.phone-av { width: 30px; height: 30px; border-radius: 50%; background: #2563eb; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: #fff; }
.phone-who { font-size: 13.5px; font-weight: 600; }
.phone-sub { font-size: 11px; color: #8696a0; }
.phone-msgs { padding: 14px 10px 18px; display: flex; flex-direction: column; gap: 8px; min-height: 200px; }
.bubble {
  align-self: flex-start; max-width: 88%;
  background: #202c33; color: #e9edef; border-radius: 8px 8px 8px 2px;
  padding: 9px 11px 7px; font-size: 13px; line-height: 1.55;
}
.bubble .t { display: block; text-align: right; font-size: 10px; color: #8696a0; margin-top: 4px; }
.bubble strong { color: #fff; }
.bubble--me { align-self: flex-end; background: #005c4b; border-radius: 8px 8px 2px 8px; }

/* ========================================================= UMA LEITURA (card) */
.leitura {
  font-family: var(--ff-tight); font-size: clamp(17px, 1.9vw, 21px);
  font-weight: 500; line-height: 1.48; letter-spacing: -.02em; color: var(--t-base);
}
.leitura b { font-weight: 700; }
.leitura .hot { color: var(--danger); }

.flow4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.flow4 > div { padding: 16px 18px; border-right: 1px solid var(--border-soft); }
.flow4 > div:last-child { border-right: 0; background: var(--primary-soft); }
.flow4 .k { font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--t-light); }
.flow4 .v { font-family: var(--ff-tight); font-weight: 700; font-size: 22px; letter-spacing: -.035em; margin-top: 4px; }
.flow4 .op { font-family: var(--ff-mono); font-size: 11px; color: var(--t-light); }

/* ========================================================= RELATÓRIO MENSAL */
.doc { max-width: 880px; }
.doc-head { border-bottom: 2px solid var(--t-base); padding-bottom: 18px; margin-bottom: 24px; }
.doc-kicker { font-family: var(--ff-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--t-muted); }
.doc-head h1 { font-family: var(--ff-tight); font-size: clamp(26px, 3.4vw, 36px); font-weight: 700; letter-spacing: -.035em; margin: 7px 0 5px; line-height: 1.05; }
.doc-meta { font-size: 13px; color: var(--t-muted); }
.doc h2 {
  font-family: var(--ff-tight); font-size: 17px; font-weight: 700; letter-spacing: -.02em;
  margin: 32px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.doc p { font-size: 14.5px; line-height: 1.68; margin: 0 0 14px; }
.lede { font-size: 16px; line-height: 1.62; color: var(--t-base); }

.crit { border-left: 3px solid var(--border); padding: 2px 0 2px 16px; margin-bottom: 20px; }
.crit--alta { border-left-color: var(--danger); }
.crit--media { border-left-color: var(--warning); }
.crit-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.crit h3 { font-family: var(--ff-tight); font-size: 15px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.crit-num { font-family: var(--ff-tight); font-weight: 700; font-size: 17px; letter-spacing: -.03em; margin-left: auto; }
.crit--alta .crit-num { color: var(--danger); }
.crit--media .crit-num { color: #b45309; }
.crit p { font-size: 14px; margin: 6px 0 0; color: #475569; }

.reco { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border-soft); }
.reco:last-child { border-bottom: 0; }
.reco-n {
  width: 26px; height: 26px; flex: none; border-radius: var(--r-pill);
  background: var(--primary); color: #fff; display: grid; place-items: center;
  font-family: var(--ff-mono); font-size: 11px; font-weight: 500;
}
.reco h3 { font-family: var(--ff-tight); font-size: 15px; font-weight: 700; letter-spacing: -.02em; margin: 2px 0 5px; }
.reco p { font-size: 13.5px; margin: 0 0 8px; color: #475569; }
.reco-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; }

.dre-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dre-tbl td { padding: 8px 10px; border-bottom: 1px solid var(--border-soft); }
.dre-tbl td:last-child { text-align: right; font-family: var(--ff-mono); font-size: 13px; white-space: nowrap; }
.dre-tbl tr.n1 td:first-child { padding-left: 28px; color: var(--t-muted); font-size: 13px; }
.dre-tbl tr.destaque td { font-weight: 700; background: var(--bg-muted); }
.dre-tbl tr.final td { border-top: 2px solid var(--t-base); border-bottom: 0; font-size: 15px; }
.dre-tbl tr.alerta td:last-child { color: var(--danger); font-weight: 600; }

/* ==================================================================== DRAWER */
.scrim { position: fixed; inset: 0; background: rgba(30,41,59,.35); z-index: 70; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 100%);
  background: var(--bg-card); z-index: 71; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; animation: slidein .22s ease;
}
@keyframes slidein { from { transform: translateX(18px); opacity: .6; } to { transform: none; opacity: 1; } }
.drawer-head {
  display: flex; align-items: flex-start; gap: 12px; padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
}
.drawer-head h2 { font-family: var(--ff-tight); font-size: 17px; font-weight: 700; letter-spacing: -.025em; margin: 0; }
.drawer-head .x { margin-left: auto; border: 0; background: transparent; color: var(--t-muted); font-size: 20px; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.drawer-head .x:hover { background: var(--bg-muted); color: var(--t-base); }
.drawer-body { padding: 20px 24px 32px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; }
.drawer-sec-title {
  font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--t-light); margin-bottom: 8px;
}

/* ================================================================== HELPERS */
.row { display: flex; gap: 16px; flex-wrap: wrap; }
.row > * { min-width: 0; }
.col { display: flex; flex-direction: column; gap: 16px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.between { display: flex; align-items: center; gap: 12px; }
.between .spacer { margin-left: auto; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.nowrap { white-space: nowrap; }

/* ================================================================ RESPONSIVO */
@media (max-width: 1200px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .grid3 { grid-template-columns: 1fr 1fr; }
  .flow4 { grid-template-columns: 1fr 1fr; }
  .flow4 > div:nth-child(2) { border-right: 0; }
}
@media (max-width: 1024px) {
  .sidebar { transform: translateX(-100%); }
  .main { margin-left: 0; }
  .sidebar.open { transform: none; }
}
@media (max-width: 768px) {
  .content { padding: 20px 16px 48px; }
  .topbar { padding: 0 16px; }
  .kpi-grid, .grid2, .grid3 { grid-template-columns: 1fr; }
  .flow4 { grid-template-columns: 1fr; }
  .flow4 > div { border-right: 0; border-bottom: 1px solid var(--border-soft); }
  .cmp { grid-template-columns: 1fr; }
  .phone { width: 100%; max-width: 340px; }
}

/* =============================================================================
   TOPBAR — busca, notificações e menu do usuário
   -----------------------------------------------------------------------------
   Espelha a topbar real (templates/frontend/cliente/partials/topbar_cliente.html):
   busca · sino com badge · avatar com dropdown (Perfil/Configurações/Sair).
   O que é NOVO aqui, e está registrado em DECISOES-DESIGN.md #6: o cabeçalho
   de identidade dentro do menu do usuário. Hoje o dropdown real abre direto
   nos três links, sem dizer quem está logado nem em que empresa.
   ========================================================================== */

.topbar-search {
  position: relative; display: flex; align-items: center;
}
.topbar-search .ico {
  position: absolute; left: 12px; color: var(--t-light);
  font-size: 12px; pointer-events: none;
}
.topbar-search input {
  height: 36px; width: 220px; padding: 0 12px 0 32px;
  border: 1px solid var(--border); border-radius: var(--r-control);
  background: var(--bg-card); font: inherit; font-size: 13px; color: var(--t-base);
}
.topbar-search input::placeholder { color: var(--t-light); }
.topbar-search input:focus {
  outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring);
  width: 260px;
}

/* botão de ícone (sino) */
.icon-btn {
  position: relative; width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--r-control);
  background: var(--bg-card); color: var(--t-muted);
  font-size: 15px; transition: var(--transition);
}
.icon-btn:hover { background: var(--bg-hover); color: var(--t-base); }
.icon-btn[aria-expanded="true"] {
  border-color: var(--primary); color: var(--primary); background: var(--primary-soft);
}
.notif-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--danger); color: #fff; border: 2px solid var(--bg-body);
  border-radius: var(--r-pill);
  font-family: var(--ff-mono); font-size: 9.5px; font-weight: 500; line-height: 1;
}

/* ------------------------------------------------------------ dropdown base */
.dd { position: relative; }
.dd-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 260px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--r-menu);
  box-shadow: var(--shadow-lg); overflow: hidden;
  animation: ddin .14s ease;
}
@keyframes ddin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dd-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 14px; border: 0; background: transparent;
  font-size: 13px; color: var(--t-base); text-align: left;
  transition: var(--transition);
}
.dd-item:hover { background: var(--bg-hover); }
.dd-item .ico { width: 15px; flex: none; color: var(--t-muted); font-size: 13px; }
.dd-item:hover .ico { color: var(--t-base); }
.dd-item--danger { color: var(--danger); }
.dd-item--danger .ico, .dd-item--danger:hover .ico { color: var(--danger); }
.dd-item--danger:hover { background: var(--danger-soft); }
.dd-sep { height: 1px; background: var(--border-soft); margin: 4px 0; }

/* ------------------------------------------- cabeçalho de identidade (NOVO) */
.dd-ident {
  display: flex; gap: 12px; padding: 16px; background: var(--bg-muted);
  border-bottom: 1px solid var(--border-soft);
}
.dd-ident .av {
  width: 40px; height: 40px; flex: none; border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff; display: grid; place-items: center;
  font-family: var(--ff-tight); font-size: 14px; font-weight: 700;
}
.dd-ident .nome {
  font-family: var(--ff-tight); font-size: 14.5px; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.25;
}
.dd-ident .cargo { font-size: 12px; color: var(--t-muted); margin-top: 1px; }
.dd-ident .email {
  font-family: var(--ff-mono); font-size: 11px; color: var(--t-light);
  margin-top: 4px; word-break: break-all;
}
.dd-meta { padding: 12px 16px; display: flex; flex-direction: column; gap: 9px;
  border-bottom: 1px solid var(--border-soft); }
.dd-meta-row { display: flex; align-items: baseline; gap: 10px; font-size: 12px; }
.dd-meta-row .k {
  font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--t-light); flex: none; width: 84px;
}
.dd-meta-row .v { color: var(--t-base); font-weight: 500; }

/* --------------------------------------------------- dropdown notificações */
.dd-menu--notif { min-width: 360px; }
.notif-head {
  display: flex; align-items: center; gap: 10px; padding: 13px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.notif-head h4 {
  margin: 0; font-family: var(--ff-tight); font-size: 14px; font-weight: 700;
  letter-spacing: -.02em;
}
.notif-head .n {
  margin-left: auto; font-family: var(--ff-mono); font-size: 10.5px;
  color: var(--t-muted); background: var(--bg-muted);
  padding: 1px 7px; border-radius: var(--r-pill);
}
.notif-list { max-height: 340px; overflow-y: auto; }
.notif-item {
  display: flex; gap: 11px; padding: 12px 16px; width: 100%;
  border: 0; border-bottom: 1px solid var(--border-soft); background: transparent;
  text-align: left; transition: var(--transition);
}
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--bg-hover); }
.notif-item--lida { opacity: .55; }
.notif-dot {
  width: 7px; height: 7px; flex: none; border-radius: 50%; margin-top: 5px;
}
.notif-dot--urgente { background: var(--danger); }
.notif-dot--alta    { background: var(--warning); }
.notif-dot--media   { background: var(--info); }
.notif-dot--baixa   { background: var(--t-light); }
.notif-item .tit { font-size: 13px; font-weight: 600; line-height: 1.35; }
.notif-item .msg { font-size: 12px; color: var(--t-muted); line-height: 1.45; margin-top: 3px; }
.notif-item .quando {
  font-family: var(--ff-mono); font-size: 10px; color: var(--t-light);
  margin-top: 5px; display: flex; gap: 8px; align-items: center;
}
.notif-foot { padding: 10px 16px; background: var(--bg-muted); border-top: 1px solid var(--border-soft); }
.notif-foot a { font-size: 12.5px; font-weight: 600; color: var(--primary); }

@media (max-width: 900px) { .topbar-search { display: none; } }
@media (max-width: 768px) {
  .dd-menu, .dd-menu--notif { min-width: 0; width: calc(100vw - 32px); right: -8px; }
}

/* SVG inline alinha como bloco dentro dos containers de ícone */
.topbar-search .ico { display: flex; align-items: center; top: 50%; transform: translateY(-50%); }
.icon-btn svg { display: block; }
.dd-item .ico { display: inline-flex; align-items: center; justify-content: center; }

/* Os spans de identidade e de notificação são empilhados, não inline.
   (O markup usa <span> para poder viver dentro de <button>, onde <div> é
   inválido — daí precisarem de display:block explícito.) */
.dd-ident .nome, .dd-ident .cargo, .dd-ident .email { display: block; }
.dd-ident > span:last-child { min-width: 0; }
.dd-ident .email { word-break: break-word; }
.notif-item .tit, .notif-item .msg, .notif-item .quando { display: block; }
.notif-item > span:last-child { min-width: 0; }
.dd-meta-row .k { line-height: 1.35; }

/* O blur overlay da topbar (DESIGN.md) cria um contexto de composição que faz
   os dropdowns serem PINTADOS atrás do conteúdo, mesmo ganhando o hit-test.
   Desligamos o blur só enquanto há dropdown aberto — em repouso o efeito fica.
   Registrado em DECISOES-DESIGN.md #7. */
.topbar.topbar--dd { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg-body); }

/* =============================================================================
   AUTENTICAÇÃO — tela de login e fluxos de senha
   -----------------------------------------------------------------------------
   Vive FORA do shell: sem sidebar, sem topbar. É a única tela anterior ao
   papel — não se sabe ainda se quem entra é cliente, operador ou admin, por
   isso usa o accent azul do :root. Ver DECISOES-DESIGN.md #7.
   ========================================================================== */

.auth {
  flex: 1; width: 100%; min-width: 0;
  min-height: calc(100vh - 30px);
  display: grid; grid-template-columns: 1fr 1fr;
}

/* -------------------------------------------------- lado da marca (esquerda) */
.auth-brand {
  background: #1e293b; color: #e2e8f0;
  padding: 48px; display: flex; flex-direction: column; gap: 36px;
  position: relative; overflow: hidden;
}
.auth-brand::after {         /* halo discreto, sem gradiente de página */
  content: ''; position: absolute; width: 420px; height: 420px;
  right: -140px; bottom: -160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.22), transparent 68%);
  pointer-events: none;
}
.auth-brand .marca { display: flex; align-items: center; gap: 11px; }
.auth-brand .marca .tile {
  width: 36px; height: 36px; border-radius: var(--r-control); flex: none;
  background: var(--primary); color: #fff; display: grid; place-items: center;
  font-family: var(--ff-tight); font-weight: 700; font-size: 15px;
}
.auth-brand .marca .nome {
  font-family: var(--ff-tight); font-size: 16px; font-weight: 700;
  letter-spacing: -.02em; color: #fff;
}
.auth-brand .lede {
  font-family: var(--ff-tight); font-size: clamp(22px, 2.6vw, 31px);
  font-weight: 700; letter-spacing: -.035em; line-height: 1.18;
  color: #fff; margin: auto 0 0; max-width: 22ch;
}
.auth-brand .lede em { font-style: normal; color: var(--primary-light); }
.auth-brand .pontos { display: flex; flex-direction: column; gap: 13px; margin-bottom: auto; }
.auth-brand .ponto { display: flex; gap: 11px; font-size: 13.5px; line-height: 1.5; color: #94a3b8; }
.auth-brand .ponto b { color: #e2e8f0; font-weight: 600; }
.auth-brand .ponto .m {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: .1em;
  color: var(--primary-light); flex: none; padding-top: 3px;
}
.auth-brand .pe {
  font-size: 12px; color: #64748b; border-top: 1px solid #334155; padding-top: 18px;
}

/* ------------------------------------------------- lado do formulário (dir.) */
.auth-form-wrap {
  background: var(--bg-body); padding: 48px;
  display: flex; align-items: center; justify-content: center;
}
.auth-card { width: 100%; max-width: 392px; }
.auth-card > header { margin-bottom: 24px; }
.auth-card h1 {
  font-family: var(--ff-tight); font-size: 24px; font-weight: 700;
  letter-spacing: -.03em; line-height: 1.2; margin: 0;
}
.auth-card .sub { font-size: 13.5px; color: var(--t-muted); margin: 7px 0 0; line-height: 1.55; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 15px; }
.field > label {
  font-size: 12.5px; font-weight: 600; color: var(--t-base);
  display: flex; align-items: baseline; gap: 8px;
}
.field > label .opt { margin-left: auto; font-weight: 500; font-size: 12px; }
.field input {
  height: 42px; padding: 0 13px; width: 100%;
  border: 1px solid var(--border); border-radius: var(--r-control);
  background: var(--bg-card); font: inherit; font-size: 14px; color: var(--t-base);
  transition: var(--transition);
}
.field input::placeholder { color: var(--t-light); }
.field input:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.field--erro input { border-color: var(--danger); background: var(--danger-soft); }
.field--erro input:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.18); }
.field-erro {
  font-size: 12px; color: #b91c1c; font-weight: 500;
  display: flex; align-items: flex-start; gap: 5px;
}
.field-dica { font-size: 12px; color: var(--t-muted); }

/* senha com botão de revelar */
.field-senha { position: relative; }
.field-senha input { padding-right: 68px; }
.field-senha .revelar {
  position: absolute; right: 6px; top: 6px; height: 30px; padding: 0 9px;
  border: 0; border-radius: 6px; background: transparent;
  font-size: 11.5px; font-weight: 600; color: var(--t-muted);
}
.field-senha .revelar:hover { background: var(--bg-muted); color: var(--t-base); }

.auth-btn {
  width: 100%; height: 42px; margin-top: 4px;
  border: 1px solid var(--primary); border-radius: var(--r-control);
  background: var(--primary); color: #fff;
  font-size: 14px; font-weight: 600; transition: var(--transition);
  display: flex; align-items: center; justify-content: center; gap: 9px;
}
.auth-btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.auth-btn--ghost {
  background: var(--bg-card); border-color: var(--border); color: var(--t-base);
}
.auth-btn--ghost:hover { background: var(--bg-hover); }
.auth-btn[disabled] { opacity: .55; cursor: not-allowed; }
.auth-btn[aria-busy="true"] { opacity: .8; cursor: progress; }

.auth-sep {
  display: flex; align-items: center; gap: 12px; margin: 18px 0;
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--t-light);
}
.auth-sep::before, .auth-sep::after {
  content: ''; height: 1px; flex: 1; background: var(--border);
}
.auth-links {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px; font-size: 13px;
}
.auth-links a { color: var(--primary); font-weight: 600; }
.auth-links a:hover { text-decoration: underline; }
.auth-links .aj { color: var(--t-muted); }

/* alerta no topo do formulário */
.auth-alert {
  display: flex; gap: 11px; align-items: flex-start;
  border-radius: var(--r-control); padding: 12px 14px; margin-bottom: 18px;
  font-size: 13px; line-height: 1.5; border: 1px solid transparent;
}
.auth-alert .ai { flex: none; font-size: 14px; line-height: 1.35; }
.auth-alert b { display: block; font-weight: 600; margin-bottom: 2px; }
.auth-alert--danger  { background: var(--danger-soft);  border-color: #fecaca; color: #991b1b; }
.auth-alert--warning { background: var(--warning-soft); border-color: #fde68a; color: #92400e; }
.auth-alert--info    { background: var(--info-soft);    border-color: #bae6fd; color: #075985; }
.auth-alert--success { background: var(--success-soft); border-color: #a7f3d0; color: #065f46; }
.auth-alert--muted   { background: var(--bg-muted);     border-color: var(--border); color: var(--t-muted); }
.auth-alert a { color: inherit; text-decoration: underline; font-weight: 600; }

/* --------------------------------------------------------- código de 6 dígitos */
.otp { display: flex; gap: 8px; margin-bottom: 6px; }
.otp input {
  width: 100%; height: 52px; padding: 0; text-align: center;
  border: 1px solid var(--border); border-radius: var(--r-control);
  background: var(--bg-card);
  font-family: var(--ff-mono); font-size: 21px; font-weight: 500; color: var(--t-base);
}
.otp input:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.otp--erro input { border-color: var(--danger); background: var(--danger-soft); }
.otp-meta {
  display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
  font-size: 12px; color: var(--t-muted);
}
.otp-meta .rel { font-family: var(--ff-mono); margin-left: auto; }

/* ------------------------------------------------------- força da senha */
.forca { margin-top: 9px; }
.forca-barras { display: flex; gap: 4px; margin-bottom: 9px; }
.forca-barras i {
  height: 4px; flex: 1; border-radius: var(--r-pill); background: var(--border); display: block;
}
.forca-barras i.on1 { background: var(--danger); }
.forca-barras i.on2 { background: var(--orange); }
.forca-barras i.on3 { background: var(--warning); }
.forca-barras i.on4 { background: var(--success); }
.forca-label { font-size: 12px; font-weight: 600; margin-bottom: 9px; }
.regras { display: flex; flex-direction: column; gap: 6px; }
.regra { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--t-muted); }
.regra .mk {
  width: 15px; height: 15px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--border); display: grid; place-items: center;
  font-size: 9px; color: #fff;
}
.regra.ok { color: var(--t-base); }
.regra.ok .mk { background: var(--success); border-color: var(--success); }

/* ---------------------------------------- painel de estados (só protótipo) */
.estados-fab {
  position: fixed; bottom: 18px; right: 18px; z-index: 80;
  display: flex; align-items: center; gap: 8px; padding: 9px 14px;
  border: 0; border-radius: var(--r-pill); background: #1e293b; color: #fff;
  font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; box-shadow: var(--shadow-lg);
}
.estados-fab:hover { background: #0f172a; }
.estados-painel {
  position: fixed; top: 30px; right: 0; bottom: 0; width: 316px; z-index: 81;
  background: var(--bg-card); border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
  animation: slidein .2s ease;
}
.estados-painel header {
  padding: 16px 18px; border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; gap: 10px;
}
.estados-painel header h3 {
  margin: 0; font-family: var(--ff-tight); font-size: 15px; font-weight: 700; letter-spacing: -.02em;
}
.estados-painel header .x {
  margin-left: auto; border: 0; background: transparent; color: var(--t-muted);
  font-size: 18px; line-height: 1; padding: 0 4px; border-radius: 5px;
}
.estados-painel header .x:hover { background: var(--bg-muted); color: var(--t-base); }
.estados-lista { overflow-y: auto; padding: 6px 0 24px; }
.estados-grupo {
  font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--t-light); padding: 15px 18px 6px;
}
.estado-item {
  display: flex; align-items: flex-start; gap: 9px; width: 100%;
  padding: 8px 18px; border: 0; background: transparent; text-align: left;
  font-size: 12.5px; color: var(--t-base); line-height: 1.4;
}
.estado-item:hover { background: var(--bg-hover); }
.estado-item[aria-current="true"] {
  background: var(--primary-soft); color: var(--primary); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--primary);
}
.estado-item .tag {
  margin-left: auto; flex: none; font-family: var(--ff-mono); font-size: 9px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--t-light);
  border: 1px solid var(--border); border-radius: var(--r-pill); padding: 1px 5px;
}
.estado-item .tag--nao { color: #b91c1c; border-color: #fecaca; background: var(--danger-soft); }

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .auth-form-wrap { padding: 32px 20px; min-height: calc(100vh - 30px); }
}
@media (max-width: 768px) {
  .estados-painel { width: 100%; }
}

/* Com o painel de estados aberto, a tela abre espaço em vez de ficar coberta. */
.auth--com-painel { margin-right: 316px; }
@media (max-width: 768px) { .auth--com-painel { margin-right: 0; } }

/* =============================================================================
   VARIAÇÃO — Movimentos unificado (absorve a Central de Ações)
   -----------------------------------------------------------------------------
   Hipótese em teste: uma tela só, com a Conta de volta (coluna + filtro +
   saldo) e a fila de ações como um filtro, agrupada por decisão repetida.
   O card cai de ~12 blocos para 3 linhas; o resto vai para o modal.
   ========================================================================== */

/* --------------------------------------------------- seletor de conta + saldo */
.contas-fita {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px;
}
.conta-chip {
  flex: none; min-width: 168px; text-align: left;
  border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--bg-card); padding: 13px 15px; transition: var(--transition);
}
.conta-chip:hover { background: var(--bg-hover); }
.conta-chip[aria-current="true"] {
  border-color: var(--primary); background: var(--primary-soft);
  box-shadow: 0 0 0 1px var(--primary);
}
.conta-chip .cc-nome {
  font-size: 12px; font-weight: 600; color: var(--t-muted);
  display: flex; align-items: center; gap: 6px;
}
.conta-chip[aria-current="true"] .cc-nome { color: var(--primary-dark); }
.conta-chip .cc-saldo {
  font-family: var(--ff-tight); font-size: 19px; font-weight: 700;
  letter-spacing: -.03em; margin-top: 4px;
}
.conta-chip .cc-meta { font-size: 11px; color: var(--t-light); margin-top: 2px; }
.conta-chip--cartao { border-style: dashed; }

/* --------------------------------------------------------- barra de filtros */
.fila-barra {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.fila-barra .spacer { margin-left: auto; }
.chip-filtro {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--bg-card);
  font-size: 13px; font-weight: 500; color: var(--t-muted); transition: var(--transition);
}
.chip-filtro:hover { background: var(--bg-hover); color: var(--t-base); }
.chip-filtro[aria-current="true"] {
  background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600;
}
.chip-filtro .n {
  font-family: var(--ff-mono); font-size: 10.5px;
  background: var(--bg-muted); color: var(--t-muted); padding: 1px 6px; border-radius: var(--r-pill);
}
.chip-filtro[aria-current="true"] .n { background: rgba(255,255,255,.25); color: #fff; }

/* ===================================================== CARD ENXUTO (3 linhas)
   A regra: o card carrega o que basta para responder no caso fácil.
   Tudo o mais vive no modal. Nada se perde — muda de lugar. */
.pend {
  display: grid; grid-template-columns: auto 1fr auto; gap: 0 14px;
  align-items: start; padding: 13px 16px;
  border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--bg-card); transition: var(--transition);
  border-left-width: 3px;
}
.pend:hover { background: var(--bg-hover); }
.pend--grupo     { border-left-color: var(--info); }
.pend--primeira  { border-left-color: var(--purple); }
.pend--aberto    { border-left-color: var(--t-light); border-left-style: dashed; }
.pend--transfer  { border-left-color: var(--info); }
.pend--normal    { border-left-color: var(--warning); }

/* coluna 1 — o contador do grupo, ou o ponto de estado */
.pend-qtd {
  min-width: 38px; height: 38px; border-radius: var(--r-control);
  display: grid; place-items: center;
  font-family: var(--ff-tight); font-size: 16px; font-weight: 700;
  background: var(--info-soft); color: #0369a1; letter-spacing: -.02em;
}
.pend-qtd small { display: block; font-family: var(--ff-mono); font-size: 8px; font-weight: 500; letter-spacing: .08em; }
.pend-qtd--um { background: var(--bg-muted); color: var(--t-light); font-size: 13px; }
.pend--primeira .pend-qtd { background: var(--purple-soft); color: #6d28d9; }

/* coluna 2 — as três linhas */
.pend-l1 { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.pend-quem { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.pend-quem .vazio { color: var(--danger); font-weight: 600; }
.pend-l2 {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 4px; font-size: 12.5px; color: var(--t-muted);
}
.pend-l3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pend-sug {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--t-base);
}
.pend-sug b { font-weight: 600; }
.pend-sug .seta { color: var(--t-light); }
.pend-sug .vazio { color: var(--danger); font-weight: 600; }

/* coluna 3 — valor */
.pend-valor {
  text-align: right; font-family: var(--ff-tight); font-weight: 700;
  font-size: 16px; letter-spacing: -.03em; white-space: nowrap;
}
.pend-valor small {
  display: block; font-family: var(--ff-mono); font-size: 10.5px;
  font-weight: 400; color: var(--t-light); letter-spacing: 0; margin-top: 2px;
}

.pend-lista { display: flex; flex-direction: column; gap: 8px; }
.pend-sec {
  font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--t-light);
  padding: 18px 0 8px; display: flex; align-items: baseline; gap: 10px;
}
.pend-sec .qt { color: var(--t-muted); letter-spacing: .04em; }

/* ------------------------------------------- painel lateral de resposta
   Sempre lateral, nunca centrado: a lista continua visível atrás, o usuário
   não perde o lugar, e o conteúdo é denso — que é a regra
   "The Drawer-For-Inspection" do DESIGN.md. */
.drawer--resp { width: min(680px, 100%); }

/* Numa coluna flex os filhos encolhem por padrão (flex-shrink: 1). Com
   overflow: hidden nas seções, encolher significa CORTAR conteúdo — era o que
   cortava o select pela metade e truncava os textos. Nada aqui encolhe: o
   cabeçalho, a navegação e o rodapé são fixos, e o corpo é que rola. */
.drawer--resp .drawer-head,
.drawer--resp .drawer-nav,
.drawer--resp .drawer-foot { flex: none; }
.drawer--resp .drawer-body { flex: 1 1 auto; min-height: 0; }
.drawer--resp .drawer-body > * { flex: none; }

.drawer--resp .drawer-head { gap: 14px; align-items: flex-start; }
.drawer--resp .drawer-head .kind {
  font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--t-light);
}
.drawer--resp .drawer-head h2 {
  margin: 4px 0 0; font-family: var(--ff-tight); font-size: 17px;
  font-weight: 700; letter-spacing: -.025em; line-height: 1.28;
}
.drawer--resp .drawer-head > div:first-child { flex: 1 1 auto; min-width: 0; }
.drawer--resp .drawer-head .val {
  margin-left: auto; flex: none; text-align: right; align-self: flex-end;
  font-family: var(--ff-tight); font-size: 21px; font-weight: 700; letter-spacing: -.03em;
  white-space: nowrap;
}
.drawer--resp .drawer-head h2 { text-wrap: balance; }

/* navegação pela fila, dentro do painel */
.drawer-nav {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 24px; background: var(--info-soft);
  border-bottom: 1px solid #bae6fd; font-size: 12.5px; color: #075985;
}
.drawer-nav .spacer { margin-left: auto; }
.drawer-nav button {
  border: 1px solid #bae6fd; background: #fff; color: #075985;
  border-radius: 6px; padding: 3px 9px; font-size: 12px; font-weight: 600;
}
.drawer-nav button:hover { background: var(--info-soft); }
.drawer-nav button[disabled] { opacity: .45; cursor: not-allowed; }

/* rodapé fixo com as ações */
.drawer-foot {
  margin-top: auto; padding: 14px 24px;
  background: var(--bg-muted); border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.drawer-foot .spacer { margin-left: auto; }
.drawer-foot .hint { font-size: 12px; color: var(--t-muted); }

/* bloco recolhível para o detalhe técnico */
.dobra { border: 1px solid var(--border); border-radius: var(--r-control); overflow: hidden; }
.dobra > summary {
  padding: 10px 13px; background: var(--bg-muted); cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--t-muted);
  list-style: none; display: flex; align-items: center; gap: 8px;
}
.dobra > summary::-webkit-details-marker { display: none; }
.dobra > summary::before { content: '▸'; font-size: 10px; }
.dobra[open] > summary::before { content: '▾'; }
.dobra > summary:hover { background: var(--bg-hover); color: var(--t-base); }
.dobra .dentro { padding: 14px 13px; display: flex; flex-direction: column; gap: 13px; }

/* aviso do cenário em teste */
.proto-nota {
  display: flex; gap: 11px; align-items: flex-start;
  background: #1e293b; color: #cbd5e1; border-radius: var(--r-card);
  padding: 14px 17px; font-size: 13px; line-height: 1.55;
}
.proto-nota b { color: #fff; display: block; margin-bottom: 2px; }
.proto-nota .ni { color: var(--primary-light); flex: none; }
.proto-nota .spacer { margin-left: auto; }
.proto-nota a { color: #fff; text-decoration: underline; }

@media (max-width: 768px) {
  .pend { grid-template-columns: auto 1fr; }
  .pend-valor { grid-column: 2; text-align: left; margin-top: 6px; }
}

/* o badge "v2" da variação não é contagem — não deve ser vermelho */
.nav-link[href$="movimentos-v2"] .nav-badge {
  background: var(--primary-soft); color: var(--primary);
  font-size: 9px; letter-spacing: .06em;
}

/* No modal as células são mais largas, para o rótulo da confiança
   ("abaixo de 80% — pergunta") não quebrar em três linhas. */
.drawer--resp .facts { grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }
.drawer--resp .conf { flex-wrap: wrap; }
.drawer--resp .conf-why { flex: 1 1 100%; }

/* =============================================================================
   CARD DE CONTA — versão leve
   -----------------------------------------------------------------------------
   O card anterior tinha cabeçalho + bloco de saldo + quatro linhas de dados.
   Com cinco contas isso virava uma parede antes do extrato. Agora:
     · saldo e movimentos no topo, que é o que se lê
     · uma linha de rodapé com o que é operacional (importa desde, última sync)
     · o resto — saldo inicial, tipo de saldo, chave PIX — na engrenagem
   ========================================================================== */

.contas-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px;
  /* cada card com a sua altura natural: esticar os saudáveis até à altura do
     que tem alerta cria espaço morto — e a altura extra passa a ser sinal de
     que aquela conta precisa de atenção. */
  align-items: start;
}

.cconta {
  border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--bg-card); box-shadow: var(--shadow-card);
  padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 11px;
  transition: var(--transition);
}
.cconta:hover { box-shadow: var(--shadow-lg); }
.cconta--sem-of { border-style: dashed; }
.cconta--erro { border-color: #fecaca; }

.cconta-top { display: flex; align-items: flex-start; gap: 8px; }
.cconta-banco {
  font-family: var(--ff-tight); font-size: 14px; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.25;
}
.cconta-conta {
  font-family: var(--ff-mono); font-size: 10.5px; color: var(--t-light); margin-top: 2px;
}
.cconta-eng {
  margin-left: auto; flex: none; width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--t-muted);
}
.cconta-eng:hover { background: var(--bg-hover); color: var(--t-base); border-color: var(--t-light); }

.cconta-nums { display: flex; align-items: flex-end; gap: 14px; }
.cconta-saldo {
  font-family: var(--ff-tight); font-size: 22px; font-weight: 700;
  letter-spacing: -.035em; line-height: 1;
}
.cconta-saldo-k {
  font-family: var(--ff-mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--t-light); margin-bottom: 4px;
}
.cconta-movs { margin-left: auto; text-align: right; }
.cconta-movs .n {
  font-family: var(--ff-tight); font-size: 16px; font-weight: 700; letter-spacing: -.02em;
}
.cconta-movs .r { font-size: 11.5px; font-weight: 600; color: var(--warning); }
.cconta-movs .r.ok { color: var(--t-light); font-weight: 400; }

.cconta-pe {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-top: 10px; border-top: 1px solid var(--border-soft);
  font-size: 11px; color: var(--t-light);
}
.cconta-pe .of {
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 600; color: #047857;
}
.cconta-pe .of .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.cconta-pe .of--erro { color: #b91c1c; }
.cconta-pe .of--erro .dot { background: var(--danger); }
.cconta-pe .of--sem { color: var(--t-light); }
.cconta-pe .of--sem .dot { background: var(--t-light); }
.cconta-pe .sep { color: var(--border); }

/* linha de aviso quando a conta não está operando */
.cconta-alerta {
  display: flex; gap: 8px; align-items: flex-start;
  background: var(--danger-soft); border-radius: var(--r-control);
  padding: 8px 10px; font-size: 11.5px; line-height: 1.45; color: #991b1b;
}
.cconta-alerta--sem { background: var(--bg-muted); color: var(--t-muted); }
.cconta-alerta button {
  margin-left: auto; flex: none; border: 0; background: transparent;
  font-size: 11.5px; font-weight: 600; color: inherit; text-decoration: underline;
  padding: 0;
}

/* ------------------------------------------- configuração da conta (drawer) */
.cfg-sec { display: flex; flex-direction: column; gap: 12px; }
.cfg-linha {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--border-soft);
}
.cfg-linha:last-child { border-bottom: 0; }
.cfg-linha .rot { font-size: 13px; font-weight: 500; }
.cfg-linha .rot small { display: block; font-weight: 400; font-size: 11.5px; color: var(--t-muted); margin-top: 2px; }
.cfg-linha .vlr { font-family: var(--ff-mono); font-size: 12.5px; text-align: right; }
.cfg-editar {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  background: var(--primary-soft); border: 1px solid var(--border);
  border-radius: var(--r-control); padding: 13px;
}
.cfg-editar label {
  font-size: 11.5px; font-weight: 600; color: var(--t-base);
  display: flex; flex-direction: column; gap: 5px;
}
.cfg-editar input, .cfg-editar select {
  height: 36px; padding: 0 10px; border: 1px solid var(--border);
  border-radius: var(--r-control); background: var(--bg-card);
  font: inherit; font-size: 13px; color: var(--t-base);
}
.cfg-editar input:focus, .cfg-editar select:focus {
  outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring);
}
.cfg-editar .largo { grid-column: 1 / -1; }

/* =============================================================================
   CENTRAL UNIFICADA — abas no card e coluna de movimento padronizada
   ========================================================================== */

.chip-filtro--sm { padding: 5px 10px; font-size: 12px; }

/* filtro primário: fora do card, porque define o conjunto */
.filtro-tipo {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 2px 0 4px;
}
.filtro-tipo-rot {
  font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--t-light); margin-right: 3px;
}
.filtro-tipo--inerte { opacity: .45; pointer-events: none; }
.filtro-tipo--inerte .tiny { pointer-events: auto; }

/* ------------------------------------ chips coloridos pelo tipo de ação
   A cor é a MESMA que o tipo tem na coluna Ação da tabela, para que o olho
   ligue o chip à linha. Sutil: outline e texto na cor, fundo quase branco.
   Quando ativo, a cor preenche. */
.chip-filtro[data-cor] {
  border-color: var(--c-borda); color: var(--c-texto); background: var(--bg-card);
}
.chip-filtro[data-cor]:hover { background: var(--c-suave); }
.chip-filtro[data-cor] .n { background: var(--c-suave); color: var(--c-texto); }
.chip-filtro[data-cor][aria-current="true"] {
  background: var(--c-suave); border-color: var(--c-texto); color: var(--c-texto);
  font-weight: 600; box-shadow: inset 0 0 0 1px var(--c-texto);
}
.chip-filtro[data-cor][aria-current="true"] .n { background: #fff; }

.chip-filtro[data-cor="warning"] { --c-borda: #fde68a; --c-texto: #b45309; --c-suave: var(--warning-soft); }
.chip-filtro[data-cor="purple"]  { --c-borda: #ddd6fe; --c-texto: #6d28d9; --c-suave: var(--purple-soft); }
.chip-filtro[data-cor="info"]    { --c-borda: #bae6fd; --c-texto: #0369a1; --c-suave: var(--info-soft); }
.chip-filtro[data-cor="teal"]    { --c-borda: #99f6e4; --c-texto: #0f766e; --c-suave: var(--teal-soft); }

/* as três visões, dentro do card da lista */
.lista-abas {
  display: flex; gap: 2px; padding: 0 14px;
  border-bottom: 1px solid var(--border); background: var(--bg-card);
}
.lista-aba {
  border: 0; background: transparent; padding: 13px 14px 12px;
  font-size: 13.5px; font-weight: 500; color: var(--t-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 7px; transition: var(--transition);
}
.lista-aba:hover { color: var(--t-base); }
.lista-aba[aria-selected="true"] {
  color: var(--primary); border-bottom-color: var(--primary); font-weight: 600;
}
.lista-aba .n {
  font-family: var(--ff-mono); font-size: 10.5px; background: var(--bg-muted);
  color: var(--t-muted); padding: 1px 6px; border-radius: var(--r-pill);
}
.lista-aba[aria-selected="true"] .n { background: var(--primary-soft); color: var(--primary); }

/* ---------------------------------------------- a coluna Movimento
   O texto vem do banco em caixa alta — é identificador de máquina, não prosa.
   Mono + caixa alta comunica isso e padroniza a coluna: todas as linhas têm
   a mesma forma, inclusive a do contrato, que não vem do extrato.
   A descrição bruta completa vive no modal, não na lista. */
.mov-txt {
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: .01em;
  color: var(--t-base); text-transform: uppercase;
  max-width: 38ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mov-doc {
  font-family: var(--ff-mono); font-size: 10.5px; color: var(--t-light); margin-top: 3px;
}

.pill--tracejada { border: 1px dashed var(--t-light); }

/* célula com dois níveis: o principal e o subordinado (fornecedor / categoria) */
.cel-dupla > div:first-child { font-weight: 500; }
.cel-dupla .sub { font-size: 11.5px; color: var(--t-muted); margin-top: 2px; }
/* barra de confiança mais curta em tabela densa */
.tbl--acoes .conf-bar { width: 64px; }

/* A Central unificada tem 8 colunas + ação. Padding menor mantém a coluna de
   ação visível sem scroll horizontal em telas de 1440px. */
.tbl--acoes th, .tbl--acoes td { padding-left: 10px; padding-right: 10px; }
.tbl--acoes .mov-raw { max-width: 34ch; }

/* =============================================================================
   PAINEL DE RESPOSTA — seções
   -----------------------------------------------------------------------------
   A ordem é a do que se espera do usuário: primeiro o campo onde ele responde,
   depois o porquê, depois os fatos, e o detalhe técnico recolhido.

   A confiança saiu do grid de fatos. CNPJ, fornecedor e conta são FATOS — ou
   são aquilo, ou não são. A confiança é o quanto o sistema confia na SUGESTÃO
   que está dando, então vive junto dela.
   ========================================================================== */

.sec { border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden;
  flex: none; }
.sec-tit {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: var(--bg-muted);
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--t-muted);
}
.sec-tit .spacer { margin-left: auto; letter-spacing: 0; text-transform: none; }
.sec-corpo { padding: 14px; display: flex; flex-direction: column; gap: 13px; }

/* a seção da resposta: é onde o usuário age, e tem o peso disso */
.sec--resposta { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.sec--resposta .sec-tit {
  background: var(--primary-soft); color: var(--primary-dark);
  border-bottom-color: var(--primary-ring); font-weight: 600;
}
.sec--feito { border-color: #a7f3d0; }
.sec--feito .sec-tit { background: var(--success-soft); color: #047857; border-bottom-color: #a7f3d0; }

/* o campo onde se responde */
.resp-campo { display: flex; flex-direction: column; gap: 7px; }
.resp-campo > label {
  font-size: 12.5px; font-weight: 600; color: var(--t-base);
}
.resp-campo select,
.resp-campo input {
  height: 42px; padding: 0 12px; width: 100%;
  border: 1px solid var(--border); border-radius: var(--r-control);
  background: var(--bg-card); font: inherit; font-size: 14px; color: var(--t-base);
  color-scheme: light;   /* senão o dark mode do SO pinta o campo de preto */
}
.resp-campo input::placeholder { color: var(--t-light); }
.resp-campo input:focus {
  outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring);
}
.resp-campo select:focus {
  outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring);
}
.resp-campo select.vazio { border-color: var(--danger); background: var(--danger-soft); }

/* a sugestão da IA, com a confiança que é dela */
.sugestao {
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--bg-muted); border-radius: var(--r-control); padding: 11px 13px;
}
.sugestao .si { flex: none; color: var(--t-light); font-size: 13px; line-height: 1.3; }
.sugestao .st { font-size: 12.5px; line-height: 1.5; color: var(--t-muted); }
.sugestao .st b { color: var(--t-base); font-weight: 600; }
.sugestao-conf { margin-top: 8px; }
.sugestao--vazia { background: var(--danger-soft); }
.sugestao--vazia .st { color: #991b1b; }

/* escolha binária: sim / não, para associar e transferência */
.escolha { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.escolha button {
  border: 1px solid var(--border); border-radius: var(--r-control);
  background: var(--bg-card); padding: 12px 13px; text-align: left;
  transition: var(--transition);
}
.escolha button:hover { border-color: var(--primary); background: var(--primary-soft); }
.escolha .eh { font-size: 13.5px; font-weight: 600; color: var(--t-base); }
.escolha .es { font-size: 11.5px; color: var(--t-muted); margin-top: 3px; line-height: 1.4; }

/* lista de fatos, dentro de seção */
.fatos { display: flex; flex-direction: column; gap: 0; }
.fato {
  display: grid; grid-template-columns: 104px 1fr; gap: 12px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--border-soft);
}
.fato:last-child { border-bottom: 0; }
.fato:first-child { padding-top: 0; }
.fato .fk {
  font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--t-light);
}
.fato .fv { font-size: 13.5px; }
.fato .fv .obs { display: block; font-size: 11.5px; color: var(--t-muted); margin-top: 2px; }
.fato .fv.vazio { color: var(--danger); font-weight: 600; }

/* =============================================================================
   PAINEL DE RESPOSTA — cabeçalho de decisão
   -----------------------------------------------------------------------------
   O cabeçalho carrega a decisão inteira: o que é, quanto, o campo quando há,
   as ações e a consequência. O corpo só tem dados e dobras com a prosa.
   Ver DECISOES-DESIGN.md #8.
   ========================================================================== */
.pr-head {
  flex: none; background: var(--bg-card);
  padding: 14px 22px 16px; border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 6px 12px -10px rgba(15, 23, 42, .18);
}
.pr-topo { display: flex; align-items: center; gap: 8px; }
.pr-topo .kind {
  font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--t-light);
}
.pr-nav {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--t-muted);
}
.pr-nav b { color: var(--t-base); }
.pr-nav button {
  width: 26px; height: 26px; margin-left: 2px; line-height: 1;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-card); color: var(--t-base); font-size: 15px;
}
.pr-nav button:hover:not([disabled]) { background: var(--bg-hover); }
.pr-nav button[disabled] { opacity: .35; cursor: not-allowed; }
.pr-topo .x {
  margin-left: auto; border: 0; background: transparent; color: var(--t-muted);
  font-size: 20px; line-height: 1; padding: 2px 6px; border-radius: 6px;
}
.pr-nav + .x { margin-left: 6px; }
.pr-topo .x:hover { background: var(--bg-muted); color: var(--t-base); }

.pr-titulo { display: flex; align-items: baseline; gap: 16px; }
.pr-titulo h2 {
  margin: 0; flex: 1; min-width: 0; text-wrap: balance;
  font-family: var(--ff-tight); font-size: 18px; font-weight: 700;
  letter-spacing: -.025em; line-height: 1.25;
}
.pr-titulo .val {
  flex: none; white-space: nowrap;
  font-family: var(--ff-tight); font-size: 22px; font-weight: 700; letter-spacing: -.03em;
}

.pr-campos { display: grid; gap: 10px; }
.pr-campos--2 { grid-template-columns: 1fr 1fr; }
.pr-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pr-campo > span { font-size: 11.5px; font-weight: 600; color: var(--t-muted); }
.pr-campo select, .pr-campo input {
  height: 40px; width: 100%; padding: 0 11px;
  border: 1px solid var(--border); border-radius: var(--r-control);
  background: var(--bg-card); color: var(--t-base);
  font: inherit; font-size: 13.5px; color-scheme: light;
}
.pr-campo select:focus, .pr-campo input:focus {
  outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring);
}
.pr-campo select.vazio { border-color: var(--danger); background: var(--danger-soft); }
.pr-sug {
  display: flex; align-items: center; gap: 9px; margin-top: -4px;
  font-size: 12px; color: var(--t-muted);
}
.pr-sug--vazia { color: #b91c1c; }

.pr-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pr-acoes .btn { min-height: 38px; }
.pr-acoes .btn--primary[disabled] { background: var(--t-light); border-color: var(--t-light); box-shadow: none; }
.pr-link {
  margin-left: auto; border: 0; background: none; padding: 6px 2px;
  font-size: 12.5px; font-weight: 600; color: var(--t-muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.pr-link:hover { color: var(--t-base); }
.pr-link--perigo { color: #b91c1c; }
.pr-link--perigo:hover { color: var(--danger); }

.pr-consequencia {
  display: flex; gap: 7px; align-items: baseline; margin-top: -2px;
  font-size: 12px; line-height: 1.45; color: var(--t-muted);
}
.pr-consequencia::before { content: '→'; color: var(--t-light); flex: none; }
.pr-consequencia b { color: var(--t-base); font-weight: 600; }

/* ------------------------------------------------------------- corpo: dados */
.pr-corpo { padding: 16px 22px 28px; gap: 14px; }

.pr-numeros {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border); border-radius: var(--r-control); overflow: hidden;
}
.pr-numeros--2 { grid-template-columns: 1fr 1fr; }
.pr-numeros > div { padding: 11px 13px; border-right: 1px solid var(--border-soft); min-width: 0; }
.pr-numeros > div:last-child { border-right: 0; }
.pr-numeros .k, .pr-dado .k {
  display: block; font-family: var(--ff-mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--t-light);
}
.pr-numeros .v {
  display: block; margin-top: 4px;
  font-family: var(--ff-tight); font-size: 17px; font-weight: 700; letter-spacing: -.02em;
}
.pr-numeros .v small { font-family: var(--ff-mono); font-size: 11px; font-weight: 500; margin-left: 4px; }

.pr-dados { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
.pr-dado { padding: 10px 0; border-bottom: 1px solid var(--border-soft); min-width: 0; }
.pr-dado--largo { grid-column: 1 / -1; }
.pr-dado .v { display: block; margin-top: 4px; font-size: 13.5px; overflow-wrap: anywhere; }
.pr-dado .v.mono { font-size: 12.5px; }

.pr-prosa p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--t-base); }
.pr-prosa p + p { margin-top: 2px; }

@media (max-width: 640px) {
  .pr-campos--2, .pr-dados { grid-template-columns: 1fr; }
  .pr-link { margin-left: 0; }
}

/* O painel começa abaixo da faixa do protótipo (30px, z-index 90). Sem isso
   a faixa cobria a linha de cima do painel — tipo, navegação e fechar. */
.drawer { top: 30px; }

/* modo api (Fase 2): a resposta ainda não grava — o link fica à vista, desativado */
.pr-link[disabled] { opacity: .45; cursor: not-allowed; }

/* modo api (Fase 3): o estado da resposta, logo abaixo das ações. Mesma
   escala da consequência; o fundo e o fio carregam o estado (tokens do tema),
   o texto fica na cor de base para manter o contraste. */
.pr-estado {
  display: block;
  padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--r-control);
  background: var(--bg-muted); color: var(--t-base);
  font-size: 12px; line-height: 1.5;
}
.pr-estado[hidden] { display: none; }
.pr-estado b { font-weight: 600; }
.pr-estado--enviando { display: flex; gap: 8px; align-items: baseline; color: var(--t-muted); }
.pr-estado--enviando::before {
  content: ''; flex: none; align-self: center; width: 11px; height: 11px;
  border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: pr-gira .8s linear infinite;
}
.pr-estado--ok    { background: var(--success-soft); border-color: var(--success); }
.pr-estado--erro  { background: var(--danger-soft);  border-color: var(--danger); }
.pr-estado--aviso { background: var(--warning-soft); border-color: var(--warning); }
@keyframes pr-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pr-estado--enviando::before { animation: none; } }
.drawer--resp[aria-busy="true"] .pr-acoes { cursor: progress; }

/* modo api (APP-V2-2.2): passar à operadora. O motivo usa o mesmo controle
   dos campos do cabeçalho; a linha escalada ganha uma legenda sob a pill. */
.pr-campo textarea {
  width: 100%; min-height: 76px; padding: 9px 11px; resize: vertical;
  border: 1px solid var(--border); border-radius: var(--r-control);
  background: var(--bg-card); color: var(--t-base);
  font: inherit; font-size: 13.5px; line-height: 1.5;
}
.pr-campo textarea:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.pr-campo textarea::placeholder { color: var(--t-muted); }
.pr-campo > small { font-size: 12px; color: var(--t-muted); }
.v2-escalada { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--t-muted); white-space: nowrap; }

/* =============================================================================
   TELEFONE E TABLET EM RETRATO (≤768px) — só vale com o meta viewport do
   index.html. Corrige o que quebrava a 375/768; o desktop não é tocado.
   ========================================================================== */
@media (max-width: 768px) {
  /* faixa do protótipo: rola de lado em vez de empurrar a página */
  .proto-bar { overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .proto-bar::-webkit-scrollbar { display: none; }
  .proto-switch { flex: none; }

  /* topbar de 60px: trilha e empresa numa linha só, cortadas com reticências */
  .topbar { gap: 12px; }
  .crumbs { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-right { min-width: 0; flex: none; }
  .empresa-pick { min-width: 0; max-width: 46vw; white-space: nowrap; overflow: hidden; }
  .empresa-pick .light { display: none; }

  /* nota escura da Central: os botões descem para baixo do texto */
  .proto-nota { flex-wrap: wrap; }
  .proto-nota > div:not(.spacer) { flex: 1 1 0; min-width: 0; }
  .proto-nota .spacer { width: 100%; margin-left: 0; flex-wrap: wrap; }

  /* painel de resposta: título em cima, valor embaixo */
  .pr-head { padding: 12px 16px 14px; }
  .pr-titulo { flex-wrap: wrap; gap: 4px 16px; }
  .pr-titulo h2 { flex-basis: 100%; }
  .drawer--resp .pr-corpo { padding-left: 16px; padding-right: 16px; }
}

/* =============================================================================
   APP-V2-0.2 — shell em modo api: "Em breve" na navegação, seletor de
   empresa do operador, navegação no celular e Segurança da conta.
   Só classes novas (ou escopo [data-modo="api"]): o modo mock não muda.
   ========================================================================== */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* foco visível em tudo que se opera pelo teclado */
[data-modo="api"] :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
[data-modo="api"] .field input:focus-visible { outline: 0; }

/* item de navegação sem tela funcional ainda */
.nav-tag {
  margin-left: auto; flex: none;
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--t-muted); border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 1px 6px; background: var(--bg-card); font-weight: 500;
}
.nav-tag + .nav-badge { margin-left: 6px; }
.nav-tag--inline { margin-left: 6px; vertical-align: 2px; }

/* seletor de empresa: o mesmo .empresa-pick, agora botão */
.empresa-pick--btn { cursor: pointer; color: var(--t-base); transition: var(--transition); }
.empresa-pick--btn:hover { background: var(--bg-hover); }
.empresa-pick--btn[aria-expanded="true"] { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.empresa-pick--btn[aria-busy="true"] { color: var(--t-muted); }
.empresa-pick--btn .chev { color: var(--t-light); font-size: 10px; }
.dd-menu--empresa { min-width: 320px; max-width: 420px; }
.emp-filtro { padding: 10px 12px; border-bottom: 1px solid var(--border-soft); }
.emp-filtro input {
  width: 100%; height: 34px; padding: 0 10px; font: inherit; font-size: 13px;
  border: 1px solid var(--border); border-radius: var(--r-control); background: var(--bg-card); color: var(--t-base);
}
.emp-filtro input:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.emp-lista { max-height: min(360px, 60vh); overflow-y: auto; padding: 4px 0; }
.emp-item { flex-direction: column; align-items: flex-start; gap: 2px; }
.emp-item .emp-nome { font-weight: 500; }
.emp-item .emp-meta { color: var(--t-muted); font-size: 11px; }
.emp-item[aria-current="true"] { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
.emp-item[aria-current="true"] .emp-nome { color: var(--primary-dark); font-weight: 600; }
.emp-vazio { padding: 16px; margin: 0; }
.row--ativa td { background: var(--primary-soft); }

/* navegação no celular: botão na topbar + fundo */
.nav-toggle { display: none; }
.nav-fundo { position: fixed; inset: 30px 0 0 0; background: rgba(15,23,42,.35); z-index: 35; }
@media (max-width: 1024px) {
  .nav-toggle { display: grid; }
  [data-modo="api"] .sidebar { transition: transform .22s cubic-bezier(.16, 1, .3, 1); box-shadow: var(--shadow-lg); }
}
@media (min-width: 1025px) { .nav-fundo { display: none; } }
@media (max-width: 768px) {
  [data-modo="api"] .topbar { gap: 10px; }
  [data-modo="api"] .topbar-right { gap: 8px; min-width: 0; }
  [data-modo="api"] .crumbs { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .empresa-pick--real .nome { max-width: 16ch; }
  .dd-menu--empresa { min-width: 0; max-width: none; }
}
@media (max-width: 480px) {
  [data-modo="api"] .crumbs { display: none; }
  [data-modo="api"] .topbar-right { margin-left: auto; }
  .empresa-pick--real .nome { max-width: 12ch; }
}
@media (prefers-reduced-motion: reduce) { [data-modo="api"] .sidebar { transition: none; } }

/* ---------------------------------------------------- Segurança da conta */
.seg-grade { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; align-items: start; }
@media (max-width: 1200px) { .seg-grade { grid-template-columns: 1fr; } }
.seg-card { display: flex; flex-direction: column; gap: 14px; }
.seg-card .card-head { margin-bottom: 0; }
.seg-card .card-note { line-height: 1.55; max-width: 68ch; }
.seg-card .auth-alert, .seg-aviso { margin-bottom: 0; }
.seg-sub { font-family: var(--ff-tight); font-size: 14px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 4px; }
.seg-sub:focus { outline: 0; }
.seg-bloco { display: flex; flex-direction: column; gap: 10px; }
.seg-bloco--sep { border-top: 1px solid var(--border-soft); padding-top: 14px; }
.seg-ativar { flex-direction: row; gap: 24px; align-items: flex-start; }
.seg-qr {
  flex: none; width: 196px; height: 196px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--r-card); background: #fff;
}
.seg-qr img { display: block; image-rendering: pixelated; }
.seg-passos { flex: 1; min-width: 0; }
.seg-lista { margin: 0 0 16px; padding-left: 20px; font-size: 13.5px; line-height: 1.6; color: var(--t-base); }
.seg-chave { display: flex; gap: 8px; align-items: center; }
.seg-chave input {
  flex: 1; min-width: 0; height: 36px; padding: 0 10px; font-size: 12px; letter-spacing: .04em;
  border: 1px solid var(--border); border-radius: var(--r-control); background: var(--bg-muted); color: var(--t-base);
}
.seg-chave input:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
#seg-codigo { max-width: 180px; letter-spacing: .3em; font-size: 16px; }
.seg-codigos {
  list-style: none; margin: 0; padding: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px; background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--r-control);
  font-size: 14px; letter-spacing: .06em; font-variant-numeric: tabular-nums;
}
.seg-fatos { margin: 0; display: flex; gap: 24px; flex-wrap: wrap; }
.seg-fatos div { display: flex; flex-direction: column; gap: 2px; }
.seg-fatos dt { font-size: 12px; color: var(--t-muted); }
.seg-fatos dd { margin: 0; font-size: 14px; }
.seg-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; border-top: 1px solid var(--border-soft); padding-top: 14px; }
.seg-form { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.seg-form .field { width: 100%; max-width: 320px; margin-bottom: 8px; }
.seg-form--linha { flex-direction: row; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.seg-form--linha .field { margin-bottom: 0; flex: 1 1 220px; }
@media (max-width: 768px) {
  .seg-ativar { flex-direction: column; }
  .seg-acoes { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .seg-codigos { grid-template-columns: 1fr; } }
.carteira-acao { text-align: right; white-space: nowrap; }
.carteira-head { flex-wrap: wrap; gap: 4px 16px; }
.carteira-head .card-note { margin-left: auto; }
@media (max-width: 640px) {
  .carteira-head .card-note { margin-left: 0; }
  .tbl--carteira thead { display: none; }
  .tbl--carteira tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--border-soft);
  }
  .tbl--carteira tbody tr:last-child { border-bottom: 0; }
  .tbl--carteira td { padding: 0; border: 0; }
  .tbl--carteira td:nth-child(1) { grid-column: 1; }
  .tbl--carteira td:nth-child(2) { grid-column: 1; }
  .tbl--carteira td:nth-child(3) { grid-column: 1; }
  .tbl--carteira td:nth-child(4) { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}
@media (max-width: 768px) {
  /* o gatilho fica no meio da topbar: no celular a lista ocupa a largura toda */
  .dd-menu--empresa { position: fixed; top: 98px; left: 16px; right: 16px; width: auto; }
}
@media (max-width: 640px) {
  .tbl--carteira tbody tr.row--ativa { background: var(--primary-soft); }
  .tbl--carteira tbody tr.row--ativa td { background: transparent; }
}
@media (max-width: 1024px) {
  /* fechada, a sidebar sai também da ordem do Tab (não só da vista) */
  [data-modo="api"] .sidebar:not(.open) { visibility: hidden; transition: transform .22s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .22s; }
  [data-modo="api"] .sidebar.open { visibility: visible; }
}
/* o link herda a visibility da sidebar; com `transition: all` ela entrava em
   transição e o link ficava "hidden" no instante do focus() ao abrir */
[data-modo="api"] .sidebar .nav-link { transition-property: background-color, color, box-shadow; }

/* ---------------------------------------------------------------------------
   APP-V2-2.1 — Painel em modo api. Só classes novas (`painel-*`): o modo mock
   não usa nenhuma delas.
   ------------------------------------------------------------------------ */
.painel-leitura { font-size: 16px; }
.painel-nota { margin: 12px 0 0; line-height: 1.55; }
.painel-vazio { margin: 0; padding: 0 22px 20px; }
.painel-barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.painel-barras .num { font-variant-numeric: tabular-nums; }
.painel-barra { height: 6px; margin-top: 6px; border-radius: var(--r-pill); background: var(--border-soft); overflow: hidden; }
.painel-barra > span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--primary); }
/* ---------------------------------------------------- Pessoas e convites (APP-V2-1.2) */
.cv-form { display: flex; flex-direction: column; }
.cv-form .field { max-width: 420px; }
.cv-form > .card-note { margin-bottom: 14px; }
.cv-linha { display: flex; gap: 12px; flex-wrap: wrap; }
.cv-linha .field { flex: 1 1 180px; }
.cv-select {
  height: 42px; padding: 0 10px; width: 100%;
  border: 1px solid var(--border); border-radius: var(--r-control);
  background: var(--bg-card); font: inherit; font-size: 14px; color: var(--t-base);
}
.cv-select:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.cv-tipo { border: 0; padding: 0; margin: 0 0 15px; min-width: 0; display: flex; gap: 18px; flex-wrap: wrap; }
.field-legenda { font-size: 13px; font-weight: 600; color: var(--t-base); padding: 0; margin-bottom: 6px; width: 100%; }
.cv-radio { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; cursor: pointer; min-height: 32px; }
.cv-radio input { accent-color: var(--primary); width: 16px; height: 16px; }
.cv-acao { text-align: right; white-space: nowrap; }
.cv-quebra { overflow-wrap: anywhere; }
.seg-card .card-title[tabindex]:focus { outline: 0; }
@media (max-width: 640px) {
  .tbl--convites thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl--convites, .tbl--convites tbody, .tbl--convites tr, .tbl--convites td { display: block; width: 100%; }
  .tbl--convites tr { padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
  .tbl--convites td { border: 0; padding: 4px 0; }
  .tbl--convites .cv-acao { text-align: left; }
}

/* passo "ativar o 2FA agora" depois de aceitar o convite */
.auth-passos { display: flex; flex-direction: column; gap: 8px; }

/* passkeys cadastradas (APP-V2-1.3) */
.pk-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pk-item { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.pk-item:last-child { border-bottom: 0; }
.pk-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.pk-confirma { display: flex; flex-direction: column; gap: 6px; }
.pk-confirma .field { margin-bottom: 4px; max-width: 240px; }
.cv-grade { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
@media (max-width: 1200px) { .cv-grade { grid-template-columns: 1fr; } }

/* ------------------------------------------- Fase 4: telas de dinheiro (api)
   APP-V2-4.x. Só classes novas `.din-*`: o modo mock não muda. */
.din-barra { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px;
  padding: 14px 20px; border-bottom: 1px solid var(--border-soft); }
.din-busca { display: flex; align-items: center; gap: 6px; flex: 1 1 260px; min-width: 0; }
.din-busca input, .din-campo select, .din-campo input {
  height: 34px; padding: 0 10px; font: inherit; font-size: 13px; color: var(--t-base);
  border: 1px solid var(--border); border-radius: var(--r-control); background: var(--bg-card);
}
.din-busca input { flex: 1; min-width: 0; }
.din-busca input:focus, .din-campo select:focus, .din-campo input:focus {
  outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring);
}
.din-campo { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 500; color: var(--t-muted); }
.din-sub { padding: 12px 20px; border-bottom: 1px solid var(--border-soft); }
.din-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.card-head .din-chips { justify-content: flex-end; }
.din-flow { border: 0; border-radius: 0; border-bottom: 1px solid var(--border); }
.din-pag { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 20px; border-top: 1px solid var(--border-soft); }
.din-breve { opacity: .72; cursor: not-allowed; }
.din-breve .nav-tag { margin-left: 4px; }
.din-det { border: 1px solid var(--border); border-radius: var(--r-control); padding: 0 14px; gap: 0; }
.din-det .vlr small { display: block; color: var(--t-muted); font-size: 11px; margin-top: 2px; }
.din-kpis { margin-bottom: 4px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 768px) {
  .din-barra, .din-sub, .din-pag { padding-left: 16px; padding-right: 16px; }
  .din-busca { flex-basis: 100%; }
  .din-campo { flex: 1 1 140px; }
  .din-campo select, .din-campo input { width: 100%; }
  .card-head .din-chips { justify-content: flex-start; }
  .din-kpis { grid-template-columns: 1fr; }
}
.card[aria-busy="true"] .table-wrap, .card[aria-busy="true"] .din-flow { opacity: .55; transition: opacity .15s ease; }
/* chips da Fase 4: estado por aria-pressed (botões de alternar) */
.din-chips .chip-filtro[aria-pressed="true"] {
  background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600;
}
.din-chips .chip-filtro[aria-pressed="true"] .n { background: rgba(255,255,255,.25); color: #fff; }
.din-chips .chip-filtro[data-cor][aria-pressed="true"] {
  background: var(--c-suave); border-color: var(--c-texto); color: var(--c-texto);
  box-shadow: inset 0 0 0 1px var(--c-texto);
}
.din-chips .chip-filtro[data-cor][aria-pressed="true"] .n { background: #fff; color: var(--c-texto); }
.din-chips .chip-filtro[data-cor="success"] { --c-borda: #a7f3d0; --c-texto: #047857; --c-suave: var(--success-soft); }

/* relatórios em modo api (APP-V2-5.1) */
.relat-mes { gap: 8px; }
.relat-mes select { min-width: 0; }
.doc .relat-sub { font-family: var(--ff-tight); font-weight: 700; letter-spacing: -.02em; margin: 22px 0 4px; }
@media print {
  [data-modo="api"] .proto-bar, [data-modo="api"] .sidebar, [data-modo="api"] .topbar,
  [data-modo="api"] .nav-fundo, [data-modo="api"] .relat-nao-imprime { display: none !important; }
  [data-modo="api"] .main { margin-left: 0; }
  [data-modo="api"] .content { padding: 0; }
  [data-modo="api"] .doc { max-width: none; box-shadow: none; border: 0; }
}

/* ---------------------------------------------------------------------------
   APP-V2-6.1 — carteira do operador em modo api (`cart-*`, `tbl--cart6`).
   Só classes novas: o modo mock não usa nenhuma delas.
   ------------------------------------------------------------------------ */
.banner .cart-inline { display: inline; margin: 0; }
.tbl--cart6 td .pill + .tiny { margin-top: 4px; }
.tbl--cart6 .num { font-variant-numeric: tabular-nums; }
.cart-fila { list-style: none; margin: 0; padding: 0 22px; }
.cart-fila-item { display: grid; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--border-soft); }
.cart-fila-item:last-child { border-bottom: 0; }
.cart-fila-quem { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cart-fila-mov { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: 14px; }
.cart-fila-mov .num { font-variant-numeric: tabular-nums; }
.cart-fila-motivo { margin: 0; font-size: 13px; line-height: 1.55; max-width: 72ch; overflow-wrap: anywhere; }
.cart-fila-mais { display: flex; align-items: center; gap: 8px; padding: 4px 22px 16px; }
.cart-fila-msg { margin: 0 22px 16px; }
.cart-fila-nota { margin: 0; padding: 12px 22px 18px; border-top: 1px solid var(--border-soft); }
.cart-conexao { display: grid; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft); }
.cart-passos { list-style: none; margin: 0; padding: 0; }
@media (max-width: 760px) {
  .tbl--cart6 thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl--cart6, .tbl--cart6 tbody, .tbl--cart6 tr { display: block; width: 100%; }
  .tbl--cart6 tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px;
    padding: 14px 16px; border-bottom: 1px solid var(--border-soft); }
  .tbl--cart6 tbody tr:last-child { border-bottom: 0; }
  .tbl--cart6 td { display: block; padding: 0; border: 0; text-align: left; }
  .tbl--cart6 td[data-rotulo]::before { content: attr(data-rotulo); display: block; font-family: var(--ff-base);
    font-size: 12px; letter-spacing: normal; color: var(--t-muted); margin-bottom: 2px; }
  .tbl--cart6 tbody tr.row--ativa { background: var(--primary-soft); }
  .tbl--cart6 tbody tr.row--ativa td { background: transparent; }
  .tbl--cart6 td:first-child, .tbl--cart6 .carteira-acao { grid-column: 1 / -1; }
  .tbl--cart6 td:first-child::before { display: none; }
  .tbl--cart6 .carteira-acao { text-align: left; }
  .cart-fila, .cart-fila-nota { padding-left: 16px; padding-right: 16px; }
  .cart-fila-mais { padding-left: 16px; }
}

/* ---------------------------------------------------------------------------
   APP-V2-6.2 — admin: operadores e carteiras (`adm-*`, `tbl--adm`). Só modo api.
   ------------------------------------------------------------------------ */
.adm-grade { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 20px; align-items: start; }
.adm-ops-lista { list-style: none; margin: 0; padding: 0 10px 12px; display: grid; gap: 2px; }
.adm-op { display: grid; gap: 2px; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: var(--r-control);
  background: transparent; font: inherit; color: var(--t-base); cursor: pointer; }
.adm-op:hover { background: var(--bg-hover); }
.adm-op[aria-current="true"] { background: var(--primary-soft); }
.adm-op:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.adm-detalhe { display: grid; gap: 20px; min-width: 0; }
.adm-detalhe > .adm-aviso { margin: 0; }
.adm-aviso:focus { outline: 0; }
.adm-acoes { text-align: right; white-space: nowrap; }
.adm-acoes .btn + .btn { margin-left: 6px; }
.adm-inativo td { color: var(--t-muted); }
.adm-mestre { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; min-height: 32px; }
.adm-mestre input { accent-color: var(--primary); width: 16px; height: 16px; }
.adm-form { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.adm-form .field { width: 100%; max-width: 420px; margin: 0; }
@media (max-width: 900px) { .adm-grade { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .tbl--adm thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl--adm, .tbl--adm tbody, .tbl--adm tr { display: block; width: 100%; }
  .tbl--adm tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 14px 16px;
    border-bottom: 1px solid var(--border-soft); }
  .tbl--adm td { display: block; padding: 0; border: 0; }
  .tbl--adm td[data-rotulo]::before { content: attr(data-rotulo); display: block; font-size: 12px; color: var(--t-muted); margin-bottom: 2px; }
  .tbl--adm td:first-child, .tbl--adm .adm-acoes { grid-column: 1 / -1; }
  .tbl--adm td:first-child::before { display: none; }
  .tbl--adm .adm-acoes { text-align: left; }
}

/* ---------------------------------------------------------------------------
   APP-V2-6.3 — busca da topbar em modo api (`busca-*`, `topbar-search--api`).
   ------------------------------------------------------------------------ */
.dd-menu--busca { left: 0; right: auto; width: 420px; max-width: calc(100vw - 32px); max-height: min(70vh, 560px);
  overflow-y: auto; padding: 6px 0; }
.busca-msg { margin: 0; padding: 12px 16px; }
.busca-grupo + .busca-grupo { border-top: 1px solid var(--border-soft); }
.busca-grupo-tit { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 16px 4px; font-size: 12px; font-weight: 600; color: var(--t-muted); }
.busca-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding: 8px 16px; font-size: 13px; }
.busca-item[aria-disabled="true"] { color: var(--t-muted); }
.busca-item:not([aria-disabled="true"]) { cursor: pointer; }
.busca-item:not([aria-disabled="true"]):hover, .busca-item--ativo { background: var(--bg-hover); }
.busca-item--ativo { box-shadow: inset 2px 0 0 var(--primary); }
.busca-item-tit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.busca-item-meta { grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.busca-item-valor { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-variant-numeric: tabular-nums; }
.busca-mais { margin: 0; padding: 2px 16px 8px; }
.topbar-search--api input:disabled { background: var(--bg-muted); cursor: not-allowed; }
@media (max-width: 900px) {
  /* o protótipo esconde a busca no celular; em modo api ela vira um botão-campo que abre por cima */
  [data-modo="api"] .topbar-search--api { display: flex; }
  [data-modo="api"] .topbar-search--api input { width: 36px; padding: 0; color: transparent; cursor: pointer; }
  [data-modo="api"] .topbar-search--api input::placeholder { color: transparent; }
  [data-modo="api"] .topbar-search--api .ico { left: 11px; }
  [data-modo="api"] .topbar-search--api input:focus { position: fixed; top: 56px; left: 16px; right: 16px; z-index: 61;
    width: auto; height: 42px; padding: 0 12px; color: var(--t-base); cursor: text; }
  [data-modo="api"] .topbar-search--api:focus-within .ico { visibility: hidden; }
  [data-modo="api"] .topbar-search--api input:focus::placeholder { color: var(--t-light); }
  [data-modo="api"] .dd-menu--busca { position: fixed; top: 106px; left: 16px; right: 16px; width: auto; max-width: none; }
}   /* fecho que se perdeu na integração 4.10–4.14: sem ele, todo o CSS abaixo só valia até 900px */
/* escritas da Fase 4 (APP-V2-4.10+): formulário no drawer com os controles do
   painel de resposta (.pr-campo/.pr-estado); erro de campo pelo aria-invalid */
.esc-form { display: flex; flex-direction: column; gap: 14px; }
.esc-form .pr-campo > label { font-size: 12px; font-weight: 600; color: var(--t-muted); }
.esc-form .pr-campo > label .opt { font-weight: 500; color: var(--t-light); }
.esc-form [aria-invalid="true"] { border-color: var(--danger); background: var(--danger-soft); }
.esc-form [aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.18); }
.esc-form :disabled { cursor: progress; }
.esc-form .pr-campo > .field-erro { color: #b91c1c; font-weight: 500; }
.esc-form .field-erro[hidden] { display: none; }
.esc-resumo { border: 1px solid var(--border); border-radius: var(--r-control); padding: 0 14px; }
@media (max-width: 768px) {
  .esc-form .pr-campo select, .esc-form .pr-campo input, .esc-form .pr-campo textarea { font-size: 16px; }
  .esc-form .pr-acoes .btn { flex: 1 1 140px; justify-content: center; }
}
/* =============================================================================
   APP-V2-4.15 a 4.18 — escritas de extrato, Open Finance e cartão (modo api).
   Só classes novas `.ofx-*` / `.of-*`: o modo mock não muda. */
.ofx-form { display: flex; flex-direction: column; gap: 16px; }
.ofx-form [hidden] { display: none !important; }
.ofx-campo { color: var(--t-base); font-size: 13px; font-weight: 600; gap: 6px; }
.ofx-campo select { width: 100%; height: 38px; }
.ofx-campo input[type=file] {
  width: 100%; padding: 8px; font: inherit; font-size: 13px; color: var(--t-base);
  border: 1px dashed var(--border); border-radius: var(--r-control); background: var(--bg-muted);
}
.ofx-campo input[type=file]:focus-visible { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.ofx-campo input[type=file]::file-selector-button {
  margin-right: 10px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600;
  border: 1px solid var(--border); border-radius: var(--r-control); background: var(--bg-card); color: var(--t-base); cursor: pointer;
}
.ofx-campo [aria-invalid="true"] { border-color: var(--danger); background: var(--danger-soft); }
.ofx-campo .field-dica, .ofx-campo .field-erro { font-weight: 500; line-height: 1.45; }
.ofx-estado { font-size: 13px; }
.ofx-estado:focus { outline: 0; box-shadow: 0 0 0 3px var(--primary-ring); }
.ofx-nome { display: inline; font-weight: 600; word-break: break-all; }
.ofx-acoes { justify-content: flex-end; }
.drawer[aria-busy="true"] .ofx-acoes .btn { cursor: progress; }
.of-texto { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--t-base); }
.of-link { margin-top: 10px; }
.cconta-acao {
  border: 0; background: transparent; padding: 0; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--primary); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.cconta-acao:disabled { color: var(--t-light); text-decoration: none; cursor: not-allowed; }
.cconta-acao:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-control); }
.cconta-alerta .cconta-acao { margin-left: auto; flex: none; color: inherit; }

/* =============================================================================
   CONFIGURAÇÕES — APP-V2-7.1 (modo api)
   Mesmos cartões, campos e alertas da Segurança da conta e dos Cadastros.
   ========================================================================== */
.cfg-secao-titulo {
  font-family: var(--ff-tight); font-size: 16px; font-weight: 700; letter-spacing: -.01em;
  margin: 12px 0 -6px; color: var(--t-base);   /* .content já separa com gap: 20px */
}
.page-head + .cfg-secao-titulo { margin-top: 0; }
.cfg-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.cfg-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cfg-card .card-head { margin-bottom: 0; }
.cfg-card .card-head .right { display: flex; align-items: center; gap: 8px; }
.cfg-card--largo { grid-column: 1 / -1; }
.cfg-card .card-note, .cfg-card .field-dica { line-height: 1.55; max-width: 68ch; }
.cfg-card .field-dica a, .cfg-card .card-note a { color: var(--primary-dark); text-underline-offset: 2px; }
.cfg-aviso { margin-bottom: 0; }
.cfg-aviso:focus { outline: 0; }
.cfg-dl {
  display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 9px 16px; margin: 0; font-size: 13.5px;
}
.cfg-dl > div { display: contents; }
.cfg-dl dt { color: var(--t-muted); }
.cfg-dl dd { margin: 0; font-weight: 500; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.cfg-form { display: flex; flex-direction: column; }
.cfg-form .field { margin-bottom: 14px; }
.cfg-form .banner { margin-bottom: 4px; }
.cfg-regras { margin: -6px 0 14px; }
.cfg-colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; }
.cfg-grupo { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cfg-grupo .seg-sub { display: flex; align-items: center; gap: 8px; }
.cfg-colunas > .cfg-grupo + .cfg-grupo { border-left: 1px solid var(--border-soft); padding-left: 32px; }
.cfg-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cfg-lista li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: 13.5px;
}
.cfg-lista li:last-child { border-bottom: 0; }
.cfg-lista--nao li { justify-content: flex-start; color: var(--t-base); }
.cfg-lista--nao li::before { content: "✕"; color: var(--t-light); font-size: 12px; width: 14px; flex: none; }
.cfg-vazio { margin: 0; }

@media (max-width: 1024px) {
  .cfg-colunas { grid-template-columns: 1fr; }
  .cfg-colunas > .cfg-grupo + .cfg-grupo { border-left: 0; padding-left: 0; border-top: 1px solid var(--border-soft); padding-top: 16px; }
}
@media (max-width: 768px) {
  .cfg-grade { grid-template-columns: 1fr; }
  .cfg-dl { grid-template-columns: 1fr; gap: 2px; }
  .cfg-dl dd { text-align: left; margin-bottom: 8px; }
}