:root {
  color-scheme: light;
  --pink: #BF0882;
  --pink-l: rgba(191, 8, 130, 0.06);
  --pink-b: rgba(191, 8, 130, 0.3);
  --ink: #121212;
  --body: #3D3D3D;
  --dim: #6E6E6E;
  --line: #EAEAEA;
  --line-strong: #C4C4C4;
  --bg: #ffffff;
  --surface: #FAFAFA;
  --r: 12px;
  --r-lg: 22px;

  /* ---- Escala de espacamento (grade de 4px) ----
     Refino de 2026-07-28. Toda declaracao de padding/margin/gap do app usa um
     destes oito degraus — nao inventar valor novo. Antes disso conviviam 3, 5,
     6, 7, 9, 10, 11, 14, 18, 22, 29 e 44px sem criterio nenhum. */
  --s1: 4px;    /* rotulo e valor dentro de um card */
  --s2: 8px;    /* itens de uma lista; selo e seu texto */
  --s3: 12px;   /* linhas de tabela; gap entre controles */
  --s4: 16px;   /* padding vertical de painel e card */
  --s5: 20px;   /* padding horizontal padrao; bloco a bloco */
  --s6: 24px;   /* vao abaixo da topbar */
  --s7: 32px;   /* topo do workspace */
  --s8: 40px;   /* estado vazio; rodape da pagina */

  /* ---- Escala tipografica (7 degraus, tudo em px) ----
     Tudo em px de proposito: misturar px e rem criava oito tamanhos entre 13 e
     14,1px que nao se distinguiam. --t-micro em 11px e o piso de legibilidade
     (o app tinha texto de 9px e 10,5px). */
  --t-display: 28px;  /* valor final da calculadora */
  --t-title: 20px;    /* titulo de pagina; valor de KPI */
  --t-heading: 16px;  /* cabecalho de painel */
  --t-body: 14px;     /* texto padrao; celula de tabela */
  --t-sub: 13px;      /* apoio; descricoes */
  --t-caption: 12px;  /* metadados; rotulo de KPI */
  --t-micro: 11px;    /* cabecalho de tabela; selo; eyebrow */

  /* ---- Cores semanticas ----
     Escurecidas em 2026-07-28 para passar em 4,5:1 sobre o proprio tint (a
     regra vale para texto ate 17pt, e estes aparecem em selos de 11px).
     Os valores antigos reprovavam: verde 3,25:1, ambar 2,04:1, vermelho
     4,18:1, azul 3,90:1, roxo 4,15:1. Um tint por familia, usado no app
     inteiro — antes cada tela tinha o seu. */
  --ok: #0A7A52;
  --ok-tint: #F0FAF5;
  --ok-border: #CDEEDD;
  --warn: #9A6100;
  --warn-tint: #FEF6E9;
  --warn-border: #FBE6BF;
  --danger: #C92F2F;
  --danger-tint: #FDF1F1;
  --danger-border: #F6D3D3;
  --info: #1266D6;
  --info-tint: #F0F6FF;
  --info-border: #CFE3FF;
  --accent2: #8E4BA8;
  --accent2-tint: #F6EFFB;
  --accent2-border: #E6D3F2;
  --pink-tint: #FFF2F8;
  /* rosa dessaturado das barras de "Saidas" nos graficos */
  --pink-soft: #E3C4D8;
  /* estrela de qualificacao: nao e texto, entao vale o piso de 3:1 */
  --star: #C77F00;

  /* Glassmorphism: superficies translucidas + blur. Usadas so no "chrome"
     estrutural (sidebar, dialogs, colunas do kanban, paineis) — cards de
     conteudo denso (deal-card, lead-card, inputs) continuam opacos pra nao
     perder contraste de texto. */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-strong: rgba(255, 255, 255, 0.86);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-shadow: 0 8px 32px rgba(18, 18, 18, 0.08);
  --glass-blur: blur(20px) saturate(160%);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* Blobs suaves e de baixa opacidade — sem isso o blur dos paineis glass
     nao teria nada visivel atras pra desfocar. */
  background:
    radial-gradient(circle at 12% 18%, rgba(191, 8, 130, 0.10), transparent 42%),
    radial-gradient(circle at 88% 12%, rgba(45, 110, 255, 0.08), transparent 40%),
    radial-gradient(circle at 50% 92%, rgba(191, 8, 130, 0.06), transparent 50%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--t-body);
  line-height: 1.55;
  font-weight: 400;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

/* Ver js/sidebar.js (updateDialogScrollLock) — trava o scroll da pagina
   enquanto qualquer <dialog> estiver aberto. */
html.has-open-dialog,
html.has-open-dialog body {
  overflow: hidden;
}

body {
  display: flex;
  align-items: stretch;
}

.app-shell {
  flex: 1;
  min-width: 0;
  min-height: 100vh;
}

/* O ritmo vertical entre blocos mora AQUI, no contêiner — nao no
   margin-bottom de cada componente. Do jeito antigo, todo bloco precisava
   lembrar de carregar a propria margem, e quem nao carregava (.panel,
   .crm-tabs) simplesmente colava no bloco seguinte: no Overview e nas
   Projecoes o painel do grafico encostava no par de paineis logo abaixo, com
   0px de respiro, e so a sombra dos cards disfarcava. Com gap no contêiner o
   espacamento e o mesmo para qualquer sequencia de blocos, inclusive os que
   forem criados depois. */
.workspace {
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto;
  padding: var(--s7) 0 80px;
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

/* Wrapper que agrupa blocos dentro do workspace (ex.: #overviewContent, que
   existe so pra poder esconder a pagina inteira enquanto nao ha dado
   importado) precisa repetir o mesmo ritmo — senao o gap do pai nao alcanca
   os filhos dele. */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

/* ============ Intranet sidebar ============ */
.app-sidebar {
  position: sticky;
  top: 0;
  align-self: flex-start;
  flex-shrink: 0;
  width: 224px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s6) var(--s4) var(--s4);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-right: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1), padding 0.28s ease;
  z-index: 5;
}

.app-sidebar.is-collapsed {
  width: 76px;
  padding-left: var(--s3);
  padding-right: var(--s3);
}

.sidebar-collapse-btn {
  position: absolute;
  top: 28px;
  right: -12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--bg);
  color: var(--dim);
  display: grid;
  place-items: center;
  padding: 0;
  box-shadow: 0 2px 8px rgba(18, 18, 18, 0.14);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.sidebar-collapse-btn:hover {
  color: var(--pink);
  background: var(--pink-l);
}

.sidebar-collapse-btn svg {
  width: 14px;
  height: 14px;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-sidebar.is-collapsed .sidebar-collapse-btn svg {
  transform: rotate(180deg);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  padding: var(--s1) var(--s2) var(--s5);
}

.sidebar-brand img {
  height: 24px;
  width: auto;
}

.app-sidebar.is-collapsed .sidebar-brand {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.app-sidebar.is-collapsed .sidebar-brand img {
  display: none;
}

.app-sidebar.is-collapsed .sidebar-brand::after {
  content: "P";
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  border-radius: var(--r);
  color: var(--body);
  text-decoration: none;
  font-size: var(--t-body);
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}

.sidebar-link span {
  white-space: nowrap;
  overflow: hidden;
  max-width: 160px;
  opacity: 1;
  transition: opacity 0.16s ease, max-width 0.28s ease;
}

.app-sidebar.is-collapsed .sidebar-link {
  justify-content: center;
  gap: 0;
}

.app-sidebar.is-collapsed .sidebar-link span {
  opacity: 0;
  max-width: 0;
}

.sidebar-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--dim);
  transition: color 0.15s ease;
}

.sidebar-link:hover {
  background: var(--pink-l);
  color: var(--ink);
}

.sidebar-link:hover svg {
  color: var(--body);
}

.sidebar-link.is-active {
  background: var(--pink-l);
  color: var(--pink);
}

.sidebar-link.is-active svg {
  color: var(--pink);
}

/* Item "Calculadora" do sidebar — agrupa Fee/Audiovisual/Branding num
   dropdown em vez de 3 links soltos. O botao reaproveita .sidebar-link;
   so o chevron (ultimo svg) e novo, e roda 90 graus quando aberto. */
.sidebar-group-toggle {
  width: 100%;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

.sidebar-group-toggle svg:last-child {
  width: 14px;
  height: 14px;
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

.sidebar-group.is-open .sidebar-group-toggle svg:last-child {
  transform: rotate(90deg);
}

.app-sidebar.is-collapsed .sidebar-group-toggle svg:last-child {
  display: none;
}

.sidebar-submenu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.18s ease;
}

.sidebar-submenu-inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Alinha o texto do submenu com o rotulo do link pai: o pai reserva a
     largura do icone (18px) mais o gap. Como .sidebar-submenu-link ja tem o
     mesmo padding horizontal do pai, so falta compensar o icone e o gap.
     Em calc pra nao dessincronizar se --s3 mudar. */
  padding-left: calc(18px + var(--s3));
  overflow: hidden;
}

.sidebar-group.is-open .sidebar-submenu {
  grid-template-rows: 1fr;
}

.app-sidebar.is-collapsed .sidebar-submenu {
  display: none;
}

.sidebar-submenu-link {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-radius: var(--r);
  color: var(--dim);
  text-decoration: none;
  font-size: var(--t-sub);
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.sidebar-submenu-link:hover {
  background: var(--pink-l);
  color: var(--ink);
}

.sidebar-submenu-link.is-active {
  background: var(--pink-l);
  color: var(--pink);
}

.beta-badge {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px var(--s2);
  border-radius: 999px;
  background: var(--pink-l);
  color: var(--pink);
}

.sidebar-user {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s2) var(--s1);
  border-top: 1px solid var(--glass-border);
}

.app-sidebar.is-collapsed .sidebar-user {
  justify-content: center;
  gap: 0;
  padding-left: 0;
  padding-right: 0;
}

.sidebar-avatar {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  /* flex-shrink:0 e o fix do bug de layout: sem isso, o circulo espremia
     e virava uma oval quando o flex container ficava sem espaco (nome/email
     longos, ou a sidebar recolhida). */
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  overflow: hidden;
}

.sidebar-user-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  max-width: 130px;
  opacity: 1;
  transition: opacity 0.16s ease, max-width 0.28s ease;
}

.app-sidebar.is-collapsed .sidebar-user-meta,
.app-sidebar.is-collapsed .sidebar-logout {
  opacity: 0;
  max-width: 0;
  pointer-events: none;
}

.sidebar-user-meta strong {
  font-size: var(--t-sub);
  color: var(--ink);
}

.sidebar-user-meta small {
  font-size: var(--t-micro);
  color: var(--dim);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-logout {
  margin-left: auto;
  border: none;
  background: none;
  color: var(--dim);
  cursor: pointer;
  padding: var(--s2);
  border-radius: 8px;
  display: inline-flex;
}

.sidebar-logout:hover {
  background: var(--line);
  color: var(--ink);
}

.sidebar-logout svg {
  width: 16px;
  height: 16px;
}

.sidebar-version-btn {
  border: none;
  background: none;
  cursor: pointer;
  padding: var(--s2);
  font-size: var(--t-micro);
  color: var(--dim);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  opacity: 1;
  max-height: 30px;
  transition: color 0.15s ease, opacity 0.16s ease, max-height 0.2s ease, padding 0.2s ease;
}

.app-sidebar.is-collapsed .sidebar-version-btn {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .app-sidebar,
  .app-sidebar *,
  .sidebar-collapse-btn svg {
    transition: none !important;
  }
}

.sidebar-version-btn:hover {
  color: var(--pink);
}

.changelog-body {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.changelog-entry-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s2);
}

.changelog-entry-head strong {
  font-size: var(--t-heading);
  color: var(--ink);
}

.changelog-entry-head span {
  font-size: var(--t-caption);
  color: var(--dim);
}

.changelog-entry ul {
  margin: 0;
  padding-left: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.changelog-entry li {
  font-size: var(--t-sub);
  color: var(--body);
  line-height: 1.4;
}

.login-shell {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Sem background proprio — deixa o gradiente do body (definido uma vez,
     global) aparecer atras do card de vidro. */
}

.login-card {
  width: min(360px, 90vw);
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  padding: var(--s7) var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  box-shadow: 0 20px 60px rgba(18, 18, 18, 0.1), var(--glass-shadow);
}

.login-logo {
  height: 24px;
  width: auto;
  margin-bottom: var(--s3);
}

.login-card h1 {
  margin: 0;
  font-size: var(--t-title);
}

.login-sub {
  margin: 0 0 var(--s4);
  color: var(--dim);
  font-size: var(--t-sub);
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  font-size: var(--t-caption);
  color: var(--dim);
  margin-bottom: var(--s4);
}

.login-field input {
  font-size: var(--t-body);
  color: var(--ink);
  padding: var(--s3) var(--s3);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}

.login-error {
  color: var(--danger);
  font-size: var(--t-sub);
  margin: 0 0 var(--s3);
}

.login-card button[type="submit"] {
  border: none;
  border-radius: 8px;
  padding: var(--s3);
  background: var(--ink);
  color: #fff;
  font-size: var(--t-body);
  font-weight: 600;
  cursor: pointer;
}

.login-card button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: default;
}

/* O vao abaixo do titulo era 28 + 40 = 68px, tres vezes o respiro de 20px que
   o resto da pagina usa entre blocos. Com a regra quase invisivel embaixo, isso
   lia como "faltou alguma coisa aqui" em vez de separacao. Agora sao 20px de
   padding ate a regra mais o gap de 20px do .workspace = 40px: ainda o maior
   vao da pagina, mas construido com os mesmos degraus do resto. */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--line);
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: var(--s4);
}

.topbar-logo {
  height: 26px;
  width: auto;
  display: block;
}

.topbar-brand .eyebrow,
.topbar-brand h1 {
  display: none;
}

.topbar-divider {
  width: 1px;
  height: 22px;
  background: var(--line-strong);
}

.topbar-title {
  font-size: var(--t-title);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* 24px separava botoes irmaos como se fossem grupos distintos. Um cluster de
   controles da mesma barra pede a distancia de "itens relacionados". */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.eyebrow {
  margin: 0 0 var(--s2);
  color: var(--pink);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
}

h1,
h2 {
  margin: 0;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(var(--t-title), 2.6vw, var(--t-display));
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
}

h1 span {
  color: var(--pink);
}

h2 {
  font-size: var(--t-heading);
  font-weight: 600;
  color: var(--ink);
}

.project-meta label,
.parameter-grid label,
.slider-grid label {
  display: grid;
  gap: var(--s2);
  color: var(--dim);
  font-size: var(--t-caption);
  font-weight: 500;
}

input,
select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--ink);
  padding: 0 var(--s3);
  outline: none;
  transition: border-color 0.15s ease;
}

/* Select nativo: sem isso, a seta do proprio SO desenha por cima do texto
   em colunas estreitas (ex: "Nacional"/"Internacional" no grid do projeto).
   appearance:none troca pela nossa seta, com espaco reservado de verdade. */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E6E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  padding-right: var(--s7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

input:focus,
select:focus {
  border-color: var(--pink);
}

input[readonly] {
  background: var(--surface);
  color: var(--body);
  font-weight: 500;
}

input[type="range"] {
  min-height: 22px;
  padding: 0;
  accent-color: var(--pink);
}

.range-field {
  grid-template-columns: minmax(0, 1fr) auto;
}

.range-field output {
  color: var(--pink);
  font-size: var(--t-heading);
  font-weight: 600;
}

.range-field input {
  grid-column: 1 / -1;
}

.panel {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}

.controls-panel {
  box-shadow: none;
}

.lead-context-banner {
  padding: var(--s4) var(--s5);
  border-color: var(--pink-b);
  background: var(--pink-tint);
}

.lead-context-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
}

.lead-context-head h2 {
  margin: 2px 0 0;
  font-size: var(--t-heading);
}

.lead-context-contact {
  color: var(--dim);
  font-size: var(--t-caption);
}

.lead-context-message {
  margin: var(--s3) 0 0;
  font-size: var(--t-sub);
  color: var(--body);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: var(--s2) var(--s3);
}

.panel-heading,
.summary-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
}

.panel-heading h2 {
  color: var(--ink);
}

.panel-heading span {
  color: var(--dim);
  font-size: var(--t-caption);
  font-weight: 500;
}

/* A proporcao estava invertida: "Proposta" tem 4 campos e ficava com a coluna
   estreita (cliente e responsavel cortados no meio da palavra), enquanto
   "Parametros" tem 2 e sobrava meia coluna vazia depois do slider. */
.setup-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: var(--s5);
}

.project-meta,
.parameter-grid,
.slider-grid {
  display: grid;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
}

.project-meta {
  grid-template-columns: 1fr 1fr minmax(122px, 0.9fr) minmax(112px, 0.8fr);
}

.parameter-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.slider-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.slider-grid label {
  grid-template-columns: minmax(0, 1fr) auto;
}

.slider-grid input {
  grid-column: 1 / -1;
  padding: 0;
  accent-color: var(--pink);
}

.slider-grid output {
  color: var(--pink);
  font-size: var(--t-heading);
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  align-items: start;
  gap: var(--s5);
}

.input-stack {
  display: grid;
  gap: var(--s5);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
  padding: var(--s4) var(--s5);
}

.service-toggle {
  position: relative;
  min-height: 78px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  padding: var(--s3);
  text-align: left;
  transition: border-color 0.15s ease;
}

.service-toggle:hover {
  border-color: var(--line-strong);
}

.service-toggle.active {
  border-color: var(--pink);
  background: var(--pink-l);
}

.service-toggle strong {
  display: block;
  margin-bottom: var(--s2);
  padding-right: var(--s6);
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--ink);
}

.service-toggle span {
  color: var(--dim);
  font-size: var(--t-caption);
  font-weight: 400;
}

.service-toggle.active span {
  color: var(--pink);
}

.service-toggle::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
}

.service-toggle.active::after {
  border-color: var(--pink);
  background: var(--pink);
}

.quantity-list {
  display: grid;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
}

/* Selecao de pacote fechado da calculadora de Branding/Design (Completo/
   Pocket) — mesma linguagem visual do .service-toggle (radio no canto,
   borda rosa quando ativo), so que num card maior pra caber a lista do
   que esta incluso, duracao e preco. */
.package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s4);
  padding: var(--s4) var(--s5);
}

.package-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  padding: var(--s5);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.package-card:hover {
  border-color: var(--line-strong);
}

.package-card.active {
  border-color: var(--pink);
  background: var(--pink-l);
}

.package-card::after {
  content: "";
  position: absolute;
  top: 20px;
  right: 20px;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
}

.package-card.active::after {
  border-color: var(--pink);
  background: var(--pink);
}

.package-card h3 {
  font-size: var(--t-heading);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 var(--s1);
  padding-right: var(--s6);
}

.package-card .package-meta {
  color: var(--dim);
  font-size: var(--t-caption);
  margin-bottom: var(--s4);
}

.package-card .package-price {
  font-size: var(--t-title);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}

.package-card .package-installments {
  color: var(--dim);
  font-size: var(--t-caption);
  margin-bottom: var(--s4);
}

.package-card ul {
  margin: 0;
  padding-left: var(--s4);
  font-size: var(--t-sub);
  color: var(--body);
  line-height: 1.6;
}

.quantity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 126px;
  align-items: center;
  gap: var(--s3);
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s2) var(--s3);
  background: var(--bg);
}

.quantity-row strong {
  display: block;
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--ink);
}

.quantity-row span {
  color: var(--dim);
  font-size: var(--t-caption);
}

.quantity-row input {
  min-height: 34px;
}

.quantity-row.checkbox-row {
  grid-template-columns: minmax(0, 1fr) 126px;
}

/* Linha da calculadora de Video/Foto pra itens de video (Medio/Simples):
   preco vem de uma tabela por duracao (rule "durationTiered"), nao de um
   preco fixo x quantidade — por isso o select de duracao no lugar do
   segundo campo que .quantity-row normal nao tem. */
.video-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 90px 126px;
  align-items: center;
  gap: var(--s3);
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s2) var(--s3);
  background: var(--bg);
}

.video-row strong {
  display: block;
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--ink);
}

.video-row span {
  color: var(--dim);
  font-size: var(--t-caption);
}

.video-row select,
.video-row input {
  min-height: 34px;
}

.check-control {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.check-control input {
  width: 18px;
  min-height: 18px;
  accent-color: var(--pink);
}

.check-control small {
  display: block;
  color: var(--dim);
  font-size: var(--t-caption);
}

.slider-card {
  display: grid;
  gap: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s4);
  background: var(--bg);
}

.slider-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}

.slider-card strong,
.slider-card span {
  display: block;
}

.slider-card strong {
  color: var(--ink);
  font-weight: 500;
}

.slider-card span {
  color: var(--pink);
  font-size: var(--t-sub);
  font-weight: 500;
}

.slider-marks {
  display: flex;
  justify-content: space-between;
  color: var(--dim);
  font-size: var(--t-micro);
}

.line-total {
  text-align: right;
  font-weight: 600;
  color: var(--ink);
}

.summary {
  position: relative;
}

.sticky-panel {
  position: sticky;
  top: 20px;
  overflow: hidden;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--pink);
  font-size: 1.05rem;
}

/* Era border:none + background:transparent + padding:0, com uma borda inferior
   que so aparecia no hover. Na pratica "Nova simulacao", "+ Adicionar cliente"
   e os "Editar" da tabela eram indistinguiveis de texto corrido, e a area de
   clique tinha a largura exata da palavra. Agora e um botao secundario de
   verdade: borda de 1px, cantos de --r e padding lateral. Continua discreto ao
   lado do .primary-button rosa — a hierarquia vem do preenchimento, nao da
   ausencia de forma. */
.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--body);
  padding: 0 var(--s3);
  font-weight: 500;
  font-size: var(--t-body);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.icon-button:hover {
  border-color: var(--pink);
  color: var(--pink);
}

/* .summary-actions button saiu daqui: tem hover proprio mais abaixo (fundo
   rosa solido) e as duas regras estavam brigando pelo background. */
.ghost-button:hover {
  color: var(--pink);
  border-color: var(--pink);
  background: var(--pink-l);
}

.summary-actions button + button {
  border: none;
  background: transparent;
  border-bottom: 1px solid transparent;
}

.summary-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
}

.summary-list .final-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin: var(--s5) var(--s5) 0;
  padding: var(--s6) var(--s5);
  border-radius: var(--r);
  background: linear-gradient(135deg, #1a1a1c, var(--ink));
  color: #fff;
}

.summary-list .final-row dt {
  margin: 0;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
}

.final-caption {
  display: block;
  margin-top: var(--s1);
  font-size: var(--t-micro);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
}

.summary-list .final-row dd {
  margin: 0;
  font-size: clamp(var(--t-display), 3.2vw, 36px);
  font-weight: 600;
  line-height: 1;
  color: var(--pink);
}

.summary-kgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: var(--s4) var(--s5) 0;
  background: var(--glass-border);
  border: 1px solid var(--glass-border);
  border-radius: var(--r);
  overflow: hidden;
  align-items: stretch;
}

.summary-kgrid .kcard {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  background: var(--bg);
  padding: var(--s4) var(--s5);
}

.summary-kgrid .lbl {
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--dim);
}

.summary-kgrid .val {
  font-size: var(--t-heading);
  font-weight: 600;
  color: var(--ink);
}

.kcard-note {
  font-size: var(--t-micro);
  font-weight: 500;
  color: var(--pink);
  line-height: 1.35;
}

.kcard-note:empty {
  display: none;
}

.summary-list .project-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s1) var(--s3);
  padding: var(--s4) var(--s5) 0;
}

.summary-list .project-row dt,
.summary-list .project-row dd {
  margin: 0;
  color: var(--dim);
  font-size: var(--t-caption);
  font-weight: 500;
}

.summary-list .project-total-row {
  border-top: 1px solid var(--line);
  margin-top: var(--s2);
  padding-top: var(--s4);
}

.summary-list .project-total-row dt {
  color: var(--ink);
  font-size: var(--t-caption);
}

.summary-list .project-total-row dd {
  color: var(--pink);
  font-size: var(--t-heading);
  font-weight: 600;
}

.receipt-timestamp {
  margin: var(--s1) 0 0;
  color: var(--dim);
  font-size: var(--t-micro);
}

.summary-items {
  border-top: 1px solid var(--line);
  padding: var(--s5) var(--s5);
}

.summary-items-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s3);
}

.summary-items h3 {
  margin: 0;
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--ink);
}

.summary-items-header span {
  color: var(--dim);
  font-size: var(--t-micro);
}

.summary-items-list {
  display: grid;
  gap: var(--s2);
  max-height: 260px;
  overflow: auto;
}

.summary-item-row {
  border-left: 2px solid var(--pink-b);
  padding: var(--s2) 0 var(--s2) var(--s3);
}

.summary-item-row strong,
.summary-item-row span {
  display: block;
}

.summary-item-row strong {
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--ink);
}

.summary-item-row span {
  color: var(--dim);
  font-size: var(--t-caption);
}

.summary-item-empty {
  color: var(--dim);
  font-size: var(--t-sub);
}

.summary-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s2);
  padding: var(--s5);
}

.summary-actions button {
  min-height: 44px;
  border: 1px solid var(--ink);
  border-radius: var(--r);
  background: var(--ink);
  color: #fff;
  font-weight: 500;
  transition: all 0.15s ease;
}

.summary-actions button:hover {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
}

.summary-actions button + button {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}

.summary-actions button + button:hover {
  background: transparent;
  color: var(--pink);
  border-color: var(--pink);
}

.summary-actions button:disabled,
.summary-actions button:disabled:hover {
  background: var(--surface);
  border-color: var(--line);
  color: var(--dim);
  cursor: not-allowed;
}

/* Aviso de calculadora em beta (Audiovisual/Branding) — salvar proposta
   fica travado por enquanto pra nao criar cards de teste no CRM. */
.beta-lock-note {
  margin: 0 var(--s5) var(--s5);
  padding: var(--s3) var(--s3);
  background: var(--pink-l);
  border-radius: var(--r);
  color: var(--pink);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: 1.5;
}

@media (min-width: 1280px) {
  .summary-actions {
    grid-template-columns: 1fr 1fr;
  }

  .summary-actions button:first-child {
    grid-column: 1 / -1;
  }
}

.kgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--glass-border);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--glass-shadow);
}

.dash-leads-kgrid {
  margin-bottom: 0;
  border: none;
}

.kgrid .kcard {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  background: var(--bg);
  padding: var(--s4) var(--s5);
}

.kgrid .kcard .lbl {
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--dim);
}

.kgrid .kcard .val {
  font-size: var(--t-title);
  font-weight: 600;
  color: var(--ink);
}

.kgrid .kcard .sub {
  font-size: var(--t-micro);
  color: var(--dim);
}

.history-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--s3) var(--s4);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
}

.hf-field {
  display: grid;
  gap: var(--s1);
  min-width: 130px;
}

.hf-field span {
  color: var(--dim);
  font-size: var(--t-micro);
  font-weight: 500;
}

.hf-field input,
.hf-field select {
  min-height: 38px;
  font-size: var(--t-sub);
}

.hf-grow {
  flex: 1 1 220px;
  min-width: 200px;
}

.hf-clear {
  align-self: end;
  border-bottom: 1px solid transparent;
}

.history-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
}

.history-toolbar-actions {
  display: flex;
  gap: var(--s5);
}

/* nowrap: encolhia entre o select e o botao e quebrava "2 leads" em duas
   linhas, desalinhando a barra inteira. */
.history-count {
  color: var(--dim);
  font-size: var(--t-caption);
  white-space: nowrap;
}

.history-list {
  display: grid;
  gap: var(--s3);
  overflow: auto;
  padding: var(--s4) var(--s5);
}

.empty-history {
  color: var(--dim);
  padding: var(--s6) 0;
  text-align: center;
}

.history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 130px;
  align-items: start;
  gap: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  padding: var(--s4);
}

.history-row span,
.history-row em {
  display: block;
  color: var(--dim);
  font-size: var(--t-caption);
  font-style: normal;
}

.history-row strong {
  display: block;
  margin: var(--s1) 0;
  font-size: var(--t-heading);
  font-weight: 500;
  color: var(--ink);
}

.history-status {
  min-height: 34px;
  font-size: var(--t-caption);
  font-weight: 500;
  border-radius: 20px;
  text-align: center;
  text-align-last: center;
  padding: 0 var(--s2);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--body);
}

.history-status[data-status="briefing"] {
  background: var(--warn-tint);
  color: var(--warn);
  border-color: var(--warn-border);
}

.history-status[data-status="escopo"] {
  background: var(--accent2-tint);
  color: var(--accent2);
  border-color: var(--accent2-border);
}

.history-status[data-status="apresentacao"],
.history-status[data-status="enviada"] {
  background: var(--info-tint);
  color: var(--info);
  border-color: var(--info-border);
}

.history-status[data-status="aprovada"] {
  background: var(--ok-tint);
  color: var(--ok);
  border-color: var(--ok-border);
}

.history-status[data-status="nao_aprovada"] {
  background: var(--danger-tint);
  color: var(--danger);
  border-color: var(--danger-border);
}

.history-empty-filtered {
  color: var(--dim);
  padding: var(--s6) 0;
  text-align: center;
}

.history-price {
  align-self: start;
  color: var(--pink);
  font-size: var(--t-heading);
  font-weight: 600;
  text-align: right;
}

.history-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s2);
  margin-top: var(--s1);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}

.history-actions button {
  min-height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--body);
  font-weight: 500;
  font-size: var(--t-sub);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.history-actions button:hover {
  border-color: var(--pink-b);
  background: var(--pink-l);
  color: var(--pink);
}

.history-actions button[data-action="load"] {
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
  font-weight: 600;
}

.history-actions button[data-action="load"]:hover {
  filter: brightness(1.05);
  color: #fff;
}

.base-dialog {
  width: min(760px, calc(100% - 28px));
  max-height: min(760px, calc(100vh - 28px));
  border: 0;
  border-radius: var(--r-lg);
  padding: 0;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18), var(--glass-shadow);
  overflow: hidden;
}

.base-dialog::backdrop {
  background: rgba(18, 18, 18, 0.35);
  backdrop-filter: blur(6px);
}

.dialog-shell {
  display: grid;
  /* Sem isso, as linhas (header/corpo/rodape) do grid sao todas "auto" e
     crescem pra caber o conteudo inteiro, ignorando o max-height do dialog
     — o corpo nunca fica realmente mais alto que a tela, entao o overflow:
     auto dele nunca entra em acao. O corpo vira a unica linha flexivel
     (minmax(0,1fr)) e absorve o espaco que sobra, podendo entao rolar
     dentro de si mesmo em vez de deixar o scroll "vazar" pra pagina atras. */
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: min(760px, calc(100vh - 28px));
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s5);
  border-bottom: 1px solid var(--line);
}

/* Wrapper flex em volta das duas vistas (precos/historico) da Tabela base —
   ele e quem ocupa a linha flexivel do grid do dialog-shell; .base-table
   fica livre pra so cuidar do proprio scroll interno (flex:1). */
.base-table-wrap {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.base-table-tabs {
  display: flex;
  gap: var(--s1);
  padding: var(--s3) var(--s5) 0;
  flex-shrink: 0;
}

.base-table-tab {
  border: none;
  background: none;
  padding: var(--s2) var(--s1);
  margin-right: var(--s4);
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--dim);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.base-table-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--pink);
}

.base-table {
  display: grid;
  align-content: start;
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--s2) var(--s5) var(--s5);
}

.base-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 150px;
  align-items: center;
  gap: var(--s4);
  min-height: 44px;
  border-bottom: 1px solid var(--line);
}

.base-row span {
  color: var(--dim);
  font-size: var(--t-micro);
}

.base-row strong {
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--ink);
}

.base-row em {
  color: var(--pink);
  font-style: normal;
  font-weight: 600;
  text-align: right;
}

.base-row .base-price-input {
  justify-self: end;
  width: 120px;
  min-height: 34px;
  padding: var(--s1) var(--s3);
  text-align: right;
  font-weight: 600;
  color: var(--pink);
}

.base-history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 130px;
  align-items: center;
  gap: var(--s4);
  min-height: 44px;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-body);
}

.base-history-row .who-when {
  color: var(--dim);
  font-size: var(--t-micro);
  text-align: right;
}

.base-history-price {
  text-align: right;
  white-space: nowrap;
}

.base-history-price .old {
  color: var(--dim);
  text-decoration: line-through;
}

.base-history-price .new {
  color: var(--pink);
  font-weight: 600;
}

/* ============ Intranet nav ============ */
.topbar-nav {
  display: flex;
  align-items: center;
  gap: var(--s6);
}

.topbar-nav .ghost-button.is-active {
  color: var(--pink);
  border-bottom-color: var(--pink);
}

.workspace-wide {
  width: min(1560px, calc(100% - 48px));
}

/* ============ CRM / Kanban ============ */
.crm-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--s3) var(--s4);
  margin-bottom: var(--s5);
}

.crm-toolbar .history-count {
  align-self: center;
  margin-left: auto;
}

.crm-board {
  display: grid;
  /* auto-fit (nao um numero fixo de trilhas) — o numero de colunas por
     linha cresce sozinho conforme sobra largura (ex: ao recolher a barra
     lateral), sem precisar acoplar esta grade ao estado da sidebar. */
  /* 190px (era 200): com 6 etapas mais os gaps, 200px estourava por ~60px numa
     tela de 1512 com a sidebar aberta e a ultima coluna caia pra uma segunda
     linha — um funil que quebra no meio deixa de ser funil. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s4);
  align-items: start;
}

.deal-column {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 2px 10px rgba(18, 18, 18, 0.05);
  min-height: 160px;
}

.deal-column-head {
  display: flex;
  /* flex-start (nao center) — com titulos de 2 linhas ("Montar escopo e
     aprovar"), centralizar jogava o valor/contagem no meio vertical do
     bloco inteiro, destoando das colunas com titulo de 1 linha so. */
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s4) var(--s4);
  border-bottom: 1px solid var(--line);
}

.deal-column-title {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  font-size: var(--t-body);
}

.deal-dot {
  width: 8px;
  height: 8px;
  margin-top: var(--s2);
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--dim);
}

.deal-dot[data-stage="briefing"] { background: var(--warn); }
.deal-dot[data-stage="escopo"] { background: var(--accent2); }
.deal-dot[data-stage="apresentacao"] { background: var(--pink); }
.deal-dot[data-stage="enviada"] { background: var(--info); }
.deal-dot[data-stage="aprovada"] { background: var(--ok); }
.deal-dot[data-stage="nao_aprovada"] { background: var(--danger); }

.deal-column-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--s2);
  border-radius: 20px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  color: var(--dim);
  font-size: var(--t-micro);
  font-weight: 600;
  flex-shrink: 0;
}

.deal-column-value {
  color: var(--pink);
  font-size: var(--t-sub);
  font-weight: 600;
  flex-shrink: 0;
  padding-top: 2px;
  white-space: nowrap;
}

.deal-column-body {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s3);
  flex: 1;
  border-radius: 0 0 var(--r) var(--r);
  transition: background 0.15s ease;
}

.deal-column-body.is-over {
  background: var(--pink-l);
  outline: 1px dashed var(--pink-b);
  outline-offset: -4px;
}

.deal-column-empty {
  color: var(--dim);
  font-size: var(--t-caption);
  text-align: center;
  padding: var(--s4) 0;
  margin: 0;
}

/* Especificidade dupla de proposito: ".dash-empty"/".leads-empty" etc. definem
   sua propria cor --dim mais abaixo no arquivo e venceriam por ordem de
   declaracao se ".load-error" tivesse a mesma especificidade (uma classe). */
.deal-column-empty.load-error,
.leads-empty.load-error,
.empty-history.load-error,
.history-empty-filtered.load-error,
.dash-empty.load-error {
  color: var(--danger);
}

.retry-button {
  border: none;
  background: none;
  padding: 0;
  margin-left: var(--s1);
  color: var(--danger);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}

.deal-card {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  padding: var(--s3) var(--s4);
  cursor: grab;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.deal-card:hover {
  border-color: var(--pink-b);
  box-shadow: 0 4px 14px rgba(18, 18, 18, 0.06);
}

.deal-card:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 1px;
}

.deal-card.is-dragging {
  opacity: 0.4;
  cursor: grabbing;
}

.deal-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
}

.deal-card-client {
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--ink);
}

.deal-card-value {
  color: var(--ink);
  font-weight: 700;
  font-size: var(--t-body);
  white-space: nowrap;
}

.deal-card-contact {
  margin: 2px 0 0;
  font-size: var(--t-micro);
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deal-card-meta {
  margin: 0;
  color: var(--dim);
  font-size: var(--t-caption);
}

.deal-card-next {
  margin: 0;
  color: var(--body);
  font-size: var(--t-caption);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deal-card-foot {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s2);
  margin-top: 2px;
  padding-top: var(--s2);
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: var(--t-micro);
  letter-spacing: 0.02em;
}

.deal-card-id {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deal-card-mode {
  flex-shrink: 0;
  color: var(--dim);
  font-weight: 500;
}

/* As 4 abas nao cabem em 375px. Rolam na horizontal em vez de esticar a pagina
   inteira — sem isso o body ganhava 70px de scroll lateral no celular. */
.crm-tabs {
  display: flex;
  gap: var(--s1);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}

.crm-tabs::-webkit-scrollbar {
  display: none;
}

.crm-tab {
  border: none;
  background: none;
  padding: var(--s3) var(--s1);
  margin-right: var(--s5);
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--dim);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}

.crm-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--pink);
}

.crm-tab-count {
  background: var(--pink);
  color: #fff;
  font-size: var(--t-micro);
  font-weight: 700;
  border-radius: 999px;
  padding: 1px var(--s2);
  min-width: 18px;
  text-align: center;
}

/* Sem contagem (0 leads novos) o span fica vazio — sem isso, o pill
   colapsa pra uma casquinha/traco rosa sem sentido ao lado do titulo da aba. */
.crm-tab-count:empty {
  display: none;
}

.crm-tab-panel {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.leads-filter {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.leads-filter select {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: var(--s1) var(--s3);
  font-size: var(--t-caption);
  background: #fff;
}

.leads-filter .primary-button {
  margin-left: auto;
  padding: var(--s2) var(--s4);
  font-size: var(--t-caption);
  white-space: nowrap;
  flex-shrink: 0;
}

.deal-card-lead-badge {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 1px var(--s2);
  border-radius: 999px;
  background: var(--pink-tint);
  color: var(--pink);
  border: 1px solid var(--pink-b);
}

.lead-origin-block {
  margin: var(--s1) 0 var(--s4);
  padding: var(--s4) var(--s4);
  border: 1px solid var(--pink-b);
  border-radius: var(--r);
  background: var(--pink-tint);
}

.lead-origin-title {
  margin: 0 0 var(--s3);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--pink);
}

.lead-origin-block .deal-meta-grid {
  margin-bottom: 0;
}

/* Quando o bloco travado (dados do formulario) usa <details>/<summary> em vez
   de <div>/<p> — some com o marcador nativo e deixa o titulo clicavel. */
summary.lead-origin-title {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s2);
  list-style: none;
}

summary.lead-origin-title::-webkit-details-marker {
  display: none;
}

/* ---- Grupo expansivel neutro (qualificacao, contato/notas) — mesma logica
   de disclosure do .lead-origin-block, mas sem o tingimento rosa, reservado
   pra dados travados/historicos. ---- */
.dialog-group {
  margin: var(--s1) 0 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}

.dialog-group summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s3) var(--s4);
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--ink);
}

.dialog-group summary::-webkit-details-marker {
  display: none;
}

.dialog-group .group-body {
  padding: 0 var(--s4) var(--s4);
  display: grid;
  gap: var(--s4);
}

.group-chevron {
  flex-shrink: 0;
  color: var(--dim);
  font-size: 10px;
  transition: transform 0.15s ease;
}

details[open] > summary .group-chevron {
  transform: rotate(90deg);
}

/* ---- Estagio: select + badge de estagio terminal (fechada/perdida) ---- */
.stage-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.stage-row select {
  flex: 1;
}

.stage-badge {
  flex-shrink: 0;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: var(--s1) var(--s3);
  border-radius: 999px;
  white-space: nowrap;
}

.stage-badge.won {
  color: var(--ok);
  background: var(--ok-tint);
}

.stage-badge.lost {
  color: var(--danger);
  background: var(--danger-tint);
}

/* ---- Action chip: meio termo entre o ghost-button (sem cara de botao) e o
   deal-save (peso demais para uma acao secundaria) ---- */
.action-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--ink);
  font-weight: 600;
  font-size: var(--t-sub);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.action-chip .ico {
  font-size: 0.95rem;
  line-height: 1;
}

.action-chip .arrow {
  margin-left: 1px;
  color: var(--dim);
  font-size: 0.8rem;
}

.action-chip:hover {
  border-color: var(--pink);
  color: var(--pink);
  background: var(--pink-l);
}

.action-chip:hover .arrow {
  color: var(--pink);
}

.leads-list {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s4) var(--s5) var(--s5);
}

.leads-empty {
  color: var(--dim);
  font-size: var(--t-sub);
  padding: var(--s2) 2px;
}

.lead-card {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  padding: var(--s3) var(--s4);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lead-card:hover,
.lead-card:focus-visible {
  border-color: var(--pink-b);
  box-shadow: 0 4px 14px rgba(18, 18, 18, 0.06);
  outline: none;
}

.lead-card-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lead-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
}

.lead-card-name {
  font-size: var(--t-heading);
  font-weight: 600;
  color: var(--ink);
}

.lead-card-meta {
  color: var(--dim);
  font-size: var(--t-caption);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-card-extra {
  margin: 2px 0 0;
  color: var(--body);
  font-size: var(--t-caption);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-status-badge {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px var(--s2);
  border-radius: 999px;
  background: var(--line);
  color: var(--dim);
  flex-shrink: 0;
}

.lead-status-badge[data-status="Novo"] {
  background: var(--info-tint);
  color: var(--info);
}

.lead-status-badge[data-status="Convertido"] {
  background: var(--ok-tint);
  color: var(--ok);
}

.lead-status-badge[data-status="Descartado"] {
  background: var(--danger-tint);
  color: var(--danger);
}

.lead-detail-block {
  display: grid;
  gap: var(--s2);
  margin-top: var(--s1);
}

/* O textarea de "Mensagem" no dialogo do lead nunca teve regra nenhuma:
   renderizava com a fonte monoespacada do navegador, ~180px de largura e
   colado ao lado do rotulo. Herda o mesmo tratamento dos campos do deal. */
.lead-detail-block textarea {
  width: 100%;
  min-height: 76px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-body);
  line-height: 1.5;
  resize: vertical;
}

.lead-detail-block textarea:focus {
  outline: none;
  border-color: var(--pink);
}

.aderencia-stars {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.aderencia-star {
  border: 0;
  background: none;
  padding: var(--s1);
  font-size: 22px;
  line-height: 1;
  color: var(--line-strong);
  cursor: pointer;
  transition: color 0.15s ease, transform 0.1s ease;
}

.aderencia-star:hover {
  transform: scale(1.1);
}

.aderencia-star.is-active {
  color: var(--star);
}

.aderencia-label {
  margin-left: var(--s2);
  font-size: var(--t-caption);
  color: var(--dim);
}

.lead-detail-block p {
  margin: var(--s1) 0 0;
  font-size: var(--t-sub);
  color: var(--body);
}

.lead-detail-extra {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3) var(--s4);
  margin-top: var(--s3);
}

.lead-detail-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lead-detail-item strong {
  font-size: var(--t-sub);
  color: var(--ink);
}

.lead-detail-empty {
  color: var(--dim);
  font-size: var(--t-sub);
  margin-top: var(--s2);
}

/* ---- Deal dialog ---- */
.deal-dialog {
  width: min(560px, calc(100% - 28px));
}

/* grid-auto-rows: min-content — sem isso, um filho com overflow diferente de
   visible (o .deal-meta-grid usa overflow:hidden pra arredondar os cantos)
   entra na conta do track com tamanho minimo zero, e a linha do grid colapsava
   pra 22px enquanto o conteudo pedia 93px. O contato aparecia cortado no meio
   da segunda linha. Aqui cada linha passa a ter a altura do que carrega. */
.deal-dialog-body {
  display: grid;
  grid-auto-rows: min-content;
  gap: var(--s4);
  padding: var(--s5);
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

/* min-height: fit-content e o outro lado da correcao acima: garante que o
   proprio bloco nunca fique menor que o conteudo, independente do track. */
.deal-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  min-height: fit-content;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.deal-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg);
  padding: var(--s3) var(--s4);
}

/* Com 5 campos num grid de 2 colunas, o ultimo fica sozinho na linha e a
   celula vazia ao lado parecia buraco. */
.deal-meta-item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.deal-meta-item .lbl {
  font-size: var(--t-micro);
  color: var(--dim);
  font-weight: 500;
}

.deal-meta-item strong {
  font-size: var(--t-heading);
  color: var(--ink);
}

.deal-field {
  display: grid;
  gap: var(--s2);
}

.deal-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
}

.deal-field select,
.deal-field input {
  font: inherit;
}

.deal-field span {
  font-size: var(--t-micro);
  font-weight: 500;
  color: var(--dim);
}

.deal-field input,
.deal-field select,
.deal-field textarea {
  min-height: 38px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--t-body);
}

.deal-field textarea {
  resize: vertical;
  line-height: 1.5;
}

.deal-field input:focus,
.deal-field select:focus,
.deal-field textarea:focus {
  outline: none;
  border-color: var(--pink);
}

.deal-items-summary {
  margin: 0;
  font-size: var(--t-caption);
  color: var(--dim);
  line-height: 1.5;
}

.deal-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--line);
}

.deal-footer-actions {
  display: flex;
  align-items: center;
  gap: var(--s4);
}

.deal-delete {
  color: var(--danger);
  border-color: var(--danger-border);
}

.deal-delete:hover {
  border-color: var(--danger);
  background: var(--danger-tint);
  color: var(--danger);
}

.deal-save {
  min-height: 38px;
  padding: 0 var(--s4);
  border: none;
  border-radius: var(--r);
  background: var(--pink);
  color: #fff;
  font-weight: 600;
  font-size: var(--t-body);
}

.deal-save:hover {
  filter: brightness(1.05);
}

/* ============ Dashboard ============ */
.topbar-eyebrow {
  display: block;
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--dim);
  margin-bottom: var(--s1);
}

.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 var(--s4);
  border: none;
  border-radius: var(--r);
  background: var(--pink);
  color: #fff;
  font-weight: 600;
  font-size: var(--t-body);
  text-decoration: none;
}

.primary-button:hover {
  filter: brightness(1.05);
}

.kgrid-trend .kcard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
}

.kcard-trend {
  font-size: var(--t-micro);
  font-weight: 600;
  padding: 1px var(--s2);
  border-radius: 20px;
}

.kcard-trend.trend-up {
  color: var(--ok);
  background: var(--ok-tint);
}

.kcard-trend.trend-down {
  color: var(--danger);
  background: var(--danger-tint);
}

/* Duas mudancas de 2026-07-28:
   1. Era 1.05fr/1fr. Os dois paineis sao pares em importancia, entao os 30px
      de diferenca nao liam como hierarquia — liam como desalinhamento.
   2. align-items: start. Sem isso o grid estica os dois a mesma altura, e um
      painel de 3 linhas ao lado de um de 23 abria 803px de branco por dentro
      (Overview e Projecoes). Cada painel agora termina onde o conteudo acaba. */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--s5);
}

.panel-link {
  font-size: var(--t-sub);
  font-weight: 500;
  color: var(--pink);
  text-decoration: none;
}

.panel-link:hover {
  text-decoration: underline;
}

.dash-funnel {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
}

/* 72px nao cabia nenhum nome de estagio: "Montar escopo e aprovar" quebrava em
   tres linhas e desalinhava a barra do resto da coluna. Como a barra tem espaco
   de sobra, 136px resolve sem apertar nada. */
.dash-funnel-row {
  display: grid;
  grid-template-columns: 136px 1fr auto auto;
  align-items: center;
  gap: var(--s3);
}

.dash-funnel-label {
  font-size: var(--t-sub);
  color: var(--body);
}

.dash-funnel-track {
  height: 10px;
  background: var(--surface);
  border-radius: 20px;
  overflow: hidden;
}

.dash-funnel-bar {
  height: 100%;
  border-radius: 20px;
  min-width: 4px;
  transition: width 0.3s ease;
}

.dash-funnel-count {
  font-size: var(--t-sub);
  font-weight: 600;
  color: var(--ink);
  min-width: 20px;
  text-align: right;
}

.dash-funnel-value {
  font-size: var(--t-caption);
  color: var(--dim);
  min-width: 72px;
  text-align: right;
}

.dash-recent {
  display: flex;
  flex-direction: column;
  padding: var(--s2) 0 var(--s2);
}

.dash-recent-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}

.dash-recent-row:last-child {
  border-bottom: 0;
}

.dash-recent-row:hover {
  background: var(--pink-l);
}

.dash-recent-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.dash-recent-main strong {
  font-size: var(--t-body);
  color: var(--ink);
}

.dash-recent-main span {
  font-size: var(--t-caption);
  color: var(--dim);
}

.dash-badge {
  font-size: var(--t-micro);
  font-weight: 500;
  padding: 2px var(--s3);
  border-radius: 20px;
  background: var(--surface);
  color: var(--dim);
  border: 1px solid var(--line-strong);
  white-space: nowrap;
}

.dash-badge[data-status="briefing"] {
  background: var(--warn-tint);
  color: var(--warn);
  border-color: var(--warn-border);
}

.dash-badge[data-status="escopo"] {
  background: var(--accent2-tint);
  color: var(--accent2);
  border-color: var(--accent2-border);
}

.dash-badge[data-status="apresentacao"],
.dash-badge[data-status="enviada"] {
  background: var(--info-tint);
  color: var(--info);
  border-color: var(--info-border);
}

.dash-badge[data-status="aprovada"] {
  background: var(--ok-tint);
  color: var(--ok);
  border-color: var(--ok-border);
}

.dash-badge[data-status="nao_aprovada"] {
  background: var(--danger-tint);
  color: var(--danger);
  border-color: var(--danger-border);
}

.dash-recent-value {
  font-size: var(--t-heading);
  font-weight: 600;
  color: var(--pink);
  text-align: right;
  white-space: nowrap;
}

.dash-empty {
  color: var(--dim);
  font-size: var(--t-body);
  padding: var(--s4) var(--s5);
  margin: 0;
}

.dash-tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
  padding: var(--s4) var(--s5);
}

.dash-tool {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.dash-tool:hover {
  border-color: var(--pink-b);
  background: var(--pink-l);
}

.dash-tool strong {
  font-size: var(--t-heading);
  color: var(--ink);
}

.dash-tool span {
  font-size: var(--t-caption);
  color: var(--dim);
  line-height: 1.45;
}

@media (max-width: 1120px) {
  .setup-grid,
  .content-grid,
  .project-meta,
  .parameter-grid {
    grid-template-columns: 1fr;
  }

  .kgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crm-board {
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr);
    grid-template-columns: none;
    overflow-x: auto;
    padding-bottom: var(--s2);
  }

  .dash-grid {
    grid-template-columns: 1fr;
  }

  .dash-tools {
    grid-template-columns: 1fr;
  }

  .sticky-panel {
    position: static;
  }
}

@media (max-width: 760px) {
  body {
    flex-direction: column;
  }

  .dash-funnel-row {
    grid-template-columns: 60px 1fr auto;
  }

  .dash-funnel-value {
    display: none;
  }

  .app-sidebar {
    position: static;
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--s1);
    padding: var(--s3) var(--s4);
    border-right: 0;
    border-bottom: 1px solid var(--glass-border);
    overflow-x: auto;
  }

  /* No mobile a sidebar ja vira barra horizontal compacta (labels ocultos
     logo abaixo) — o botao de recolher nao faz sentido aqui, e como o
     ancestor perde o position:sticky, o absolute dele flutuava solto no
     canto da tela em vez de colado na sidebar. */
  .sidebar-collapse-btn {
    display: none;
  }

  .app-sidebar.is-collapsed {
    width: 100%;
    padding-left: var(--s4);
    padding-right: var(--s4);
  }

  .sidebar-brand {
    padding: 0 var(--s3) 0 0;
  }

  .sidebar-brand img {
    height: 20px;
  }

  .sidebar-nav {
    flex-direction: row;
    gap: 2px;
  }

  .sidebar-link span {
    display: none;
  }

  .sidebar-link {
    padding: var(--s2) var(--s3);
  }

  /* Os grupos (Calculadora, Financeiro) sao um dropdown vertical — dentro de
     uma barra horizontal isso abria um menu flutuante por cima do conteudo da
     pagina. No celular o grupo e achatado: o botao de abrir some e os filhos
     viram itens normais da barra, em linha com o resto. Sem isso as telas do
     Financeiro so eram alcancaveis por URL direta. */
  .sidebar-group {
    display: contents;
  }

  .sidebar-group-toggle {
    display: none;
  }

  .sidebar-submenu {
    display: block;
  }

  .sidebar-submenu-inner {
    flex-direction: row;
    gap: 2px;
    padding-left: 0;
  }

  .sidebar-submenu-link {
    padding: var(--s2) var(--s3);
  }

  .sidebar-user {
    margin-left: auto;
    margin-top: 0;
    padding: 0 0 0 var(--s3);
    border-top: 0;
  }

  .sidebar-user-meta {
    display: none;
  }

  .sidebar-version-btn {
    display: none;
  }

  .workspace {
    width: min(100% - 32px, 1320px);
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--s4);
  }

  .topbar-actions,
  .topbar-nav {
    justify-content: space-between;
    width: 100%;
  }

  .crm-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .crm-toolbar .hf-field,
  .crm-toolbar .history-count {
    width: 100%;
    margin-left: 0;
  }

  .deal-meta-grid {
    grid-template-columns: 1fr;
  }

  .deal-dialog-footer {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s4);
  }

  .service-grid,
  .slider-grid,
  .summary-kgrid,
  .kgrid {
    grid-template-columns: 1fr;
  }

  .quantity-row {
    grid-template-columns: 1fr;
  }

  .line-total {
    text-align: left;
  }

  .summary-actions,
  .history-actions {
    grid-template-columns: 1fr;
  }

  .history-toolbar,
  .history-row {
    grid-template-columns: 1fr;
  }

  .history-toolbar {
    display: grid;
  }

  .history-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .hf-field,
  .hf-grow,
  .hf-clear {
    width: 100%;
  }

  .history-status {
    width: 100%;
  }

  .history-price {
    text-align: left;
  }

  .base-row {
    grid-template-columns: 1fr;
    gap: var(--s1);
    padding: var(--s3) 0;
  }

  .base-row em {
    text-align: left;
  }
}

@media print {
  body {
    background: #fff;
  }

  .input-stack,
  .setup-grid,
  .summary-actions,
  .topbar-actions {
    display: none;
  }

  .workspace,
  .content-grid {
    width: 100%;
    display: block;
    padding: 0;
  }

  .panel {
    box-shadow: none;
  }

  .summary-items-list {
    max-height: none;
    overflow: visible;
  }

  .summary-item-row {
    break-inside: avoid;
  }
}

/* ---- Campos estaticos (lead somente-leitura, dados de qualificacao) ---- */
.deal-field-static strong {
  display: block;
  min-height: 38px;
  padding: var(--s2) 0;
  font-size: var(--t-body);
  color: var(--ink);
}

.lock-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: var(--s2);
  border-radius: 50%;
  background: var(--line);
  color: var(--dim);
  font-size: var(--t-micro);
  cursor: help;
  vertical-align: middle;
}

/* ---- Toast de undo (Ctrl+Z ou clique no botao) ---- */
.undo-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(12px);
  display: flex;
  align-items: center;
  gap: var(--s4);
  background: var(--ink);
  color: #fff;
  padding: var(--s3) var(--s3) var(--s3) var(--s4);
  border-radius: 999px;
  font-size: var(--t-caption);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 1000;
}

.undo-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.undo-toast-action {
  border: none;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-weight: 600;
  font-size: var(--t-caption);
  padding: var(--s2) var(--s4);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.undo-toast-action:hover {
  background: rgba(255, 255, 255, 0.24);
}

/* ---- Identificacao (nome + marca) nos cards ---- */
.deal-card-identity,
.lead-card-identity {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.deal-card-brand,
.lead-card-brand {
  font-size: var(--t-micro);
  font-weight: 500;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Titulo editavel do dialog de lead (nome, quando manual) ---- */
.dialog-title-input {
  font-size: var(--t-title);
  font-weight: 700;
  font-family: inherit;
  color: var(--ink);
  border: none;
  border-bottom: 1px solid var(--line-strong);
  padding: 2px 0;
  background: none;
  width: 100%;
}

.dialog-title-input:focus {
  outline: none;
  border-color: var(--pink);
}

/* ---- Rodape do deal dialog com dois links (calculadora + briefing) ---- */
.deal-footer-links {
  display: flex;
  align-items: center;
  gap: var(--s4);
}

/* ---- Versoes anteriores dentro do card ---- */
.deal-versions-list {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-top: var(--s2);
}

.deal-version-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: var(--t-caption);
  color: var(--body);
}

.deal-version-row.is-current {
  border-color: var(--pink-b);
  background: var(--pink-tint);
}

.deal-version-badge {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 1px var(--s2);
  border-radius: 999px;
  background: var(--pink);
  color: #fff;
  margin-left: var(--s2);
}

/* ---- Selo de versao substituida no Historico ---- */
.history-version-badge {
  display: inline-block;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 1px var(--s2);
  border-radius: 999px;
  background: var(--line);
  color: var(--dim);
  margin-left: var(--s2);
  vertical-align: middle;
}

/* ---- Projecoes Financeiras ---- */
/* Com flex-wrap e gap de 28px a barra quebrava em duas linhas: o select
   esticava de ponta a ponta como se fosse um campo de busca e "Nova simulacao"
   caia sozinho embaixo, deixando o titulo orfao a esquerda. Sem wrap, com o
   gap de 12px herdado de .topbar-actions e o select limitado, tudo cabe numa
   linha. O raio vira --r pra casar com o .ghost-button ao lado — pilula ao
   lado de retangulo eram duas linguagens de controle na mesma barra. */
.proj-scenario-bar select {
  min-height: 36px;
  max-width: 220px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-sub);
}

/* text-align:right pra que "Salvando..." -> "Salvo" nao empurre o select de
   lado a cada autosave; a largura fixa segura o espaco e o texto encosta na
   borda do proximo controle. */
.proj-save-status {
  font-size: var(--t-caption);
  color: var(--dim);
  min-width: 70px;
  text-align: right;
}

.proj-list-head {
  display: grid;
  grid-template-columns: 1fr 140px 32px;
  gap: var(--s3);
  padding: var(--s1) var(--s5) 0;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--dim);
}

.proj-list-head-expense {
  grid-template-columns: 1fr 160px 130px 32px;
}

.proj-list {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s3) var(--s5) var(--s1);
}

.proj-row {
  display: grid;
  grid-template-columns: 1fr 140px 32px;
  gap: var(--s3);
  align-items: center;
}

.proj-row-expense {
  grid-template-columns: 1fr 160px 130px 32px;
}

/* No celular a linha de despesa (nome + tipo + valor + remover) pedia 384px
   numa coluna de 301px: o campo do nome era espremido pra 26px e o botao de
   remover ficava fora da area visivel, cortado pelo overflow do painel — ou
   seja, sem como excluir uma despesa pelo telefone. Aqui o nome passa a ocupar
   a linha inteira e o resto desce pra segunda. Os cabecalhos de coluna somem
   junto, porque deixam de corresponder ao que esta embaixo deles. */
@media (max-width: 760px) {
  .proj-list-head {
    display: none;
  }

  .proj-row {
    grid-template-columns: 1fr 96px 32px;
  }

  .proj-row-expense {
    grid-template-columns: 1fr 96px 32px;
  }

  .proj-row-expense > .proj-name {
    grid-column: 1 / -1;
  }
}

.proj-row input,
.proj-row select {
  min-height: 36px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-sub);
}

.proj-row input:focus,
.proj-row select:focus {
  outline: none;
  border-color: var(--pink);
}

.proj-remove {
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--dim);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
}

.proj-remove:hover {
  color: var(--pink);
  background: var(--surface);
}

.proj-list-empty {
  color: var(--dim);
  font-size: var(--t-sub);
  padding: var(--s1) 0;
}

/* Colava na ultima linha da lista (4px) e sobrava 20px embaixo. Agora que o
   botao tem borda, o desequilibrio ficava obvio. */
.proj-add {
  margin: var(--s3) var(--s5) var(--s5);
}

/* ============ Fase 9 — Financeiro (Overview + Custos Operacionais) ============ */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* valor do KPI colorido por sinal — o .val base ja define tamanho/peso */
.kgrid .kcard .val.is-pos {
  color: var(--ok);
}

.kgrid .kcard .val.is-neg {
  color: var(--danger);
}

/* ---- barra da cotacao do dolar ----
   Era um painel glass completo (sombra, raio de 22px, 16px de padding) para um
   campo de 96px — pesava tanto quanto a faixa de KPIs logo abaixo e disputava a
   atencao com ela. Virou faixa de utilidade: fundo --surface, raio menor, sem
   sombra e tudo numa linha so. */
.fx-bar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s2) var(--s4);
}

.fx-field {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.fx-field label {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dim);
}

.fx-input-wrap {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.fx-input-wrap > span {
  color: var(--dim);
  font-size: var(--t-body);
  white-space: nowrap;
}

.fx-bar input {
  min-height: 36px;
  width: 96px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fx-bar input:focus {
  outline: none;
  border-color: var(--pink);
}

/* Sem max-width: o 40ch quebrava a frase em duas linhas mesmo com meia tela
   de espaco sobrando ao lado. */
.fx-meta {
  font-size: var(--t-caption);
  color: var(--dim);
  line-height: 1.45;
  margin: 0;
}

.fx-sep {
  width: 1px;
  align-self: stretch;
  background: var(--line);
}

/* ---- tabela de custos ---- */
.table-scroll {
  overflow-x: auto;
}

.cost-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 780px;
}

.cost-table thead th {
  text-align: left;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dim);
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  background: var(--surface);
}

.cost-table tbody td {
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-body);
  color: var(--body);
  vertical-align: middle;
}

.cost-table tbody tr:last-child td {
  border-bottom: none;
}

.cost-table tbody tr:hover td {
  background: var(--surface);
}

.cost-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cost-table tfoot td {
  padding: var(--s4) var(--s5);
  font-size: var(--t-body);
  font-weight: 700;
  color: var(--ink);
  background: var(--surface);
  border-top: 2px solid var(--line-strong);
  font-variant-numeric: tabular-nums;
}

.tool-name {
  font-weight: 600;
  color: var(--ink);
}

.tool-area {
  display: block;
  font-size: var(--t-micro);
  font-weight: 500;
  color: var(--dim);
}

.monthly {
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.monthly.is-missing {
  color: var(--danger);
  font-weight: 600;
}

.cur-tag {
  font-size: var(--t-micro);
  font-weight: 700;
  color: var(--dim);
  letter-spacing: 0.03em;
}

/* Acao repetida linha a linha: 21 botoes com borda viravam so ruido na coluna
   da direita. Aqui a affordance vem da cor — texto rosa e reconhecido como
   clicavel (5,88:1 sobre branco) — e a borda so aparece no hover. A altura cai
   pra 28px, que ainda e o tamanho de controle padrao de desktop, pra nao
   empurrar a linha da tabela. */
.cost-edit {
  font-size: var(--t-caption);
  min-height: 28px;
  padding: 0 var(--s2);
  border-color: transparent;
  background: transparent;
  color: var(--pink);
  font-weight: 600;
}

.cost-edit:hover {
  border-color: var(--pink);
}

/* ---- selos de confianca ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px var(--s2);
  border-radius: 999px;
  white-space: nowrap;
}

.badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.badge-ok {
  background: var(--ok-tint);
  color: var(--ok);
}

.badge-warn {
  background: var(--warn-tint);
  color: var(--warn);
}

.badge-danger {
  background: var(--danger-tint);
  color: var(--danger);
}

/* O gap era o mesmo (16px) dentro do par selo+texto e entre pares, entao a
   linha virava uma sopa: nao dava pra saber qual explicacao pertence a qual
   selo. Agora sao 24px entre pares e 8px dentro de cada um (.legend-item). */
.legend {
  display: flex;
  gap: var(--s6);
  flex-wrap: wrap;
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--line);
  font-size: var(--t-caption);
  color: var(--dim);
  align-items: center;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}

.swatch {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}

.swatch::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 3px;
}

.swatch-in::before {
  background: var(--pink);
}

.swatch-out::before {
  background: var(--pink-soft);
}

/* ---- grafico entradas x saidas ---- */
.fin-chart {
  padding: var(--s4) var(--s5) var(--s2);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.fin-chart-row {
  display: grid;
  grid-template-columns: 74px 1fr 116px;
  gap: var(--s4);
  align-items: center;
}

.fin-chart-month {
  font-size: var(--t-caption);
  font-weight: 600;
  color: var(--body);
}

.fin-chart-bars {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  min-width: 0;
}

.fin-chart-track {
  height: 13px;
  background: var(--surface);
  border-radius: 999px;
  overflow: hidden;
}

.fin-chart-bar {
  height: 100%;
  border-radius: 999px;
}

.fin-chart-bar.is-in {
  background: var(--pink);
}

.fin-chart-bar.is-out {
  background: var(--pink-soft);
}

.fin-chart-result {
  text-align: right;
  font-size: var(--t-sub);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fin-chart-result.is-pos {
  color: var(--ok);
}

.fin-chart-result.is-neg {
  color: var(--danger);
}

/* ---- listas rankeadas (receita/despesa por categoria, importacoes) ---- */
.rank-hint {
  margin: var(--s4) var(--s5) 2px;
  padding: var(--s3) var(--s4);
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: var(--t-caption);
  color: var(--dim);
  line-height: 1.5;
}

.rank-hint strong {
  color: var(--body);
}

.rank {
  padding: var(--s2) 0 var(--s3);
}

.rank-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s1) var(--s4);
  padding: var(--s2) var(--s5);
  align-items: baseline;
}

.rank-row:hover {
  background: var(--surface);
}

.rank-name {
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--ink);
}

.rank-val {
  font-size: var(--t-body);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.rank-track {
  grid-column: 1 / -1;
  height: 5px;
  background: var(--surface);
  border-radius: 999px;
  overflow: hidden;
}

.rank-fill {
  height: 100%;
  background: var(--pink);
  border-radius: 999px;
}

.rank-fill.is-muted {
  background: var(--pink-soft);
}

.rank-pct {
  grid-column: 1 / -1;
  font-size: var(--t-micro);
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

/* ---- importacao ---- */
.import-feedback {
  padding: var(--s3) var(--s4);
  border-radius: var(--r);
  font-size: var(--t-sub);
  background: var(--surface);
  color: var(--body);
  border: 1px solid var(--line);
}

.import-feedback.is-ok {
  background: var(--ok-tint);
  border-color: var(--ok);
  color: var(--ok);
}

.import-feedback.is-error {
  background: var(--danger-tint);
  border-color: var(--danger);
  color: var(--danger);
}

.import-warning {
  display: flex;
  gap: var(--s4);
  align-items: flex-start;
  background: var(--warn-tint);
  border: 1px solid var(--warn);
  border-radius: var(--r-lg);
  padding: var(--s4) var(--s5);
  font-size: var(--t-sub);
  color: var(--body);
  line-height: 1.55;
}

.import-warning strong {
  color: var(--ink);
}

.import-warning-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--warn);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
}

.empty-state {
  padding: var(--s8) var(--s6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
}

.empty-state h2 {
  margin: 0;
  font-size: var(--t-heading);
  color: var(--ink);
}

.empty-state p {
  margin: 0;
  max-width: 52ch;
  font-size: var(--t-sub);
  color: var(--dim);
  line-height: 1.6;
}

@media (max-width: 640px) {
  .fin-chart-row {
    grid-template-columns: 60px 1fr;
  }

  .fin-chart-result {
    grid-column: 2;
    text-align: left;
  }
}

/* ============================================================
   Calculadora de Audiovisual — refino de UI (Fase 13, 2026-08-20)
   ------------------------------------------------------------
   A versao anterior forcava os 4 blocos numa unica grade de 5 colunas.
   Como as formas de dado sao diferentes (captacao tem checkbox+select+qtd;
   imagem tem so um numero), a primeira coluna empilhava titulo+controles+
   nota e as linhas iam de 68px a 153px de altura — mesma tabela aparente,
   ritmo completamente diferente.

   O que unifica agora nao e a grade, e a ANATOMIA:
       identidade + controles  |  resultado  |  acao
   Cada bloco arranja os proprios controles em linha; o que e compartilhado
   e o ritmo vertical, a zona de resultado e a escala de tipo/cor.

   Captacao virou cartao (sao 2 opcoes fixas, e uma escolha, nao uma lista).
   A coluna "Trabalho" sumiu: as horas viraram a sublinha do custo, que e o
   que elas explicam. Isso devolveu 132px pros controles respirarem.
   ============================================================ */

.av-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--s5);
  align-items: start;
}
.av-main {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  min-width: 0;
}
.av-summary {
  position: sticky;
  top: var(--s5);
}
.av-panel {
  overflow: hidden;
}

/* ---------------- cabecalho de bloco ----------------
   O total do bloco e a resposta daquele bloco: ganhou peso e cor de
   texto principal. Antes era 12px em --dim, o menor e mais apagado
   elemento do painel — hierarquia invertida. */
/* Nos blocos de escopo o cabecalho usa A MESMA grade das linhas, entao o
   total do bloco cai exatamente sobre a coluna de custo. Com flex +
   space-between ele encostava na borda do painel e ficava 48px a direita
   dos numeros que resume — desalinhamento visivel em cinco paineis. */
.av-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
}
.av-main .av-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px 32px;
  gap: var(--s4);
  align-items: center;
}
.av-main .av-head .total {
  grid-column: 2;
  text-align: right;
}
.av-head-title {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.av-head h2 {
  margin: 0;
  font-size: var(--t-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.av-head .total {
  flex-shrink: 0;
  font-size: var(--t-body);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.av-head .total.is-zero {
  font-weight: 500;
  color: var(--dim);
}

/* ---------------- linha de lista ----------------
   Uma linha = uma altura. Tudo em uma faixa so; se faltar largura, a
   zona de controles quebra sozinha, e o resultado nao sai do lugar. */
.av-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px 32px;
  gap: var(--s4);
  align-items: center;
  min-height: 60px;
  padding: var(--s3) var(--s5);
}
.av-row + .av-row {
  border-top: 1px solid var(--line);
}
.av-row.is-off .av-name {
  color: var(--dim);
}

/* Grade em vez de flex solto: o indice ocupa a coluna 1 e TUDO o mais vive
   na coluna 2. Quando falta largura (a coluna principal chega a 633px em
   tela de 1280), a quebra acontece dentro da coluna 2 — as duas linhas
   nascem alinhadas na mesma margem, em vez de a segunda escorregar pra
   baixo do indice. Quebra virou decisao de layout, nao acidente. */
.av-row-lead {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: var(--s2) var(--s3);
  min-width: 0;
}
.av-row-lead.no-index {
  grid-template-columns: minmax(0, 1fr);
}
.av-lead-main {
  grid-column: -2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  min-width: 0;
}
/* Os tres campos numericos andam juntos: assim o ponto de quebra e sempre
   entre "o que e" e "quanto e", nunca no meio dos numeros. */
.av-num-group {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-shrink: 0;
}
.av-name {
  font-size: var(--t-sub);
  font-weight: 600;
  color: var(--ink);
}
.av-index {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--dim);
  font-size: var(--t-micro);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* rotulo curto que antecede um controle ("origem") */
.av-inline-label {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--dim);
}
/* leitura humana de um valor digitado ("1min30") — micro, ao lado do campo */
.av-echo {
  font-size: var(--t-micro);
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------------- campos ---------------- */
.av-select {
  min-height: 36px;
  min-width: 104px;
  max-width: 168px;
  text-overflow: ellipsis;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-sub);
}
.av-field {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.av-field input {
  min-height: 36px;
  width: 84px;
  padding: 6px 28px 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-sub);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.av-field .unit {
  position: absolute;
  right: 10px;
  font-size: var(--t-micro);
  color: var(--dim);
  pointer-events: none;
}
.av-field.is-prefix input {
  padding: 6px 10px 6px 26px;
}
.av-field.is-prefix .unit {
  right: auto;
  left: 10px;
}
.av-field.is-qty input {
  width: 66px;
}
.av-field.is-wide input {
  width: 104px;
}
.av-select:focus,
.av-field input:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 3px var(--pink-l);
}

/* ---------------- resultado ----------------
   Custo em cima (a resposta), horas embaixo (o porque). Antes eram duas
   colunas separadas, e as horas ficavam mais perto do input do que do
   numero que elas explicam. */
.av-result {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: right;
}
.av-result .val {
  font-size: var(--t-sub);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.av-result .sub {
  font-size: var(--t-micro);
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Placeholder precisa continuar legivel: --dim tem 5,3:1 no branco,
   --line-strong tinha 1,9:1. */
.av-result.is-zero .val {
  font-weight: 500;
  color: var(--dim);
}

.av-remove {
  width: 32px;
  height: 32px;
  justify-self: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--dim);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.av-remove:hover {
  color: var(--danger);
  background: var(--danger-tint);
}

/* ---------------- adicionar / vazio ---------------- */
.av-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  padding: var(--s3) var(--s5);
  border: none;
  border-top: 1px dashed var(--line-strong);
  background: none;
  color: var(--pink);
  font: inherit;
  font-size: var(--t-sub);
  font-weight: 600;
  cursor: pointer;
}
.av-add:hover {
  background: var(--pink-l);
}
.av-empty {
  margin: 0;
  padding: var(--s6) var(--s5);
  font-size: var(--t-sub);
  color: var(--dim);
  text-align: center;
}

/* ---------------- captacao: cartoes ----------------
   Sao duas opcoes fixas — isso e uma escolha, nao uma lista. Cartao
   mostra o estado escolhido sem depender so do checkbox. */
.av-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: var(--s4);
  padding: var(--s5);
}
.av-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--s4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--bg);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.av-card.is-on {
  border-color: var(--pink);
  background: var(--pink-l);
}
.av-card-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.av-card-check {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
  cursor: pointer;
}
.av-card-check input {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  accent-color: var(--pink);
  cursor: pointer;
}
.av-card-check strong {
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--ink);
}
.av-chip {
  margin-left: auto;
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--dim);
  font-size: var(--t-micro);
  font-weight: 600;
  white-space: nowrap;
}
.av-card-note {
  margin: 0;
  font-size: var(--t-micro);
  line-height: 1.45;
  color: var(--dim);
}
.av-card-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
}
.av-card-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding-top: 10px;
  margin-top: auto;
  border-top: 1px solid var(--line);
}
.av-card-foot .lbl {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dim);
}
.av-card-foot .val {
  font-size: var(--t-body);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.av-card-foot .val.is-zero {
  font-weight: 500;
  color: var(--dim);
}

/* controle segmentado (diaria cheia / meia) */
.av-seg {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.av-seg label {
  position: relative;
  display: inline-flex;
}
.av-seg input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.av-seg span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 8px;
  color: var(--dim);
  font-size: var(--t-caption);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.av-seg input:checked + span {
  background: var(--bg);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(18, 18, 18, 0.1);
}
.av-seg input:focus-visible + span {
  outline: 2px solid var(--pink);
  outline-offset: 1px;
}

/* ---------------- custos de producao ---------------- */
.av-prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: var(--s4) var(--s3);
  padding: var(--s5);
}
.av-prod-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.av-prod-label {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 18px;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--dim);
}
.av-prod-input {
  position: relative;
  display: flex;
  align-items: center;
}
.av-prod-input .av-cur {
  position: absolute;
  left: 10px;
  font-size: var(--t-sub);
  color: var(--dim);
  pointer-events: none;
}
.av-prod-field input {
  min-height: 36px;
  width: 100%;
  padding: 6px 10px 6px 34px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-sub);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.av-prod-field input:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 3px var(--pink-l);
}
.av-prod-field.is-extra input {
  border-style: dashed;
}
.av-prod-field.has-value input {
  border-color: var(--pink);
  background: var(--pink-l);
}

/* ---------------- resumo ---------------- */
.av-sum-body {
  padding: var(--s4) var(--s5);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.av-sum-caption {
  margin: 0 0 var(--s1);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dim);
}
.av-sum-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  font-size: var(--t-sub);
}
.av-sum-line .lbl {
  color: var(--body);
}
.av-sum-line .num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.av-sum-line .num.is-zero {
  font-weight: 500;
  color: var(--dim);
}
.av-sum-line.is-total {
  padding-top: 7px;
  border-top: 1px solid var(--line);
}
.av-sum-line.is-total .lbl {
  color: var(--ink);
  font-weight: 600;
}
.av-sum-final {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s4) var(--s5) var(--s5);
  border-top: 1px solid var(--line);
}
.av-sum-final .lbl {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dim);
}
.av-sum-final .num {
  font-size: var(--t-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--pink);
}

.av-knob {
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.av-knob-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  margin-bottom: var(--s2);
}
.av-knob-head .lbl {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--t-caption);
  font-weight: 600;
  color: var(--body);
}
.av-knob-head .num {
  font-size: var(--t-heading);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.av-knob input[type="range"] {
  display: block;
  width: 100%;
  margin: 0;
  accent-color: var(--pink);
}
.av-knob-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  font-size: 10px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.av-knob-sub {
  margin: var(--s2) 0 0;
  font-size: var(--t-micro);
  line-height: 1.45;
  color: var(--dim);
}

.av-floor {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--line);
  font-size: var(--t-caption);
  line-height: 1.45;
}
.av-floor::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 6px;
  border-radius: 50%;
  background: currentColor;
}
.av-floor.is-ok {
  background: var(--ok-tint);
  color: var(--ok);
}
.av-floor.is-danger {
  background: var(--danger-tint);
  color: var(--danger);
}

/* ---------------- escopo (lista do resumo) ---------------- */
.av-scope {
  border-top: 1px solid var(--line);
}
.av-scope-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) var(--s5) var(--s2);
}
.av-scope-head h3 {
  margin: 0;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dim);
}
.av-scope-head span {
  font-size: var(--t-micro);
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.av-scope-list {
  display: flex;
  flex-direction: column;
  max-height: 260px;
  overflow-y: auto;
  padding: 0 var(--s5) var(--s4);
}
.av-scope-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding: 7px 0;
  font-size: var(--t-caption);
}
.av-scope-row + .av-scope-row {
  border-top: 1px solid var(--line);
}
.av-scope-row .txt {
  min-width: 0;
  color: var(--body);
}
.av-scope-row .txt small {
  display: block;
  color: var(--dim);
  font-size: var(--t-micro);
}
.av-scope-row .num {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.av-scope-empty {
  padding: var(--s2) 0 var(--s3);
  font-size: var(--t-caption);
  color: var(--dim);
}

.av-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  padding: var(--s4) var(--s5) var(--s3);
  border-top: 1px solid var(--line);
}
.av-actions button {
  flex: 1 1 auto;
  min-height: 38px;
  padding: 0 var(--s4);
  border-radius: 10px;
  font: inherit;
  font-size: var(--t-sub);
  font-weight: 600;
  cursor: pointer;
}
.av-actions #saveQuoteButton {
  border: none;
  background: var(--pink);
  color: #fff;
}
.av-actions #saveQuoteButton:disabled {
  background: var(--line);
  color: var(--dim);
  cursor: not-allowed;
}
.av-actions #copyButton,
.av-actions #printButton {
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--body);
}
.av-actions #copyButton:hover,
.av-actions #printButton:hover {
  border-color: var(--pink);
  color: var(--pink);
}
.av-beta-note {
  margin: 0;
  padding: 0 var(--s5) var(--s5);
  font-size: var(--t-micro);
  line-height: 1.45;
  color: var(--dim);
}

/* ---------------- titulo editavel na topbar ----------------
   O painel "Proposta" gastava um painel de vidro inteiro em dois campos.
   O nome do projeto e o titulo do documento — mora na topbar, como em
   qualquer app de documento. */
.av-doc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.av-doc-eyebrow {
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--dim);
}
#clientName.av-doc-title {
  width: min(420px, 60vw);
  padding: 3px 8px;
  margin-left: -8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--t-title);
  font-weight: 600;
  letter-spacing: -0.01em;
}
#clientName.av-doc-title:hover {
  border-color: var(--line-strong);
}
#clientName.av-doc-title:focus {
  outline: none;
  border-color: var(--pink);
  background: var(--bg);
  box-shadow: 0 0 0 3px var(--pink-l);
}
.av-doc-owner {
  font-size: var(--t-micro);
  color: var(--dim);
}

/* ---------------- tooltip ----------------
   A bolha e movida para o <body> pelo JS: .panel tem overflow hidden E
   backdrop-filter, e o filtro cria bloco de contencao — nem position
   fixed escapa do recorte se a bolha ficar dentro do painel. */
.av-tip-wrap {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}
.av-tip {
  position: relative;
  width: 18px;
  height: 18px;
  padding: 0;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--surface);
  color: var(--dim);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  transition: background 0.15s ease, color 0.15s ease;
}
/* Area sensivel de 26px sem inflar o circulo desenhado. */
.av-tip::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
}
.av-tip:hover,
.av-tip[aria-expanded="true"] {
  background: var(--pink);
  color: #fff;
}
.av-tip:focus-visible {
  border-radius: 50%;
}
.av-tip-bubble {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: max-content;
  max-width: min(304px, calc(100vw - 24px));
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--body);
  box-shadow: 0 12px 32px rgba(18, 18, 18, 0.16);
  font-size: var(--t-caption);
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.av-tip-bubble strong {
  color: var(--ink);
  font-weight: 600;
}
/* Lista de criterios dentro da tooltip: rotulo em cima, definicao embaixo.
   `:not(:empty)` porque o JS so preenche depois do catalogo carregar — sem
   isso, sobraria uma borda solta na tooltip enquanto vazia. */
.av-tip-defs {
  display: block;
}
.av-tip-defs:not(:empty) {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.av-tip-def {
  display: block;
}
.av-tip-def + .av-tip-def {
  margin-top: 8px;
}
.av-tip-def strong {
  display: block;
}
.av-tip-bubble.is-open {
  display: block;
  animation: av-tip-in 0.14s ease both;
}
@keyframes av-tip-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .av-tip-bubble.is-open {
    animation: none;
  }
}

/* ---------------- responsivo ---------------- */
@media (max-width: 1180px) {
  .av-grid {
    grid-template-columns: minmax(0, 1fr) 310px;
  }
}
@media (max-width: 1080px) {
  .av-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .av-summary {
    position: static;
  }
}
@media (max-width: 720px) {
  .av-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--s3);
    padding-left: var(--s4);
    padding-right: var(--s4);
  }
  .av-row .av-remove {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  .av-row .av-row-lead {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .av-num-group {
    flex-wrap: wrap;
  }
  .av-row .av-result {
    grid-column: 1 / -1;
    grid-row: 3;
    align-items: flex-start;
    text-align: left;
  }
  .av-cards,
  .av-prod-grid,
  .av-sum-body,
  .av-knob,
  .av-floor,
  .av-scope-head,
  .av-scope-list,
  .av-actions,
  .av-sum-final,
  .av-head {
    padding-left: var(--s4);
    padding-right: var(--s4);
  }
  #clientName.av-doc-title {
    width: min(100%, 70vw);
    font-size: var(--t-heading);
  }
}

/* ============================================================
   Equipe — paginas Pessoas e Ferias (Fase 14, 2026-08-20)
   Mesma anatomia da Fase 13: identidade | numeros | acao, com a zona
   de resultado alinhada entre linhas. Reaproveita .panel, .kgrid/.kcard,
   .base-dialog e os botoes que ja existem.
   ============================================================ */

.eq-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s3);
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.eq-search {
  flex: 1 1 200px;
  min-width: 0;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-sub);
}
.eq-search:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 3px var(--pink-l);
}
.eq-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-caption);
  color: var(--body);
  white-space: nowrap;
  cursor: pointer;
}
.eq-toolbar input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--pink);
}

/* ---------------- cabecalho de painel ---------------- */
.eq-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
}
.eq-head h2 {
  margin: 0;
  font-size: var(--t-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.eq-head .meta {
  font-size: var(--t-caption);
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

/* ---------------- linha de pessoa ---------------- */
.eq-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: var(--s4);
  align-items: center;
  width: 100%;
  padding: var(--s3) var(--s5);
  border: none;
  border-top: 1px solid var(--line);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.eq-row:first-child {
  border-top: none;
}
.eq-row:hover {
  background: var(--pink-l);
}
.eq-row.is-off {
  opacity: 0.62;
}
.eq-avatar {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  font-size: var(--t-caption);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.eq-row.is-off .eq-avatar {
  background: var(--line-strong);
}
.eq-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.eq-id strong {
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--ink);
}
.eq-id span {
  font-size: var(--t-micro);
  color: var(--dim);
}
.eq-nums {
  display: flex;
  align-items: center;
  gap: var(--s5);
  flex-shrink: 0;
}
.eq-num {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-width: 62px;
}
.eq-num .val {
  font-size: var(--t-body);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.eq-num .val.is-zero {
  font-weight: 500;
  color: var(--dim);
}
.eq-num .val.is-warn {
  color: var(--warn);
}
.eq-num .val.is-danger {
  color: var(--danger);
}
.eq-num .lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}

/* ---------------- selos ---------------- */
.eq-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--dim);
  font-size: var(--t-micro);
  font-weight: 600;
  white-space: nowrap;
}
.eq-chip.is-ok {
  border-color: var(--ok-border);
  background: var(--ok-tint);
  color: var(--ok);
}
.eq-chip.is-warn {
  border-color: var(--warn-border);
  background: var(--warn-tint);
  color: var(--warn);
}
.eq-chip.is-danger {
  border-color: var(--danger-border);
  background: var(--danger-tint);
  color: var(--danger);
}
.eq-chip.is-info {
  border-color: var(--info-border);
  background: var(--info-tint);
  color: var(--info);
}

/* ---------------- avisos ---------------- */
.eq-note {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--line);
  font-size: var(--t-caption);
  line-height: 1.5;
}
.eq-note.is-warn {
  background: var(--warn-tint);
  color: var(--warn);
}
.eq-note.is-danger {
  background: var(--danger-tint);
  color: var(--danger);
}
.eq-note.is-info {
  background: var(--info-tint);
  color: var(--info);
}
.eq-empty {
  margin: 0;
  padding: var(--s6) var(--s5);
  font-size: var(--t-sub);
  color: var(--dim);
  text-align: center;
}

/* ---------------- formulario no dialog ---------------- */
.eq-form {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}
.eq-fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  border: none;
  margin: 0;
  padding: 0;
}
.eq-fieldset > legend {
  padding: 0;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dim);
}
.eq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s3);
}
.eq-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.eq-field.is-wide {
  grid-column: 1 / -1;
}
.eq-field > span {
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--dim);
}
.eq-field input,
.eq-field select,
.eq-field textarea {
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-sub);
}
.eq-field textarea {
  min-height: 76px;
  resize: vertical;
}
.eq-field input:focus,
.eq-field select:focus,
.eq-field textarea:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 3px var(--pink-l);
}
.eq-field small {
  font-size: var(--t-micro);
  color: var(--dim);
}

/* ---------------- periodos aquisitivos ---------------- */
.eq-periods {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.eq-period {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, 72px);
  gap: var(--s3);
  align-items: center;
  padding: var(--s3) var(--s4);
  background: var(--bg);
}
.eq-period + .eq-period {
  border-top: 1px solid var(--line);
}
.eq-period.is-expired {
  background: var(--surface);
}
.eq-period.is-soon {
  background: var(--warn-tint);
}
.eq-period-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.eq-period-id strong {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-sub);
  font-weight: 600;
  color: var(--ink);
}
.eq-period-id span {
  font-size: var(--t-micro);
  color: var(--dim);
}
.eq-period-num {
  text-align: right;
  font-size: var(--t-sub);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.eq-period-num.is-zero {
  font-weight: 400;
  color: var(--dim);
}
.eq-period-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, 72px);
  gap: var(--s3);
  padding: var(--s2) var(--s4);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dim);
}
.eq-period-head span:not(:first-child) {
  text-align: right;
}

/* ---------------- historico de lancamentos ---------------- */
.eq-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--s3);
  align-items: center;
  padding: var(--s3) 0;
  border-top: 1px solid var(--line);
  font-size: var(--t-sub);
}
.eq-entry:first-child {
  border-top: none;
}
.eq-entry-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.eq-entry-id strong {
  font-weight: 600;
  color: var(--ink);
}
.eq-entry-id span {
  font-size: var(--t-micro);
  color: var(--dim);
}
.eq-entry-days {
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.eq-entry-actions {
  display: flex;
  gap: 6px;
}
.eq-mini {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--bg);
  color: var(--body);
  font: inherit;
  font-size: var(--t-micro);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.eq-mini:hover {
  border-color: var(--pink);
  color: var(--pink);
}
.eq-mini.is-ok:hover {
  border-color: var(--ok);
  color: var(--ok);
}
.eq-mini.is-danger:hover {
  border-color: var(--danger);
  color: var(--danger);
}

/* ---------------- rodape de acoes do dialog ---------------- */
.eq-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--s2);
}
.eq-dialog-actions .eq-spacer {
  margin-right: auto;
}
.eq-danger-button {
  min-height: 38px;
  padding: 0 var(--s4);
  border: 1px solid var(--danger-border);
  border-radius: 10px;
  background: var(--danger-tint);
  color: var(--danger);
  font: inherit;
  font-size: var(--t-sub);
  font-weight: 600;
  cursor: pointer;
}
.eq-danger-button:hover {
  border-color: var(--danger);
}

/* ---------------- upload de contrato ---------------- */
.eq-file {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
  padding: var(--s3);
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  font-size: var(--t-caption);
  color: var(--dim);
}
.eq-file.has-file {
  border-style: solid;
  border-color: var(--ok-border);
  background: var(--ok-tint);
  color: var(--ok);
}
.eq-file strong {
  color: inherit;
  font-weight: 600;
}
.eq-file .eq-spacer {
  margin-left: auto;
}

@media (max-width: 720px) {
  .eq-row {
    grid-template-columns: 36px minmax(0, 1fr);
    row-gap: var(--s3);
  }
  .eq-nums {
    grid-column: 1 / -1;
    justify-content: flex-start;
    gap: var(--s4);
  }
  .eq-period,
  .eq-period-head {
    grid-template-columns: minmax(0, 1fr) 56px 56px 56px;
    gap: var(--s2);
  }
  .eq-toolbar,
  .eq-head,
  .eq-row,
  .eq-note {
    padding-left: var(--s4);
    padding-right: var(--s4);
  }
}