/* Estilos do app sobre os tokens do Vexium DS. Componentes: .vx-btn, .vx-field, .vx-alert, .vx-badge, .vx-card, .vx-seg, .vx-dialog. */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--surface-page); color: var(--text-body); font: 400 var(--fs-md)/1.5 var(--font-text); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0; color: var(--text-strong); font-family: var(--font-display); letter-spacing: var(--ls-heading); text-wrap: balance; }
h2 { font-size: var(--fs-4xl); font-weight: 700; line-height: 1.16; letter-spacing: var(--ls-display); margin-bottom: var(--space-7); }
h3 { font-size: var(--fs-xl); font-weight: 600; line-height: 1.16; margin-bottom: var(--space-4); }
p { margin: 0; }
a { color: var(--link-color); text-decoration: none; text-underline-offset: 3px; transition: var(--transition-color); }
a:hover { color: var(--link-color-hover); text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--radius-xs); }
::selection { background: var(--vx-verde-vivo); color: var(--vx-verde-profundo); }
.vx-eyebrow { font: 600 var(--fs-2xs)/1.2 var(--font-text); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.vx-icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Layout: painel de navegação lateral (Verde Profundo) + conteúdo */
.app { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; }
.lateral { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-7) var(--space-5); background: var(--vx-verde-profundo); color: var(--vx-areia); overflow-y: auto; }
.marca { display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-4); color: var(--vx-areia); }
.marca svg { height: 30px; width: auto; }
.marca .vx-badge { background: var(--vx-verde-petroleo); color: var(--vx-areia); }
.vx-nav { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.vx-nav a { position: relative; display: flex; align-items: center; height: var(--control-h-md); padding: 0 var(--space-4); border-radius: var(--radius-md); color: var(--vx-neutral-300); font: 500 var(--fs-sm)/1.3 var(--font-text); transition: var(--transition-color); }
.vx-nav a:hover { background: var(--vx-verde-petroleo); color: var(--vx-areia); text-decoration: none; }
.vx-nav a.sub { height: 38px; padding-left: var(--space-8); }
.vx-nav__titulo { margin: var(--space-5) var(--space-4) var(--space-2); font: 600 var(--fs-2xs)/1.2 var(--font-text); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--vx-neutral-400); }
.vx-nav__grupo { display: flex; flex-direction: column; gap: var(--space-2); }
.vx-nav__grupo summary { display: flex; align-items: center; justify-content: space-between; height: var(--control-h-md); padding: 0 var(--space-4); border-radius: var(--radius-md); color: var(--vx-neutral-300); font: 500 var(--fs-sm)/1.3 var(--font-text); cursor: pointer; list-style: none; }
.vx-nav__grupo summary::-webkit-details-marker { display: none; }
.vx-nav__grupo summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--dur-fast) var(--ease-standard); }
.vx-nav__grupo[open] summary::after { transform: rotate(-135deg); }
.vx-nav__grupo summary:hover { background: var(--vx-verde-petroleo); color: var(--vx-areia); }
.vx-nav a.ativo { background: var(--vx-verde-petroleo); color: var(--vx-areia); }
.vx-nav a::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--vx-verde-vivo); transform: scaleY(0); transition: transform var(--dur-base) var(--ease-out); }
.vx-nav a.ativo::before { transform: scaleY(1); }
.lateral .vx-btn--secondary { color: var(--vx-areia); border-color: var(--vx-petroleo-400, #1B6A5F); }
.lateral .vx-btn--secondary:hover { background: var(--vx-verde-petroleo); color: var(--vx-areia); }

.principal { min-width: 0; display: flex; flex-direction: column; }
.topo { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--space-5); padding: var(--space-4) var(--gutter); background: var(--surface-page); border-bottom: 1px solid var(--border-subtle); min-height: 64px; }
.topo .vx-field.topo__campo { flex-direction: row; align-items: center; gap: var(--space-4); min-width: 0; }
.topo .vx-field.topo__campo select { width: min(300px, 60vw); height: var(--control-h-sm); }
.topo__vazio { color: var(--text-muted); font-size: var(--fs-sm); }
.topo .filtro-contexto { flex-direction: row; align-items: baseline; gap: var(--space-4); }
main { padding: var(--space-8) var(--gutter) 64px; max-width: var(--container-xl); width: 100%; }

.barra-mobile, .vx-veil.vx-veil--menu { display: none; }
.vx-btn--icon { width: var(--control-h-md); padding: 0; }
.vx-btn--icon .vx-icon { font-size: 22px; }

/* Mobile: o painel vira drawer, aberto pelo botão hambúrguer */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .barra-mobile { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface-page); border-bottom: 1px solid var(--border-subtle); font: 600 var(--fs-md)/1 var(--font-display); color: var(--text-strong); }
  .lateral { position: fixed; z-index: 70; top: 0; left: 0; bottom: 0; width: min(300px, 86vw); height: auto; transform: translateX(-100%); visibility: hidden; transition: transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); box-shadow: var(--shadow-xl); }
  body.menu-aberto .lateral { transform: none; visibility: visible; transition-delay: 0s; }
  body.menu-aberto .vx-veil.vx-veil--menu { display: block; }
  body.menu-aberto { overflow: hidden; }
  .vx-veil--menu { z-index: 60; padding: 0; }
  main { padding-top: var(--space-7); }
  .topo { position: static; }
}

/* Button */
.vx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: var(--control-h-md); padding: 0 26px; border: 1px solid transparent; border-radius: var(--radius-pill); font: 500 var(--fs-sm)/1 var(--font-text); letter-spacing: .01em; white-space: nowrap; cursor: pointer; text-decoration: none; transition: var(--transition-color), transform var(--dur-fast) var(--ease-standard); background: var(--action-primary-bg); color: var(--action-primary-fg); }
.vx-btn:hover { background: var(--action-primary-bg-hover); color: var(--action-primary-fg); text-decoration: none; }
.vx-btn:active { background: var(--action-primary-bg-active); transform: scale(var(--press-scale)); }
.vx-btn--sm { height: var(--control-h-sm); padding: 0 18px; font-size: var(--fs-xs); gap: 7px; }
.vx-btn--secondary { background: transparent; color: var(--action-secondary-fg); border-color: var(--action-secondary-border); }
.vx-btn--secondary:hover, .vx-btn--secondary:active { background: var(--action-secondary-bg-hover); color: var(--action-secondary-fg); }
.vx-btn--ghost { background: transparent; color: var(--action-secondary-fg); }
.vx-btn--ghost:hover, .vx-btn--ghost:active { background: var(--action-secondary-bg-hover); color: var(--action-secondary-fg); }
.vx-btn--danger { background: transparent; color: var(--feedback-danger-fg); }
.vx-btn--danger:hover, .vx-btn--danger:active { background: var(--feedback-danger-bg); color: var(--feedback-danger-fg); }
.vx-btn:disabled { background: var(--action-disabled-bg); color: var(--action-disabled-fg); cursor: not-allowed; transform: none; }

/* Input / Select: rótulo acima, campo 44px com raio 12px, anel de foco Vivo */
.vx-field { display: flex; flex-direction: column; gap: var(--space-3); min-width: 150px; font: 500 var(--fs-sm)/1.3 var(--font-text); color: var(--text-body); }
.vx-field input, .vx-field select { width: 100%; height: var(--control-h-md); padding: 0 16px; background: var(--surface-card); color: var(--text-strong); border: 1px solid var(--border-default); border-radius: var(--radius-md); font: 400 var(--fs-md)/1.5 var(--font-text); transition: var(--transition-color), box-shadow var(--dur-fast) var(--ease-standard); }
.vx-field input:focus, .vx-field select:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vx-verde-vivo) 22%, transparent); }
.vx-field select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23586250' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }

/* Card variant="panel": contêiner com borda, sem sombra, para formulários e barras de filtro */
.vx-card--panel { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-7); }
.form, .filtros { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: flex-end; margin-bottom: var(--space-5); }
.form .botoes { display: flex; gap: var(--space-3); }

/* Alert */
.msg { min-height: 0; margin-bottom: var(--space-5); }
.msg:empty { display: none; }
.vx-alert { display: flex; gap: var(--space-5); align-items: flex-start; padding: var(--space-5) var(--space-6); border-radius: var(--radius-md); font: 400 var(--fs-sm)/1.5 var(--font-text); color: var(--text-body); background: var(--feedback-neutral-bg); }
.vx-alert .vx-icon { font-size: 19px; margin-top: 1px; }
.vx-alert strong { display: block; font-weight: 500; }
.vx-alert ul { margin: 0; padding-left: 18px; }
.vx-alert--success { background: var(--feedback-success-bg); } .vx-alert--success > .vx-icon, .vx-alert--success strong { color: var(--feedback-success-fg); }
.vx-alert--danger { background: var(--feedback-danger-bg); } .vx-alert--danger > .vx-icon, .vx-alert--danger strong { color: var(--feedback-danger-fg); }

/* Badge */
.vx-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); font: 600 var(--fs-2xs)/1 var(--font-text); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; background: var(--feedback-neutral-bg); color: var(--feedback-neutral-fg); }
.vx-badge--success { background: var(--feedback-success-bg); color: var(--feedback-success-fg); }
.vx-badge--danger { background: var(--feedback-danger-bg); color: var(--feedback-danger-fg); }
.vx-badge--inverse { background: var(--vx-verde-profundo); color: var(--vx-areia); }

/* Tabela */
.tabela-wrap { overflow-x: auto; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); margin-bottom: var(--space-5); }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
th { font: 600 var(--fs-2xs)/1.2 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); background: var(--surface-muted); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-muted); }
td.derivada { color: var(--text-muted); }
td.acoes { text-align: right; }
tr.total td { font-weight: 600; color: var(--text-strong); background: var(--surface-muted); border-top: 2px solid var(--text-strong); }
.vazio { color: var(--text-muted); text-align: center; }
p.vazio { padding: var(--space-7); }

/* Controle segmentado: troca a visualização de uma sessão */
.vx-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-sunken); border-radius: var(--radius-pill); }
.vx-seg__btn { height: 30px; padding: 0 14px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-muted); font: 500 var(--fs-xs)/1 var(--font-text); cursor: pointer; white-space: nowrap; transition: var(--transition-color); }
.vx-seg__btn:hover { color: var(--text-strong); }
.vx-seg__btn[aria-pressed="true"] { background: var(--vx-verde-profundo); color: var(--vx-areia); }
@media (max-width: 600px) { h2 { font-size: var(--fs-2xl); } }

/* Dialog: modal sobre véu de vidro escuro */
.vx-veil { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: var(--space-7); background: var(--glass-dark); backdrop-filter: blur(var(--blur-glass)); -webkit-backdrop-filter: blur(var(--blur-glass)); }
.vx-dialog { width: 100%; max-width: 420px; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); padding: var(--space-9); display: flex; flex-direction: column; gap: var(--space-6); }
.vx-dialog h3 { font-size: var(--fs-2xl); margin: 0; }
.vx-dialog p { color: var(--text-muted); font-size: var(--fs-sm); }
.vx-dialog__rodape { display: flex; justify-content: flex-end; gap: var(--space-4); }

/* Cabeçalho de página: título e ação principal alinhados */
.pagina-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-7); }
.pagina-cab h2 { margin: 0; }

/* Drawer lateral direito (criar e editar) */
.vx-veil--drawer { justify-content: flex-end; align-items: stretch; padding: 0; opacity: 0; transition: opacity var(--dur-base) var(--ease-standard); }
.vx-veil--drawer.aberto { opacity: 1; }
.vx-drawer { width: min(560px, 100%); height: 100%; background: var(--surface-card); border-left: 1px solid var(--border-subtle); box-shadow: var(--shadow-xl); transform: translateX(100%); transition: transform var(--dur-base) var(--ease-out); }
.vx-veil--drawer.aberto .vx-drawer { transform: none; }
.vx-drawer form { display: flex; flex-direction: column; height: 100%; }
.vx-drawer__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); padding: var(--space-7); border-bottom: 1px solid var(--border-subtle); }
.vx-drawer__cab h3 { margin: var(--space-2) 0 0; font-size: var(--fs-2xl); }
.vx-drawer__corpo { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-7); }
.vx-drawer .vx-field { min-width: 0; }
.vx-drawer .msg { margin: 0; }
.vx-drawer__rodape { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-7); border-top: 1px solid var(--border-subtle); }
.vx-drawer__rodape .espaco { flex: 1; }
@media (max-width: 480px) { .pagina-cab .vx-btn { padding: 0 18px; } }

/* Barra de filtros global: contexto fixo quando há uma única propriedade */
.filtro-contexto { display: flex; flex-direction: column; gap: var(--space-2); min-width: 150px; font-size: var(--fs-sm); }
.filtro-contexto strong { color: var(--text-strong); font-weight: 600; font-size: var(--fs-md); }
.filtro-contexto span:last-child { color: var(--text-muted); }

/* Formulário em tela única: campos condicionais, bloco "Mais detalhes", listas internas, anexos */
.campo { display: block; }
.subtitulo { margin: var(--space-3) 0 calc(var(--space-3) * -1); font: 600 var(--fs-sm)/1.3 var(--font-text); color: var(--text-strong); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.vx-radios { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.vx-radios legend { padding: 0; margin-bottom: var(--space-3); font: 500 var(--fs-sm)/1.3 var(--font-text); }
.vx-check { display: flex; align-items: center; gap: var(--space-3); font: 400 var(--fs-sm)/1.4 var(--font-text); cursor: pointer; }
.vx-check input { width: 18px; height: 18px; accent-color: var(--vx-verde-profundo); flex: none; }
.detalhes { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 0 var(--space-5); }
.detalhes > summary { height: var(--control-h-md); display: flex; align-items: center; cursor: pointer; font: 500 var(--fs-sm)/1 var(--font-text); color: var(--text-strong); }
.detalhes__corpo { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-3) 0 var(--space-5); }
.itens { display: flex; flex-direction: column; gap: var(--space-3); }
.itens__rotulo { font: 500 var(--fs-sm)/1.3 var(--font-text); }
.itens .tabela-wrap { margin: 0; border-radius: var(--radius-md); }
.itens th, .itens td { padding: 8px 10px; }
.itens td input, .itens td select { height: 36px; min-width: 100px; width: 100%; padding: 0 10px; background: var(--surface-card); color: var(--text-strong); border: 1px solid var(--border-default); border-radius: var(--radius-xs); font: 400 var(--fs-sm)/1.4 var(--font-text); }
.itens td select { min-width: 210px; padding-right: 30px; background-position: right 8px center; }
.itens td [data-calc] { color: var(--text-muted); }
.itens__rodape { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.vx-field input[readonly] { background: var(--surface-muted); color: var(--text-muted); }
.vx-field input[type=file] { height: auto; padding: 8px 12px; }
.anexos { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); font-weight: 400; }
.anexos li { display: flex; align-items: center; justify-content: space-between; }
.dica { font: 400 var(--fs-xs)/1.4 var(--font-text); color: var(--text-muted); }
.info .resumo { display: block; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--feedback-neutral-bg); font: 400 var(--fs-sm)/1.4 var(--font-text); }
.info .resumo--ok { background: var(--feedback-success-bg); color: var(--feedback-success-fg); }
.info .resumo--erro { background: var(--feedback-danger-bg); color: var(--feedback-danger-fg); }

/* Campo de área: seletor de unidade à esquerda do valor, na mesma linha */
.area-campo__linha { display: flex; align-items: stretch; gap: var(--space-4); }
.area-campo__linha select { width: 150px; flex: none; }
.area-campo__linha input { flex: 1; min-width: 0; }

/* Planejamento: réguas em SVG, uma frase por bloco; valores no modal */
.plano { display: flex; flex-direction: column; gap: var(--space-5); }
.plano__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-4); }
.plano__cab h3 { margin: 0; }
.plano__acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); }
.plano__legenda { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-3) 0 0; color: var(--text-muted); font-size: var(--fs-sm); }
.plano__legenda strong { color: var(--text-strong); }
.plano .vazio { padding: var(--space-5) 0; text-align: left; }
.regua { display: block; width: 100%; max-width: 560px; height: auto; } /* escala 1:1, o texto do gráfico mantém o tamanho padrão */
.regua__trilho { fill: var(--surface-sunken); }
.regua__faixa { fill: var(--vx-verde-broto); opacity: .6; }
.regua__preenchido--neutro, .regua__preenchido--ok { fill: var(--vx-verde-vivo); }
.regua__preenchido--atencao { fill: var(--vx-ambar); }
.regua__preenchido--estourou { fill: var(--feedback-danger-fg); }
.regua__nome { font: 500 12px var(--font-text); fill: var(--text-muted); }
.regua__valor { font: 600 13px var(--font-text); fill: var(--text-strong); }
.regua__zona { fill: transparent; }
.regua [data-ir], .regua [data-ir] * { cursor: pointer; }
.regua__grupo[data-ir]:hover .regua__valor { text-decoration: underline; }
.regua__seta { fill: var(--text-strong); transition: fill var(--dur-fast) var(--ease-standard); }
.regua__seta--vazia { fill: none; stroke: var(--text-strong); stroke-width: 1.5; }
.regua__grupo:hover .regua__seta { fill: var(--vx-verde-vivo); stroke: var(--text-strong); stroke-width: 1.5; }
.regua__grupo:hover .regua__nome { fill: var(--text-strong); }
.regua__faixa, .regua__preenchido--neutro, .regua__preenchido--ok, .regua__preenchido--atencao, .regua__preenchido--estourou { transition: opacity var(--dur-fast) var(--ease-standard); }
.regua__faixa:hover { opacity: .9; }
.regua__preenchido--neutro:hover, .regua__preenchido--ok:hover, .regua__preenchido--atencao:hover, .regua__preenchido--estourou:hover { opacity: .8; }
.plano__rotulo { margin: var(--space-3) 0 0; font: 600 var(--fs-2xs)/1.2 var(--font-text); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.dica { position: fixed; z-index: 90; max-width: 320px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--vx-verde-profundo); color: var(--vx-areia); font: 500 var(--fs-xs)/1.4 var(--font-text); box-shadow: var(--shadow-xl); pointer-events: none; white-space: pre-line; }
.vx-dialog--largo { max-width: min(880px, 94vw); max-height: 88vh; }
.vx-dialog__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.vx-dialog__cab h3 { margin: 0; }
.vx-dialog__corpo { overflow: auto; display: flex; flex-direction: column; gap: var(--space-5); }
.vx-dialog__corpo .tabela-wrap { margin-bottom: 0; }
.detalhes-lista { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-3) var(--space-7); margin: 0; font-size: var(--fs-sm); }
.detalhes-lista dt { color: var(--text-muted); }
.detalhes-lista dd { margin: 0; color: var(--text-strong); font-weight: 500; }
.acoes-modal { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Painel: barras, rosca, alertas de rodapé, calculadoras */
.plano__sub { margin: 2px 0 0; color: var(--text-muted); font-size: var(--fs-sm); }
.plano__cab > div:first-child { min-width: 0; }
.graf__trilho { fill: var(--surface-sunken); }
.graf__zona { fill: transparent; }
.graf__linha:hover .regua__nome { fill: var(--text-strong); }
.graf__barra--pos, .graf__barra--ok { fill: var(--vx-verde-vivo); }
.graf__barra--neutro { fill: var(--vx-verde-broto); }
.graf__barra--neg, .graf__barra--estourou { fill: var(--feedback-danger-fg); }
.graf__barra--atencao { fill: var(--vx-ambar); }
.graf__barra { transition: opacity var(--dur-fast) var(--ease-standard); }
.graf__linha:hover .graf__barra { opacity: .8; }
.graf__linha[data-ir], .graf__linha[data-ir] * { cursor: pointer; }
.graf__vazio { fill: var(--text-muted); font-weight: 400; }
.rosca { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-7); }
.rosca__svg { width: 180px; height: 180px; flex: none; }
.rosca__total { font: 600 14px var(--font-text); fill: var(--text-strong); }
.rosca__leg { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--fs-sm); }
.rosca__leg li { display: grid; grid-template-columns: 14px 1fr auto 90px; align-items: center; gap: var(--space-3); }
.rosca__valor { color: var(--text-muted); text-align: right; }
.graf__chip { width: 12px; height: 12px; border-radius: 3px; }
.graf__fatia { transition: opacity var(--dur-fast) var(--ease-standard); }
.graf__fatia:hover { opacity: .8; }
circle.graf__fatia--0 { stroke: var(--vx-verde-vivo); } span.graf__fatia--0 { background: var(--vx-verde-vivo); }
circle.graf__fatia--1 { stroke: var(--vx-verde-petroleo); } span.graf__fatia--1 { background: var(--vx-verde-petroleo); }
circle.graf__fatia--2 { stroke: var(--vx-verde-broto); } span.graf__fatia--2 { background: var(--vx-verde-broto); }
circle.graf__fatia--3 { stroke: var(--vx-ambar); } span.graf__fatia--3 { background: var(--vx-ambar); }
circle.graf__fatia--4 { stroke: var(--vx-neutral-500); } span.graf__fatia--4 { background: var(--vx-neutral-500); }
circle.graf__fatia--5 { stroke: var(--feedback-danger-fg); } span.graf__fatia--5 { background: var(--feedback-danger-fg); }
circle.graf__fatia--6 { stroke: var(--vx-neutral-300); } span.graf__fatia--6 { background: var(--vx-neutral-300); }
.painel__alerta { margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); font: 600 var(--fs-sm)/1.3 var(--font-text); }
.painel__alerta--danger { color: var(--feedback-danger-fg); }
.painel__alerta--warning { color: var(--feedback-warning-fg); }
.vx-check { display: inline-flex; align-items: center; gap: var(--space-3); font: 500 var(--fs-sm)/1.3 var(--font-text); color: var(--text-body); cursor: pointer; align-self: end; min-height: 44px; }
.vx-check input { width: 18px; height: 18px; accent-color: var(--vx-verde-vivo); }
.sim { margin-top: var(--space-5); border-top: 1px solid var(--border-subtle); padding-top: var(--space-4); }
.sim summary { cursor: pointer; font: 600 var(--fs-sm)/1.3 var(--font-text); color: var(--text-strong); }
.sim__corpo { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-4); }
.sim__campos { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-5); }
.sim__campos .vx-field { min-width: 180px; }
.sim .pos { color: var(--feedback-success-fg); } .sim .neg, .tabela-wrap .neg { color: var(--feedback-danger-fg); } .tabela-wrap .pos { color: var(--feedback-success-fg); }
.plano__cab .vx-seg { flex: none; }
@media (max-width: 600px) { .plano__cab { flex-direction: column; align-items: flex-start; } .plano__acoes { justify-content: flex-start; } .rosca__leg li { grid-template-columns: 14px 1fr auto; } .rosca__valor { display: none; } }

.plano__rodape { margin-top: var(--space-4); }
.graf__fatia, .rosca__item { cursor: pointer; }
.graf__fatia.is-fraca { opacity: .3; }
.graf__fatia.is-sel { opacity: 1; }
.rosca__item { padding: 2px 6px; margin: 0 -6px; border-radius: var(--radius-md); transition: opacity var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); }
.rosca__item:hover { background: var(--surface-muted); }
.rosca__item.is-fraca { opacity: .4; }
.rosca__item.is-sel { background: var(--surface-muted); }
.graf__fatia.is-fraca:hover { opacity: .5; }

.filtro-gerais { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); align-self: end; }
.sim__chips { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.sim__veredito { margin: 0; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--feedback-neutral-bg); font: 500 var(--fs-sm)/1.4 var(--font-text); }
.sim__veredito--ok { background: var(--feedback-success-bg); color: var(--feedback-success-fg); }
.sim__veredito--no { background: var(--feedback-danger-bg); color: var(--feedback-danger-fg); }
.sim__campo-moeda { position: relative; }
.sim__campo-moeda span { position: absolute; left: 14px; top: 0; height: var(--control-h-md); display: flex; align-items: center; color: var(--text-muted); pointer-events: none; }
.sim__campo-moeda input { padding-left: 40px; }
.sim__slider { width: 100%; accent-color: var(--vx-verde-vivo); }
.sim__grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5); align-items: start; }

/* Velocímetro do preço médio vendido */
.gauge-wrap { display: flex; flex-direction: column; align-items: center; margin: var(--space-3) 0 var(--space-4); }
.gauge { display: block; width: 100%; max-width: 320px; height: auto; }
.gauge__trecho { fill: none; stroke-width: 22; transition: opacity var(--dur-fast) var(--ease-standard); }
.gauge__trecho--baixo { stroke: var(--vx-ambar); }
.gauge__trecho--alto { stroke: var(--vx-verde-vivo); }
.gauge__marca { stroke: var(--text-strong); stroke-width: 2; }
.gauge__ponteiro line { stroke: var(--text-strong); stroke-width: 4; stroke-linecap: round; }
.gauge__ponteiro circle { fill: var(--text-strong); }
.gauge__ponteiro:hover line:not(.gauge__zona) { stroke: var(--vx-verde-petroleo); stroke-width: 5; }
.gauge__ponteiro:hover circle { fill: var(--vx-verde-petroleo); }
.gauge__ponteiro { cursor: pointer; }
.gauge__ponteiro .gauge__zona { stroke: transparent; stroke-width: 22; }