:root {
  --granito: #EDEFF1;
  --surface: #FFFFFF;
  --surface-2: #F6F7F9;
  --ink: #18202C;
  --muted: #5E6B7A;
  --line: #D9DEE4;
  --azulejo: #1F4E9C;
  --azulejo-soft: #E3EBF7;
  --dao: #9A2E3F;
  --dao-soft: #F7E4E7;
  --musgo: #2F7A4A;
  --musgo-soft: #E2F1E7;
  --ocre: #B7802A;
  --ocre-soft: #F6EDDC;
  --display: "Bahnschrift", "DIN Alternate", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --text: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --r-sm: 6px;
  --r-md: 10px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --granito: #12171F;
  --surface: #1A212C;
  --surface-2: #202836;
  --ink: #E6EAF0;
  --muted: #93A0B0;
  --line: #2C3545;
  --azulejo: #7AA5EC;
  --azulejo-soft: #1E2C44;
  --dao: #E58593;
  --dao-soft: #3A2128;
  --musgo: #72C792;
  --musgo-soft: #1D3326;
  --ocre: #E2B567;
  --ocre-soft: #3A2F1C;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--text);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--granito);
  -webkit-font-smoothing: antialiased;
}
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tile { width: 40px; height: 40px; stroke: none; }
.tile path, .tile circle { stroke-linecap: round; }

.app { display: grid; grid-template-columns: 232px 1fr; height: 100vh; }

/* ---------- trilho lateral ---------- */
.rail {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  padding: 22px 14px 16px;
}
.brand { display: flex; gap: 12px; align-items: center; padding: 0 8px 26px; }
.brand strong { display: block; font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: .2px; }
.brand span { color: var(--muted); font-size: 12.5px; }
#nav { display: flex; flex-direction: column; gap: 2px; }
#nav button {
  display: flex; align-items: center; gap: 12px;
  border: 0; background: transparent; color: var(--muted);
  font: 500 14px var(--text); text-align: left;
  padding: 10px 12px; border-radius: var(--r-sm); cursor: pointer;
  position: relative;
}
#nav button:hover { color: var(--ink); background: var(--surface-2); }
#nav button.active { color: var(--azulejo); background: var(--azulejo-soft); font-weight: 600; }
#nav button.active::before {
  content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px;
  background: var(--azulejo); border-radius: 0 3px 3px 0;
}
.rail-foot { margin-top: auto; padding: 0 4px; }
.saved { color: var(--muted); font-size: 12px; margin: 10px 8px 0; transition: color .3s; }
.saved.flash { color: var(--musgo); }

/* ---------- topo ---------- */
main { overflow-y: auto; padding: 0 36px 48px; scroll-behavior: smooth; }
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 22px 0 18px; margin-bottom: 8px;
  background: var(--granito);
  border-bottom: 1px solid var(--line);
}
.topbar h1 { font-family: var(--display); font-weight: 600; font-size: 28px; margin: 0; letter-spacing: .1px; }
.sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.top-tools { display: flex; gap: 14px; align-items: center; }
.fx { font-family: var(--display); font-size: 15px; color: var(--muted); white-space: nowrap; }
.fx b { color: var(--ink); font-weight: 600; }
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.seg button {
  border: 0; background: transparent; color: var(--muted);
  font: 600 13px var(--text); padding: 7px 16px; border-radius: 999px; cursor: pointer;
  transition: background .2s, color .2s;
}
.seg button.on { background: var(--azulejo); color: #fff; }
:root[data-theme="dark"] .seg button.on { color: #0F1622; }

/* ---------- vistas ---------- */
.view { display: none; padding-top: 18px; }
.view.active { display: block; animation: enter .28s ease-out; }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .view.active { animation: none; } main { scroll-behavior: auto; } }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; }
.panel.side { align-self: start; position: sticky; top: 104px; }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.chart-head h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 16px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.cbox { position: relative; height: 250px; }
.cbox.tall { height: 290px; }
.cbox.short { height: 220px; }

/* ---------- herói ---------- */
.hero {
  display: grid; grid-template-columns: minmax(280px, 340px) 1fr; gap: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; margin-bottom: 18px;
}
.hero-text {
  padding: 28px 28px 24px; display: flex; flex-direction: column; justify-content: center;
  background: var(--azulejo); color: #fff;
  background-image:
    radial-gradient(circle at 0 0, rgba(255,255,255,.10) 0 18px, transparent 19px),
    radial-gradient(circle at 100% 100%, rgba(255,255,255,.10) 0 18px, transparent 19px);
  background-size: 56px 56px;
}
:root[data-theme="dark"] .hero-text { background-color: #24467F; }
.hero-lead { margin: 0; font-size: 15px; opacity: .9; max-width: 26ch; }
.hero-num {
  margin: 6px 0 8px; font-family: var(--display); font-weight: 700;
  font-size: 68px; line-height: 1; letter-spacing: -1px; font-variant-numeric: tabular-nums;
}
.hero-num.neg { color: #FFD1D7; }
.hero-num.longo { font-size: 50px; letter-spacing: -.5px; } /* valores longos, como pesos chilenos */
.hero-foot { margin: 0; font-size: 13px; opacity: .85; max-width: 32ch; }
.hero-chart { padding: 18px 20px 14px; }

/* ---------- faixa de KPIs ---------- */
.strip {
  display: grid; grid-template-columns: repeat(6, 1fr);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  margin-bottom: 18px;
}
.kpi { padding: 16px 18px; border-left: 1px solid var(--line); min-width: 0; }
.kpi:first-child { border-left: 0; }
.kpi .k-label { color: var(--muted); font-size: 12.5px; }
.kpi .k-val { font-family: var(--display); font-size: 25px; font-weight: 600; margin: 4px 0 2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi .k-note { font-size: 12px; color: var(--muted); }
.pos { color: var(--musgo); }
.neg { color: var(--dao); }

.grid3 { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 18px; margin-bottom: 18px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.split { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; }

/* ---------- medidores ---------- */
.meter { margin: 6px 0 18px; }
.meter-top { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; margin-bottom: 7px; }
.meter-top b { font-family: var(--display); font-size: 15px; }
.bar { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; position: relative; }
.bar i { display: block; height: 100%; border-radius: 999px; transition: width .5s ease; }
.bar .goal { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); opacity: .55; }
.meter p { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }

.levers { list-style: none; margin: 0; padding: 0; }
.levers li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.levers li:last-child { border-bottom: 0; }
.levers .lv-val { font-family: var(--display); font-weight: 600; white-space: nowrap; }

/* ---------- tabelas ---------- */
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 16px; }
.total { font-size: 14px; color: var(--muted); }
.total b { font-family: var(--display); font-size: 22px; color: var(--ink); font-weight: 600; margin-left: 6px; }
.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: auto; margin-bottom: 14px; }
table.grid { width: 100%; border-collapse: collapse; }
.grid th {
  text-align: left; font: 600 12.5px var(--text); color: var(--muted);
  padding: 11px 10px; border-bottom: 1px solid var(--line); background: var(--surface-2);
  white-space: nowrap; position: sticky; top: 0;
}
.grid td { padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.grid tr:last-child td { border-bottom: 0; }
.grid tr.off td:not(.c-toggle):not(.c-del) { opacity: .45; }
.grid td.num, .grid th.num { text-align: right; }
.grid td.out { font-family: var(--display); font-size: 15px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.grid tr.calc td { background: var(--surface-2); color: var(--muted); font-style: italic; }
.grid tfoot td { font-weight: 600; background: var(--surface-2); }

input, select {
  font: 14px var(--text); color: var(--ink);
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 7px 8px; width: 100%; min-width: 0;
}
input:hover, select:hover { border-color: var(--line); }
input:focus, select:focus { outline: none; border-color: var(--azulejo); background: var(--surface); box-shadow: 0 0 0 3px var(--azulejo-soft); }
input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
input[type="number"]::-webkit-inner-spin-button { opacity: .4; }
select { cursor: pointer; }
select option { background: var(--surface); color: var(--ink); }
.w-name { min-width: 220px; }
.w-note { min-width: 200px; color: var(--muted); }

/* interruptor */
.switch { position: relative; display: inline-block; width: 34px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; background: var(--line); border-radius: 999px; cursor: pointer; transition: background .2s; }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.switch input:checked + span { background: var(--azulejo); }
.switch input:checked + span::after { transform: translateX(14px); }
.switch input:focus-visible + span { box-shadow: 0 0 0 3px var(--azulejo-soft); }

.pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pill.ok { background: var(--musgo-soft); color: var(--musgo); }
.pill.warn { background: var(--ocre-soft); color: var(--ocre); }

/* ---------- botões ---------- */
button, .button {
  font: 600 13.5px var(--text); cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  padding: 9px 16px; border-radius: var(--r-sm); display: inline-flex; align-items: center; gap: 8px;
  transition: background .15s, border-color .15s, transform .05s;
}
button:hover, .button:hover { border-color: var(--muted); }
button:active, .button:active { transform: translateY(1px); }
button:focus-visible, .button:focus-within, #nav button:focus-visible, .seg button:focus-visible { outline: 2px solid var(--azulejo); outline-offset: 2px; }
button.primary { background: var(--azulejo); border-color: var(--azulejo); color: #fff; }
:root[data-theme="dark"] button.primary { color: #0F1622; }
button.danger { color: var(--dao); border-color: var(--dao); background: transparent; }
button.ghost { border-color: transparent; background: transparent; color: var(--muted); }
button.ghost:hover { color: var(--ink); background: var(--surface-2); }
button.small { padding: 8px 10px; font-size: 13px; width: 100%; justify-content: flex-start; }
.icon-btn { border: 0; background: transparent; color: var(--muted); padding: 6px; border-radius: var(--r-sm); }
.icon-btn:hover { color: var(--dao); background: var(--dao-soft); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.btn-row.end { justify-content: flex-end; }

.hint { color: var(--muted); font-size: 12.5px; margin: 0 0 18px; max-width: 90ch; }
.check { display: flex; gap: 10px; align-items: center; margin: 4px 0 10px; font-size: 13.5px; }
.check input { width: auto; }

/* ---------- cenários ---------- */
.params td:first-child { min-width: 300px; }
.params .desc { display: block; color: var(--muted); font-size: 12px; }
.params th.sc { text-align: center; min-width: 150px; }
.params th.sc.on { color: var(--azulejo); }
.params td.sc-cell.on { background: var(--azulejo-soft); }
.form { display: grid; grid-template-columns: 1fr 160px; gap: 8px 16px; align-items: center; }
.form label { font-size: 13.5px; }
.form label small { display: block; color: var(--muted); font-size: 12px; }
.form input { border-color: var(--line); }
.explain { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
.explain li { margin-bottom: 7px; }
.sources { margin: 0 0 10px; padding-left: 18px; }
.sources li { margin-bottom: 6px; }
a { color: var(--azulejo); }

/* ---------- toast e diálogo ---------- */
.toast {
  z-index: 80;
  position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px);
  background: var(--ink); color: var(--granito); padding: 10px 18px; border-radius: var(--r-sm);
  font-size: 13.5px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
dialog { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); padding: 22px 24px; max-width: 420px; }
dialog::backdrop { background: rgba(10, 16, 26, .45); }
dialog p { margin: 0 0 6px; }

@media (max-width: 1300px) {
  .strip { grid-template-columns: repeat(3, 1fr); }
  .kpi:nth-child(4) { border-left: 0; }
  .kpi:nth-child(n+4) { border-top: 1px solid var(--line); }
  .grid3 { grid-template-columns: 1fr 1fr; }
  .grid3 .panel:last-child { grid-column: span 2; }
  .split { grid-template-columns: 1fr; }
  .panel.side { position: static; }
}

/* larguras mínimas dos campos de escolha */
select[data-f="tipo"] { min-width: 132px; }
select[data-f="status"] { min-width: 124px; }
select[data-f="moeda"] { min-width: 62px; }
select[data-f="cat"] { min-width: 128px; }
select[data-f="idx"] { min-width: 108px; }
.w-name { min-width: 190px; }
.params input[type="number"] { text-align: center; max-width: 130px; margin: 0 auto; display: block; border-color: var(--line); background: var(--surface); }
.split { grid-template-columns: minmax(0, 1fr) 300px; }
.split > div { min-width: 0; }
input[data-f="valor"], input[data-f="capital"] { min-width: 104px; }
input[data-f="imposto"], input[data-f="param"] { min-width: 72px; }

/* ---------- mercado ---------- */
.btn-row.tight { margin-top: 0; align-items: center; }
.small-check { margin: 0 6px 0 0; color: var(--muted); }
.mk-hero {
  display: grid; grid-template-columns: minmax(300px, 380px) 1fr;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  margin-bottom: 18px; overflow: hidden;
}
.mk-rate { padding: 24px 26px; border-right: 1px solid var(--line); }
.mk-label { margin: 0; color: var(--muted); font-size: 13.5px; }
.mk-big { margin: 2px 0 0; font-family: var(--display); font-weight: 700; font-size: 60px; line-height: 1.05; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.mk-chg { margin: 4px 0 16px; font-size: 13.5px; font-weight: 600; }
.mk-facts { margin: 0; display: grid; gap: 10px; }
.mk-facts div { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.mk-facts dt { color: var(--muted); font-size: 13px; }
.mk-facts dd { margin: 0; text-align: right; font-family: var(--display); font-size: 16px; font-weight: 600; }
.mk-facts dd small, .mk-val small, .mk-row small { display: block; font-family: var(--text); font-size: 11.5px; font-weight: 400; color: var(--muted); }
.mk-chart { padding: 18px 20px 14px; }
.mk-rows { display: grid; }
.mk-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.mk-row:last-child { border-bottom: 0; }
.mk-val { text-align: right; font-family: var(--display); font-size: 17px; font-weight: 600; white-space: nowrap; }
.mk-tickers { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.mk-add, .mk-token { display: flex; align-items: center; gap: 10px; }
.mk-add input { width: 150px; border-color: var(--line); text-transform: uppercase; }
.mk-token input { width: 240px; border-color: var(--line); }
.mk-token label { font-size: 13px; color: var(--muted); white-space: nowrap; }
.mk-token a { font-size: 13px; white-space: nowrap; }
button:disabled { opacity: .5; cursor: not-allowed; }
.mk-chart .cbox { height: 370px; }
#view-mercado .grid2 .cbox.short { height: 260px; }

/* ================= v2 ================= */
.rail { overflow-y: auto; padding-top: 18px; }
.brand { padding-bottom: 14px; }
#nav { gap: 1px; }
#nav button { padding: 7px 12px; font-size: 13.5px; }
#nav button.active::before { top: 6px; bottom: 6px; }
.nav-group { margin: 12px 12px 4px; font-size: 11.5px; color: var(--muted); font-weight: 600; letter-spacing: .2px; }
.nav-group:first-child { margin-top: 0; }

.city-pick { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 2px 6px 2px 12px; }
.city-pick select { border: 0; padding: 6px 4px; font-weight: 600; color: var(--ink); width: auto; }
.city-pick select:focus { box-shadow: none; }

.banner { margin: 12px 0 0; padding: 12px 16px; border-radius: var(--r-md); background: var(--musgo-soft); color: var(--ink); border: 1px solid var(--musgo); display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.banner[hidden] { display: none; }

.grid-plano { display: grid; grid-template-columns: minmax(340px, 420px) 1fr; gap: 18px; margin-bottom: 18px; }
.strip5 { grid-template-columns: repeat(5, 1fr); }
.strip4 { grid-template-columns: repeat(4, 1fr); }
.toolbar.spaced { margin-top: 18px; }
.fold { margin-bottom: 18px; }
.fold summary { cursor: pointer; list-style: none; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary h3 { display: inline; font-family: var(--display); font-weight: 600; font-size: 16px; margin: 0; }
.fold summary::after { content: " +"; color: var(--muted); }
.fold[open] summary::after { content: " −"; }
.fold[open] summary { margin-bottom: 12px; }
.table-wrap.flat { border: 0; border-radius: 0; margin: 0; }
.grid.compact td { padding: 6px 10px; }
.grid.compact th { padding: 8px 10px; }
.grid tr.pre td { color: var(--muted); }
.grid tr.best td { background: var(--musgo-soft); }
#tblCidades tr.on td { background: var(--azulejo-soft); }
#tblMeses { font-size: 13px; }

.mini { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.mini-grid { display: grid; grid-template-columns: auto 150px; gap: 2px 8px; align-items: center; font-size: 12px; color: var(--muted); }
.w-mes { width: 72px; min-width: 72px; }
.w-num { width: 92px; min-width: 80px; }
input.w-mes, input.w-num { text-align: right; }
.inline-sel { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.inline-sel select, .inline-sel input { width: auto; border-color: var(--line); background: var(--surface); }
.small-btn { padding: 6px 12px; font-size: 12.5px; }
button.link { border: 0; background: none; padding: 0; color: var(--azulejo); text-decoration: underline; font-weight: 600; }
.pill.bad { background: var(--dao-soft); color: var(--dao); }

/* checklist */
.bar.big { height: 8px; margin: 0 0 18px; }
.bar.big i { background: var(--musgo); }
.chk-group { display: grid; grid-template-columns: 150px 1fr; gap: 18px; padding: 14px 0; border-top: 1px solid var(--line); }
.chk-when b { display: block; font-family: var(--display); font-size: 17px; }
.chk-when span { color: var(--muted); font-size: 12.5px; }
.chk-items { display: grid; gap: 6px; }
.chk-item { display: grid; grid-template-columns: 28px minmax(220px, 1fr) 130px 140px 84px 80px 34px; gap: 8px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 8px; }
.chk-item.done .chk-title { text-decoration: line-through; color: var(--muted); }
.chk-box { position: relative; width: 20px; height: 20px; }
.chk-box input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chk-box span { position: absolute; inset: 0; border: 2px solid var(--line); border-radius: 5px; transition: background .15s, border-color .15s; }
.chk-box input:checked + span { background: var(--musgo); border-color: var(--musgo); }
.chk-box input:checked + span::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.chk-box input:focus-visible + span { box-shadow: 0 0 0 3px var(--azulejo-soft); }

/* mercado: alerta */
.mk-alert { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.mk-alert-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.mk-alert-row input { width: 110px; border-color: var(--line); }

@media (max-width: 1300px) {
  .grid-plano { grid-template-columns: 1fr; }
  .strip5, .strip4 { grid-template-columns: repeat(2, 1fr); }
  .chk-item { grid-template-columns: 28px 1fr 120px 130px 80px; }
  .chk-item .pill, .chk-item .chk-grp { display: none; }
}


[hidden] { display: none !important; }

/* ================= vagas ================= */
.grid-vagas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px; margin-bottom: 18px; }
.grid-vagas textarea, #view-vagas textarea { width: 100%; resize: vertical; font: 13.5px var(--text); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); box-sizing: border-box; }
#tblVagas td { vertical-align: top; }
#tblVagas .vg-tit input.sub, #tblAsc input.sub { margin-top: 4px; font-size: 12px; color: var(--muted); }
#tblVagas .vg-tit a { display: inline-block; margin-top: 4px; color: var(--azulejo); }
#tblVagas td.out small { display: block; font-size: 11.5px; font-weight: 600; }
#tblVagas tr.sel td { background: var(--azulejo-soft); }
.vg-acts { white-space: nowrap; }
.grid2.flat { margin-bottom: 0; }
#vgsDet .chart-head { align-items: center; }
#vgsDet .checks { margin-top: 14px; }

/* ================= ascendência ================= */
.asc-panel { margin-bottom: 18px; }
.asc-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
#tblAsc tr.pt td { background: var(--musgo-soft); }
#tblAsc td { vertical-align: top; }
#tblAsc input[type="text"] { min-width: 140px; }
#tblAsc select[data-f="geracao"] { min-width: 150px; }
#tblAsc select[data-f="portugues"], #tblAsc select[data-f="vivo"] { min-width: 96px; }
#tblAsc select[data-f="certidao"] { min-width: 104px; }
#tblAsc td:nth-child(3) { min-width: 260px; }
#tblVagas select[data-f="cidade"] { min-width: 112px; }
#tblVagas select[data-f="status"] { min-width: 128px; }
#tblVagas input[data-f="brutoAnual"] { width: 96px; }
#tblVagas td[data-o="visto"] .pill { display: block; width: max-content; margin-bottom: 3px; }
#tblVagas .vg-tit { min-width: 180px; }
#tblVagas th { white-space: normal; }
#tblVagas .vg-acts .small-btn { padding: 6px 9px; }
#peMeta { width: 120px; }
.vg-form { margin: 14px 0 8px; grid-template-columns: 1fr 220px; }
.vg-form input { border-color: var(--line); }
.asc-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; margin: 16px 0 10px; }
.asc-res { border-radius: var(--r-md); padding: 14px 16px; border: 1px solid var(--line); background: var(--surface-2); }
.asc-res.ok { border-color: var(--musgo); background: var(--musgo-soft); }
.asc-res.warn { border-color: var(--ocre); background: var(--ocre-soft); }
.asc-res > b { font-family: var(--display); font-size: 16px; }
.asc-res p { margin: 8px 0 0; }
.asc-passos { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.asc-passos li { font-size: 13px; }
.asc-passos li > * { display: block; }
.asc-passos small { color: var(--muted); }
.asc-lt { margin: 0 0 6px; }
.asc-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.asc-links li { display: grid; font-size: 13px; }
.asc-links a { color: var(--azulejo); font-weight: 600; }
.asc-links small { color: var(--muted); font-size: 12px; }

/* ================= aba vasco ================= */
.vz-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vz-itens li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 13.5px; line-height: 1.45; }
.vz-itens i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700; background: var(--azulejo-soft); color: var(--azulejo); }
.vz-itens li.alerta i { background: var(--ocre-soft); color: var(--ocre); }
.vz-itens li.bom i { background: var(--musgo-soft); color: var(--musgo); }
.vz-ia { background: var(--azulejo-soft); border-radius: var(--r-sm); padding: 10px 13px; margin-bottom: 12px; font-size: 13.5px; }
.vz-ia p { margin: 0 0 6px; } .vz-ia ul { margin: 0; padding-left: 18px; }
.vz-drop { border: 2px dashed var(--line); border-radius: var(--r-md); padding: 18px; text-align: center; transition: border-color .15s, background .15s; }
.vz-drop.on { border-color: var(--azulejo); background: var(--azulejo-soft); }
.vz-drop p { margin: 0 0 6px; }
.vz-docs { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.vz-docs li { display: grid; font-size: 13px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.vz-docs li:last-child { border-bottom: 0; }
.vz-docs small { color: var(--muted); font-size: 12px; }
#tblRegras tr.dif td { background: var(--ocre-soft); }
#tblRegras td { vertical-align: top; font-size: 13px; }
.vz-decidir { display: flex; gap: 10px; margin-top: 12px; }
.vz-decidir input { flex: 1; border-color: var(--line); }
.nowrap { white-space: nowrap; }
.strip.flat { margin-bottom: 12px; }

/* ================= chat: anexos, voz, resumo ================= */
.ia-dot { position: absolute; top: 6px; right: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--ocre); border: 2px solid var(--azulejo); }
.ia-fab { position: fixed; }
.ia-ico { padding: 9px; flex: none; }
.ia-ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ia-ico small { font-size: 11px; font-variant-numeric: tabular-nums; }
#iaMic.gravando { color: var(--dao); background: var(--dao-soft); }
#iaMic.gravando svg { animation: iaDot 1s infinite; }
.ia-anexos { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 16px 0; }
.ia-anexo { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; background: var(--surface-2); max-width: 100%; }
.ia-anexo svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.ia-anexo small { color: var(--muted); }
.ia-anexo .icon-btn { padding: 0 6px; font-size: 15px; line-height: 1; }
.ia-anexo.lendo { padding: 4px 10px; color: var(--muted); font-style: italic; }
.ia-anexo-tag { display: block; margin-top: 6px; font-size: 11.5px; opacity: .85; }
.ia-anexo-tag::before { content: "📎 "; }
.ia-modelo-tag { display: block; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.ia-msg.erro .link { font-size: 12.5px; margin-left: 6px; color: var(--dao); }
.ia-msg.resumo { border-left: 3px solid var(--ocre); }
.ia-resumo-t { font-family: var(--display); font-weight: 600; font-size: 12.5px; color: var(--ocre); text-transform: uppercase; letter-spacing: .04em; }
.ia-drawer.soltar { outline: 3px dashed var(--azulejo); outline-offset: -8px; }

@media (max-width: 1300px) {
  .grid-vagas, .asc-grid { grid-template-columns: 1fr; }
}

#vgForm { grid-template-columns: 1fr 240px; }

/* ================= vistos ================= */
.pill.info { background: var(--azulejo-soft); color: var(--azulejo); }
.visa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; margin-bottom: 18px; }
.visa { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; display: flex; flex-direction: column; }
.visa.chosen { border-color: var(--azulejo); box-shadow: 0 0 0 1px var(--azulejo) inset; }
.visa header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.visa h3 { margin: 0; font-family: var(--display); font-size: 16px; }
.visa header p { margin: 3px 0 0; color: var(--muted); font-size: 12.5px; }
.visa .btn-row { margin-top: auto; padding-top: 12px; }
.visa details { margin-top: 8px; font-size: 13px; }
.visa summary { cursor: pointer; color: var(--azulejo); font-weight: 600; padding: 4px 0; }
.checks { list-style: none; margin: 12px 0 4px; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.checks li { position: relative; padding-left: 24px; line-height: 1.4; }
.checks li::before { position: absolute; left: 0; top: 0; width: 17px; height: 17px; border-radius: 50%; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.checks li.yes::before { content: "✓"; background: var(--musgo-soft); color: var(--musgo); }
.checks li.no::before { content: "✕"; background: var(--dao-soft); color: var(--dao); }
.checks li.maybe::before { content: "?"; background: var(--ocre-soft); color: var(--ocre); }
.visa-dl { display: grid; grid-template-columns: 82px 1fr; gap: 6px 12px; margin: 8px 0; }
.visa-dl dt { color: var(--muted); font-size: 12px; }
.visa-dl dd { margin: 0; }
.visa-dl ul { margin: 0; padding-left: 16px; }
.links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 0; }
.links a, .links-chips a { color: var(--azulejo); font-weight: 600; }
.milestones { list-style: none; margin: 4px 0 0; padding: 0 0 0 18px; border-left: 2px solid var(--azulejo-soft); display: grid; gap: 14px; }
.milestones li { position: relative; display: grid; gap: 1px; }
.milestones li::before { content: ""; position: absolute; left: -25px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--azulejo); border: 2px solid var(--surface); }
.milestones b { font-family: var(--display); font-size: 13px; color: var(--azulejo); }
.milestones small { color: var(--muted); font-size: 12px; }

/* ================= viagem ================= */
.grid-viagem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 18px; margin-bottom: 18px; align-items: start; }
.grid-viagem .strip { margin-bottom: 0; }
.form-val { font-weight: 600; text-align: right; font-size: 13.5px; }
.vg-links-t { margin: 16px 0 6px; }
.links-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-block; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; text-decoration: none; background: var(--surface-2); }
.chip:hover { border-color: var(--azulejo); }
.vg-tot { margin: 14px 0 0; }
.vg-tot b { display: block; margin: 2px 0 0; }
.cbox.mini { height: 150px; margin-top: 10px; }
.clima { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0; }
.clima div { background: var(--surface-2); border-radius: var(--r-sm); padding: 8px 10px; }
.clima b { display: block; font-family: var(--display); font-size: 21px; }
.clima small { color: var(--muted); font-size: 11.5px; }
small.block, .block { display: block; }
table.grid tr.best td { background: var(--musgo-soft); }
.key-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(180px, 1fr) auto auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.key-row small { display: block; color: var(--muted); font-size: 12px; }
.key-row input { border-color: var(--line); }
#vgKeys .check { margin-top: 14px; }

/* ================= assistente ================= */
.ia-fab { position: fixed; right: 22px; bottom: 22px; z-index: 40; border-radius: 999px; padding: 11px 18px 11px 14px; background: var(--azulejo); border-color: var(--azulejo); color: #fff; box-shadow: 0 8px 24px rgba(16, 32, 64, .25); }
:root[data-theme="dark"] .ia-fab { color: #0F1622; }
.ia-fab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ia-fab[aria-expanded="true"] { display: none; }
.ia-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(var(--ia-largura, 460px), 100vw); z-index: 50; background: var(--surface); border-left: 1px solid var(--line); box-shadow: -12px 0 32px rgba(16, 32, 64, .14); display: flex; flex-direction: column; animation: iaIn .18s ease-out; }
.ia-drawer[hidden] { display: none; }
@keyframes iaIn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ia-drawer { animation: none; } }
.ia-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.ia-head strong { display: block; font-family: var(--display); font-size: 16px; }
.ia-head small { color: var(--muted); font-size: 12px; }
.ia-head .icon { margin-left: auto; padding: 6px; }
.ia-head .icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ia-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--azulejo-soft); color: var(--azulejo); font-family: var(--display); font-weight: 700; font-size: 17px; }
.ia-setup { padding: 18px 16px; display: grid; gap: 8px; }
.ia-setup p { margin: 0; }
.ia-setup input { border-color: var(--line); }
.ia-setup .btn-row { align-items: center; margin-top: 6px; }
.ia-main { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.ia-main[hidden] { display: none; }
.ia-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.ia-log:empty::before { content: "Pergunte sobre o plano, peça uma simulação (\"e se o aluguel subir 10%?\") ou peça para comparar com os dados reais de hoje."; color: var(--muted); font-size: 13px; line-height: 1.5; }
.ia-msg { max-width: 92%; padding: 10px 13px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.ia-msg.user { align-self: flex-end; background: var(--azulejo); color: #fff; border-bottom-right-radius: 4px; }
:root[data-theme="dark"] .ia-msg.user { color: #0F1622; }
.ia-msg.bot { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: 4px; }
.ia-msg.erro { align-self: stretch; background: var(--dao-soft); color: var(--dao); font-size: 13px; }
.ia-msg p { margin: 0 0 7px; } .ia-msg p:last-child { margin-bottom: 0; }
.ia-msg ul, .ia-msg ol { margin: 4px 0 8px; padding-left: 20px; }
.ia-msg h4 { margin: 8px 0 4px; font-family: var(--display); font-size: 14px; }
.ia-msg code { font-size: 12px; background: var(--surface); padding: 1px 4px; border-radius: 4px; }
.ia-msg a { color: var(--azulejo); }
.md-t { border-collapse: collapse; margin: 6px 0 8px; font-size: 12.5px; width: 100%; }
.md-t th, .md-t td { border-bottom: 1px solid var(--line); padding: 4px 6px; text-align: left; }
.md-t th { color: var(--muted); font-weight: 600; }
.pensando { display: flex; gap: 4px; align-items: center; }
.pensando span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: iaDot 1s infinite ease-in-out; }
.pensando span:nth-child(2) { animation-delay: .15s; } .pensando span:nth-child(3) { animation-delay: .3s; }
.pensando small { margin-left: 8px; color: var(--muted); font-size: 12px; }
@keyframes iaDot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.ia-prop { align-self: stretch; border: 1px solid var(--ocre); background: var(--ocre-soft); border-radius: 10px; padding: 10px 13px; font-size: 13px; }
.ia-prop.aplicada { border-color: var(--musgo); background: var(--musgo-soft); }
.ia-prop.descartada { opacity: .6; }
.ia-prop p { margin: 0 0 6px; }
.ia-prop ul { margin: 0 0 6px; padding-left: 18px; }
.ia-prop .btn-row { margin-top: 8px; }
.ia-alt code { font-size: 11.5px; overflow-wrap: anywhere; }
.ia-sug { display: flex; gap: 6px; overflow-x: auto; padding: 4px 16px 8px; scrollbar-width: thin; }
.ia-sug button { flex: none; padding: 6px 11px; font-size: 12.5px; border-radius: 999px; font-weight: 500; }
.ia-form { display: flex; gap: 8px; padding: 8px 16px 10px; border-top: 1px solid var(--line); align-items: flex-end; }
.ia-form textarea { flex: 1; resize: none; font: 13.5px var(--text); padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); max-height: 140px; }
.ia-form textarea:focus { outline: 2px solid var(--azulejo); outline-offset: -1px; }
.ia-form button { padding: 10px 12px; }
.ia-form svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ia-foot { padding: 4px 16px 12px; display: grid; gap: 3px; }
.ia-foot-btns { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ia-foot button.link { font-size: 12px; font-weight: 500; }

@media (max-width: 1300px) {
  .grid-viagem { grid-template-columns: 1fr; }
  .key-row { grid-template-columns: 1fr 1fr; }
}

/* ================= relatório ================= */
#report { position: absolute; left: -10000px; top: 0; width: 794px; background: #fff; color: #18202C; font-family: var(--text); }
.rp-offscreen { position: absolute; left: 0; top: 0; }
.rp-cbox { width: 900px; height: 380px; }
/* demonstração (planejadordemigracao.com/demo) */
.demo-faixa { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 18px; background: var(--heroi-fundo, #1F4E9C); color: #fff; font-size: 13.5px; box-shadow: 0 -6px 18px rgba(16, 32, 64, .18); }
.demo-faixa p { margin: 0; }
.demo-acoes { display: flex; gap: 10px; flex: none; }
.demo-acoes a { padding: 8px 14px; border-radius: 6px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.demo-entrar { color: #fff; border: 1px solid rgba(255, 255, 255, .55); }
.demo-comprar { background: #E8B244; color: #18202C; }
.demo-acoes a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
html.demo { --demo-h: 58px; }
html.demo .app { height: calc(100vh - var(--demo-h)); }
html.demo .ia-fab { bottom: calc(22px + var(--demo-h)); }
html.demo .ia-drawer { bottom: var(--demo-h); }
@media (max-width: 640px) { html.demo { --demo-h: 54px; } .demo-faixa { gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); font-size: 12.5px; } .demo-faixa p span { display: none; } .demo-acoes { gap: 6px; } .demo-acoes a { padding: 8px 10px; } }

/* demonstração: só ver */
html.demo #inGuia, html.demo .in-refazer, html.demo [data-abrir-guia], html.demo [data-o-que-vasco],
html.demo .panel:has(#btnReset), html.demo .panel:has(#fileImport), html.demo #iaSug, html.demo #iaForm, html.demo #iaAnexos, html.demo .ia-foot-btns,
html.demo #syAgora, html.demo .sy-form, html.demo #saved { display: none !important; }
.ia-demo { margin: 0 16px 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--azulejo-soft); font-size: 13.5px; display: grid; gap: 10px; }
.ia-demo p { margin: 0; }
.ia-demo .demo-comprar { justify-self: start; padding: 8px 14px; border-radius: 6px; font-weight: 600; text-decoration: none; }

/* versão web: o que só existe no app para Windows */
.web [data-so-windows] { display: none !important; }

@media print {
  .ia-fab, .ia-drawer { display: none !important; }
  @page { size: A4; margin: 16mm 14mm; }
  html, body { background: #fff !important; height: auto; }
  .app, .toast, dialog, .banner { display: none !important; }
  #report { position: static; left: auto; width: auto; display: block; }
  #report h1 { font-family: var(--display); font-size: 22pt; margin: 0 0 4pt; color: #1F4E9C; }
  #report h2 { font-family: var(--display); font-size: 13pt; margin: 16pt 0 6pt; color: #18202C; break-after: avoid; }
  #report p { font-size: 10pt; margin: 0 0 6pt; }
  .rp-head { border-bottom: 2px solid #1F4E9C; padding-bottom: 8pt; margin-bottom: 6pt; }
  table.rp { width: 100%; border-collapse: collapse; font-size: 9.5pt; break-inside: avoid; }
  table.rp th, table.rp td { padding: 4pt 6pt; border-bottom: 1px solid #D9DEE4; text-align: left; }
  table.rp th { background: #F1F4F8; }
  table.rp .num { text-align: right; }
  table.rp tr.tot td { font-weight: 700; }
  .rp-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 10pt; margin: 10pt 0; break-inside: avoid; }
  .rp-charts img { width: 100%; border: 1px solid #D9DEE4; border-radius: 4pt; }
  .rp-charts figcaption { font-size: 8.5pt; color: #5E6B7A; margin-top: 2pt; }
  .rp-list { font-size: 9.5pt; padding-left: 14pt; }
  .rp-foot { margin-top: 14pt; font-size: 8.5pt; color: #5E6B7A; }
}
select[data-f="tipo"] { min-width: 170px; }
select[data-f="pessoa"] { min-width: 110px; }
.w-note { min-width: 170px; }
.cid-nome { min-width: 220px; max-width: 280px; }
.cid-nome small { display: block; color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }

/* IFICI na aba Vagas */
.ifici { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; margin: 14px 0; background: var(--surface-2); }
.ifici-h { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.ifici p { margin: 8px 0 0; }
.ifici .vg-form { margin: 10px 0 4px; }
.ifici .vg-form label small { max-width: 46ch; }

/* ================= sistema, risco, INE ================= */
.sync-st { color: var(--musgo); }
.sy-form { margin: 14px 0 6px; grid-template-columns: 1fr 230px; }
.sy-form input { border-color: var(--line); }
.sy-pdf { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.sy-ajuda { margin-top: 12px; font-size: 13px; }
.sy-ajuda summary { cursor: pointer; color: var(--azulejo); font-weight: 600; }
.sy-ajuda ol { padding-left: 18px; display: grid; gap: 6px; margin: 10px 0; }
#sySugestoes button { margin: 6px 6px 0 0; }
.up-pub { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 12px; }
.up-pub input { width: 100%; box-sizing: border-box; border-color: var(--line); margin-top: 6px; }
.bg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
#tblDiag td { vertical-align: top; }
.risco { margin: 18px 0; }
.risco .chart-head { flex-wrap: wrap; gap: 10px; }
#rkVol, #rkTend { width: 70px; }
.ine { margin: 18px 0; }
.ine-aviso { background: var(--ocre-soft); color: var(--ocre); border-radius: var(--r-sm); padding: 8px 12px; margin: 6px 0 10px; }
@media (max-width: 1300px) { .bg-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   2.4: organização por etapas e visual mais leve
   ===================================================================== */
@media screen {
  :root { --sombra: 0 1px 2px rgba(20, 32, 56, .06), 0 1px 1px rgba(20, 32, 56, .03); --r-lg: 14px; }
  :root[data-theme="dark"] { --sombra: none; }

  /* superfícies: sem contorno, separadas pelo fundo */
  .panel, .table-wrap, .strip, .hero, .visa { border-color: transparent; box-shadow: var(--sombra); border-radius: var(--r-lg); }
  :root[data-theme="dark"] .panel, :root[data-theme="dark"] .table-wrap, :root[data-theme="dark"] .strip { border-color: var(--line); }
  .table-wrap.flat, .panel .table-wrap { box-shadow: none; border-radius: 0; }
  .grid th { background: transparent; border-bottom-color: var(--line); }
  .kpi { border-left-color: var(--surface-2); }
  .chart-head h3 { font-size: 15.5px; }
  .grid2, .grid3 { gap: 16px; }
  .topbar { border-bottom: 0; padding-bottom: 10px; }

  /* menu por etapas */
  .brand { padding-bottom: 18px; }
  #nav { gap: 0; }
  #nav button, .nav-ajustes { padding: 8px 12px; font-size: 13.5px; }
  .etapa { margin-top: 14px; }
  .etapa { margin-top: 18px; }
  .etapa + .etapa { padding-top: 14px; border-top: 1px solid var(--line); }
  .etapa-t { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 0 12px; font: 700 12.5px var(--display); color: var(--azulejo); letter-spacing: .3px; }
  .etapa-t i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; background: var(--azulejo); color: var(--surface); }
  .nav-ajustes { width: 100%; display: flex; align-items: center; gap: 12px; border: 0; background: transparent; color: var(--muted); font-weight: 500; border-radius: var(--r-sm); cursor: pointer; margin-bottom: 4px; }
  .nav-ajustes:hover { background: var(--surface-2); color: var(--ink); }
  .nav-ajustes.active { color: var(--azulejo); background: var(--azulejo-soft); font-weight: 600; }
  .nav-group { display: none; }

  /* sub-abas */
  .subnav { position: sticky; top: var(--topo, 78px); z-index: 4; display: flex; gap: 4px; background: var(--granito); border-bottom: 1px solid var(--line); margin: 0 0 4px; padding: 0; overflow-x: auto; }
  .subnav[hidden] { display: none; }
  .subnav button { border: 0; background: none; padding: 10px 14px 11px; font: 600 13.5px var(--text); color: var(--muted); border-bottom: 2px solid transparent; border-radius: 0; cursor: pointer; white-space: nowrap; }
  .subnav button:hover { color: var(--ink); }
  .subnav button.on { color: var(--azulejo); border-bottom-color: var(--azulejo); }

  /* explicações recolhidas */
  details.ajuda { margin: 4px 0 16px; }
  details.ajuda > summary { cursor: pointer; color: var(--muted); font-size: 12.5px; width: max-content; list-style: none; display: flex; align-items: center; gap: 6px; }
  details.ajuda > summary::before { content: "?"; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; border: 1px solid var(--line); }
  details.ajuda > summary::-webkit-details-marker { display: none; }
  details.ajuda[open] > summary { color: var(--ink); }
  details.ajuda .hint { margin: 8px 0 0; }

  /* ---------- início ---------- */
  .caminho { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sombra); padding: 20px 24px; margin-bottom: 16px; }
  .caminho-ponta b { display: block; font: 600 18px var(--display); }
  .caminho-ponta small { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
  .caminho-ponta.fim { text-align: right; }
  .caminho-etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
  .caminho-etapas::before { content: ""; position: absolute; left: 14px; right: 14px; top: 13px; height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px); }
  .caminho-etapas li { position: relative; display: grid; justify-items: center; text-align: center; gap: 2px; padding: 0 6px; }
  .caminho-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 600 13px var(--display); background: var(--surface); border: 2px solid var(--line); color: var(--muted); position: relative; margin-bottom: 4px; }
  .caminho-etapas li b { font: 600 14px var(--display); color: var(--muted); }
  .caminho-etapas li small { font-size: 12px; color: var(--muted); }
  .caminho-barra { display: block; width: 64%; height: 3px; border-radius: 3px; background: var(--surface-2); margin-top: 4px; overflow: hidden; }
  .caminho-barra i { display: block; height: 100%; background: var(--azulejo); }
  .caminho-etapas li.feita .caminho-n { background: var(--musgo); border-color: var(--musgo); color: #fff; }
  .caminho-etapas li.feita .caminho-barra i { background: var(--musgo); }
  .caminho-etapas li.atual .caminho-n { background: var(--azulejo); border-color: var(--azulejo); color: #fff; box-shadow: 0 0 0 5px var(--azulejo-soft); }
  .caminho-etapas li.atual b { color: var(--ink); }
  :root[data-theme="dark"] .caminho-etapas li.atual .caminho-n, :root[data-theme="dark"] .caminho-etapas li.feita .caminho-n { color: #0F1622; }

  .in-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
  .in-proximo { background: var(--azulejo); color: #fff; border-radius: var(--r-lg); padding: 26px 28px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 220px;
    background-image: radial-gradient(circle at 100% 0, rgba(255,255,255,.09) 0 22px, transparent 23px), radial-gradient(circle at 0 100%, rgba(255,255,255,.09) 0 22px, transparent 23px); background-size: 64px 64px; }
  :root[data-theme="dark"] .in-proximo { background-color: #24467F; }
  .in-etapa { margin: 0; font-size: 13px; opacity: .85; }
  .in-proximo h2 { margin: 6px 0 6px; font: 700 30px/1.15 var(--display); letter-spacing: -.2px; max-width: 22ch; }
  .in-det { margin: 0 0 18px; opacity: .9; max-width: 46ch; }
  .in-proximo .primary.grande { background: #fff; color: var(--azulejo); border-color: #fff; padding: 11px 20px; font-size: 14px; }
  :root[data-theme="dark"] .in-proximo .primary.grande { color: #24467F; }
  .in-numeros { display: grid; gap: 10px; }
  .in-num { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: baseline; gap: 0 12px; text-align: left; background: var(--surface); border: 0; box-shadow: var(--sombra); border-radius: var(--r-lg); padding: 14px 18px; cursor: pointer; border-left: 4px solid var(--line); }
  .in-num small { color: var(--muted); font-size: 12.5px; }
  .in-num b { grid-row: span 2; font: 600 26px var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .in-num span { color: var(--muted); font-size: 12px; font-weight: 400; }
  .in-num.bom { border-left-color: var(--musgo); } .in-num.bom b { color: var(--musgo); }
  .in-num.atencao { border-left-color: var(--ocre); }
  .in-num.ruim { border-left-color: var(--dao); } .in-num.ruim b { color: var(--dao); }
  .in-grid-b { grid-template-columns: 1fr 1fr; }
  .in-passos, .in-tarefas { list-style: none; margin: 0; padding: 0; }
  .in-passos li, .in-tarefas li { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--surface-2); }
  .in-passos li:last-child, .in-tarefas li:last-child { border-bottom: 0; }
  .in-passos b, .in-tarefas b { display: block; font-weight: 600; font-size: 13.5px; }
  .in-passos small, .in-tarefas small { color: var(--muted); font-size: 12px; }
  .in-passos li.feito b { color: var(--muted); font-weight: 500; text-decoration: line-through; text-decoration-color: var(--line); }
  .in-check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; }
  .in-passos li.feito .in-check { background: var(--musgo); border-color: var(--musgo); }
  .in-tarefas li { grid-template-columns: 28px 1fr; }
  .in-tarefas li.vazio { display: block; color: var(--muted); }

  /* ---------- vistos por pessoa ---------- */
  #view-vistos > .panel { margin-bottom: 16px; }
  .vs-tabela td { vertical-align: middle; }
  .vs-tabela tr { cursor: pointer; }
  .vs-tabela tr.sel td { background: var(--azulejo-soft); }
  .vs-tabela select[data-vf] { min-width: 190px; border-color: var(--line); background: var(--surface); }
  .vs-tabela select.sub { margin-left: 6px; min-width: 120px; }
  .seg-pessoas { flex-wrap: wrap; }
  .seg-pessoas button { padding: 6px 14px; }
  .vs-opcoes { display: grid; }
  .vs-op { border-bottom: 1px solid var(--surface-2); }
  .vs-op:last-child { border-bottom: 0; }
  .vs-op > summary { display: grid; grid-template-columns: minmax(180px, 1.1fr) auto minmax(0, 2fr) auto; gap: 14px; align-items: center; padding: 12px 4px; cursor: pointer; list-style: none; }
  .vs-op > summary::-webkit-details-marker { display: none; }
  .vs-op-nome { font: 600 14px var(--display); }
  .vs-op-motivo { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .vs-op-esc { font-size: 12px; font-weight: 600; color: var(--azulejo); }
  .vs-op.chosen > summary .vs-op-nome { color: var(--azulejo); }
  .vs-op.chosen > summary { box-shadow: inset 3px 0 0 var(--azulejo); padding-left: 12px; }
  .vs-op-corpo { padding: 0 4px 16px; max-width: 900px; }
  .vs-op[open] .vs-op-motivo { white-space: normal; }
  details.dobra > summary { display: flex; align-items: baseline; gap: 12px; cursor: pointer; list-style: none; }
  details.dobra > summary::-webkit-details-marker { display: none; }
  details.dobra > summary h3 { margin: 0; font: 600 15.5px var(--display); }
  details.dobra > summary::after { content: "+"; margin-left: auto; color: var(--muted); font-size: 18px; line-height: 1; }
  details.dobra[open] > summary::after { content: "−"; }
  details.dobra[open] > summary { margin-bottom: 12px; }
  .grid2 > details.dobra { align-self: start; }

  @media (max-width: 1300px) {
    .in-grid, .in-grid-b { grid-template-columns: 1fr; }
    .caminho { grid-template-columns: 1fr; }
    .caminho-ponta.fim { text-align: left; }
    .vs-op > summary { grid-template-columns: 1fr auto auto; }
    .vs-op-motivo { display: none; }
  }
}

/* 2.4.1: câmbio automático nos cenários */
@media screen {
  .sc-margem { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 600; }
  .sc-margem input { width: 72px; }
  .params input:disabled { background: transparent; border-color: transparent; color: var(--ink); font-weight: 600; opacity: 1; }
}
@media screen { .params input:disabled::-webkit-inner-spin-button, .params input:disabled::-webkit-outer-spin-button { display: none; } }
@media screen {
  .vr-lista { list-style: none; margin: 0 0 6px; padding: 0; }
  .vr-lista li { display: grid; grid-template-columns: minmax(80px, 1fr) auto auto; grid-template-areas: "n v p" "m m m"; align-items: center; gap: 2px 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
  .vr-lista li b { grid-area: n; font-weight: 600; }
  .vr-lista .vr-via { grid-area: v; color: var(--muted); font-size: 13px; }
  .vr-lista .pill { grid-area: p; justify-self: end; }
  .vr-lista small { grid-area: m; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
  .vr-sub { margin: 16px 0 2px; font-family: var(--display); font-weight: 600; font-size: 14px; }
  .vr-falta { margin: 14px 0 0; color: var(--muted); font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
}

/* 2.5: modo simples, configuração guiada, "O que preencher aqui" */
@media screen {
  body.simples .nav-completo, body:not(.simples) .nav-simples, body.simples .so-completo, body:not(.simples) .so-simples { display: none !important; }
  body.simples .avancado { display: none !important; }
  .nav-simples { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
  #modoBtn { margin-bottom: 4px; }

  .o-que { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 0 0 16px; padding: 14px 18px; border-radius: 12px; background: var(--azulejo-soft); color: var(--ink); }
  .o-que-t { margin: 0 0 4px; font: 600 14px var(--display); color: var(--azulejo); }
  .o-que ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; max-width: 80ch; }
  .o-que button { flex: none; width: auto; white-space: nowrap; }

  .em-palavras { margin: 0 0 16px; }
  .em-palavras h3 { margin: 0 0 8px; font: 600 15px var(--display); }
  .em-palavras ul { margin: 0; padding-left: 18px; line-height: 1.7; font-size: 14.5px; }

  .in-guia { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; margin: 0 0 16px; border-radius: 14px; background: var(--surface); border: 2px solid var(--azulejo); }
  .in-guia[hidden] { display: none; }
  .in-guia b { display: block; font: 600 17px var(--display); margin-bottom: 4px; }
  .in-guia span { color: var(--muted); font-size: 13.5px; line-height: 1.5; max-width: 75ch; display: block; }
  .in-refazer { margin: 18px 0 0; color: var(--muted); font-size: 13px; }

  dialog.guia { max-width: 760px; width: calc(100vw - 48px); padding: 0; border: 0; border-radius: 16px; box-shadow: 0 24px 60px rgba(10, 16, 26, .35); }
  .guia-caixa { display: flex; flex-direction: column; max-height: min(86vh, 860px); }
  .guia-caixa header { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; padding: 18px 26px 0; }
  .guia-caixa header p { margin: 0; font: 600 13px var(--display); color: var(--muted); }
  .guia-trilho { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin-top: 6px; }
  .guia-trilho i { display: block; height: 100%; background: var(--azulejo); transition: width .25s ease; }
  .guia-corpo { padding: 18px 26px 8px; overflow-y: auto; }
  .guia-corpo h2 { font: 600 24px/1.25 var(--display); margin: 4px 0 6px; }
  .guia-corpo h3 { font: 600 15px var(--display); margin: 18px 0 6px; }
  .guia-ajuda { color: var(--muted); margin: 0 0 16px; font-size: 14px; line-height: 1.5; max-width: 68ch; }
  .guia-campos > p { line-height: 1.55; }
  .guia-caixa footer { display: flex; justify-content: space-between; gap: 12px; padding: 14px 26px 20px; border-top: 1px solid var(--line); }
  .guia-caixa footer .primary { min-width: 140px; }
  .guia-lista, .guia-frases { padding-left: 20px; line-height: 1.6; }
  .guia-frases li { margin-bottom: 6px; font-size: 15px; }
  .guia-vistos { list-style: none; padding: 0; margin: 0; }
  .guia-vistos li { padding: 6px 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .guia-nota { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin: 12px 0 4px; }
  .guia-vazio { color: var(--muted); margin: 4px 0 8px; }
  .guia-rot { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; margin: 12px 0; }
  .guia-rot input[type="month"], .guia-rot select { max-width: 420px; }
  .guia-num { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
  .guia-num i { font-style: normal; color: var(--muted); font-size: 13px; }
  .guia-num input { width: 130px; }
  .guia-pessoas, .guia-linhas { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
  .guia-pessoa { display: grid; grid-template-columns: 1fr 130px 140px 32px; gap: 8px; align-items: center; }
  .guia-idade { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
  .guia-idade input { width: 64px; }
  .guia-linha { display: grid; grid-template-columns: 1fr auto auto 32px; gap: 10px; align-items: center; }
  .guia-casados { margin-top: 14px; }
  .guia-bloco { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px 14px; margin: 0 0 12px; }
  .guia-bloco legend { font: 600 15px var(--display); padding: 0 6px; }
  .guia-q { margin: 12px 0 6px; font-size: 13.5px; font-weight: 600; }
  .guia-ops { display: flex; flex-direction: column; gap: 6px; }
  .guia-ops.linha { flex-direction: row; flex-wrap: wrap; }
  .guia-op { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
  .guia-ops.linha .guia-op { flex: 1 1 180px; }
  .guia-op:hover { border-color: var(--azulejo); }
  .guia-op.on { border-color: var(--azulejo); background: var(--azulejo-soft); }
  .guia-op input { margin-top: 3px; accent-color: var(--azulejo); }
  .guia-op b { display: block; font-weight: 600; font-size: 14px; }
  .guia-op small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; line-height: 1.4; }
  .guia-op em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--musgo); background: var(--musgo-soft, rgba(47, 122, 74, .12)); padding: 1px 7px; border-radius: 10px; margin-left: 6px; }
  .guia-gastos { display: flex; flex-direction: column; }
  .guia-gasto { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
  .guia-gasto span small { display: block; color: var(--muted); font-size: 12px; }
  .guia-gasto.off span, .guia-gasto.off b { opacity: .45; text-decoration: line-through; }
  .guia-total { font-size: 15px; margin: 14px 0 0; }
  @media (max-width: 720px) { .guia-pessoa, .guia-linha { grid-template-columns: 1fr 1fr; } .o-que { flex-direction: column; } .in-guia { flex-direction: column; align-items: flex-start; } }
}
@media screen {
  .guia-corpo input:not([type="radio"]):not([type="checkbox"]), .guia-corpo select { border: 1px solid var(--line); background: var(--surface); padding: 8px 10px; border-radius: 8px; width: 100%; }
  .guia-corpo .guia-num input { width: 140px; }
  .guia-corpo .guia-idade input { width: 70px; }
  .guia-corpo input[type="radio"], .guia-corpo input[type="checkbox"] { width: auto; flex: none; margin: 3px 0 0; }
  .guia-op span { flex: 1; text-align: left; }
}
@media screen {
  .guia-corpo .guia-num input:not([type="radio"]) { width: 140px; }
  .guia-corpo .guia-idade input:not([type="radio"]) { width: 70px; }
  .guia-bloco > .guia-ops:not(.linha) { display: grid; grid-template-columns: 1fr 1fr; }
  @media (max-width: 720px) { .guia-bloco > .guia-ops:not(.linha) { grid-template-columns: 1fr; } }
}
@media screen { .o-que > div { flex: 1; min-width: 0; } }
@media screen {
  #syModo { margin: 4px 0 12px; display: inline-flex; }
  .sy-uri { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; } .sy-uri input { flex: 1 1 220px; }
  .sy-uri input { border: 1px solid var(--line); background: var(--surface); }
  #syPdfNota { display: block; margin-top: 4px; }
}

/* 2.7–2.8: padrão das telas (números no topo, gráfico, cartões) */
@media screen {
  #invKpis { margin-bottom: 16px; }
  .pg-config { display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: flex-start; margin: 4px 0 18px; }
  .pg-config > div { display: flex; flex-direction: column; gap: 6px; }
  .pg-config .muted { margin: 0; max-width: 46ch; }
  .pg-rot { margin: 0; font: 600 13px var(--display); color: var(--muted); }
  .num-un { display: inline-flex; align-items: center; gap: 6px; }
  .num-un i { font-style: normal; color: var(--muted); font-size: 13px; }
  .num-un input { width: 120px; border: 1px solid var(--line); background: var(--surface); }
  #invAporteGeral { width: 120px; }
  .cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; margin-bottom: 16px; }
  .cartao { background: var(--surface); border-radius: 14px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 8px rgba(16, 24, 40, .04); display: flex; flex-direction: column; gap: 12px; border-top: 3px solid var(--azulejo); }
  .cartao header { display: grid; grid-template-columns: 1fr auto 32px; gap: 10px; align-items: center; }
  .cartao .cartao-nome { font: 600 17px var(--display); padding: 4px 6px; margin-left: -6px; }
  .cartao .cartao-tipo { width: auto; font-size: 13px; color: var(--muted); }
  .campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .campo label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
  .campo small { font-size: 12px; color: var(--muted); line-height: 1.35; }
  .campo .num-un input { width: 100%; }
  .campo-fixo { margin: 6px 0 0; font-weight: 600; }
  .campo-fixo small { display: block; font-weight: 400; }
  .cartao-mais summary { font-size: 13px; color: var(--azulejo); cursor: pointer; }
  .cartao-mais .campos { grid-template-columns: 1fr 1fr; margin-top: 10px; }
  .cartao-res { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); }
  .cartao-res dt { font-size: 12.5px; color: var(--muted); }
  .cartao-res dd { margin: 2px 0 0; font: 600 18px var(--display); }
  .cartao-res dd small { display: block; font: 400 12px var(--text); color: var(--muted); }
  .cartao footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; }
  .cartao-nota { margin: 0; font-size: 13px; color: var(--muted); }
  .cartao-nota b { color: var(--ink); }
  .cartao-acao { display: inline-flex; gap: 6px; align-items: center; }
  .cartao-acao .num-un input { width: 130px; }
  .cartao-novo { border: 2px dashed var(--line); background: transparent; border-radius: 14px; min-height: 120px; color: var(--azulejo); font: 600 15px var(--display); cursor: pointer; }
  .cartao-novo:hover { border-color: var(--azulejo); background: var(--azulejo-soft); }
  @media (max-width: 900px) { .cartoes { grid-template-columns: 1fr; } .campos { grid-template-columns: 1fr 1fr; } }
}
@media screen {
  @keyframes vascoMudou { 0% { box-shadow: 0 0 0 3px var(--musgo); background-color: var(--musgo-soft); } 100% { box-shadow: 0 0 0 0 transparent; } }
  .vasco-mudou { animation: vascoMudou 2.8s ease-out; }
  tr.vasco-mudou td { animation: vascoMudou 2.8s ease-out; }
  @media (prefers-reduced-motion: reduce) { .vasco-mudou, tr.vasco-mudou td { animation: none; outline: 2px solid var(--musgo); } }
}
@media screen {
  .cartao header { display: flex; align-items: center; gap: 10px; }
  .cartao header .cartao-nome { flex: 1; min-width: 0; }
  .cartao header .switch { flex: none; }
  .cartao.off { opacity: .62; }
  .cartao.off header .cartao-nome { text-decoration: line-through; text-decoration-color: var(--muted); }
  .cartao[data-cor="ocre"] { border-top-color: var(--ocre); }
  .cartao[data-cor="musgo"] { border-top-color: var(--musgo); }
  .cartao[data-cor="dao"] { border-top-color: var(--dao); }
  .cartao[data-cor="cinza"] { border-top-color: var(--line); }
  .cartoes.compactos { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
  .cartoes.compactos .cartao { padding: 12px 14px; gap: 8px; }
  .cartoes.compactos .cartao-nome { font-size: 15px; }
  .cartoes.compactos .campos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cartoes.compactos .cartao-res dd { font-size: 16px; }
  .cartoes.compactos .cartao-novo { min-height: 90px; }
  .campos.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campos.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .campo .switch-linha { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 13.5px; }
  .campo select, .campo input[type="text"], .campo input[type="month"] { border: 1px solid var(--line); background: var(--surface); }
  .campo-fixo .link { font-size: 12.5px; }
  .cartao-res.c3 { grid-template-columns: repeat(3, 1fr); }
  .cartao .pill { flex: none; }
  .pg-titulo { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 6px 0 12px; }
  .pg-titulo h3 { margin: 0; font: 600 16px var(--display); }
  .pg-grupo { margin: 0 0 18px; }
  .pg-grupo > h4 { margin: 0 0 8px; font: 600 13.5px var(--display); color: var(--muted); }
  .strip.strip3 { grid-template-columns: repeat(3, 1fr); }
  @media (max-width: 900px) { .campos.c4 { grid-template-columns: 1fr 1fr; } .cartoes.compactos .campos { grid-template-columns: 1fr 1fr; } }
}
@media screen { .num-un .un-sel { width: 62px; flex: none; padding-right: 2px; } }
@media screen {
  .campos, .campos.c4, .cartoes.compactos .campos { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .cartoes.compactos .campos { grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); }
  .campo .num-un { display: flex; width: 100%; }
  .campo .num-un input { flex: 1; min-width: 0; width: auto; }
  .campo .switch-linha { white-space: nowrap; }
}
@media screen {
  .cartao.sel { box-shadow: 0 0 0 2px var(--azulejo), 0 1px 8px rgba(16, 24, 40, .06); }
  .cartao header .muted.small { flex: 1; }
  .cartao header b.cartao-nome + .muted.small { margin-left: 2px; }
  .vs-acoes { margin: 4px 0 16px; }
  #vsPessoas .cartao { cursor: pointer; }
  #vsPessoas .cartao-nota { color: var(--ink); opacity: .85; }
}
@media screen {
  .switch-linha { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-size: 13.5px; white-space: nowrap; }
  .campo input[type="number"], .cartao input[type="number"] { border: 1px solid var(--line); background: var(--surface); }
  .pg-config select { width: auto; min-width: 170px; border: 1px solid var(--line); background: var(--surface); }
  .pg-config > div { min-width: 0; }
}
@media screen {
  .cartao-novo.duplo { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 14px; cursor: default; }
  .cartao-novo.duplo button { border: 0; background: none; color: var(--azulejo); font: 600 15px var(--display); cursor: pointer; padding: 8px; border-radius: 8px; }
  .cartao-novo.duplo button:hover { background: var(--azulejo-soft); }
  .cartao-novo.duplo:hover { background: transparent; }
}

/* 2.9: carteira de ações e fundos */
@media screen {
  .cart-topo { flex-wrap: wrap; margin-top: 10px; }
  .cart-busca { position: relative; flex: 1 1 320px; max-width: 520px; }
  .cart-busca input { width: 100%; border: 1px solid var(--line); background: var(--surface); padding: 9px 12px; border-radius: 10px; }
  .cart-resultados { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(16, 24, 40, .14); padding: 6px; max-height: 360px; overflow-y: auto; }
  .cart-resultados .muted { margin: 8px 10px; }
  .cart-res { display: grid; grid-template-columns: 76px 1fr auto; gap: 10px; align-items: center; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--ink); }
  .cart-res:hover, .cart-res:focus-visible { background: var(--azulejo-soft); }
  .cart-res span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
  .cart-res small { color: var(--muted); }
  .cart-emp { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cart-cot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .cart-cot > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
  .cart-preco { font: 600 20px var(--display); }
  .cart-cot small { width: 100%; }
  .cart-spark { width: 120px; height: 32px; flex: none; }
  .cart-op { flex-wrap: wrap; }
  .cart-op select { width: auto; border: 1px solid var(--line); background: var(--surface); }
  .cart-op .num-un input { width: 92px; }
  .cart-vazio { margin: 0 0 16px; }
  #cartKpis { margin-bottom: 14px; }
}
@media screen {
  .sy-versoes { list-style: none; margin: 8px 0 0; padding: 0; max-height: 320px; overflow-y: auto; }
  .sy-versoes li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
}

/* ---------- 3.0: conta, planos da família e comparação ---------- */
.brand strong { font-size: 16.5px; line-height: 1.15; }
body:not(.com-banco) .so-banco { display: none !important; }
.plano-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  margin: -12px 0 18px; padding: 9px 10px 9px 12px; text-align: left; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink);
}
.plano-btn:hover { border-color: var(--azulejo); }
.plano-btn:focus-visible { outline: 2px solid var(--azulejo); outline-offset: 2px; }
.plano-btn-txt { min-width: 0; }
.plano-btn b { display: block; font: 600 13.5px var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plano-btn small { color: var(--muted); font-size: 12px; }
body.so-ver .plano-btn { border-color: var(--ocre); }

.so-ver-faixa {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 12px 0 0; padding: 10px 14px; border-radius: var(--r-md);
  background: var(--ocre-soft); color: var(--ink); border: 1px solid var(--ocre);
}
.so-ver-faixa[hidden] { display: none; }
body.so-ver main .view :is(input, select, textarea) { pointer-events: none; opacity: .8; }
body.so-ver main .view :is([data-add], [data-del], .c-del, .cartao-novo, [data-nova-vaga], [data-addpessoa], .ia-aplicar) { display: none !important; }

/* a porta: login e escolha do plano, por cima de tudo */
.porta {
  position: fixed; inset: 0; z-index: 60; overflow-y: auto;
  display: grid; place-items: center; padding: 32px 16px;
  background: color-mix(in srgb, var(--granito) 88%, transparent);
  backdrop-filter: blur(6px);
}
.porta[hidden] { display: none; }
.porta-cartao {
  position: relative; width: min(560px, 100%);
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 48px rgba(10, 20, 40, .18); padding: 26px 28px 22px;
}
.porta[data-modo="login"] .porta-cartao { width: min(400px, 100%); }
.porta-fechar { position: absolute; top: 12px; right: 12px; }
.porta-marca { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; }
.porta-marca strong { display: block; font: 600 20px var(--display); }
.porta-marca span { color: var(--muted); font-size: 13px; }
.porta-abas { margin-bottom: 14px; }
.porta-login { display: flex; flex-direction: column; gap: 10px; }
.porta-login[hidden] { display: none; }
.porta-login:not(.criando) .porta-so-criar { display: none; }
.porta-campo { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.porta-campo input, .porta-campo select { font: 14px var(--text); padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); }
.porta-campo input:focus, .porta-campo select:focus { outline: 2px solid var(--azulejo); outline-offset: 0; border-color: transparent; }
.porta-ok { margin-top: 4px; padding: 10px; }
.porta-erro { color: var(--dao); font-size: 13px; margin: 0; min-height: 1em; }
.porta-erro:empty { min-height: 0; }
.porta-planos[hidden] { display: none; }
.pp-lista { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pp-item {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: start;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
}
.pp-item.atual { border-color: var(--azulejo); background: var(--azulejo-soft); }
.pp-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pp-info b { font-size: 15px; }
.pp-dest { font-size: 12.5px; color: var(--azulejo); font-weight: 600; }
.pp-acoes { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.pp-pessoas { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.pp-pessoas ul, .ct-familia { list-style: none; margin: 0; padding: 0; }
.pp-pessoas li, .ct-familia li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 0; }
.ct-familia li { padding: 7px 0; border-bottom: 1px solid var(--line); }
.ct-linha { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ct-linha input, .ct-add input { flex: 1 1 140px; min-width: 0; font: 13.5px var(--text); padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); }
.ct-add { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 8px; }
.ct-form { margin: 10px 0; }
.porta-login.criando .porta-so-entrar { display: none; }
.porta-termos { font-size: 13px; color: var(--ink); align-items: flex-start; }
.porta-termos a { color: var(--azulejo); }
.porta-rodape { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 2px 0 0; }
.porta-explica, .porta-dica { margin: 0; line-height: 1.45; }
.pp-outra-familia summary { cursor: pointer; color: var(--azulejo); font-size: 13.5px; }
.pp-outra-familia[open] { display: flex; flex-direction: column; gap: 8px; }
.porta-dica { margin-top: -4px; }
#ptCodigo, #rcCodigo, .ct-codigo-valor { font-family: var(--mono, ui-monospace, Consolas, monospace); letter-spacing: .04em; text-transform: uppercase; }
.ct-codigo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 2px; padding: 10px 12px; border: 1px dashed var(--azulejo); border-radius: var(--r-sm); background: var(--azulejo-soft); }
.ct-codigo-valor { font-size: 16px; color: var(--azulejo); }
.pp-boas-vindas h3 { font: 600 18px var(--display); margin: 0 0 6px; }
.pp-boas-vindas p { margin: 0 0 12px; }
.pp-boas-vindas[hidden], #ppComFamilia[hidden], .pp-novo[hidden], .porta-campo[hidden] { display: none; }
.pp-boas-vindas { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.pp-familia { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pp-familia + .pp-familia { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.pp-fam-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pp-fam-head b { font: 600 15px var(--display); }
.pp-lista-planos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pp-aviso { margin: 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--ocre-soft); border: 1px solid var(--ocre); font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pp-outro-nota { margin: -4px 0 0; }
.teste-faixa { background: var(--azulejo-soft); border-color: var(--azulejo); }
.so-ver-faixa .button, .pp-aviso .button { text-decoration: none; }
.ct-familias { display: flex; flex-direction: column; gap: 16px; }
.ct-fam .ct-assin p { margin: 0 0 6px; }
.ct-sub { font: 600 13px var(--text); margin: 14px 0 4px; display: flex; gap: 8px; align-items: baseline; }
.ct-mais { margin-top: 12px; }
.ct-mais summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.ct-mais[open] { display: flex; flex-direction: column; gap: 10px; }
.pp-novo { border: 1px dashed var(--line); border-radius: var(--r-md); padding: 10px 14px; }
.pp-novo summary { cursor: pointer; font-weight: 600; color: var(--azulejo); }
.pp-novo-campos { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.pp-vazio { padding: 8px 2px; }
.pp-rodape { margin: 14px 0 0; }
body.porta-aberta .app { filter: saturate(.85); }

.cmp-tbl th[scope="row"] { text-align: left; font-weight: 600; color: var(--muted); white-space: nowrap; }
.cmp-tbl thead th { text-align: right; vertical-align: bottom; }
.cmp-tbl td { text-align: right; vertical-align: top; }
.cmp-tbl .cmp-atual { background: var(--azulejo-soft); }

/* ---------- destino: telas que só existem para um país ---------- */
body.pais-outro .so-portugal, body:not(.pais-chile) .so-chile, body:not(.pais-outro) .so-outro, body.pais-chile .so-perfil, body:not(.pais-outro) .so-perfil { display: none !important; }

/* ---------- gastos do mês ---------- */
.lm-form { display: grid; grid-template-columns: 150px minmax(180px, 2fr) 110px 150px minmax(170px, 1fr) auto; gap: 8px; align-items: center; }
.lm-form input, .lm-form select { font: 14px var(--text); padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); min-width: 0; }
.lm-form .num-un input { border: 0; }
@media (max-width: 1250px) { .lm-form { grid-template-columns: 1fr 1fr 1fr; } }
.lm-grid { grid-template-columns: 3fr 2fr; }
.lm-tbl input, .lm-tbl select { width: 100%; min-width: 0; font: 13.5px var(--text); padding: 5px 7px; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--ink); }
.lm-tbl input:hover, .lm-tbl select:hover, .lm-tbl input:focus, .lm-tbl select:focus { border-color: var(--line); background: var(--surface); }
.lm-tbl td:first-child { width: 140px; }
.lm-tbl td.num { width: 150px; }
.lm-tbl .num-un input { text-align: right; }
.lm-entrada td { background: color-mix(in srgb, var(--musgo, #2F7A4A) 8%, transparent); }
.lm-cats { display: flex; flex-direction: column; gap: 14px; }
.lm-cat-t { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; margin-bottom: 5px; }
.lm-cat .bar i { background: var(--azulejo); }
.lm-cat .bar i.bar-neg { background: var(--dao); }

/* ---------- Atlas: largura ajustável e uso do mês ---------- */
.ia-alca { position: absolute; left: -4px; top: 0; bottom: 0; width: 9px; cursor: ew-resize; z-index: 2; touch-action: none; }
.ia-alca::after { content: ""; position: absolute; left: 3px; top: 50%; width: 3px; height: 44px; margin-top: -22px; border-radius: 3px; background: var(--line); transition: background .15s; }
.ia-alca:hover::after, .ia-alca:focus-visible::after, body.ia-redimensionando .ia-alca::after { background: var(--azulejo); }
.ia-alca:focus-visible { outline: none; }
body.ia-redimensionando { cursor: ew-resize; user-select: none; }
body.ia-redimensionando .ia-drawer { animation: none; }
.ia-uso { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.ia-uso[hidden] { display: none; }
.ia-uso-t { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
.ia-uso-t b { color: var(--ink); font-weight: 600; }
.ia-uso-bar { display: block; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.ia-uso-bar i { display: block; height: 100%; border-radius: 999px; background: var(--azulejo); transition: width .4s ease; }
.ia-uso.alto .ia-uso-bar i { background: var(--ocre); }
.ia-uso.cheio .ia-uso-bar i { background: var(--dao); }
.ia-uso.cheio .ia-uso-t b { color: var(--dao); }
.ia-foot #iaCota { flex: 1 1 100%; }
.ia-uso-menu { display: block; width: 100%; padding: 8px 12px; margin: 2px 0 4px; background: transparent; border: 0; text-align: left; border-radius: var(--r-sm); }
.ia-uso-menu:hover { background: var(--surface-2); }
.ia-uso-menu:has(#iaUsoMenu[hidden]) { display: none; }

/* ---------- respiro entre blocos empilhados (painéis, tabelas, cartões) ----------
   Especificidade zero: as regras de cada tela continuam valendo. Em fluxo normal as margens
   se juntam, então nunca soma duas vezes; dentro de grids, o próprio gap separa. */
:where(:not(.grid2, .grid3, .strip, .cartoes, .vs-opcoes, .btn-row) > :is(.panel, .grid2, .strip, .cartoes, .table-wrap, .o-que, .milestones-box, .pg-titulo))
  + :where(.panel, .grid2, .strip, .cartoes, .table-wrap, .o-que, .pg-titulo, .hint) { margin-top: 18px; }
:where(.panel) > :where(.table-wrap, .cbox, .grid2, .strip) + :where(.table-wrap, .cbox, .grid2, .strip, .btn-row, .hint) { margin-top: 14px; }
.pg-titulo { margin-bottom: 10px; }

/* ---------- tour do primeiro acesso ---------- */
.tour { position: fixed; inset: 0; z-index: 70; }
.tour-foco { position: fixed; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(8, 14, 26, .62); outline: 2px solid var(--azulejo); outline-offset: 2px; transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease; pointer-events: none; }
.tour.centro .tour-foco { outline: 0; }
.tour-card { position: fixed; width: min(380px, calc(100vw - 24px)); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px 14px; box-shadow: 0 18px 48px rgba(10, 20, 40, .28); transition: left .25s ease, top .25s ease; }
.tour.centro .tour-card { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: min(460px, calc(100vw - 24px)); }
.tour-passo { margin: 0 0 4px; font-size: 12px; color: var(--azulejo); font-weight: 600; }
.tour-card h3 { margin: 0 0 6px; font: 600 18px var(--display); }
.tour-card p#tourTexto { margin: 0 0 14px; line-height: 1.5; }
.tour-botoes { display: flex; align-items: center; gap: 8px; }
.tour-botoes span { flex: 1; }
@media (prefers-reduced-motion: reduce) { .tour-foco, .tour-card { transition: none; } }