/* Tokens oficiais compartilhados por todas as superfícies — TEMA CLARO
   Financiei: página #EDF3F7, card #FFFFFF, tinta #212529, laranja #E76629,
   roxo #8470B2. Sem sombra pesada: o site é plano. */
:root {
  --bg-page: #edf3f7;
  --bg-panel: #ffffff;
  --bg-elevated: #ffffff;
  --bg-input: #ffffff;
  --border-subtle: rgba(35, 30, 61, .10);
  --border-strong: rgba(35, 30, 61, .18);
  --text-primary: #212529;
  --text-secondary: #5c6470;
  --text-muted: #626972;
  --accent-gold: #e76629;
  --accent-gold-soft: #c4541f;
  --positive: #1a7f4f;
  --warning: #a86a12;
  --danger: #c1303f;
  --info-neutral: #6f5d9d;
  --hover-surface: #f2f6f9;
  --focus-ring: 0 0 0 2px rgba(231, 102, 41, .38);
  --overlay: rgba(35, 30, 61, .42);
  --skeleton: #e7ecf1;
  --radius-panel: 12px;
  --shadow-panel: 0 2px 12px rgba(35, 30, 61, .07);
  --bg: var(--bg-page);
  --bg-panel-2: #f8fafc;
  --bg-panel-3: #eef2f6;
  --border: #dce3ea;
  --border-soft: var(--border-subtle);
  --border-hair: rgba(35, 30, 61, .06);
  --text: var(--text-primary);
  --text-dim: var(--text-secondary);
  --text-dim-2: var(--text-muted);
  --gold: var(--accent-gold);
  --gold-soft: var(--accent-gold-soft);
  --green: var(--positive);
  --amber: var(--warning);
  --red: var(--danger);
  --warn: var(--warning);
  --ring: var(--focus-ring);
}

html { color-scheme: light; }
html, body { background: var(--bg-page); color: var(--text-primary); }
body { overflow-x: hidden; }
::selection { background: rgba(231, 102, 41, .32); color: var(--text-primary); }
* { scrollbar-color: #f9fbfc var(--bg-page); }
input, select, textarea, button { accent-color: var(--accent-gold); }
select, option { background: var(--bg-input); color: var(--text-primary); }
input[type="date"]::-webkit-calendar-picker-indicator { filter: sepia(.7) saturate(.7) brightness(1.35); cursor: pointer; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-text-fill-color: var(--text-primary); box-shadow: 0 0 0 1000px var(--bg-input) inset !important; caret-color: var(--text-primary); }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { border-color: var(--accent-gold) !important; outline: none !important; box-shadow: var(--focus-ring) !important; }
.modal-overlay, .drawer-overlay { background: var(--overlay) !important; }
/* Abertura sobre o roxo institucional #231E3D — é o único fundo autorizado
   para o logo oficial branco da Financiei (assets/brands/financiei/README). */
#entrada-trino { background: var(--financiei-fundo) !important; }
#entrada-trino::before, #entrada-trino::after { background: none !important; box-shadow: none !important; }
#entrada-trino .entrada-logo {
  display: block; width: min(280px, 62vw); height: auto; margin: 0 auto 22px;
  filter: none !important;
}
#entrada-trino .entrada-marca, #entrada-trino .entrada-sub { color: #ffffff !important; text-shadow: none !important; }
#entrada-trino .entrada-sub { color: var(--financiei-roxo-300) !important; }
#entrada-trino .entrada-linha { background: var(--financiei-laranja-500) !important; box-shadow: none !important; }
#entrada-trino .entrada-logo { animation: entradaTri .28s ease both !important; }
@media (prefers-reduced-motion: reduce) { #entrada-trino .entrada-logo { animation: none !important; } }
#entrada-trino .entrada-marca { animation: entradaFade .22s ease .1s both !important; }
#entrada-trino .entrada-sub { animation: entradaFade .22s ease .18s both !important; }
#entrada-trino .entrada-linha { animation: entradaLinha .24s ease .25s forwards !important; }
header.topbar .brand .subtitle { color: #444a54; opacity: 1; }
.filtros-avancados-toggle { color: #646b75; }
.oportunidades-labels { color: #626972; }
.oportunidades-rodape { color: #676f79; }
.oportunidade-row.incompativel { opacity: 1; filter: saturate(.35); background: rgba(35, 30, 61, 0.018); }
.dashboard-root { width: 100%; max-width: 1680px; margin: 0 auto; padding: 28px 30px 40px; color: var(--text-primary); }
.dashboard-header { display: flex; align-items: flex-end; justify-content: space-between; margin: 0 0 22px; padding: 0; border: 0; }
.dashboard-header h2, .import-simple-head h2 { margin: 3px 0 0; color: var(--text-primary); font-family: Georgia,"Times New Roman",serif; font-size: 30px; font-weight: 500; letter-spacing: -.02em; text-transform: none; }
.dashboard-header p, .import-simple-head p { margin: 7px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }
.page-eyebrow { color: var(--accent-gold); font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.ux-field { display: grid; min-width: 0; gap: 6px; }
.ux-field > label { position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; color: var(--text-secondary) !important; font-size: 11px !important; font-weight: 650; white-space: normal !important; }
.ux-field input, .ux-field select, .drawer-refined input, .drawer-refined select, .drawer-refined textarea,
.dash-filter-bar input, .dash-filter-bar select, .operations-filters-refined input, .operations-filters-refined select {
  width: 100%; min-height: 40px; padding: 0 11px; border: 1px solid var(--border-subtle); border-radius: 7px; background: var(--bg-input); color: var(--text-primary); font-size: 12px;
}
textarea { padding-top: 10px !important; }
.btn { min-height: 40px; border-radius: 7px; font-size: 12px; font-weight: 700; }
.btn.primary { border-color: var(--accent-gold); background: var(--accent-gold); color: #e7edf2; }
.btn.secondary { border-color: var(--border-strong); background: transparent; color: var(--text-primary); }
.btn.secondary:hover { border-color: rgba(231, 102, 41, .5); background: rgba(231, 102, 41, .06); }

/* Catálogo e filtros */
#filtros .filtros-principais { grid-template-columns: minmax(260px,1fr) 150px 120px 150px; align-items: end; }
#filtros .filtros-principais .ux-field > label { display: none; }
#filtros .filtros-avancados { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px 10px; padding: 14px; }
#filtros .filtros-avancados .filtros-avancados-acoes { display: flex; grid-column: -3/-1; align-items: end; justify-content: flex-end; gap: 8px; }
#filtros .filtros-avancados-acoes .btn { min-width: 118px; }
#filtros .filtros-ativos { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
#filtros .filtro-chip { min-height: 28px; }

/* Painel da carta: hierarquia legível em apresentação. */
.operacao-cabecalho { padding: 20px 20px 17px; }
.operacao-kicker { font-size: 12px; letter-spacing: .04em; }
.operacao-cabecalho h2 { font-size: 24px; }
.operacao-modo { min-height: 25px; margin-top: 10px; padding: 5px 9px; font-size: 11px; }
.operacao-credito-total small { font-size: 11px; }
.operacao-credito-total strong { color: var(--text-primary); font-size: 24px; }
.operacao-remover { min-height: 38px; margin-top: 10px !important; padding: 0 12px !important; border: 1px solid var(--border-strong) !important; border-radius: 7px; background: transparent !important; color: var(--text-primary) !important; font-size: 11px !important; }
.operacao-remover::before { content: "×"; margin-right: 6px; color: var(--text-secondary); font-size: 16px; }
.operacao-remover:hover, .operacao-remover:focus-visible { border-color: var(--danger) !important; color: #292c32 !important; outline: 2px solid rgba(144, 42, 55, .2); }
.operacao-metricas { padding: 20px; }
.operacao-metrica { padding-right: 14px; padding-left: 14px; }
.operacao-metrica span, .operacao-secundarios span { margin-bottom: 7px; font-size: 11px; letter-spacing: .07em; }
.operacao-metrica strong { overflow: visible; font-size: 18px; letter-spacing: -.02em; text-overflow: clip; }
.operacao-metrica small { margin-top: 6px; font-size: 12px; }
.operacao-secundarios { margin: 0 20px 16px; }
.operacao-secundarios > div { padding: 12px 10px; }
.operacao-secundarios span { font-size: 10px; }
.operacao-secundarios strong { overflow: visible; font-size: 13px; line-height: 1.25; text-overflow: clip; white-space: normal; }
.operacao-tabs { gap: 24px; padding: 0 20px; }
.operacao-tabs button { height: 45px; font-size: 13px; cursor: pointer; }
.operacao-tabs button:hover { color: var(--text-primary); }
.operacao-tab-corpo { padding: 18px 20px 20px; }
.operacao-resumo-grid { gap: 4px 24px; }
.operacao-resumo-linha { padding: 9px 0; font-size: 12px; }
.operacao-resumo-linha strong { max-width: 64%; overflow: visible; font-size: 13px; line-height: 1.3; text-overflow: clip; white-space: normal; }
.operacao-custos-resumo > div { padding: 12px; }
.operacao-custos-resumo span { font-size: 10px; }
.operacao-custos-resumo strong { font-size: 14px; }
.operacao-fluxo-linha { padding: 12px; font-size: 13px; }
.operacao-fluxo-resumo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.operacao-fluxo-resumo .ux-field { padding: 12px; border: 1px solid var(--border-subtle); border-radius: 7px; }
.operacao-fluxo-resumo strong { font-size: 14px; }
.operacao-comissao-refinada { gap: 0; }
.operacao-comissao-refinada > label { min-height: 48px; font-size: 12px; }
.operacao-comissao-refinada > label select { min-height: 38px; font-size: 12px; }
.operacao-comissao-refinada .operacao-resumo-linha strong { font-size: 15px; }

/* Dashboard executivo */
.dash-filter-bar { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr auto; align-items: end; gap: 10px; margin-bottom: 18px; padding: 13px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--bg-panel); }
.dash-filter-clear { min-width: 84px; }
.exec-kpis { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); overflow: hidden; margin-bottom: 16px; border: 1px solid var(--border-subtle); border-radius: var(--radius-panel); background: var(--bg-panel); box-shadow: var(--shadow-panel); }
.exec-kpi { min-width: 0; padding: 19px; border-left: 1px solid var(--border-subtle); }
.exec-kpi:first-child { border-left: 0; }
.exec-kpi span { display: block; margin-bottom: 9px; color: var(--text-secondary); font-size: 11px; }
.exec-kpi strong { display: block; overflow: hidden; font-size: clamp(18px,1.55vw,25px); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.exec-kpi.positive strong { color: var(--positive); }
.exec-panel { min-width: 0; padding: 18px; border: 1px solid var(--border-subtle); border-radius: var(--radius-panel); background: var(--bg-panel); }
.exec-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.exec-panel-head h3 { margin: 0; color: var(--text-primary); font-family: Georgia,"Times New Roman",serif; font-size: 18px; font-weight: 500; text-transform: none; }
.exec-panel-head span { color: var(--text-muted); font-size: 11px; }
.exec-funnel { margin-bottom: 16px; }
.exec-funnel-list { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.exec-funnel-list > button { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-elevated); color: var(--text-primary); text-align: left; }
.exec-funnel-list button > span { color: var(--text-secondary); font-size: 12px; }
.exec-funnel-list button > strong { font-size: 18px; }
.exec-funnel-track { grid-column: 1/-1; height: 4px; overflow: hidden; border-radius: 9px; background: rgba(35, 30, 61, 0.075); }
.exec-funnel-track i { display: block; height: 100%; background: var(--accent-gold); }
.exec-funnel-track i.reservas { background: #bf6237; }
.exec-funnel-track i.vendidas { background: var(--positive); }
.exec-funnel-track i.perdidas { background: var(--danger); }
.exec-performance { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.ranking-linha { min-height: 42px; }
.ranking-fill { background: var(--accent-gold); }
.exec-action-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.exec-action-list button { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-elevated); color: var(--text-primary); text-align: left; }
.exec-action-list button span { color: var(--text-secondary); font-size: 12px; }
.exec-action-list button b { grid-row: 1/3; grid-column: 2; align-self: center; color: var(--accent-gold); font-size: 11px; }
.exec-empty { padding: 20px; color: var(--text-secondary); font-size: 13px; text-align: center; }

/* Importação simples */
.import-simple-page { max-width: 1080px; padding-top: 46px; }
.import-simple-head { max-width: 720px; margin: 0 auto 26px; text-align: center; }
.saturday-automation-card {
  width: min(100%, 860px);
  margin: 0 auto 18px;
  padding: 20px;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: radial-gradient(circle at 100% 0,rgba(231, 102, 41, .10),transparent 38%),var(--bg-panel);
  color: var(--text-primary);
  box-shadow: var(--shadow-panel);
}
.saturday-automation-top { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:13px; }
.saturday-automation-icon { width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(231, 102, 41, .55); border-radius:12px; color:var(--accent-gold); }
.saturday-automation-kicker { display:block; margin-bottom:3px; color:var(--accent-gold); font-size:10px; font-weight:800; letter-spacing:.14em; }
.saturday-automation-card h3 { margin:0; font-size:17px; }
.saturday-automation-badge { padding:7px 10px; border:1px solid var(--border-subtle); border-radius:999px; color:#e76427; background:rgba(231, 102, 41, .07); font-size:11px; white-space:nowrap; }
.saturday-automation-badge.ready { border-color:rgba(35, 111, 75, .45); color:#24895a; background:rgba(35, 111, 75, .08); }
.saturday-automation-detail { margin:16px 0; color:var(--text-secondary); font-size:13px; line-height:1.55; }
.saturday-automation-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:9px; margin-bottom:14px; }
.saturday-automation-flow>div { min-height:56px; padding:11px; border:1px solid var(--border-subtle); border-radius:10px; background:rgba(35, 30, 61, 0.027); }
.saturday-automation-flow b,.saturday-automation-flow span { display:block; }
.saturday-automation-flow b { margin-bottom:5px; color:var(--accent-gold); font-size:10px; }
.saturday-automation-flow span,.saturday-automation-card small { color:var(--text-muted); font-size:11px; line-height:1.4; }
.saturday-automation-flow i { color:var(--accent-gold); font-style:normal; }
.import-upload-card { display: grid; width: min(100%,720px); min-height: 250px; margin: 0 auto; place-items: center; align-content: center; gap: 9px; border: 1px dashed rgba(231, 102, 41, .45); border-radius: 14px; background: var(--bg-panel); color: var(--text-primary); box-shadow: var(--shadow-panel); }
.import-upload-card:hover, .import-upload-card:focus-visible { border-color: var(--accent-gold); background: #e9eff3; outline: none; }
.import-upload-icon { display: grid; width: 48px; height: 48px; margin-bottom: 5px; place-items: center; border: 1px solid rgba(231, 102, 41, .4); border-radius: 50%; color: var(--accent-gold); font-size: 22px; }
.import-upload-card strong { font-family: Georgia,"Times New Roman",serif; font-size: 21px; font-weight: 500; }
.import-upload-card span { color: var(--text-secondary); font-size: 12px; }
.import-upload-card b { margin-top: 8px; padding: 10px 15px; border-radius: 7px; background: var(--accent-gold); color: #e7edf2; font-size: 12px; }
.saturday-automation-badge.warning,.saturday-automation-badge.pending { color:#e76427; }
@media (max-width:680px) {
  .saturday-automation-top { grid-template-columns:auto 1fr; }
  .saturday-automation-badge { grid-column:1/-1; justify-self:start; }
  .saturday-automation-flow { grid-template-columns:1fr; }
  .saturday-automation-flow i { display:none; }
}
.import-reassurance { width: min(100%,720px); margin: 14px auto; padding: 15px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--bg-panel); }
.import-reassurance > strong { display: block; margin-bottom: 11px; font-size: 12px; }
.import-reassurance > div { display: grid; grid-template-columns: repeat(4,1fr); }
.import-reassurance span { color: var(--text-secondary); font-size: 11px; }
.import-reassurance span b { margin-right: 6px; color: var(--accent-gold); }
.import-last-result { width: min(100%,900px); margin: 18px auto; padding: 18px; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--bg-panel); }
.import-last-result > div:first-child { display: flex; align-items: center; gap: 10px; }
.import-last-result small { display: block; margin-top: 3px; color: var(--text-secondary); }
.positive-dot { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: rgba(43, 130, 90, .1); color: var(--positive); }
.import-result-metrics { display: grid; grid-template-columns: repeat(5,1fr); margin: 16px 0; border-block: 1px solid var(--border-subtle); }
.import-result-metrics > div { padding: 13px 9px; border-left: 1px solid var(--border-subtle); }
.import-result-metrics > div:first-child { border-left: 0; }
.import-result-metrics span { display: block; color: var(--text-secondary); font-size: 10px; }
.import-result-metrics strong { display: block; margin-top: 5px; font-size: 16px; }
.import-result-actions { display: flex; justify-content: flex-end; gap: 8px; }
.import-technical-link { width: min(100%,900px); margin: 14px auto; color: var(--text-muted); font-size: 11px; }
.import-technical-link summary { cursor: pointer; }

/* Funil */
.operations-filters-refined { display: grid; grid-template-columns: minmax(220px,1.5fr) repeat(4,minmax(130px,1fr)); gap: 9px; margin-bottom: 16px; padding: 13px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--bg-panel); }
.kanban-refined { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.kanban-refined .kanban-col { min-width: 0; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--bg-panel); }
.kanban-refined .kanban-col-cab { min-height: 58px; padding: 12px; border-bottom: 1px solid var(--border-subtle); }
.kanban-refined .kanban-col-cab > strong { color: var(--text-secondary); font-size: 11px; }
.kanban-refined .kanban-col-titulo b { display: inline-grid; min-width: 23px; height: 23px; margin-left: 7px; place-items: center; border-radius: 99px; background: rgba(35, 30, 61, 0.09); font-size: 11px; }
.kanban-refined .kanban-col-corpo { min-height: 280px; padding: 8px; }
.kanban-refined .kanban-card { padding: 13px; border: 1px solid var(--border-subtle); border-left: 2px solid rgba(231, 102, 41, .5); border-radius: 8px; background: var(--bg-elevated); }
.kanban-refined .kanban-card-credito { margin: 7px 0; font-size: 19px; }
.kanban-refined .kanban-card-l3 { gap: 5px; }
.kanban-refined .kanban-card-proxima { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: 11px; }
.kanban-refined .vendida .kanban-card { border-left-color: var(--positive); }
.kanban-refined .perdida .kanban-card { border-left-color: rgba(144, 42, 55, .7); opacity: .8; }

/* Drawer progressivo */
.drawer-refined { width: min(620px,100vw); background: var(--bg-page); }
.drawer-refined-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 22px; border-bottom: 1px solid var(--border-subtle); }
.drawer-refined-head h2 { margin: 5px 0; font-family: Georgia,"Times New Roman",serif; font-size: 25px; font-weight: 500; }
.drawer-refined-head > div:first-child > strong { font-size: 22px; }
.drawer-refined-head > div:last-child { display: flex; align-items: center; gap: 9px; }
.drawer-close { width: 40px; height: 40px; padding: 0; border: 1px solid var(--border-subtle); border-radius: 7px; background: transparent; color: var(--text-primary); font-size: 22px; }
.drawer-next-action { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; margin: 16px 22px; padding: 15px; border: 1px solid rgba(231, 102, 41, .28); border-radius: 9px; background: rgba(231, 102, 41, .045); }
.drawer-next-action span { display: block; margin-bottom: 5px; color: var(--accent-gold); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.drawer-next-action strong { display: block; font-size: 14px; }
.drawer-next-action small { display: block; margin-top: 5px; color: var(--text-secondary); font-size: 11px; }
.drawer-tabs { display: flex; gap: 24px; padding: 0 22px; border-bottom: 1px solid var(--border-subtle); }
.drawer-tabs button { position: relative; height: 44px; padding: 0; border: 0; background: transparent; color: var(--text-secondary); font-size: 13px; cursor: pointer; }
.drawer-tabs button:hover { color: var(--text-primary); }
.drawer-tabs button.active { color: var(--text-primary); }
.drawer-tabs button.active::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--accent-gold); }
.drawer-refined-body { padding: 20px 22px 28px; }
.drawer-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.drawer-summary-grid > div { padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.drawer-summary-grid span { display: block; margin-bottom: 5px; color: var(--text-secondary); font-size: 10px; }
.drawer-summary-grid strong { display: block; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.drawer-status-action { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 9px; margin-top: 18px; }
.drawer-task-list { display: grid; gap: 8px; margin-bottom: 14px; }
.drawer-task-list > label { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--bg-panel); }
.drawer-task-list label span { display: block; margin-top: 4px; color: var(--text-secondary); font-size: 11px; }
.drawer-task-list label.done { opacity: .55; }
.drawer-task-list label.done strong { text-decoration: line-through; }
.drawer-task-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; border: 1px solid var(--border-subtle); border-radius: 9px; background: var(--bg-panel); }
.drawer-task-form .wide, .drawer-form-actions { grid-column: 1/-1; }
.drawer-form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.drawer-history { display: grid; gap: 0; }
.drawer-history > div { display: grid; grid-template-columns: 115px 1fr; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
.drawer-history time { grid-row: 1/3; color: var(--text-muted); font-size: 10px; }
.drawer-history strong { font-size: 12px; }
.drawer-history span { color: var(--text-secondary); font-size: 11px; }
.drawer-note-form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px; margin-top: 16px; }

/* Dashboard funcional */
.dash-custom-period { display: grid; grid-template-columns: 180px 180px auto 1fr; align-items: end; gap: 10px; margin: -8px 0 16px; padding: 12px 13px; border: 1px solid var(--border-subtle); border-radius: 9px; background: var(--bg-panel); }
.dash-period-error { align-self: center; color: #363a42; font-size: 12px; }
.dashboard-date-rule { margin: -4px 0 16px; color: var(--text-muted); font-size: 10px; line-height: 1.5; }
.exec-charts { align-items: stretch; }
.exec-chart-panel { min-height: 300px; }
.credit-bars { display: flex; align-items: stretch; gap: 8px; height: 215px; padding-top: 14px; overflow-x: auto; }
.credit-bar-item { display: grid; grid-template-rows: 22px 1fr 22px; flex: 1 0 52px; min-width: 52px; align-items: end; text-align: center; }
.credit-bar-item > strong { overflow: hidden; color: var(--text-secondary); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.credit-bar-item > span { overflow: hidden; color: var(--text-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.credit-bar-track { display: flex; height: 158px; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--border-subtle); background: repeating-linear-gradient(to top, transparent 0 38px, rgba(35, 30, 61, 0.0525) 39px); }
.credit-bar-track i { display: block; width: min(30px,70%); min-height: 6px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg,var(--accent-gold-soft),var(--accent-gold)); }
.commission-bars { display: grid; gap: 14px; padding-top: 10px; }
.commission-bar-row { display: grid; grid-template-columns: 110px minmax(90px,1fr) 98px 48px; align-items: center; gap: 10px; }
.commission-bar-row > span { color: var(--text-secondary); font-size: 11px; }
.commission-bar-row > strong { font-size: 11px; text-align: right; }
.commission-bar-row > small { color: var(--text-muted); font-size: 10px; text-align: right; }
.commission-bar-track { height: 8px; overflow: hidden; border-radius: 99px; background: rgba(35, 30, 61, 0.075); }
.commission-bar-track i { display: block; height: 100%; border-radius: inherit; background: var(--accent-gold); }

/* Comissão personalizada */
.custom-commission-builder { display: grid; gap: 7px; margin: 8px 0 10px; padding: 10px; border: 1px solid rgba(231, 102, 41, .24); border-radius: 9px; background: rgba(231, 102, 41, .035); }
.custom-participants { display: grid; gap: 8px; }
.custom-participant-row { display: grid; grid-template-columns: minmax(115px,1fr) 94px auto 110px auto; align-items: center; gap: 7px; padding-bottom: 5px; border-bottom: 1px solid var(--border-subtle); }
.custom-participant-name { font-size: 12px; font-weight: 700; }
.custom-participant-row > input[type="text"] { min-width: 0; }
.custom-percent-field { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px; }
.custom-percent-field input { min-width: 0; text-align: right; }
.custom-percent-field span, .custom-equals { color: var(--text-muted); font-size: 11px; }
.custom-participant-row > strong { font-size: 12px; text-align: right; }
.custom-remove { padding: 5px 0; border: 0; background: transparent; color: #a63040; font-size: 10px; }
.custom-add-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.custom-credbenz { display: flex !important; align-items: center; gap: 9px; color: var(--text-secondary) !important; font-size: 11px !important; }
.custom-credbenz input { width: 17px !important; min-height: 17px !important; }
.custom-base-note { margin: 0; color: var(--text-muted); font-size: 10px; }
.custom-commission-totals { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--border-subtle); border-radius: 7px; }
.custom-commission-totals > div { min-width: 0; padding: 8px; border-right: 1px solid var(--border-subtle); }
.custom-commission-totals > div:last-child { border-right: 0; }
.custom-commission-totals span { display: block; color: var(--text-secondary); font-size: 9px; }
.custom-commission-totals strong { display: block; margin-top: 5px; font-size: 13px; }
.custom-commission-simple { gap: 12px; padding: 14px; background: linear-gradient(145deg,rgba(231,102,41,.055),rgba(255,255,255,.72)); }
.custom-commission-intro { display: grid; grid-template-columns: 1fr; gap: 4px; }
.custom-commission-intro strong { color: var(--text-primary); font-size: 15px; }
.custom-commission-intro p { max-width: 410px; margin: 4px 0 0; color: var(--text-secondary); font-size: 10.5px; line-height: 1.45; }
.custom-commission-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.custom-commission-controls:not(.has-repass) { grid-template-columns: 1.2fr 1fr; }
.custom-commission-controls.has-repass { grid-template-columns: 1fr 1fr; }
.custom-commission-controls.has-repass > .custom-mode-field { grid-column: 1 / -1; grid-template-columns: 145px minmax(0,1fr); }
.custom-commission-controls > label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; padding: 10px; border: 1px solid var(--border-subtle); border-radius: 8px; background: #fff; }
.custom-commission-controls > label > span { color: var(--text-primary); font-size: 11px; font-weight: 750; }
.custom-commission-controls > label > small { grid-column: 1/-1; color: var(--text-muted); font-size: 9px; }
.custom-commission-controls > label.custom-mode-field { grid-template-columns: 1fr; }
.custom-mode-field select { width: 100%; min-width: 0; }
.custom-percent-input { display: grid; grid-template-columns: 58px auto; align-items: center; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 7px; }
.custom-percent-input input { width: 58px; min-height: 34px; padding: 6px 4px 6px 9px; border: 0; background: transparent; color: var(--text-primary); font-size: 14px; font-weight: 800; text-align: right; }
.custom-percent-input b { padding: 0 8px 0 4px; color: var(--accent-gold); font-size: 12px; }
.custom-commission-alert { min-height: 0; margin: -5px 0 0; color: var(--danger); font-size: 9px; }
.custom-commission-alert:empty { display: none; }
.custom-base-explainer { display: grid; gap: 4px; padding: 10px 12px; border-left: 3px solid var(--positive); border-radius: 7px; background: rgba(43,131,90,.055); }
.custom-base-explainer.no-base { border-left-color: var(--accent-gold); background: rgba(231,102,41,.045); }
.custom-base-explainer > div { display: flex; justify-content: space-between; gap: 12px; color: var(--text-secondary); font-size: 10px; }
.custom-base-explainer strong { color: var(--text-primary); }
.custom-base-explainer small { color: var(--text-muted); font-size: 9px; }
.custom-commission-impact { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
.custom-impact { min-width: 0; padding: 10px; border: 1px solid var(--border-subtle); border-radius: 8px; background: #fff; }
.custom-impact span, .custom-impact small { display: block; color: var(--text-muted); font-size: 8.5px; }
.custom-impact > span { min-height: 21px; line-height: 1.2; }
.custom-impact small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-impact strong { display: block; margin: 5px 0 3px; color: var(--text-primary); font-size: 16px; }
.custom-impact.trino strong { color: var(--positive); }
.custom-impact.partner strong { color: #5f4aaa; }
.custom-impact.markup strong { color: var(--accent-gold); }
.custom-commission-equation { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px; border-radius: 8px; background: rgba(35,30,61,.045); color: var(--text-secondary); font-size: 10px; }
.custom-commission-equation strong { color: var(--text-primary); font-size: 12px; }
.custom-commission-equation i { color: var(--accent-gold); font-style: normal; font-weight: 850; }
.custom-commission-equation .custom-no-repass { margin-left: 5px; color: var(--text-muted); font-style: italic; }
.custom-commission-final { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--border-subtle); }
.custom-commission-final > div { padding: 11px; background: #fff; }
.custom-commission-final span { display: block; color: var(--text-secondary); font-size: 9px; }
.custom-commission-final strong { display: block; margin-top: 5px; color: var(--text-primary); font-size: 15px; }
.operacao-metrica-fluxo strong { font-size: 15px; }
.operacao-metrica-fluxo small { line-height: 1.35; white-space: normal; }

/* Importador mínimo por escopo */
.import-simple-page { padding-top: 70px; }
.import-simple-modal { width: min(700px,calc(100vw - 32px)); min-height: 440px; padding: 22px; border-color: var(--border-strong); background: var(--bg-panel); }
.import-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.import-modal-head h3 { margin: 0; font-family: Georgia,"Times New Roman",serif; font-size: 24px; font-weight: 500; }
.import-simple-modal .import-upload-card { width: 100%; min-height: 300px; }
.import-upload-card.dragover { border-color: var(--accent-gold); background: rgba(231, 102, 41, .06); }
.import-state-card { display: grid; min-height: 380px; place-items: center; align-content: center; gap: 12px; text-align: center; }
.import-state-card h3 { margin: 0; font-family: Georgia,"Times New Roman",serif; font-size: 25px; font-weight: 500; }
.import-state-card p { max-width: 520px; margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.55; }
.import-state-icon { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; color: var(--danger); font-size: 20px; }
.import-state-icon.gold { color: var(--accent-gold); }
.import-spinner { width: 34px; height: 34px; border: 2px solid rgba(231, 102, 41, .18); border-top-color: var(--accent-gold); border-radius: 50%; animation: import-spin .7s linear infinite; }
.import-processing-card .import-progress-track { width: min(420px,80%); height: 5px; background: rgba(35, 30, 61, 0.09); }
.import-processing-card .import-progress-track span { display: block; height: 100%; background: var(--accent-gold); }
/* Escolha "adicionar × substituir" na confirmação da importação. A opção
   marcada precisa ser óbvia: substituir é destrutivo dentro do escopo. */
.import-modo-escolha { display: grid; width: min(540px,100%); gap: 8px; text-align: left; margin: 4px 0 10px; }
.import-modo-opcao { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: 9px; background: var(--bg-elevated); cursor: pointer; }
.import-modo-opcao.ativa { border-color: #e76629; box-shadow: inset 3px 0 #e76629; background: #fff6f1; }
.import-modo-opcao input { margin-top: 3px; accent-color: #e76629; }
.import-modo-opcao span { display: grid; gap: 3px; min-width: 0; }
.import-modo-opcao strong { font-size: 13px; }
.import-modo-opcao small { color: var(--text-secondary); font-size: 11px; line-height: 1.45; }
.import-scope-list { display: grid; width: min(540px,100%); gap: 8px; text-align: left; }
.import-scope-list > div { display: flex; justify-content: space-between; gap: 14px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: 7px; background: var(--bg-elevated); }
.import-scope-list span { color: var(--text-secondary); font-size: 11px; }
.import-preserved-copy { color: var(--positive) !important; }
.import-state-card .modal-actions { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.import-error-friendly .import-technical-link { width: min(520px,100%); text-align: left; }
.import-error-friendly code { display: block; overflow-wrap: anywhere; color: var(--text-muted); font-size: 10px; }
@keyframes import-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .import-spinner { animation-duration: 1.6s; } }

/* Movimento do funil sem deslocamento de layout */
.kanban-refined .kanban-col.reserva .kanban-card { border-left-color: #c76b40; }
.kanban-refined .kanban-col.drag-over { border-color: rgba(231, 102, 41, .58); box-shadow: inset 0 0 0 1px rgba(231, 102, 41, .18); }
.kanban-refined .kanban-col.drag-over .kanban-col-corpo { background: rgba(231, 102, 41, .035); }
.kanban-refined .kanban-col.saving { opacity: .72; }
.kanban-refined .kanban-card.dragging { opacity: .62; transform: rotate(.3deg) scale(.99); }
.wizard-closing-date { display: grid; gap: 6px; margin-top: 12px; color: var(--text-secondary); font-size: 11px; text-align: left; }

@media (max-width: 1280px) {
  header.topbar { display: grid !important; grid-template-columns: 145px minmax(360px,1fr) 250px !important; align-items: center !important; flex-wrap: nowrap !important; }
  header.topbar .brand { grid-row: 1; grid-column: 1; }
  header.topbar .menu-principal { grid-row: 1; grid-column: 2; order: initial !important; width: auto !important; margin: 0 !important; overflow: visible !important; }
  header.topbar #topbar-right { grid-row: 1; grid-column: 3; order: initial !important; width: auto !important; margin: 0 !important; }
  main.layout, main.layout.tem-selecao, main.layout.layout-cheio, body main.layout { grid-template-columns: minmax(0,1.42fr) minmax(400px,1fr) !important; }
  #filtros .filtros-principais { grid-template-columns: minmax(190px,1fr) 112px 92px 126px; }
  .dashboard-root { padding: 22px 20px 32px; }
  .exec-kpi { padding: 15px 12px; }
  .operations-filters-refined { grid-template-columns: 1.3fr repeat(4,1fr); }
  .menu-item:nth-last-child(-n+2) { display: block; }
}

@media (max-width: 1100px) {
  header.topbar { grid-template-columns: 120px minmax(330px,1fr) 230px !important; padding: 0 12px; }
  .menu-principal { gap: 9px; }
  .menu-item { font-size: 10px; }
  #topbar-right .cta-material { padding: 0 9px; }
  main.layout, main.layout.tem-selecao, main.layout.layout-cheio, body main.layout { grid-template-columns: minmax(0,1.25fr) minmax(390px,.9fr) !important; gap: 10px; padding: 10px; }
  #filtros .filtros-principais { grid-template-columns: 1fr 1fr; }
  #filtros .filtros-principais .full { grid-column: 1/-1; }
  #filtros .filtros-avancados { grid-template-columns: repeat(3,1fr); }
  #filtros .filtros-avancados .filtros-avancados-acoes { grid-column: 2/-1; }
  .catalogo-header { min-height: 70px; }
  .operacao-metricas { padding: 16px 14px; }
  .operacao-metrica { padding: 0 8px; }
  .operacao-metrica strong { font-size: 17px; }
  .operacao-credito-total strong { font-size: 20px; }
  .exec-kpis { grid-template-columns: repeat(3,1fr); }
  .exec-kpi:nth-child(4) { border-left: 0; border-top: 1px solid var(--border-subtle); }
  .exec-kpi:nth-child(n+4) { border-top: 1px solid var(--border-subtle); }
  .dash-filter-bar { grid-template-columns: repeat(4,1fr); }
  .dash-filter-clear { grid-column: 4; }
  .dash-custom-period { grid-template-columns: 1fr 1fr auto; }
  .dash-period-error { grid-column: 1/-1; }
  .kanban-refined { gap: 8px; }
  .operations-filters-refined { grid-template-columns: repeat(5,1fr); }
  .kanban-refined .kanban-card { padding: 10px; }
  .kanban-refined .kanban-card-credito { font-size: 16px; }
  .commission-bar-row { grid-template-columns: 90px minmax(70px,1fr) 84px 40px; }
  .custom-participant-row { grid-template-columns: 1fr 84px auto 96px; }
  .custom-remove { grid-column: 1/-1; justify-self: end; }
  .custom-commission-intro { display: grid; }
  .custom-commission-controls, .custom-commission-impact { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   RODADA FINAL — upload clicável, incompatibilidade e reconciliação
   ========================================================================== */
/* Item 3 — toda a área de upload é clicável: cursor de mão em card e filhos */
.import-upload-card, .import-upload-card * { cursor: pointer; }
.import-upload-card {
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.import-upload-card:hover {
  border-color: rgba(231, 102, 41, .8);
  background: #eaf0f4;
  transform: translateY(-1px);
  box-shadow: 0 20px 52px rgba(35, 30, 61, 0.105), 0 0 0 1px rgba(231, 102, 41, .12);
}
.import-upload-card:focus-visible {
  outline: none;
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 3px rgba(196, 84, 31, .32);
}
.import-upload-card.dragover {
  border-style: solid;
  border-color: var(--accent-gold);
  background: rgba(231, 102, 41, .09);
  box-shadow: inset 0 0 0 1px rgba(231, 102, 41, .35), 0 22px 56px rgba(35, 30, 61, 0.112);
  transform: translateY(-1px);
}

/* Item 4 — cartas incompatíveis: apagadas, bloqueadas e explicadas */
.oportunidade-row.incompativel {
  opacity: .5;
  filter: saturate(.6) contrast(.92);
  cursor: not-allowed;
}
.oportunidade-row.incompativel * { cursor: not-allowed; }
.oportunidade-row.incompativel:hover,
.oportunidade-row.incompativel:focus-visible {
  background: transparent;
}
.oportunidade-row.incompativel .oportunidade-check {
  border-color: #fefefe;
  background: #e8eef3;
  opacity: .55;
}
.oportunidade-row.incompativel .oportunidade-codigo { text-decoration: none; }

/* Itens 6 e 21 — reconciliação da importação */
.import-reconciliacao { font-size: 11px !important; }
.import-reconciliacao.ok { color: var(--positive) !important; }
.import-reconciliacao.erro { color: var(--negative, #aa293b) !important; font-weight: 700; }

/* Itens 8-9 — modal "Apresentar ao cliente": só o formato, nada de filtros */
.export-format-modal { width: min(560px, 92vw); padding: 22px 24px 24px; }
.export-format-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.export-format-head h3 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 21px; font-weight: 500; line-height: 1.3; }
.export-format-contexto { margin: 8px 0 18px; color: var(--text-secondary); font-size: 11px; line-height: 1.5; }
.export-metrica-wrap {
  margin: 0 0 14px; padding: 12px;
  border: 1px solid var(--border-subtle); border-radius: 11px;
  background: rgba(35, 30, 61, 0.027);
}
.export-metrica-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.export-metrica-head strong { font-size: 11px; letter-spacing: .04em; }
.export-metrica-head span { color: var(--text-secondary); font-size: 9px; }
.export-metrica-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.export-metrica-opcao {
  padding: 9px 11px; text-align: left; color: var(--text-secondary);
  border: 1px solid var(--border-subtle); border-radius: 8px;
  background: var(--bg-elevated); cursor: pointer;
}
.export-metrica-opcao strong, .export-metrica-opcao span { display: block; }
.export-metrica-opcao strong { color: var(--text-primary); font-size: 12px; }
.export-metrica-opcao span { margin-top: 2px; font-size: 9px; }
.export-metrica-opcao.active {
  border-color: rgba(231, 102, 41, .72);
  background: rgba(231, 102, 41, .1);
  box-shadow: inset 0 0 0 1px rgba(231, 102, 41, .14);
}
.export-metrica-opcao.active strong { color: var(--accent-gold); }
.export-format-opcoes { display: grid; gap: 10px; }
.export-format-opcao {
  display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 16px;
  width: 100%; padding: 16px 18px; text-align: left;
  border: 1px solid var(--border-subtle); border-radius: 11px;
  background: var(--bg-elevated); color: var(--text-primary); cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.export-format-opcao:hover, .export-format-opcao:focus-visible {
  outline: none; border-color: rgba(231, 102, 41, .65); background: #eaf0f4;
  transform: translateY(-1px); box-shadow: 0 14px 34px rgba(35, 30, 61, 0.098);
}
.export-format-icone {
  display: grid; place-items: center; width: 58px; height: 58px;
  border: 1px solid rgba(231, 102, 41, .4); border-radius: 10px;
  background: rgba(231, 102, 41, .08); color: var(--accent-gold);
  font-size: 13px; font-weight: 800; letter-spacing: .08em;
}
.export-format-texto strong { display: block; font-size: 14px; font-weight: 700; }
.export-format-texto span { display: block; margin-top: 3px; color: var(--text-secondary); font-size: 11px; line-height: 1.45; }

/* ==========================================================================
   Itens 13–16 — Dashboard executivo dentro da viewport (sem scroll de página)
   ========================================================================== */
#dashboard-root.dashboard-executivo {
  display: flex; flex-direction: column;
  height: calc(100vh - var(--header-height, 64px));
  overflow: hidden;
  padding: 12px 22px 8px;
  box-sizing: border-box;
}
.dashboard-executivo .dashboard-header { flex: 0 0 auto; margin-bottom: 10px; }
.dashboard-executivo .dashboard-header h2 { margin: 2px 0 0; font-size: 22px; }
.dashboard-executivo .dashboard-header p { margin: 3px 0 0; font-size: 11px; color: var(--text-secondary); }
.dashboard-executivo .dash-filter-bar { flex: 0 0 auto; margin-bottom: 10px; padding: 10px 12px; }
.dashboard-executivo .exec-kpis { flex: 0 0 auto; margin-bottom: 10px; }
.dashboard-executivo .exec-kpi { padding: 12px 14px; }
.exec-row { display: grid; gap: 10px; min-height: 0; flex: 1 1 0; margin-bottom: 10px; }
.exec-row-principal { grid-template-columns: minmax(260px, 1fr) minmax(0, 1.9fr); flex-grow: 1.15; }
.exec-row-secundaria { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); margin-bottom: 6px; }
.exec-row > .exec-panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; margin-bottom: 0; overflow: hidden; padding: 14px 16px; }
.exec-row .exec-panel-head { flex: 0 0 auto; margin-bottom: 10px; }
.exec-row .exec-funnel-list { grid-template-columns: 1fr; flex: 1; min-height: 0; align-content: space-evenly; gap: 8px; }
.exec-row .exec-funnel-list > button { padding: 10px 12px; }
/* gráficos preenchem a área disponível, sem scroll interno */
.exec-row .credit-bars { flex: 1; min-height: 0; height: auto; overflow: hidden; padding-top: 8px; }
.credit-bar-item { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1 1 0; min-width: 0; gap: 5px; }
/* CORREÇÃO (gráfico invisível): com align-items:center o track encolhia para a
   largura do conteúdo, e a barra (70% do track) colapsava para 0px. O track
   precisa ocupar a largura inteira do item para a barra ter base de cálculo. */
.credit-bar-item > .credit-bar-track { align-self: stretch; width: auto; }
.exec-row .commission-bars { flex: 1; min-height: 0; overflow: hidden; align-content: space-evenly; gap: 8px; padding-top: 4px; }
.dashboard-executivo .dashboard-date-rule { flex: 0 0 auto; margin: 0; padding: 2px 0 0; font-size: 9.5px; color: var(--text-muted); }

/* 1366×768 e alturas menores: espaçamentos reduzidos, sem fontes minúsculas */
@media (max-height: 820px) {
  #dashboard-root.dashboard-executivo { padding: 8px 16px 6px; }
  .dashboard-executivo .dashboard-header { margin-bottom: 6px; }
  .dashboard-executivo .dashboard-header h2 { font-size: 19px; }
  .dashboard-executivo .dashboard-header p { display: none; }
  .dashboard-executivo .dash-filter-bar { margin-bottom: 6px; padding: 8px 10px; }
  .dashboard-executivo .exec-kpis { margin-bottom: 6px; }
  .dashboard-executivo .exec-kpi { padding: 9px 12px; }
  .dashboard-executivo .exec-kpi strong { font-size: 16px; }
  .exec-row { gap: 6px; margin-bottom: 6px; }
  .exec-row > .exec-panel { padding: 10px 12px; }
  .exec-row .exec-panel-head { margin-bottom: 6px; }
  .exec-row .exec-funnel-list > button { padding: 7px 10px; }
  .exec-row .exec-funnel-list > button strong { font-size: 15px; }
}

/* abaixo de 1100 px: layout adaptado, scroll permitido, nunca horizontal */
@media (max-width: 1100px) {
  #dashboard-root.dashboard-executivo { height: auto; overflow: visible; }
  .exec-row, .exec-row-principal, .exec-row-secundaria { grid-template-columns: 1fr; flex: none; }
  .exec-row .credit-bars { height: 200px; }
}

/* ==========================================================================
   AJUSTES DE CABEÇALHO E FUNIL
   Escopo estrito: respiro vertical, posição do perfil e menu de ações do card.
   Nenhuma cor, fonte, largura de módulo ou identidade visual é alterada aqui.
   ========================================================================== */

/* ---- 1) Perfil dentro do cabeçalho, à direita, junto de Interno/Comercial --
   O cabeçalho é um grid de 3 colunas (marca · menu · ações). O #auth-user-slot
   era um 4º item e caía numa 2ª linha implícita, flutuando sobre os títulos
   dos módulos. Agora ele vive na MESMA zona direita do #topbar-right. */
.topbar-acoes {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
  height: 100%;
}
.topbar-acoes > #topbar-right.toolbar { flex: 0 1 auto; min-width: 0; }
.topbar-acoes > #auth-user-slot { flex: 0 0 auto; margin-left: 0; }
.topbar-acoes > .perfil-wrap, .topbar-acoes .perfil-wrap { margin-left: 0; }

/* ---- 2) Respiro entre o cabeçalho e o conteúdo de cada módulo ------------
   Mesma folga em Catálogo, Operações, Dashboard, Importações e Ajustes.
   A altura do cabeçalho não muda; só o início do conteúdo desce. */
:root { --app-content-top: 28px; }

/* box-sizing: border-box — a altura total continua a mesma; só o conteúdo
   começa mais abaixo. Nenhuma tela ganha rolagem nova por causa disso. */
main.layout,
main.layout.tem-selecao,
main.layout.layout-cheio,
body main.layout { padding-top: var(--app-content-top); }
.dashboard-root { padding-top: var(--app-content-top); }
#dashboard-root.dashboard-executivo { padding-top: var(--app-content-top); }
/* a barra de pesquisa do catálogo deixa de parecer colada no menu */
#filtros { padding-top: 16px; }
.operations-filters-refined { margin-top: 4px; }

@media (max-width: 1280px) {
  :root { --app-content-top: 22px; }
}
@media (max-width: 1100px) {
  :root { --app-content-top: 18px; }
  main.layout, main.layout.tem-selecao, main.layout.layout-cheio, body main.layout {
    padding: var(--app-content-top) 10px 10px;
  }
}
@media (max-height: 820px) {
  :root { --app-content-top: 18px; }
  #dashboard-root.dashboard-executivo { padding-top: var(--app-content-top); }
}

/* ---- Conflito com operação anterior ------------------------------------
   A carta continua no estoque e na listagem padrão (não é "indisponível"),
   apenas travada para venda. Por isso NÃO reusa o esmaecimento de
   .incompativel: precisa ser legível e clicável para abrir o motivo. */
.oportunidade-row.conflito-venda { opacity: 1; filter: none; cursor: pointer; }
.oportunidade-row.conflito-venda * { cursor: pointer; }
.oportunidade-row.conflito-venda::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 2px;
  background: var(--accent-gold, #c4541f);
}
.oportunidade-row.conflito-venda .oportunidade-check {
  border-color: rgba(196, 84, 31, .55); background: #e8eef3; opacity: .8;
}
.selo-conflito-venda {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 7px;
  border: 1px solid rgba(196, 84, 31, .45);
  border-radius: 99px;
  background: rgba(196, 84, 31, .10);
  color: var(--accent-gold, #c4541f) !important;
  font-size: 8.5px !important;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* ---- 3) Menu de três pontos no card do funil ---------------------------- */
.kanban-card { position: relative; }
.kanban-card-l1 { align-items: center; }
.kanban-card-menu { position: relative; flex: 0 0 auto; margin-left: 2px; line-height: 0; }
.kanban-card-menu-botao {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted, #6f7782);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .14s ease, background .14s ease, color .14s ease;
}
.kanban-card:hover .kanban-card-menu-botao,
.kanban-card:focus-within .kanban-card-menu-botao,
.kanban-card-menu.aberto .kanban-card-menu-botao { opacity: 1; }
.kanban-card-menu-botao:hover { background: rgba(35, 30, 61, 0.09); color: var(--text-primary); }
.kanban-card-menu-botao:focus-visible { outline: 2px solid var(--accent-gold, #c4541f); outline-offset: 1px; opacity: 1; }
/* sem hover (toque): o botão fica sempre visível, apenas discreto */
@media (hover: none) {
  .kanban-card-menu-botao { opacity: .7; }
}
.kanban-card-menu-lista {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  z-index: 60;
  width: max-content;
  min-width: 168px;
  padding: 5px;
  line-height: 1.4;
  border: 1px solid var(--border-subtle, #f5f7f9);
  border-radius: 8px;
  background: var(--bg-elevated, #e9eff3);
  box-shadow: 0 14px 34px rgba(35, 30, 61, 0.1575);
  text-align: left;
}
.kanban-card-menu.abre-acima .kanban-card-menu-lista { top: auto; bottom: calc(100% + 5px); }
.kanban-card-menu-lista[hidden] { display: none !important; }
.kanban-card-menu-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-primary, #2b2f35);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.kanban-card-menu-item:hover { background: rgba(35, 30, 61, 0.09); }
.kanban-card-menu-item:focus-visible { outline: 2px solid var(--accent-gold, #c4541f); outline-offset: -2px; }
.kanban-card-menu-perigo { color: var(--negative, #aa293b); }
.kanban-card-menu-perigo:hover { background: rgba(170, 41, 59, .12); }

/* ==========================================================================
   MOBILE — celular em pé (<= 820px)
   A escada responsiva do projeto parava em 1100px. Abaixo disso a regra
   `minmax(390px,.9fr)` da segunda coluna consumia a largura inteira e o
   catálogo colapsava para 0px: no celular o operador via só o painel de
   operação vazio. Este bloco é o único degrau abaixo de 820px e não altera
   nada acima disso.
   ========================================================================== */
@media (max-width: 820px) {

  /* --- 1. Workspace deixa de ser duas colunas e vira pilha ---------------- */
  main.layout,
  main.layout.tem-selecao,
  main.layout.layout-cheio,
  body main.layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px;
    padding: 12px 10px 24px;
    height: auto;
    overflow: visible;
  }
  main.layout.layout-cheio > section.panel:last-child { display: block; }

  /* o painel de operação não pode ficar preso: no celular ele rola junto */
  main.layout > section.panel:last-child {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .panel-catalogo .table-wrap { height: auto; max-height: none; }

  /* --- 2. Cabeçalho em duas faixas; menu rola na horizontal --------------- */
  header.topbar {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto;
    align-items: center !important;
    gap: 6px 10px;
    padding: 8px 12px !important;
  }
  header.topbar .brand { grid-row: 1; grid-column: 1; gap: 9px; }
  header.topbar .brand h1 { font-size: 13px; }
  header.topbar .brand .subtitle { font-size: 8px; letter-spacing: .1em; }
  header.topbar .topbar-acoes { grid-row: 1; grid-column: 2; }

  header.topbar .menu-principal {
    grid-row: 2;
    grid-column: 1 / -1;
    width: 100% !important;
    margin: 0 !important;
    gap: 4px;
    overflow-x: auto !important;
    overflow-y: hidden;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    align-self: center !important;
    align-items: center;
    justify-content: flex-start !important;
    min-height: 44px;
    height: auto;
  }
  header.topbar .menu-principal::-webkit-scrollbar { display: none; }
  /* tiers maiores escondem os 2 últimos itens; no celular todos voltam */
  .menu-item:nth-last-child(-n+2) { display: block; }
  .menu-item {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 11px;
    font-size: 11px;
    scroll-snap-align: start;
  }

  /* --- 3. Barra de ações do topo não pode estourar ------------------------ */
  .topbar-acoes { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  #topbar-right.toolbar { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  #topbar-right .segmented-control button { min-width: 0; padding: 0 9px; }
  .sync-status { display: none !important; }

  /* --- 4. Linha da carta vira cartão --------------------------------------
     Os rótulos ficavam numa faixa de 5 colunas fixas (485px) acima da lista.
     No celular a faixa some e cada célula carrega o próprio rótulo. */
  .oportunidades-labels { display: none !important; }

  .oportunidades-labels,
  .oportunidade-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 10px;
    row-gap: 8px;
  }
  .oportunidade-row {
    min-height: 0;
    padding: 13px 14px;
    align-items: start;
  }
  .oportunidade-cell.oportunidade-id { grid-column: 1 / -1; }
  .oportunidade-cell strong { font-size: 13px; }
  .oportunidade-cell small { font-size: 9.5px; }
  .oportunidade-cell.oportunidade-taxa { text-align: left; }

  /* rótulo de cada número, já que o cabeçalho da lista some */
  .oportunidade-row > .oportunidade-cell:not(.oportunidade-id)::before {
    display: block;
    margin-bottom: 1px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .62;
  }
  .oportunidade-row > .oportunidade-cell:nth-child(2)::before { content: "Crédito"; }
  .oportunidade-row > .oportunidade-cell:nth-child(3)::before { content: "Entrada-base"; }
  .oportunidade-row > .oportunidade-cell:nth-child(4)::before { content: "Parcela"; }
  .oportunidade-row > .oportunidade-cell:nth-child(5)::before { content: "TIR-base"; }

  .oportunidade-check { min-width: 22px; min-height: 22px; }

  /* --- 5. Filtros e cabeçalho do catálogo em coluna ----------------------- */
  #filtros { padding: 14px 12px; }
  #filtros .filtros,
  #filtros .filtros-principais { grid-template-columns: minmax(0, 1fr) !important; gap: 8px; }
  #filtros .filtros-principais .full { grid-column: 1 / -1; }
  #filtros .filtros-avancados { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #filtros .filtros-avancados .filtros-avancados-acoes { grid-column: 1 / -1; }
  .filtros-rapidos { flex-wrap: wrap; }
  .filtros-avancados-toggle {
    float: none !important;
    margin: 2px 0 0 !important;
    width: 100%;
    text-align: right;
  }

  .catalogo-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    padding: 14px 12px;
  }
  .catalogo-titulo-linha { flex-wrap: wrap; gap: 8px; }
  #segmento-tabs-wrap { width: 100%; }
  .segmento-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .segmento-tabs::-webkit-scrollbar { display: none; }
  .segmento-tabs button { flex: 0 0 auto; min-height: 38px; }

  /* --- 6. Painel de operação --------------------------------------------- */
  .operacao-cabecalho,
  .operacao-metricas,
  .operacao-tab-corpo { padding-right: 14px; padding-left: 14px; }
  .operacao-metricas { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .operacao-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .operacao-tabs::-webkit-scrollbar { display: none; }
  .operacao-tabs button { flex: 0 0 auto; min-height: 40px; }
  .operacao-acoes-aprovadas { grid-template-columns: minmax(0, 1fr) !important; }
  /* faixas de números do painel: 4 e 3 colunas não cabem em 390px */
  .operacao-secundarios { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
  .operacao-custos-resumo,
  .operation-fund-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
  .operacao-custos-resumo > *:last-child { grid-column: 1 / -1; }
  .operacao-fluxo-linha { grid-template-columns: 54px minmax(0, 1fr) !important; }
  .operacao-comissao select { width: 100%; }
  .operacao-acoes-aprovadas .btn { min-height: 44px; }

  /* --- 7. Alvos de toque e telas auxiliares ------------------------------- */
  .btn { min-height: 40px; }
  .dashboard-root { padding: 16px 12px 28px; }
  .dash-grid-2, .dash-grid-3, .dash-cards-comissoes, .kanban,
  .exec-kpis, .drawer-grid, .import-final-grid,
  .dash-filtros-enterprise { grid-template-columns: minmax(0, 1fr) !important; }
  .dash-tabela-wrap, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* filtros de Operações e Dashboard: uma coluna / duas colunas, sem apertar */
  .operations-filters-refined { grid-template-columns: minmax(0, 1fr) !important; gap: 8px; }
  .dash-filtros-linha,
  .dash-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
  /* o botão "Limpar" tem grid-column: 4 fixo; em 2 colunas isso criava
     trilhas implícitas e espremia os selects. Aqui ele volta ao fluxo. */
  .dash-filter-bar > * { grid-column: auto !important; }
  .dash-filter-bar > button { grid-column: 1 / -1 !important; justify-self: stretch; }
  .dash-filtros-linha > *:last-child { grid-column: 1 / -1; }
  .operations-filters-refined label,
  .dash-filtros-linha label,
  .dash-filter-bar label { font-size: 9px; }
  .operations-filters-refined input,
  .operations-filters-refined select,
  .dash-filtros-linha select,
  .dash-filter-bar select,
  .dash-filter-bar input { width: 100%; min-height: 40px; }

  /* modais e gavetas ocupam a tela toda no celular */
  .drawer-refined, .import-modal, .reconciliacao-modal .dash-tabela-wrap {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* celular pequeno em pé */
@media (max-width: 400px) {
  .oportunidade-row { padding: 12px 11px; }
  .oportunidade-cell strong { font-size: 12.5px; }
  header.topbar .brand .subtitle { display: none; }
}

/* Item de menu de página em manutenção: continua apertável e focável, mas
   sinalizado. O clique abre um toast explicando (ver EM_MANUTENCAO em
   ux-refinement.js) em vez de navegar para uma tela que não existe mais. */
.menu-item-manutencao { opacity: .55; }
.menu-item-manutencao::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--trino-warning, #a86a12);
  vertical-align: middle;
}
.menu-item-manutencao:hover,
.menu-item-manutencao:focus-visible { opacity: .85; cursor: help; }

/* ==========================================================================
   FINANCIEI — contraste do tema claro
   O laranja #E76629 sobre branco dá 3,3:1: ótimo como preenchimento e para
   título grande, insuficiente para texto pequeno. Nos rótulos miúdos usamos
   o laranja escuro #C4541F (4,6:1). Regra igual à do site, onde o laranja
   vivo aparece em bloco e em título, não em legenda.
   ========================================================================== */
.catalogo-eyebrow,
.operacao-kicker,
.credito-label,
.oportunidades-labels,
.badge-adm-discreto,
small.hint,
.hint { color: #5f596d; }

/* Contraste AA nos estados ativos pequenos sobre fundos claros. */
.dash-tabs button.active { color: #963a12 !important; }

/* Texto pequeno precisa de contraste 4,5:1; preserva a paleta, em tons mais
   escuros, sem depender de peso ou tamanho para ficar legível. */
.filtros-rapidos button.active,
.oportunidade-codigo,
.operacao-modo { color: #8f3510 !important; }
.oportunidade-taxa strong { color: #226a48 !important; }
.export-stepper b,
.import-reassurance span b,
.operacao-vazia-passos span b { color: #8f3510 !important; }

.catalogo-eyebrow, .operacao-kicker { font-weight: 800; }

/* texto branco sobre preenchimento sólido, como os cards do site */
button.btn.primary,
button.btn.primary:hover,
.painel-acoes .btn.primary { color: #ffffff; }
.operation-fund-head button { color: var(--gold-soft); }

/* ==========================================================================
   FINANCIEI — ROXO #8470B2 COMO ACENTO CO-IGUAL AO LARANJA

   No site a marca opera em DOIS acentos, não um:
     LARANJA #E76629 -> Financiamento de Imóvel (produto/ação principal)
     ROXO    #8470B2 -> Empréstimo Home Equity (segundo produto, navegação,
                        CTA "FALE COM A GENTE", badge "CRÉDITO COM GARANTIA")
     #231E3D          -> faixa escura do rodapé e fundo da logo

   Aqui a mesma lógica: o laranja fica com a ação principal e o catálogo; o
   roxo assume navegação, controles secundários, o painel de operação e o
   segmento Veículo — o "segundo produto" da mesa. E o rodapé vira a faixa
   #231E3D do site.
   ========================================================================== */

/* ---------- 1. Navegação e cabeçalho: roxo ---------- */
.menu-item.active {
  color: var(--financiei-roxo-700) !important;
  border-bottom-color: var(--financiei-roxo-500) !important;
}
.menu-item.active::after { background: var(--financiei-roxo-500) !important; }
.menu-item:hover:not(.active) { color: var(--financiei-roxo-600) !important; }

/* "Interno / Comercial" — o par de modos, como o par de produtos do site */
.segmented-control button.active {
  background: var(--financiei-roxo-600) !important;
  border-color: var(--financiei-roxo-600) !important;
  color: #ffffff !important;
  font-weight: 700;
}
.segmented-control button:not(.active):hover { color: var(--financiei-roxo-600) !important; }

.perfil-avatar {
  background: var(--financiei-roxo-600) !important;
  color: #ffffff !important;
}
.perfil-menu-item:hover { background: var(--roxo-dim) !important; color: var(--financiei-roxo-700) !important; }

/* ---------- 2. Abas de segmento: pílula roxa, como o nav do site ---------- */
.segmento-tabs button.active {
  background: var(--financiei-roxo-600) !important;
  border-color: var(--financiei-roxo-600) !important;
  color: #ffffff !important;
  font-weight: 700;
}
.segmento-tabs button:not(.active):hover {
  background: var(--roxo-dim) !important;
  color: var(--financiei-roxo-700) !important;
}

/* ---------- 3. Painel de operação: o "segundo produto" é roxo ---------- */
.operacao-kicker { color: var(--financiei-roxo-600) !important; }
.operacao-tabs button.active {
  color: var(--financiei-roxo-700) !important;
  border-bottom-color: var(--financiei-roxo-500) !important;
}
.operacao-tabs button.active::after { background: var(--financiei-roxo-500) !important; }
.operacao-secundarios {
  background: var(--roxo-dim) !important;
  border-left: 3px solid var(--financiei-roxo-500);
}
.operacao-metricas { border-top: 2px solid var(--financiei-roxo-300); }

/* ---------- 4. Botão secundário: contorno roxo, como "Veja todos benefícios" ---------- */
button.btn.secondary {
  border-color: var(--financiei-roxo-500) !important;
  color: var(--financiei-roxo-700) !important;
  font-weight: 650;
}
button.btn.secondary:hover {
  background: var(--roxo-dim) !important;
  border-color: var(--financiei-roxo-600) !important;
  color: var(--financiei-roxo-700) !important;
}

/* ---------- 5. Badges por segmento: Imóvel = laranja, Veículo = roxo ----------
   Espelha "FINANCIE SEM SAIR DE CASA" (laranja) e
   "CRÉDITO COM GARANTIA DE IMÓVEL" (roxo) do cabeçalho do site. */
.badge, .pill-neutro, .badge-adm {
  background: var(--roxo-dim);
  border-color: rgba(132, 112, 178, .38);
  color: var(--financiei-roxo-700);
}
.badge.gold, .badge-imovel { background: var(--gold-dim); border-color: rgba(231, 102, 41, .38); color: var(--financiei-laranja-700); }
.badge-veiculo, .badge.info, .badge.roxo { background: var(--roxo-dim); border-color: rgba(132, 112, 178, .38); color: var(--financiei-roxo-700); }

/* ---------- 6. Tabela: cabeçalho e hover em roxo suave ---------- */
.oportunidades-labels {
  background: #f4f1f9;
  color: var(--financiei-roxo-700) !important;
  border-bottom: 1px solid rgba(132, 112, 178, .28);
}
.oportunidade-row:hover { background: var(--roxo-dim) !important; }
.mesa-grid-header { background: #f4f1f9; color: var(--financiei-roxo-700); }

/* ---------- 7. Rodapé: a faixa #231E3D do site ---------- */
footer.rodape {
  margin-top: 20px;
  padding: 18px 24px;
  background: var(--financiei-fundo) !important;
  color: rgba(231, 227, 225, .82) !important;
  border-top: 3px solid var(--financiei-laranja-500);
}
footer.rodape a { color: var(--financiei-roxo-300) !important; }
footer.rodape strong, footer.rodape b { color: #ffffff !important; }

/* ---------- 8. Detalhes ---------- */
a, a:visited { color: var(--financiei-roxo-700); }
a:hover { color: var(--financiei-laranja-600); }
::selection { background: rgba(132, 112, 178, .28); color: var(--financiei-tinta); }
* { scrollbar-color: var(--financiei-roxo-400) transparent; }
::-webkit-scrollbar-thumb { background: var(--financiei-roxo-400); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--financiei-roxo-500); }
.barra-marca, hr.marca {
  border: 0; height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, var(--financiei-laranja-500) 0 45%, var(--financiei-roxo-500) 55% 100%);
}

/* ==========================================================================
   FAIXA #231E3D — "Fundo da logo" da paleta oficial
   O site usa essa cor em bloco: é o fundo do rodapé e a base da marca. Aqui
   ela vira a faixa do cabeçalho, onde a logo mora. Isso dá ao simulador a
   mesma presença de roxo que o site tem, em vez de só detalhes coloridos.
   ========================================================================== */
header.topbar {
  background: var(--financiei-fundo) !important;
  border-bottom: 3px solid var(--financiei-laranja-500) !important;
  box-shadow: none !important;
}
header.topbar .brand h1,
header.topbar h1 { color: #ffffff !important; }

/* Marca oficial Financiei na faixa roxa: o logo substitui o antigo triângulo
   + wordmark em texto. O PNG oficial não é recortado nem recolorido — só
   escalado proporcionalmente (1376x200). O <h1> continua sendo o título da
   página para leitores de tela, via o alt da imagem. */
header.topbar .brand { min-width: 0; }
header.topbar .brand .brand-marca { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
header.topbar .brand .brand-logo {
  display: flex; align-items: center; margin: 0; padding: 0; line-height: 0;
  font-size: 12px; letter-spacing: .18em; /* fallback do alt se o PNG não carregar */
}
header.topbar .brand .brand-logo img {
  display: block; height: 26px; width: auto; max-width: 100%;
}
/* O cabeçalho vira grid com a coluna da marca fixa (145px / 120px). O logo
   acompanha para não estourar a coluna nem empurrar o menu. */
@media (max-width: 1280px) { header.topbar .brand .brand-logo img { height: 20px; } }
@media (max-width: 1100px) { header.topbar .brand .brand-logo img { height: 16px; } }
@media (max-width: 900px)  { header.topbar .brand .brand-logo img { height: 19px; } }
header.topbar .brand .subtitle,
header.topbar .subtitle { color: var(--financiei-roxo-300) !important; opacity: 1 !important; }

/* navegação sobre a faixa escura */
header.topbar .menu-item { color: rgba(231, 227, 225, .72) !important; }
header.topbar .menu-item:hover:not(.active) { color: #ffffff !important; }
header.topbar .menu-item.active {
  color: #ffffff !important;
  border-bottom-color: var(--financiei-laranja-500) !important;
}
header.topbar .menu-item.active::after { background: var(--financiei-laranja-500) !important; }
header.topbar .menu-item-manutencao { color: rgba(231, 227, 225, .40) !important; }

/* controles do topo sobre a faixa escura */
header.topbar .segmented-control {
  background: rgba(231, 227, 225, .10) !important;
  border-color: rgba(231, 227, 225, .22) !important;
}
header.topbar .segmented-control button:not(.active) { color: rgba(231, 227, 225, .88) !important; }
header.topbar .segmented-control button.active {
  background: var(--financiei-roxo-600) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
header.topbar .btn-trino-advisor {
  background: transparent !important;
  border-color: var(--financiei-laranja-500) !important;
  color: #ffffff !important;
}
header.topbar .btn-trino-advisor:hover { background: rgba(231, 102, 41, .22) !important; }
header.topbar .perfil-botao { border-color: rgba(231, 227, 225, .28) !important; }

/* ==========================================================================
   IMPORTAR — duas portas com o mesmo peso: arquivo e texto colado.
   Antes o clique abria o explorador direto e "colar texto" era um link
   discreto. Boa parte das cartas chega escrita à mão no WhatsApp; colar texto
   não é o caminho secundário.
   ========================================================================== */
.import-escolha-origem {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  width: min(100%, 720px);
  margin: 0 auto;
}
.import-escolha-origem .import-upload-card { width: 100%; min-height: 230px; margin: 0; }
.import-simple-modal .import-escolha-origem .import-upload-card { min-height: 240px; }

/* A porta do texto se diferencia da do arquivo sem competir com ela:
   mesma estrutura, borda contínua em vez de tracejada. */
.import-upload-card-texto { border-style: solid; border-color: rgba(90, 79, 138, .35); }
.import-upload-card-texto:hover,
.import-upload-card-texto:focus-visible { border-color: var(--accent-purple, #5a4f8a); }
.import-upload-card-texto b { background: var(--accent-purple, #5a4f8a); }

.import-colar-wrap textarea {
  width: 100%;
  min-height: 220px;
  padding: 12px 14px;
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, .15));
  border-radius: 10px;
  background: var(--bg-panel);
  color: var(--text-primary);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}
.import-colar-wrap textarea:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 1px; }

/* Pré-leitura ao vivo: quantas cartas foram reconhecidas enquanto digita. */
.import-previa-texto {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(90, 79, 138, .07);
  font-size: 12px;
  line-height: 1.5;
}
/* Diretório de fornecedores: leitura rápida à esquerda, regra operacional à direita. */
.supplier-page-head { margin-bottom: 18px; }
.supplier-page-head h2 { margin-bottom: 4px; }
.supplier-layout { display: grid; grid-template-columns: minmax(230px, 290px) minmax(0, 1fr); gap: 18px; align-items: start; }
.supplier-directory, .supplier-profile { background: #fff; border: 1px solid rgba(35,30,61,.13); border-radius: 14px; box-shadow: 0 8px 24px rgba(35,30,61,.055); }
.supplier-directory { padding: 8px; position: sticky; top: 82px; }
.supplier-search-copy { padding: 9px 10px 12px; color: #68717c; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.supplier-search { width: calc(100% - 8px); margin: 0 4px 8px; padding: 9px 10px; border: 1px solid #dfe4e8; border-radius: 8px; background: #f8fafb; color: #252930; font: inherit; }
.supplier-search:focus { outline: 2px solid rgba(231,102,41,.28); border-color: #e76629; }
.supplier-directory-item { width: 100%; border: 0; border-radius: 9px; background: transparent; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 10px; text-align: left; cursor: pointer; color: #252930; }
.supplier-directory-item:hover { background: #f4f7f9; }
.supplier-directory-item.active { background: #fff3ed; box-shadow: inset 3px 0 #e76629; }
.supplier-directory-item span { display: grid; gap: 3px; min-width: 0; }
.supplier-directory-item strong { font-size: 13px; }
.supplier-directory-item small { color: #6b727d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.supplier-directory-item b { min-width: 27px; padding: 4px 6px; border-radius: 999px; background: #edf2f5; font-size: 11px; text-align: center; }
.supplier-profile { padding: 22px; }
.supplier-profile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid #e8ebee; }
.supplier-profile-head h3 { margin: 3px 0 4px; font-family: Georgia, serif; font-size: 27px; }
.supplier-profile-head p { margin: 0; color: #66707b; font-size: 12px; }
.supplier-eyebrow { color: #dc5b21; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.supplier-stock-count { display: grid; min-width: 92px; padding: 10px 13px; background: #edf3f6; border-radius: 10px; text-align: right; }
.supplier-stock-count strong { font-size: 22px; }
.supplier-stock-count span { color: #69727c; font-size: 10px; }
.supplier-rule-highlight { display: grid; gap: 6px; margin: 18px 0; padding: 15px 16px; border: 1px solid #f0c7b4; border-radius: 11px; background: #fff8f4; }
.supplier-rule-highlight strong { font-size: 14px; line-height: 1.45; }
.supplier-rule-highlight small { color: #b84d1d; font-weight: 700; }
.supplier-rule-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #dfe4e8; border-radius: 11px; overflow: hidden; }
.supplier-rule-metrics > div { display: grid; gap: 6px; padding: 13px; border-right: 1px solid #dfe4e8; }
.supplier-rule-metrics > div:last-child { border-right: 0; }
.supplier-rule-metrics span { color: #68717c; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.supplier-rule-metrics strong { font-size: 13px; line-height: 1.35; }
.supplier-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.supplier-info-grid section, .supplier-rules-list, .supplier-pending { padding: 15px; border: 1px solid #e1e5e8; border-radius: 11px; }
.supplier-profile h4 { margin: 0 0 9px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.supplier-profile p { line-height: 1.5; }
.supplier-rules-list { margin-top: 12px; }
.supplier-rules-list ul, .supplier-pending ul { margin: 0; padding-left: 19px; }
.supplier-rules-list li, .supplier-pending li { margin: 7px 0; line-height: 1.45; }
.supplier-pending { margin-top: 12px; border-color: #edbd78; background: #fff9ef; }
.operation-supplier-rule { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 11px 12px; border: 1px solid #e8c7b8; border-radius: 9px; background: #fff8f4; }
.operation-supplier-rule > div { display: grid; gap: 3px; min-width: 0; }
.operation-supplier-rule span { color: #8a4a2d; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.operation-supplier-rule strong { font-size: 11px; line-height: 1.4; }
@media (max-width: 900px) {
  .supplier-layout { grid-template-columns: 1fr; }
  .supplier-directory { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .supplier-search-copy, .supplier-search { grid-column: 1 / -1; }
  .supplier-rule-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .supplier-rule-metrics > div:nth-child(2) { border-right: 0; }
  .supplier-rule-metrics > div:nth-child(-n+2) { border-bottom: 1px solid #dfe4e8; }
}
@media (max-width: 560px) {
  .supplier-directory, .supplier-info-grid, .supplier-rule-metrics { grid-template-columns: 1fr; }
  .supplier-rule-metrics > div { border-right: 0; border-bottom: 1px solid #dfe4e8; }
  .supplier-rule-metrics > div:last-child { border-bottom: 0; }
  .supplier-profile-head, .operation-supplier-rule { align-items: stretch; flex-direction: column; }
  .supplier-stock-count { text-align: left; }
}

/* ==========================================================================
   IMPORTADOR — ESCOLHA DO FORNECEDOR E COTA PRÓPRIA
   O fornecedor é a primeira pergunta do importador. Os cartões são menores
   que as duas "portas" de origem (arquivo/texto) porque aqui a lista pode
   ter oito itens: o que importa é ler o nome e a regra, não a área de clique.
   ========================================================================== */
.import-fornecedor-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  width: min(100%, 760px);
  margin: 0 auto;
}
.import-fornecedor-card {
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 16px 18px;
  place-items: start;
  text-align: left;
  gap: 4px;
  border-style: solid;
  border-color: var(--border-subtle, rgba(0, 0, 0, .15));
}
.import-fornecedor-card strong { font-size: 15px; }
.import-fornecedor-card span { font-size: 12px; opacity: .75; }
.import-fornecedor-card small { font-size: 11px; opacity: .6; line-height: 1.45; }
.import-fornecedor-card:hover,
.import-fornecedor-card:focus-visible { border-color: var(--accent-gold); }

/* A cota própria não é um fornecedor entre outros: é o nosso estoque. */
.import-fornecedor-proprio {
  border-color: var(--accent-gold);
  box-shadow: inset 3px 0 0 var(--accent-gold);
}

.cota-form { display: grid; gap: 18px; }
.cota-form h4 { margin: 0; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.cota-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.campo-cota { display: grid; gap: 5px; }
.campo-cota label { font-size: 12px; font-weight: 600; }
.campo-cota input, .campo-cota select {
  width: 100%; padding: 9px 11px; font-size: 14px;
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, .15));
  border-radius: 8px; background: var(--bg-panel); color: var(--text-primary);
}
.campo-cota input:focus-visible, .campo-cota select:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 1px; }
.campo-cota small { font-size: 11px; opacity: .65; }

.cota-leitura { padding: 14px 16px; border-radius: 10px; background: rgba(0, 0, 0, .03); }
.cota-leitura-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 18px; margin-top: 8px; }
.cota-leitura-grid > div { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 3px 0; border-bottom: 1px dotted rgba(0, 0, 0, .08); }
.cota-leitura-grid span { opacity: .7; }

/* Custo e lucro: a linha do total e a do lucro precisam sobressair das
   parcelas que as compõem — é nelas que o olho para. */
.cota-resumo { display: grid; gap: 4px; padding: 14px 16px; border-radius: 10px; background: rgba(0, 0, 0, .03); }
.cota-resumo h4 { margin-bottom: 6px; }
.cota-resumo-linha { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 4px 0; }
.cota-resumo-total { border-top: 1px solid rgba(0, 0, 0, .12); margin-top: 4px; padding-top: 8px; font-weight: 600; }
.cota-resumo-lucro b { color: var(--positive, #1f7a4d); font-weight: 700; }
.cota-resumo-prejuizo b { color: var(--negative, #b3261e); font-weight: 700; }
/* PAINEL RECOLHÍVEL: o título é a linha que fica sempre visível, e é ela que
   carrega o lucro. Fechado, ocupa uma linha; aberto, a memória de cálculo
   inteira. O marcador padrão do <details> é removido porque a seta própria
   (o ▸ desenhado abaixo) alinha com o resto da ficha. */
.cota-painel-interno { margin: 14px 0; }
.cota-painel-interno > .cota-resumo { margin-top: 8px; }
.cota-painel-interno .btn { margin-top: 8px; justify-self: start; }
.cota-painel-resumo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  cursor: pointer; padding: 10px 14px; border-radius: 10px;
  background: rgba(0, 0, 0, .03); list-style: none; user-select: none;
}
.cota-painel-resumo::-webkit-details-marker { display: none; }
.cota-painel-resumo:hover { background: rgba(0, 0, 0, .055); }
.cota-painel-resumo:focus-visible { outline: 2px solid var(--accent, #e76629); outline-offset: 2px; }
.cota-painel-titulo {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; letter-spacing: .04em; text-transform: uppercase; opacity: .7;
}
/* Seta própria: aponta para a direita fechado, para baixo aberto. */
.cota-painel-titulo::before {
  content: "▸"; font-size: 11px; opacity: .8; transition: transform .15s ease;
}
.cota-painel-interno[open] .cota-painel-titulo::before { transform: rotate(90deg); }
.cota-painel-lucro { display: flex; align-items: baseline; gap: 8px; }
.cota-painel-lucro small { font-size: 11px; letter-spacing: .03em; text-transform: uppercase; opacity: .7; }
.cota-painel-lucro strong { font-size: 20px; font-weight: 700; color: var(--positive, #1f7a4d); }
.cota-painel-lucro.negativo strong { color: var(--negative, #b3261e); }
.cota-painel-lucro-vazio { font-size: 12px; opacity: .7; }

/* O lucro saiu daqui para a linha de título do painel (`.cota-painel-lucro`),
   onde fica visível mesmo com tudo recolhido. O que restou no corpo é a conta
   que produz o número — primeira linha do detalhamento, sem margem negativa,
   que só fazia sentido quando havia um bloco acima dela. */
.cota-lucro-conta { margin: 0 0 10px; font-size: 12px; line-height: 1.5; opacity: .75; }
/* Linha subordinada: pertence à linha de cima, não é um item novo da conta. */
.cota-resumo-linha.cota-resumo-nota { padding-top: 0; font-size: 12px; opacity: .75; }
.cota-resumo-linha.cota-resumo-nota b { font-weight: 600; }

/* Divergência entre duas leituras legítimas do mesmo número: não é erro do
   sistema nem do documento — é uma decisão que pertence a quem paga o boleto. */
.cota-divergencia {
  display: grid; gap: 6px; justify-items: start;
  margin-top: 10px; padding: 12px 14px; border-radius: 10px;
  background: rgba(231, 102, 41, .08);
  border-left: 3px solid var(--accent-gold, #e76629);
}
.cota-divergencia strong { font-size: 13px; }
.cota-divergencia p { margin: 0; font-size: 12px; line-height: 1.5; opacity: .85; }

/* A marca do fornecedor no cartão de escolha. Logo quando existe; monograma
   estável quando não — as iniciais em cor derivada do nome, para que o mesmo
   fornecedor tenha sempre a mesma cor e seja reconhecido de longe. */
.fornecedor-marca {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-bottom: 8px;
  border-radius: 10px; overflow: hidden; flex: none;
  background: var(--bg-panel, #fff);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, .12));
}
.fornecedor-marca img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.fornecedor-marca-monograma {
  background: var(--marca-cor, #5a4f8a);
  border-color: transparent;
  color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .04em;
}
/* Os cartões ficam do tamanho do conteúdo: com a marca no topo, a grade de
   oito fornecedores não precisa de blocos altos e vazios. */
.import-fornecedor-card { align-content: start; }

/* O cartão de fornecedor não é uma "porta" de upload: é um item de lista.
   A altura mínima de 300px herdada do cartão de envio deixava metade do
   bloco vazia e empurrava a lista para fora da tela. */
.import-simple-modal .import-fornecedor-card { min-height: 0; }
/* O monograma é conteúdo, não legenda: o span do cartão vem com opacidade e
   corpo pequenos, e isso apagava as iniciais dentro do quadrado colorido. */
.import-fornecedor-card .fornecedor-marca,
.import-fornecedor-card .fornecedor-marca-monograma { opacity: 1; font-size: 15px; color: #fff; }
.import-fornecedor-card .fornecedor-marca img { padding: 2px; }

/* Ficha do fornecedor: a marca ao lado do nome, e o controle de logo logo
   abaixo — quem reconhece a empresa é quem sobe o logo dela. */
.supplier-profile-identidade { display: flex; align-items: center; gap: 14px; }
.supplier-profile-identidade .fornecedor-marca { margin-bottom: 0; }
.supplier-directory-item .fornecedor-marca { margin-bottom: 0; margin-right: 10px; font-size: 11px; }
.supplier-directory-item { display: flex; align-items: center; gap: 4px; }
.supplier-logo-acoes { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.supplier-logo-acoes small { font-size: 11px; opacity: .65; }
.supplier-logo-aviso { color: var(--negative, #b3261e); opacity: 1 !important; }

/* ==========================================================================
   GRADE DE FORNECEDORES — a primeira coisa que a aba responde: quem são,
   quantas cotas temos de cada um, e há quanto tempo aquele estoque parou.
   ========================================================================== */
.supplier-grid-wrap { margin: 18px 0 26px; }
.supplier-grid-head { margin-bottom: 14px; }
.supplier-grid-head h3 { margin: 2px 0 4px; font-size: 20px; }
.supplier-grid-head p { margin: 0; font-size: 13px; }
.supplier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.supplier-card {
  display: grid; gap: 12px; align-content: start;
  padding: 16px 18px; border-radius: 14px;
  background: var(--bg-panel, #fff);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, .12));
  box-shadow: var(--shadow-panel, 0 1px 2px rgba(0, 0, 0, .05));
}
.supplier-card.ativo { border-color: var(--accent-gold, #e76629); }
.supplier-card-proprio { box-shadow: inset 3px 0 0 var(--accent-gold, #e76629); }
.supplier-card header { display: flex; align-items: center; gap: 10px; }
.supplier-card header .fornecedor-marca { margin-bottom: 0; flex: none; }
.supplier-card-nome { flex: 1; min-width: 0; }
.supplier-card-nome h4 { margin: 0; font-size: 17px; line-height: 1.2; }
.supplier-card-eyebrow { font-size: 10px; letter-spacing: .08em; opacity: .55; }
.supplier-card-status {
  font-size: 10px; letter-spacing: .06em; padding: 3px 8px; border-radius: 999px;
  background: rgba(31, 122, 77, .12); color: var(--positive, #1f7a4d); white-space: nowrap;
}
.supplier-card:has(.supplier-card-status:not(:empty)) { position: relative; }
.supplier-card-metricas { display: flex; gap: 22px; }
.supplier-card-metricas > div { display: grid; gap: 2px; }
.supplier-card-metricas span { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; opacity: .6; }
/* A contagem de cotas é o número que decide para onde olhar. */
.supplier-card-metricas strong { font-size: 26px; line-height: 1; color: var(--accent-gold, #e76629); }
.supplier-card-metricas b { font-size: 13px; font-weight: 600; }
.supplier-card-acoes { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.supplier-card-link {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase; opacity: .7;
  color: inherit;
}
.supplier-card-link:hover:not([disabled]) { opacity: 1; text-decoration: underline; }
.supplier-card-link[disabled] { opacity: .3; cursor: default; }
.supplier-card-selecionar {
  border: 0; background: none; padding: 0; cursor: pointer; text-align: left;
  font-size: 11px; opacity: .55; color: inherit; text-decoration: underline;
}
.supplier-card-selecionar:hover { opacity: .9; }
.supplier-card-status.vazio { background: rgba(0, 0, 0, .07); color: inherit; opacity: .6; }

/* O motivo do erro é conteúdo, não rodapé: quem lê precisa saber o que fazer. */
.import-error-motivo {
  margin: 6px auto 2px; max-width: 46ch;
  font-size: 13px; line-height: 1.55; text-align: left;
  padding: 10px 12px; border-radius: 8px;
  background: rgba(0, 0, 0, .04);
}

/* Aviso de cota própria sumida: precisa ser visto antes de qualquer outra
   coisa na tela de importação, sem parecer erro do sistema — é uma ação
   disponível, não um defeito a reportar. */
.aviso-cota-sumida {
  border: 1px solid #f0b429;
  background: #fffaf0;
  border-left: 4px solid #f0b429;
  border-radius: 10px;
  padding: 16px 18px;
  margin: 0 0 18px;
}
.aviso-cota-sumida h3 { margin: 0 0 6px; font-size: 1rem; color: #8a5a00; }
.aviso-cota-sumida p { margin: 0 0 12px; color: #6b5730; font-size: .88rem; }
.aviso-cota-sumida table { margin-bottom: 12px; }