/**
 * area.css — a casca das áreas logadas (noivos, profissional, SAC, super admin).
 *
 * Reproduz o esqueleto das telas do Stitch: barra no topo com a identidade de
 * quem está usando, coluna lateral clara com ícones e contadores, e o conteúdo
 * centralizado em até 1440px. As quatro áreas usam a MESMA casca; o que muda é
 * o menu e a identidade, montados por /js/area.mjs.
 *
 * Classes próprias (area-*) de propósito: a coluna lateral antiga (.sidebar) é
 * escura e tem regras próprias; misturar as duas faria uma brigar com a outra.
 */

/* Ícones do Stitch (Material Symbols), no traço fino e sem preenchimento */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal; font-style: normal; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block;
  white-space: nowrap; word-wrap: normal; direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  font-size: 20px; flex-shrink: 0;
  /* Enquanto a fonte carrega o nome do ícone não pode aparecer como texto */
  overflow: hidden; width: 1em; height: 1em;
}
.icone-cheio { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }

body.area { background: var(--fundo); }
body.area .sidebar-overlay:not(.area-veu) { display: none !important; }
/* A barra de topo antiga das telas de /app carrega ações da página (o "Salvar"
   de Meu casamento, por exemplo). Na casca nova ela deixa de ser barra fixa e
   vira a linha de título e ações dentro do conteúdo. */
body.area .topbar {
  position: static; height: auto; background: transparent; border: 0; box-shadow: none;
  max-width: 1440px; width: 100%; margin: 0 auto; padding: var(--esp-6) var(--esp-8) 0;
}
body.area .topbar .btn-menu { display: none !important; }
body.area .topbar .topbar-titulo { font-family: var(--fonte-display); font-size: 22px; font-weight: 600; color: var(--p-500); margin: 0; }
body.area .nav-mobile { display: none; }

/* ─── Barra do topo ─────────────────────────────────────────────────────── */
.area-topo {
  position: fixed; inset: 0 0 auto 0; height: 64px; z-index: var(--z-topbar);
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4);
  padding: 0 var(--esp-6);
  background: var(--superficie); border-bottom: 1px solid var(--borda);
  box-shadow: var(--sombra-xs);
}
.area-topo-esquerda, .area-topo-direita { display: flex; align-items: center; gap: var(--esp-4); min-width: 0; }
.area-menu-botao {
  display: none; width: 40px; height: 40px; border-radius: var(--raio-sm);
  align-items: center; justify-content: center; color: var(--texto-soft);
  border: 1px solid var(--borda); background: var(--superficie);
}

.area-marca { display: flex; align-items: center; gap: var(--esp-3); text-decoration: none; min-width: 0; }
.area-monograma {
  width: 40px; height: 40px; border-radius: var(--raio-full); flex-shrink: 0;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--ouro-500) 45%, transparent);
  background: var(--superficie-2); color: var(--p-500);
  font-family: var(--fonte-display); font-weight: 700; font-size: 15px; letter-spacing: -0.02em;
}
.area-marca-textos { display: flex; flex-direction: column; min-width: 0; }
.area-marca-nome {
  font-family: var(--fonte-display); font-size: 20px; font-weight: 600; color: var(--p-500);
  line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.area-marca-sub {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ouro-700); margin-top: 3px; white-space: nowrap;
}

/* Pílula central (contagem regressiva do casal, situação do perfil) */
.area-pilula {
  display: flex; align-items: center; gap: var(--esp-2);
  padding: 6px var(--esp-4); border-radius: var(--raio-full);
  background: var(--superficie-2); border: 1px solid var(--borda);
  font-size: var(--texto-sm); white-space: nowrap;
}
.area-pilula strong { color: var(--p-500); font-weight: 600; }
.area-pilula .area-pilula-sub { color: var(--texto-soft); padding-left: var(--esp-2); border-left: 1px solid var(--borda-forte); }
.area-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--p-500); animation: area-pulso 2s ease-in-out infinite; }
.area-ponto.verde { background: #2E8B4A; }
@keyframes area-pulso { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .area-ponto { animation: none; } }

.area-selo {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--raio-full);
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap;
  background: var(--ouro-100); color: var(--ouro-900); border: 1px solid color-mix(in srgb, var(--ouro-500) 45%, transparent);
}
.area-selo .material-symbols-outlined { font-size: 14px; }
.area-selo.neutro { background: var(--superficie-2); color: var(--texto-soft); border-color: var(--borda-forte); }
.area-selo.alerta { background: var(--p-200); color: var(--p-600); border-color: color-mix(in srgb, var(--p-500) 20%, transparent); }

.area-links { display: flex; align-items: center; gap: var(--esp-5); }
.area-links a {
  font-size: var(--texto-sm); font-weight: 600; color: var(--texto-soft); text-decoration: none;
  display: flex; align-items: center; gap: 4px; padding-bottom: 2px; border-bottom: 2px solid transparent;
}
.area-links a:hover { color: var(--p-500); }
.area-links a.ativo { color: var(--p-500); border-bottom-color: var(--p-500); }

.area-icone-botao {
  position: relative; width: 38px; height: 38px; border-radius: var(--raio-sm);
  display: grid; place-items: center; color: var(--texto-soft); text-decoration: none; background: transparent; border: 0;
}
.area-icone-botao:hover { background: var(--superficie-2); color: var(--p-500); }
.area-contador {
  position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--p-500); color: var(--p-texto);
  font-size: 10px; font-weight: 700; display: grid; place-items: center;
  box-shadow: 0 0 0 2px var(--superficie);
}
.area-contador[hidden] { display: none !important; }

.area-acao {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 var(--esp-4);
  border-radius: var(--raio-sm); background: var(--p-500); color: var(--p-texto);
  font-size: var(--texto-sm); font-weight: 600; text-decoration: none; border: 1px solid var(--p-500);
  white-space: nowrap;
}
.area-acao:hover { background: var(--p-600); border-color: var(--p-600); text-decoration: none; color: var(--p-texto); }
.area-acao .material-symbols-outlined { font-size: 18px; }

.area-avatar {
  display: flex; align-items: center; gap: var(--esp-2); padding-left: var(--esp-3);
  border-left: 1px solid var(--borda); text-decoration: none; color: var(--texto);
}
.area-avatar-circulo {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--p-500); color: var(--p-texto); font-weight: 700; font-size: 13px;
  box-shadow: 0 0 0 2px var(--superficie), 0 0 0 3px color-mix(in srgb, var(--ouro-500) 55%, transparent);
}
.area-avatar-textos { display: flex; flex-direction: column; line-height: 1.2; }
.area-avatar-textos strong { font-size: var(--texto-sm); font-weight: 600; }
.area-avatar-textos span { font-size: 11px; color: var(--texto-muted); }

/* ─── Coluna lateral ─────────────────────────────────────────────────────── */
.area-lateral {
  position: fixed; top: 64px; left: 0; bottom: 0; width: 288px; z-index: var(--z-sidebar);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--esp-4);
  padding: var(--esp-6) var(--esp-4); overflow-y: auto; overscroll-behavior: contain;
  background: var(--superficie-2); border-right: 1px solid var(--borda);
  transition: transform var(--trans-suave);
  scrollbar-width: thin;
}
.area-identidade { display: flex; align-items: center; gap: var(--esp-3); padding: 0 var(--esp-2) var(--esp-4); margin-bottom: var(--esp-2); border-bottom: 1px solid var(--borda); }
.area-identidade-letra {
  width: 44px; height: 44px; border-radius: var(--raio-md); flex-shrink: 0; display: grid; place-items: center;
  background: var(--p-500); color: var(--p-texto); font-family: var(--fonte-display); font-size: 20px; font-weight: 600;
  box-shadow: 0 0 0 1px var(--ouro-500);
}
.area-identidade h2 { margin: 0; font-size: 17px; color: var(--p-500); line-height: 1.2; }
.area-identidade p { margin: 3px 0 0; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; color: var(--ouro-700); display: flex; align-items: center; gap: 5px; }

.area-cta {
  display: flex; align-items: center; justify-content: center; gap: var(--esp-2); width: 100%;
  min-height: 42px; margin: var(--esp-2) 0 var(--esp-4); border-radius: var(--raio-sm);
  background: var(--p-500); color: var(--p-texto); font-size: var(--texto-sm); font-weight: 600; text-decoration: none;
}
.area-cta:hover { background: var(--p-600); color: var(--p-texto); text-decoration: none; }

.area-nav { display: grid; gap: 2px; }
.area-grupo {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--texto-muted); padding: var(--esp-4) var(--esp-3) var(--esp-1);
}
.area-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3);
  padding: 9px var(--esp-3) 9px var(--esp-4); border-radius: 0 var(--raio-md) var(--raio-md) 0;
  color: var(--texto-soft); font-size: var(--texto-sm); font-weight: 500; text-decoration: none;
  border-left: 3px solid transparent;
}
.area-item > span:first-child { display: flex; align-items: center; gap: var(--esp-3); min-width: 0; }
.area-item:hover { background: var(--superficie-3); color: var(--p-500); text-decoration: none; }
.area-item.ativo {
  background: var(--superficie); color: var(--p-500); font-weight: 600;
  border-left-color: var(--p-500); box-shadow: var(--sombra-xs);
}
.area-item.ativo .material-symbols-outlined { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.area-item-marca {
  font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; white-space: nowrap;
  background: var(--ouro-100); color: var(--ouro-900);
}
.area-item-marca.forte { background: var(--p-500); color: var(--p-texto); }
.area-item-marca.embreve { background: transparent; color: var(--texto-muted); border: 1px dashed var(--borda-forte); font-weight: 600; }
.area-item-marca[hidden] { display: none !important; }

.area-rodape { display: grid; gap: 2px; padding-top: var(--esp-4); border-top: 1px solid var(--borda); }
.area-rodape button.area-item { width: 100%; background: none; border-top: 0; border-right: 0; border-bottom: 0; cursor: pointer; text-align: left; font: inherit; }

.area-veu {
  display: none; position: fixed; inset: 64px 0 0 0; background: rgba(35, 31, 32, 0.35);
  z-index: calc(var(--z-sidebar) - 1);
}

/* ─── Conteúdo ────────────────────────────────────────────────────────────── */
body.area .app-conteudo { padding-left: 288px; padding-top: 64px; min-height: 100vh; }
body.area .app-main { width: 100%; max-width: 1440px; margin: 0 auto; padding: var(--esp-8); }

/* ─── Blocos das telas (reutilizados pelos painéis) ─────────────────────── */
.area-saudacao { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--esp-5); margin-bottom: var(--esp-8); }
.area-saudacao h1 { margin: 0; font-size: clamp(26px, 3.4vw, 34px); color: var(--p-500); line-height: 1.15; }
.area-saudacao p { margin: var(--esp-2) 0 0; color: var(--texto-soft); max-width: 60ch; line-height: 1.55; }
.area-saudacao-acoes { display: flex; flex-wrap: wrap; gap: var(--esp-3); }

.area-cabeca-secao { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--esp-3); margin: 0 0 var(--esp-4); }
.area-cabeca-secao h2 { margin: 0; font-size: 22px; }
.area-cabeca-secao p { margin: 2px 0 0; font-size: var(--texto-sm); color: var(--texto-soft); }

.kpis { display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: var(--esp-8); }
.kpi {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 132px;
  padding: var(--esp-5); background: var(--superficie); border: 1px solid var(--borda);
  border-top: 2px solid var(--borda-forte); border-radius: var(--raio-sm); box-shadow: var(--sombra-sm);
}
.kpi.destaque { border-top-color: var(--p-500); }
.kpi.ouro { border-top-color: var(--ouro-500); background: color-mix(in srgb, var(--ouro-100) 55%, var(--superficie)); }
.kpi-rotulo { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-soft); padding-right: 26px; line-height: 1.35; }
.kpi .material-symbols-outlined { position: absolute; top: var(--esp-5); right: var(--esp-4); color: var(--texto-muted); }
.kpi-valor { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texto); letter-spacing: -0.01em; line-height: 1.15; margin-top: auto; }
.kpi.destaque .kpi-valor { color: var(--p-500); }
.kpi-sub { font-size: 12px; color: var(--texto-muted); line-height: 1.4; }
.kpi-barra { height: 4px; border-radius: 99px; background: var(--p-200); overflow: hidden; margin-top: 4px; }
.kpi-barra > span { display: block; height: 100%; background: var(--p-500); border-radius: 99px; }

.area-alerta {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--esp-5); align-items: center;
  padding: var(--esp-6); margin-bottom: var(--esp-8); border-radius: var(--raio-md);
  background: linear-gradient(120deg, var(--p-100), var(--p-200));
  border: 1px solid color-mix(in srgb, var(--p-500) 14%, transparent);
}
.area-alerta-icone { width: 44px; height: 44px; border-radius: var(--raio-sm); display: grid; place-items: center; background: var(--superficie); color: var(--ouro-500); border: 1px solid var(--borda); }
.area-alerta-etiquetas { display: flex; gap: var(--esp-2); flex-wrap: wrap; margin-bottom: var(--esp-2); }
.area-alerta p { margin: 0; line-height: 1.6; color: var(--texto); }
.area-alerta-acoes { display: flex; gap: var(--esp-3); flex-wrap: wrap; }

.grade-12 { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--esp-6); align-items: start; }
.coluna { display: grid; gap: var(--esp-6); align-content: start; }

.bloco {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-md);
  box-shadow: var(--sombra-sm); padding: var(--esp-6);
}
.bloco-cabeca { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-3); margin-bottom: var(--esp-4); padding-bottom: var(--esp-3); border-bottom: 1px solid var(--borda); }
.bloco-cabeca h3 { margin: 0; font-size: 19px; display: flex; align-items: center; gap: var(--esp-2); }
.bloco-cabeca h3 .material-symbols-outlined { color: var(--p-500); }
.bloco-cabeca .caption { white-space: nowrap; }
.bloco-rodape { margin-top: var(--esp-4); text-align: center; }
.bloco-rodape a { font-size: var(--texto-sm); font-weight: 600; color: var(--p-500); }
.bloco-vazio { margin: 0; padding: var(--esp-6) var(--esp-3); text-align: center; color: var(--texto-soft); font-size: var(--texto-sm); line-height: 1.55; }

/* Linha de lista com bolinha de estado (pagamentos, eventos, mensagens) */
.lista-area { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-3); }
.linha-area {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--esp-3); align-items: center;
  padding: var(--esp-4); border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--superficie);
}
.linha-area.urgente { background: var(--p-100); border-color: color-mix(in srgb, var(--p-500) 25%, transparent); }
.linha-area strong { font-size: var(--texto-md); font-weight: 600; }
.linha-area small { display: block; font-size: 12px; color: var(--texto-soft); margin-top: 2px; line-height: 1.4; }
.linha-area .valor { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.linha-area a.area-acao { min-height: 34px; }

/* Cartão de profissional recomendado (lista horizontal) */
.recomendado {
  display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: var(--esp-4);
  padding: var(--esp-4); border: 1px solid var(--borda); border-radius: var(--raio-md); background: var(--superficie);
  box-shadow: var(--sombra-sm); text-decoration: none; color: inherit;
  transition: border-color var(--trans), transform var(--trans), box-shadow var(--trans);
}
.recomendado:hover { border-color: var(--ouro-500); transform: translateY(-2px); box-shadow: var(--sombra-md); text-decoration: none; }
.recomendado-foto { position: relative; aspect-ratio: 4 / 3; border-radius: var(--raio-sm); overflow: hidden; background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--borda); display: grid; place-items: center; color: var(--texto-muted); }
.recomendado-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recomendado-foto .area-selo { position: absolute; left: 6px; top: 6px; background: var(--superficie); }
.recomendado h4 { margin: 0; font-family: var(--fonte-display); font-size: 18px; font-weight: 600; }
.recomendado-meta { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; font-size: 12px; color: var(--texto-soft); margin-top: 4px; }
.recomendado-meta .material-symbols-outlined { font-size: 15px; color: var(--p-500); }
.recomendado-rodape { display: flex; flex-wrap: wrap; gap: var(--esp-2); justify-content: space-between; align-items: center; margin-top: var(--esp-3); padding-top: var(--esp-3); border-top: 1px solid var(--borda); font-size: var(--texto-sm); }

/* Tabela de pipeline (profissional) */
.pipeline { width: 100%; border-collapse: collapse; }
.pipeline th {
  text-align: left; padding: var(--esp-3) var(--esp-4); font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--texto-soft); background: var(--superficie-2); border-bottom: 1px solid var(--borda);
}
.pipeline td { padding: var(--esp-4); border-bottom: 1px solid var(--borda); vertical-align: middle; font-size: var(--texto-sm); }
.pipeline tr:last-child td { border-bottom: 0; }
.pipeline tr.destaque td { background: var(--p-100); }
.pipeline-casal { display: flex; align-items: center; gap: var(--esp-3); }
.pipeline-iniciais { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--p-200); color: var(--p-600); font-weight: 700; font-size: 12px; }
.pipeline-casal strong { display: block; font-size: var(--texto-md); }
.pipeline-casal small { color: var(--texto-muted); font-size: 12px; }
.pipeline .valor { font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; }

/* Mini-calendário (agenda do profissional) */
.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.calendario .dia-semana { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--texto-muted); padding: 4px 0; }
.calendario .dia { aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--raio-sm); font-size: var(--texto-sm); font-variant-numeric: tabular-nums; }
.calendario .dia.fora { color: var(--texto-muted); opacity: .45; }
.calendario .dia.hoje { box-shadow: inset 0 0 0 1px var(--ouro-500); font-weight: 700; }
.calendario .dia.contratado { background: var(--p-500); color: var(--p-texto); font-weight: 700; }
.calendario .dia.assinatura { background: var(--p-200); color: var(--p-600); font-weight: 700; box-shadow: inset 0 0 0 1px var(--p-500); }
.calendario .dia.pedido { background: var(--ouro-100); color: var(--ouro-900); font-weight: 700; }
.calendario-legenda { display: flex; flex-wrap: wrap; gap: var(--esp-4); margin-top: var(--esp-3); font-size: 12px; color: var(--texto-soft); }
.calendario-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* Selos de estado, padrão do Stitch */
.estado { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; line-height: 1.35; }
.estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.estado.ok { background: #EAF5EA; color: #1B6E32; border: 1px solid rgba(27, 110, 50, 0.2); }
.estado.pendente { background: #FFF7E6; color: #8C5800; border: 1px solid rgba(197, 155, 39, 0.3); }
.estado.urgente { background: #FDE8E9; color: #800020; border: 1px solid rgba(128, 0, 32, 0.2); }
.estado.neutro { background: var(--superficie-2); color: var(--texto-soft); border: 1px solid var(--borda-forte); }

/* ─── Celular e tablet ───────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .area-avatar-textos, .area-links, .area-topo .area-acao-texto { display: none; }
}
@media (max-width: 1024px) {
  .area-menu-botao { display: flex; }
  .area-lateral { transform: translateX(-100%); box-shadow: none; }
  .area-lateral.aberta { transform: translateX(0); box-shadow: var(--sombra-xl); }
  .area-veu.visivel { display: block; }
  body.area .app-conteudo { padding-left: 0; }
  .grade-12 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .area-topo { padding: 0 var(--esp-3); gap: var(--esp-2); }
  .area-pilula, .area-avatar, .area-marca-sub { display: none; }
  /* O selo do perfil já aparece na lateral; no topo do celular ele cobria a marca. */
  .area-topo [data-area-selo] { display: none; }
  .area-marca-nome { font-size: 17px; }
  body.area .app-main { padding: var(--esp-5) var(--esp-4) calc(var(--altura-nav-mobile) + var(--esp-6)); }
  .area-alerta { grid-template-columns: 1fr; }
  .area-alerta-icone { display: none; }
  .recomendado { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Tabela larga vira cartão: 320px não comporta seis colunas */
  .pipeline thead { display: none; }
  .pipeline tr { display: grid; gap: var(--esp-2); padding: var(--esp-4); border-bottom: 1px solid var(--borda); }
  .pipeline td { padding: 0; border: 0; }
}

/* ─── Abertura do painel do profissional ────────────────────────────────── */
.painel-abertura {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: var(--esp-5); padding: var(--esp-8); margin-bottom: var(--esp-8);
}
.painel-abertura h1 { margin: var(--esp-2) 0 var(--esp-2); font-size: clamp(26px, 3.6vw, 36px); color: var(--p-500); line-height: 1.12; }
.painel-abertura-texto { margin: 0; color: var(--texto-soft); max-width: 58ch; line-height: 1.55; }

/* ─── Propostas e contratos: lista + detalhe ────────────────────────────── */
.negocios-grade { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: var(--esp-6); align-items: start; }
.negocios-lista { padding: var(--esp-5); position: sticky; top: calc(64px + var(--esp-6)); max-height: calc(100vh - 64px - var(--esp-12)); overflow-y: auto; }
.negocios-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-2); }
.negocio-item {
  width: 100%; text-align: left; display: grid; gap: 4px; padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--borda); border-radius: var(--raio-sm); background: var(--superficie);
  color: inherit; font: inherit; cursor: pointer; border-left: 3px solid transparent;
}
.negocio-item:hover { border-color: var(--ouro-500); }
.negocio-item.atual { border-left-color: var(--p-500); background: var(--p-100); }
.negocio-item-topo { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-2); }
.negocio-item-topo strong { font-size: var(--texto-md); }
.negocio-item-valor { font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--texto-sm); }
.negocios-detalhe { min-height: 320px; }
/* O painel de proposta vive dentro do bloco: sem o cabeçalho próprio dele */
.negocios-detalhe .negocio-topo strong { display: none; }
.negocios-detalhe .negocio-topo { justify-content: flex-end; }

@media (max-width: 1024px) {
  .negocios-grade { grid-template-columns: 1fr; }
  .negocios-lista { position: static; max-height: none; }
}

/* Conversa no painel dos noivos */
.citacao-chat { margin: 0; padding: var(--esp-3); border-left: 2px solid var(--ouro-500); background: var(--superficie-2); border-radius: 0 var(--raio-sm) var(--raio-sm) 0; font-size: var(--texto-sm); line-height: 1.55; }
.resposta-rapida { display: grid; grid-template-columns: 1fr auto; gap: var(--esp-2); }

/* Telas antigas dentro da casca: mesma largura de leitura das novas */
.area-legado > h1 { margin: 0 0 var(--esp-2); color: var(--p-500); font-size: clamp(26px, 3.4vw, 34px); }
.area-legado > .subtitulo { margin: 0 0 var(--esp-6); color: var(--texto-soft); max-width: 62ch; }
.area-legado .painel-form { border-radius: var(--raio-md); box-shadow: var(--sombra-sm); }

/* ─── Diálogo de formulário (js/dialogo.mjs) ───────────────────────────── */
.dialogo {
  width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--borda);
  border-radius: var(--raio-md); background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-xl);
}
.dialogo-largo { width: min(720px, calc(100vw - 32px)); }
.dialogo::backdrop { background: var(--overlay, rgba(20, 12, 14, .45)); backdrop-filter: blur(4px); }
.dialogo-caixa { display: flex; flex-direction: column; max-height: calc(100dvh - 34px); }
.dialogo-cabeca { display: flex; justify-content: space-between; gap: var(--esp-4); align-items: flex-start; padding: var(--esp-5) var(--esp-6); border-bottom: 1px solid var(--borda); }
.dialogo-cabeca h2 { margin: 0; font-size: 21px; color: var(--p-500); }
.dialogo-cabeca p { margin: 4px 0 0; font-size: var(--texto-sm); color: var(--texto-soft); line-height: 1.5; }
.dialogo-fechar { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border: 0; border-radius: var(--raio-sm); background: none; color: var(--texto-muted); cursor: pointer; }
.dialogo-fechar:hover { background: var(--hover-bg); color: var(--texto); }
.dialogo-corpo { padding: var(--esp-5) var(--esp-6); overflow-y: auto; display: grid; gap: var(--esp-4); }
.dialogo-corpo .campo { margin: 0; display: grid; gap: 6px; }
.dialogo-texto { margin: 0; line-height: 1.6; color: var(--texto-soft); }
.dialogo-erro { margin: 0; padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-sm); background: var(--erro-fundo, #FDE8E9); color: var(--erro-texto, #800020); font-size: var(--texto-sm); line-height: 1.5; }
.dialogo-rodape { display: flex; justify-content: flex-end; gap: var(--esp-3); padding: var(--esp-4) var(--esp-6); border-top: 1px solid var(--borda); background: var(--superficie-2); }
@media (max-width: 480px) {
  .dialogo { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--raio-md) var(--raio-md) 0 0; }
  .dialogo-rodape .btn { flex: 1; }
}

/* Painel: simulação "se fecharmos as opções escolhidas". */
.simulacao-bloco { margin: var(--esp-6) 0; }
.simulacao-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--esp-3); margin: 0 0 var(--esp-2); }
.simulacao-total .kpi-valor { font-size: 28px; }
/* Fornecedores do casal: de onde veio a ficha e a chave da simulação. */
.forn-origem { margin: 0 var(--esp-5) var(--esp-2); font-size: var(--texto-xs); color: var(--texto-muted); }
.forn-simulacao { display: flex; align-items: center; gap: var(--esp-2); margin-top: var(--esp-3); font-size: var(--texto-sm); font-weight: 600; cursor: pointer; }
.forn-simulacao input { width: 18px; height: 18px; accent-color: var(--p-500); }
.forn-parecido { margin: var(--esp-3) 0 0; padding: var(--esp-3); border-radius: var(--raio-sm); background: var(--p-100); font-size: var(--texto-xs); line-height: 1.5; display: grid; gap: var(--esp-2); }
.forn-parecido .btn { justify-self: start; }

/* Re-aceite dos Termos (versão nova): janela que só fecha com o aceite ou saindo da conta. */
dialog.reaceite { max-width: min(560px, calc(100vw - 32px)); border: 0; border-radius: var(--raio-2xl, 20px); padding: clamp(20px, 4vw, 28px);
  background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-xl); }
dialog.reaceite::backdrop { background: rgba(20, 10, 12, 0.55); }
dialog.reaceite form { display: grid; gap: 12px; }
dialog.reaceite h2 { margin: 0; font-family: var(--fonte-display); color: var(--p-500); font-size: 24px; }
dialog.reaceite p, dialog.reaceite li { font-size: 14px; line-height: 1.55; color: var(--texto-soft); margin: 0; }
dialog.reaceite ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.reaceite-caixa { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; cursor: pointer; }
.reaceite-caixa input { width: 18px; height: 18px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--p-500); }
.reaceite-caixa a { color: var(--p-600); }
.reaceite-acoes { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.reaceite-erro { padding: 8px 12px; border-radius: 10px; background: var(--erro-fundo); color: var(--erro-texto); }
.reaceite-erro[hidden] { display: none; }
p.reaceite-nota { font-size: 12.5px; color: var(--texto-muted); }