:root {
  color-scheme: light dark;
  --fundo: #f4f6f8;
  --superficie: #ffffff;
  --superficie-2: #f0f3f7;
  --texto: #17202b;
  --suave: #556170;
  --apagado: #8a96a6;
  --borda: #d5dbe3;
  --borda-leve: #e8ecf1;
  --destaque: #1b57b3;
  --destaque-fundo: #eaf1fc;
  --sobre-destaque: #ffffff;
  --positivo: #146c37;
  --negativo: #b3261e;
  --critico-fundo: #fde8e6;
  --atencao: #7a4f00;
  --atencao-fundo: #fff3d1;
  --sobre-atencao: #ffffff;
  --bom-fundo: #e3f4e9;
  --foco: #1b57b3;
  --sombra: 0 1px 2px rgba(16, 24, 40, 0.06);
  --sombra-cartao: 0 1px 3px rgba(16, 24, 40, 0.08);
  --raio: 10px;
  --raio-cartao: 18px;
  /* A barra de abas presa ao pé (no celular), acima da barra de gestos. */
  --pe: calc(64px + env(safe-area-inset-bottom, 0px));
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0e1319;
    --superficie: #171e27;
    --superficie-2: #1f2833;
    --texto: #e7ecf2;
    --suave: #a1adba;
    --apagado: #7b8796;
    --borda: #2e3a48;
    --borda-leve: #243040;
    --destaque: #8ab4ff;
    --destaque-fundo: #1a2a44;
    --sobre-destaque: #0e1319;
    --positivo: #6ad394;
    --negativo: #ff8f85;
    --critico-fundo: #3b1a17;
    --atencao: #ffd27a;
    --atencao-fundo: #3a2d0c;
    --sobre-atencao: #1d1600;
    --bom-fundo: #15301f;
    --foco: #8ab4ff;
    --sombra: none;
    --sombra-cartao: none;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; scroll-padding-bottom: calc(var(--pe) + 16px); }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow-wrap: break-word;
}
h1, h2, h3, p, ul, ol, dl, dd, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: var(--destaque); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.positivo { color: var(--positivo); }
.negativo { color: var(--negativo); }
.dica { color: var(--suave); font-size: 0.875rem; }
.original { display: block; color: var(--suave); font-size: 0.8125rem; font-weight: 400; font-variant-numeric: tabular-nums; white-space: normal; }

/* Ícones: só a forma (máscara), na cor do texto */
.icone { display: inline-block; flex: none; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.ic-inicio { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.ic-cronograma { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.ic-dinheiro { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20M17 6H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E"); }
.ic-ese { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h10M18 7h2M4 17h4M12 17h8'/%3E%3Ccircle cx='16' cy='7' r='2'/%3E%3Ccircle cx='10' cy='17' r='2'/%3E%3C/svg%3E"); }
.ic-saude { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.6-9.2-9.3C1.7 7.5 3.8 4 7.3 4c2 0 3.5 1.1 4.7 2.8C13.2 5.1 14.7 4 16.7 4c3.5 0 5.6 3.5 4.5 6.7C19.5 15.4 12 20 12 20z'/%3E%3C/svg%3E"); }
.ic-educacao { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9.5 12 5l10 4.5-10 4.5z'/%3E%3Cpath d='M6 11.5V16c3.3 2.3 8.7 2.3 12 0v-4.5'/%3E%3C/svg%3E"); }
.ic-carro { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 16H3v-4l2-5h14l2 5v4h-2M9 16h6'/%3E%3Cpath d='M3 12h18'/%3E%3Ccircle cx='7' cy='16.5' r='1.8'/%3E%3Ccircle cx='17' cy='16.5' r='1.8'/%3E%3C/svg%3E"); }
.ic-documento { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h8l4 4v16H6z'/%3E%3Cpath d='M14 2v4h4M9 12h6M9 16h6'/%3E%3C/svg%3E"); }
.ic-familia { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M16 14.2c2.8.3 5 2.6 5 5.8'/%3E%3C/svg%3E"); }
.ic-alerta { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 21h20z'/%3E%3Cpath d='M12 10v5M12 18v.01'/%3E%3C/svg%3E"); }
.ic-lista { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h12M9 12h12M9 18h12M4 6h.01M4 12h.01M4 18h.01'/%3E%3C/svg%3E"); }
.ic-fontes { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h14v15H6a2 2 0 0 0-2 2z'/%3E%3Cpath d='M4 20a2 2 0 0 0 2 2h14v-4'/%3E%3C/svg%3E"); }
.ic-veredito { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E"); }
.ic-info { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.01'/%3E%3C/svg%3E"); }
.ic-moradia { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.ic-baixar { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5'/%3E%3Cpath d='M4 17v3h16v-3'/%3E%3C/svg%3E"); }
.ic-nuvem { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18a4.5 4.5 0 0 1-.6-8.96A6 6 0 0 1 18 9.5a4.25 4.25 0 0 1-.5 8.5z'/%3E%3Cpath d='m9.5 13.5 2 2 3.5-3.5'/%3E%3C/svg%3E"); }
.ic-pessoa { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E"); }
.ic-sair { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h5a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-5'/%3E%3Cpath d='M10 16l-4-4 4-4M6 12h10'/%3E%3C/svg%3E"); }
.ic-lixo { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E"); }
.ic-lupa { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E"); }

/* Corpo e barra de abas: no pé, como app; no computador, coluna à esquerda */
.corpo { max-width: 720px; margin: 0 auto; padding: 8px 16px calc(var(--pe) + 28px); }
main { min-width: 0; }
.abas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; background: var(--superficie); border-top: 1px solid var(--borda);
  padding: 0 max(4px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(4px, env(safe-area-inset-left, 0px));
}
.abas button {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 64px; padding: 6px 2px;
  border: 0; background: none; color: var(--apagado); font: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer;
}
.abas button .icone { width: 26px; height: 26px; }
.abas button[aria-selected="true"] { color: var(--destaque); }
.abas button span:last-child { white-space: nowrap; }
.secao { margin-top: 24px; }
.secao > h2, .grupo-titulo { margin: 0 4px 8px; color: var(--suave); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
h3 { font-size: 1rem; line-height: 1.35; }
.cartao { background: var(--superficie); border: 1px solid var(--borda-leve); border-radius: var(--raio-cartao); padding: 16px; box-shadow: var(--sombra-cartao); }
.lista-cartoes { display: grid; gap: 10px; }
.prosa { display: grid; gap: 8px; }
.prosa ul, ul.prosa { display: grid; gap: 8px; padding-left: 18px; list-style: disc; }
.prosa li::marker, ul.prosa li::marker { color: var(--suave); }
.contagem { color: var(--suave); font-weight: 400; font-size: 0.875rem; }
.aba-topo { padding: 12px 4px 14px; }
.aba-titulo { font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.02em; }
.aba-topo .dica { font-size: 0.9375rem; }

/* Selos */
.selos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.selo { display: inline-block; padding: 1px 9px; border: 1px solid var(--borda); border-radius: 999px; font-size: 0.75rem; font-weight: 600; line-height: 1.5; color: var(--suave); background: var(--superficie); white-space: nowrap; }
.selo-bom { color: var(--positivo); background: var(--bom-fundo); border-color: transparent; }
.selo-atencao { color: var(--atencao); background: var(--atencao-fundo); border-color: transparent; }
.selo-info { color: var(--destaque); background: var(--destaque-fundo); border-color: transparent; }
.selo-forte { color: var(--sobre-destaque); background: var(--destaque); border-color: transparent; }
.selo-neutro { white-space: normal; }
.nota { font-size: 0.75rem; text-decoration: none; font-variant-numeric: tabular-nums; }
.sinal { font-size: 0.75rem; color: var(--atencao); }

/* Botões e campos */
.botao {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--destaque);
  border-radius: 12px; background: var(--destaque); color: var(--sobre-destaque); font: inherit; font-weight: 600; cursor: pointer;
}
.botao-leve { background: transparent; color: var(--destaque); border-color: var(--borda); }
.botao-perigo { background: var(--negativo); border-color: var(--negativo); color: var(--superficie); }
.botao:disabled { opacity: 0.5; cursor: default; }
.link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--destaque); font: inherit; font-size: 0.875rem; font-weight: 600; text-decoration: underline; cursor: pointer; }
input, select, textarea {
  min-height: 44px; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 10px; background: var(--superficie); color: var(--texto);
  font: inherit; font-variant-numeric: tabular-nums; min-width: 0;
}
textarea { width: 100%; resize: vertical; }
[aria-invalid="true"] { border-color: var(--negativo); outline: 2px solid var(--negativo); }
label, legend { font-size: 0.875rem; font-weight: 600; }

/* Início: cidade, saldo, o que cotar */
.topo { display: flex; align-items: center; gap: 14px; padding: 12px 4px 16px; }
.bandeira { flex: none; width: 48px; height: 48px; border-radius: 50%; background: center / cover no-repeat; }
.topo-id { min-width: 0; }
.topo h1 { font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.02em; }
.topo-meta { color: var(--suave); font-size: 0.9375rem; }
.saldo-cartao { padding: 18px 20px; border-radius: 22px; background: linear-gradient(160deg, #1f63c9 0%, #123f86 100%); color: #fff; box-shadow: 0 8px 22px rgba(18, 63, 134, 0.22); }
.saldo-rotulo { font-size: 0.9375rem; opacity: 0.9; }
.saldo-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 2px; }
.saldo-linha strong { font-size: 2rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.saldo-chip { padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.saldo-nota { margin-top: 4px; font-size: 0.8125rem; opacity: 0.85; }
.cotar-cartao { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 16px; border-radius: 22px; background: var(--atencao-fundo); color: var(--texto); }
.cotar-icone { display: flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 196, 64, 0.35); color: var(--atencao); }
.cotar-texto { flex: 1; display: grid; min-width: 0; }
.cotar-texto strong { font-size: 1.0625rem; line-height: 1.3; }
.cotar-texto span { color: var(--atencao); font-size: 0.875rem; }
.cotar-botao { flex: none; min-height: 44px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--atencao); color: var(--sobre-atencao); font: inherit; font-weight: 700; cursor: pointer; }

/* Listas agrupadas (decisões e partes do plano): cada linha abre a tela de detalhe */
.grupo { margin-top: 24px; }
.lista-agrupada { background: var(--superficie); border: 1px solid var(--borda-leve); border-radius: var(--raio-cartao); box-shadow: var(--sombra-cartao); overflow: hidden; }
.lista-agrupada > li + li { border-top: 1px solid var(--borda-leve); }
.item-lista { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 14px; border: 0; background: none; color: var(--texto); font: inherit; text-align: left; cursor: pointer; }
.item-lista:active { background: var(--superficie-2); }
.item-icone { display: flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--destaque-fundo); color: var(--destaque); }
.item-icone-critico { background: var(--critico-fundo); color: var(--negativo); }
.item-texto { flex: 1; display: grid; min-width: 0; }
.item-texto strong { font-size: 1rem; line-height: 1.3; }
.item-texto span { color: var(--suave); font-size: 0.875rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item-valor { flex: none; display: grid; justify-items: end; font-weight: 700; line-height: 1.2; }
.item-valor small { color: var(--suave); font-weight: 400; font-size: 0.75rem; }
.etiqueta-cotar { padding: 3px 10px; border-radius: 999px; background: var(--atencao-fundo); color: var(--atencao); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.seta { flex: none; width: 9px; height: 9px; margin: 0 4px 0 -2px; border-top: 2px solid var(--apagado); border-right: 2px solid var(--apagado); transform: rotate(45deg); }
.rodape-aviso { margin: 24px 4px 4px; color: var(--suave); font-size: 0.8125rem; }
.inicio > .dica { margin: 0 4px; font-size: 0.8125rem; }

/* Telas de detalhe: voltar, título e o conteúdo de antes */
.detalhe-topo { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0 16px; }
.detalhe-voltar { flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--superficie); color: var(--destaque); font: inherit; font-size: 1.6rem; line-height: 1; box-shadow: var(--sombra-cartao); cursor: pointer; }
.detalhe-titulo { min-width: 0; padding-top: 2px; }
.detalhe-titulo h2 { font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.02em; }
.detalhe-titulo .dica { margin-top: 2px; font-size: 0.9375rem; }
.detalhe > .dica, .detalhe > .decisao-topo { margin: 0 4px 10px; }
.detalhe-corpo > * + * { margin-top: 12px; }
.detalhe-corpo > .prosa { padding: 16px; border-radius: var(--raio-cartao); background: var(--superficie); border: 1px solid var(--borda-leve); }
.fontes-curtas { margin: 14px 4px 0; color: var(--suave); font-size: 0.8125rem; }
.efeito { display: grid; gap: 2px; margin: 0 0 14px; padding: 14px 16px; border-radius: 16px; background: var(--bom-fundo); color: var(--positivo); }
.efeito span { font-size: 0.875rem; }
.efeito-menos { background: var(--critico-fundo); color: var(--negativo); }

/* Veredito */
.veredito { display: grid; gap: 8px; border-left: 4px solid var(--atencao); }
.veredito-completo { border-left-color: var(--positivo); }
.veredito-frase { font-weight: 600; }
.pontos { display: grid; gap: 6px; padding-left: 18px; list-style: disc; }


/* Opções de uma decisão: cartões selecionáveis, a vigente marcada */
.opcoes { display: grid; gap: 12px; grid-template-columns: 1fr; }
.opcao { cursor: pointer; display: flex; flex-direction: column; min-width: 0; border: 2px solid transparent; }
.opcao-vigente { border-color: var(--destaque); background: var(--destaque-fundo); }
.opcao-travada { opacity: 0.65; cursor: default; }
.opcao-travada .opcao-escolher { cursor: default; }
.opcao-cabeca { display: flex; justify-content: space-between; align-items: flex-start; gap: 4px 12px; flex-wrap: wrap; }
.opcao-escolher { display: flex; align-items: center; gap: 10px; flex: 1 1 140px; min-height: 36px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 1.0625rem; font-weight: 700; text-align: left; cursor: pointer; }
.radio { flex: none; width: 20px; height: 20px; border: 2px solid var(--apagado); border-radius: 50%; }
[aria-checked="true"] > .radio { border-color: var(--destaque); background: radial-gradient(var(--destaque) 0 45%, transparent 50%); }
.opcao-nome { min-width: 0; }
.custo { margin: 6px 0 0; text-align: right; }
.custo .valor { font-weight: 700; font-variant-numeric: tabular-nums; }
.custo .por { color: var(--suave); font-size: 0.875rem; }
.custo-falta { color: var(--atencao); font-weight: 600; font-size: 0.9375rem; }
.opcao .selos { margin-top: 8px; }
.opcao > .original { margin-top: 2px; text-align: right; }
.decidir { margin-top: 12px; align-self: flex-start; }
.atributos { display: grid; gap: 6px; margin-top: 6px; font-size: 0.875rem; }
.atributos dt { font-weight: 600; }
.atributos:not(.atributos-abertos) .texto { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fonte-linha { font-size: 0.8125rem; }

/* Cotação do cliente */
.cotacao { display: grid; gap: 6px; margin-top: 10px; padding: 10px; border: 1px dashed var(--borda); border-radius: 8px; background: var(--superficie-2); cursor: auto; }
.cotacao-informada { border-style: solid; border-color: var(--destaque); background: var(--destaque-fundo); }
.cotacao-linha { display: flex; gap: 6px; align-items: center; }
.cotacao-linha input { flex: 1; width: 0; text-align: right; }
.cotacao-linha select { flex: none; padding-right: 4px; }
.cotacao-fixo { color: var(--suave); font-size: 0.875rem; white-space: nowrap; }
.pergunta-pronta summary { min-height: 44px; display: flex; align-items: center; color: var(--destaque); font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.pergunta-pronta p { font-size: 0.875rem; margin-bottom: 8px; }
.pre { white-space: pre-wrap; }

/* Pares rótulo/valor em texto */
.pares { display: grid; gap: 2px; margin-top: 8px; font-size: 0.9375rem; }
.pares dt { color: var(--suave); font-size: 0.8125rem; font-weight: 600; margin-top: 6px; }
.item { padding: 0 16px; }
.item[open] { padding-bottom: 14px; }
.item > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 48px; padding: 10px 0; cursor: pointer; font-weight: 600; font-size: 0.9375rem; }
.item-pergunta { flex: 1 1 220px; min-width: 0; }
summary::marker { color: var(--suave); }
.item-fechado { opacity: 0.85; }
.responder { display: grid; gap: 6px; margin-top: 10px; justify-items: start; }
.resposta { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--bom-fundo); font-size: 0.9375rem; }
.risco p { color: var(--suave); font-size: 0.9375rem; margin-top: 2px; }

/* Caixas de seleção */
input[type="checkbox"] { flex: none; width: 22px; height: 22px; min-height: 0; padding: 0; accent-color: var(--destaque); }
.marcar { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }

/* Blocos recolhíveis (premissas, regras do calendário) */
.dobra > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-height: 48px; cursor: pointer; }
.dobra > summary h2 { flex: 1 1 0; min-width: 0; margin: 0; font-size: 1rem; }
.secao-recolhivel { margin-top: 24px; padding: 0 16px; border: 1px solid var(--borda-leve); border-radius: var(--raio-cartao); background: var(--superficie); }
.secao-recolhivel > .dobra[open] { padding-bottom: 16px; }

/* Cronograma: linha do tempo vertical por fase, cada ação num cartão */
.acoes-filtro { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 12px; margin: 0 4px 6px; }
.linha-do-tempo { display: grid; }
.fase { position: relative; padding: 0 0 18px 28px; }
.fase::before { content: ""; position: absolute; left: 7px; top: 14px; bottom: 0; width: 2px; background: var(--borda); }
.fase:last-child::before { bottom: 18px; }
.fase-titulo { position: relative; margin: 2px 0 10px; color: var(--destaque); font-size: 1rem; line-height: 1.4; }
.fase-titulo::before { content: ""; position: absolute; left: -27px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--destaque); box-shadow: 0 0 0 4px var(--destaque-fundo); }
.viagem { margin-bottom: 10px; padding: 8px 12px; border-radius: 12px; background: var(--superficie-2); font-size: 0.875rem; }
.acoes { display: grid; gap: 10px; }
.acao.cartao { padding: 14px 16px 6px; }
.acao-oque { font-size: 1.0625rem; line-height: 1.35; }
.acao-critica { border-left: 4px solid var(--destaque); }
.acao-concluida { opacity: 0.7; }
.acao-concluida .acao-oque strong { text-decoration: line-through; text-decoration-color: var(--apagado); }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.etiqueta { padding: 2px 10px; border-radius: 8px; background: var(--superficie-2); color: var(--suave); font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.etiqueta-prazo, .etiqueta-info { background: var(--destaque-fundo); color: var(--destaque); }
.etiqueta-presenca { background: var(--critico-fundo); color: var(--negativo); }
.etiqueta-forte { background: var(--destaque); color: var(--sobre-destaque); }
.etiqueta-bom { background: var(--bom-fundo); color: var(--positivo); }
.etiqueta-atencao { background: var(--atencao-fundo); color: var(--atencao); }
.acao-mais > summary { display: inline-flex; align-items: center; min-height: 36px; color: var(--destaque); font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.acao-mais { margin-top: 4px; }
.acao-detalhe { color: var(--suave); font-size: 0.875rem; }
.acao-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.acao-controles .marcar { font-weight: 400; color: var(--suave); }
.nova-acao { display: grid; gap: 10px; margin-top: 20px; }
.nova-acao-linha { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.nova-acao .campo > input, .nova-acao .campo > select { width: 100%; }
.nova-acao .botao { justify-self: start; }
.nova-acao .marcar { font-weight: 400; }
.excluidas { margin-top: 10px; }
.prosa-simples { display: grid; }
.prosa-simples li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 12px; }

/* Dinheiro: a cascata, para onde vai, a cotar */
.cascata { display: grid; gap: 12px; padding: 18px; }
.degrau-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.degrau-rotulo { flex: 1; min-width: 0; }
.degrau-valor { flex: none; font-weight: 700; text-align: right; white-space: nowrap; }
.degrau-valor-texto { flex: 0 1 60%; white-space: normal; font-weight: 600; font-size: 0.9375rem; }
.degrau .barra { height: 10px; margin: 6px 0 0; border-radius: 5px; }
.degrau .barra span { border-radius: 5px; }
.degrau-renda .barra span { background: #2e9e5b; }
.degrau-custo .barra span { background: #e5675a; }
.degrau-total { padding-top: 10px; border-top: 1px solid var(--borda-leve); }
.degrau-total .degrau-rotulo { font-weight: 700; }
.degrau-total .degrau-valor { font-size: 1.25rem; }
.pontas { margin-top: -6px; color: var(--suave); font-size: 0.875rem; }
.conta { display: grid; grid-template-columns: minmax(6.5em, 1fr) minmax(0, auto); gap: 8px 12px; align-items: baseline; background: var(--superficie); border: 1px solid var(--borda-leve); border-radius: var(--raio-cartao); padding: 16px; }
.cartao .conta { border: 0; padding: 0; margin-top: 8px; background: none; }
.conta dd { text-align: right; font-weight: 600; white-space: normal; }
.conta-total { padding-top: 8px; border-top: 1px solid var(--borda); font-weight: 700; }
dd.conta-total { font-size: 1.125rem; }
.secao > .conta + .dica, .secao > .linhas + .legenda { margin-top: 8px; }
.linhas { background: var(--superficie); border: 1px solid var(--borda-leve); border-radius: var(--raio-cartao); padding: 2px 16px; box-shadow: var(--sombra-cartao); }
.linha { padding: 12px 0; border-top: 1px solid var(--borda-leve); }
.linha:first-child { border-top: 0; }
.linha-dobra > summary { display: block; cursor: pointer; list-style: none; }
.linha-dobra > summary::-webkit-details-marker { display: none; }
.linha-dobra[open] > summary { margin-bottom: 6px; }
.linha-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.linha-nome { min-width: 0; font-weight: 600; }
.linha-valor { flex: none; font-weight: 700; text-align: right; }
.linha-pe { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px; }
.linha-pe .original { flex: 1 1 55%; }
.linha-pe .selos { margin: 0 0 0 auto; flex: none; }
.linha .fontes-curtas { margin: 4px 0 0; }
.parte { color: var(--suave); font-size: 0.75rem; }
.linha-fora { opacity: 0.7; }
.linha-total .linha-nome, .linha-total .linha-valor { font-weight: 800; }
.linha-a-cotar .linha-nome .original { font-weight: 400; }
.barra { display: block; height: 6px; margin: 8px 0 2px; border-radius: 3px; background: var(--superficie-2); overflow: hidden; }
.barra span { display: block; height: 100%; border-radius: 3px; background: var(--destaque); }
.barra-hoje span, .amostra-hoje { background: var(--suave); }
.amostra { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--destaque); }
.legenda { color: var(--suave); font-size: 0.8125rem; margin-bottom: 10px; }
.dupla { display: grid; gap: 10px; grid-template-columns: 1fr; }
.imposto + .imposto, .secao .cartao + .cartao { margin-top: 10px; }
#impostos-total { margin: 0 4px 10px; }

/* Fontes */
.fontes { display: grid; gap: 6px; padding: 8px; counter-reset: none; border-radius: var(--raio-cartao); background: var(--superficie); border: 1px solid var(--borda-leve); }
.fontes li { display: grid; grid-template-columns: 2.25em minmax(0, 1fr); column-gap: 4px; font-size: 0.8125rem; padding: 6px; border-radius: 8px; }
.fontes li::before { content: "[" attr(value) "]"; grid-row: span 2; color: var(--suave); font-variant-numeric: tabular-nums; }
.fonte-origem { overflow-wrap: anywhere; }
.fonte-afirmacao { color: var(--suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fontes li.fonte-em-foco { background: var(--destaque-fundo); }
.fontes li.fonte-em-foco .fonte-afirmacao { display: block; }

/* E se… */
.ese-conteudo { display: grid; gap: 14px; }
.ese-conteudo fieldset { display: grid; gap: 10px; }
.ese-conteudo legend { float: left; width: 100%; margin-bottom: 6px; color: var(--suave); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; }
.campo { display: grid; gap: 4px; }
.campo-linha { display: flex; align-items: center; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); }
.campo-linha:focus-within { outline: 3px solid var(--foco); outline-offset: 1px; }
.campo-linha .prefixo { padding: 0 4px 0 12px; color: var(--suave); }
.campo-linha input { flex: 1; width: 0; border: 0; background: none; text-align: right; outline: none; }
.campo-linha:has([aria-invalid="true"]) { border-color: var(--negativo); outline: 2px solid var(--negativo); }
.ese-acoes { display: grid; gap: 8px; padding-top: 4px; }
.erro { position: fixed; left: 12px; right: 12px; bottom: calc(var(--pe) + 10px); z-index: 50; padding: 10px 14px; border-radius: 12px; background: var(--negativo); color: var(--superficie); font-size: 0.9375rem; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); }
.erro .link { color: inherit; }

@media (min-width: 640px) {
  .dupla { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1000px) {
  :root { --pe: 0px; }
  .corpo { display: grid; grid-template-columns: 200px minmax(0, 720px); justify-content: center; gap: 32px; max-width: none; padding: 16px 24px 48px; }
  .abas { position: sticky; top: 16px; flex-direction: column; align-self: start; gap: 2px; padding: 8px; border: 1px solid var(--borda-leve); border-radius: var(--raio-cartao); box-shadow: var(--sombra-cartao); }
  .abas button { flex: none; flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: 12px; font-size: 1rem; }
  .abas button .icone { width: 22px; height: 22px; }
  .abas button[aria-selected="true"] { background: var(--destaque-fundo); }
  .erro { left: auto; right: 24px; bottom: 24px; max-width: 420px; }
}

/* Seta dos blocos recolhíveis (o `summary` em flex perde a seta do navegador) */
.item > summary, .pergunta-pronta summary, .dobra > summary, .acao-mais > summary { list-style: none; }
.item > summary::-webkit-details-marker, .pergunta-pronta summary::-webkit-details-marker, .dobra > summary::-webkit-details-marker, .acao-mais > summary::-webkit-details-marker { display: none; }
.item > summary::after, .pergunta-pronta summary::after, .dobra > summary::after, .acao-mais > summary::after {
  content: ""; flex: none; width: 8px; height: 8px; margin: 0 6px 4px 8px; border-right: 2px solid var(--suave); border-bottom: 2px solid var(--suave); transform: rotate(45deg);
}
.item[open] > summary::after, .pergunta-pronta[open] summary::after, .dobra[open] > summary::after, .acao-mais[open] > summary::after { transform: rotate(-135deg); margin-bottom: -4px; }

/* "Hoje × depois" no Completo: o que cada lado da comparação desconta, à vista e antes dos números. */
.aviso-comparacao { font-weight: 600; margin-bottom: 8px; }