/* =====================================================================
   SISTEMA DIGIMOB — estilo visual
   Cores da marca: vermelho #c90000 | azul #134b67 | branco #ffeeee
   ===================================================================== */

:root {
  --vermelho: #c90000;
  --vermelho-escuro: #970000;
  --vermelho-claro: #ffe1e1;
  --azul: #134b67;
  --azul-escuro: #0c3346;
  --azul-claro: #e4eef3;
  --branco: #ffeeee;
  --branco-puro: #ffffff;
  --cinza-texto: #4a4a4a;
  --cinza-borda: #e3d9d9;
  --cinza-fundo: #f7f2f2;
  --sucesso: #1c7c3f;
  --sucesso-fundo: #e3f5e9;
  --alerta: #a35b00;
  --alerta-fundo: #fff1de;
  --perigo: #c90000;
  --perigo-fundo: #ffe1e1;
  --radius: 14px;
  --radius-sm: 8px;
  --sombra: 0 2px 10px rgba(19, 75, 103, 0.08);
  --sombra-forte: 0 8px 30px rgba(19, 75, 103, 0.18);
  --fonte: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--fonte);
  background: var(--branco);
  color: var(--cinza-texto);
  font-size: 16px;
  line-height: 1.5;
}

h1, h2, h3, h4 {
  color: var(--azul);
  margin: 0 0 8px;
  font-weight: 700;
}
h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }

p { margin: 0 0 12px; }

a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; }

/* ---------- utilitários ---------- */
.oculto { display: none !important; }
.texto-central { text-align: center; }
.texto-pequeno { font-size: 0.85rem; color: #7a7a7a; }
.texto-ajuda { font-size: 0.85rem; color: #7a7a7a; margin-top: 4px; }
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.espaco-entre { justify-content: space-between; }
.centralizado { align-items: center; }
.w-100 { width: 100%; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; }

/* ---------- carregando ---------- */
.tela-carregando {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  background: var(--azul);
  color: #fff;
}
.spinner {
  width: 42px; height: 42px;
  border: 4px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}
.spinner-mini {
  width: 18px; height: 18px;
  border: 3px solid rgba(19,75,103,0.2);
  border-top-color: var(--azul);
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
  display: inline-block;
  vertical-align: middle;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px 20px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .05s ease, filter .15s ease, opacity .15s ease;
  font-family: var(--fonte);
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primario { background: var(--vermelho); color: #fff; }
.btn-primario:hover:not(:disabled) { filter: brightness(1.08); }
.btn-secundario { background: var(--azul); color: #fff; }
.btn-secundario:hover:not(:disabled) { filter: brightness(1.15); }
.btn-fantasma { background: transparent; color: var(--azul); border: 2px solid var(--azul); }
.btn-fantasma:hover:not(:disabled) { background: var(--azul-claro); }
.btn-perigo { background: #fff; color: var(--vermelho); border: 2px solid var(--vermelho); }
.btn-perigo:hover:not(:disabled) { background: var(--vermelho-claro); }
.btn-pequeno { padding: 7px 14px; font-size: 0.85rem; }
.btn-bloco { width: 100%; }
.btn-icone {
  background: transparent; border: none; cursor: pointer;
  padding: 8px; border-radius: 50%; display: inline-flex;
  color: var(--azul);
}
.btn-icone svg { width: 22px; height: 22px; }
.btn-icone:hover { background: var(--azul-claro); }

/* ---------- formulários ---------- */
label {
  display: block;
  font-weight: 600;
  color: var(--azul-escuro);
  margin-bottom: 6px;
  font-size: 0.92rem;
}
input, select, textarea {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--cinza-borda);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: var(--fonte);
  background: #fff;
  color: var(--cinza-texto);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--azul);
}
.campo { margin-bottom: 16px; }
.campo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
textarea { resize: vertical; min-height: 90px; }
.erro-campo { color: var(--vermelho); font-size: 0.85rem; margin-top: 4px; }

/* ---------- cartões ---------- */
.card {
  background: #fff;
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--sombra);
}
.card-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

/* ---------- badges / etiquetas ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
.tag-azul { background: var(--azul-claro); color: var(--azul); }
.tag-vermelho { background: var(--vermelho-claro); color: var(--vermelho-escuro); }
.tag-sucesso { background: var(--sucesso-fundo); color: var(--sucesso); }
.tag-alerta { background: var(--alerta-fundo); color: var(--alerta); }
.tag-cinza { background: #eee; color: #666; }
.tag-elite { background: var(--azul); color: #ffd76a; }
.tag-profissional { background: var(--azul-claro); color: var(--azul); }

/* ---------- layout com menu lateral ---------- */
#app-shell { display: flex; min-height: 100vh; }

.barra-lateral {
  width: 240px;
  flex-shrink: 0;
  background: var(--azul);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 20;
}
.barra-lateral .marca {
  padding: 22px 20px 14px;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.barra-lateral .marca span { color: var(--vermelho); }
.menu-nav { list-style: none; margin: 10px 0; padding: 0; flex: 1; }
.menu-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  color: #d9e8f0;
  font-weight: 600;
  font-size: 0.95rem;
  border-left: 4px solid transparent;
}
.menu-nav a:hover { background: rgba(255,255,255,0.08); text-decoration: none; }
.menu-nav a.ativo {
  background: rgba(255,255,255,0.12);
  border-left-color: var(--vermelho);
  color: #fff;
}
.menu-nav svg { width: 20px; height: 20px; flex-shrink: 0; }
.menu-cadeado { margin-left: auto; opacity: 0.6; font-size: 0.75rem; }
.menu-nav a.item-bloqueado { opacity: 0.55; }
.menu-nav a.item-bloqueado:hover { background: rgba(255,255,255,0.05); }
.rodape-lateral {
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.82rem;
}
.btn-sair-lateral {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  padding: 9px 10px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 8px;
  color: #d9e8f0;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-sair-lateral svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-sair-lateral:hover { background: rgba(255,255,255,0.1); color: #fff; }

.area-principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.barra-topo {
  background: #fff;
  padding: 14px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  position: sticky;
  top: 0;
  z-index: 10;
  gap: 12px;
}
.barra-topo .btn-menu-mobile { display: none; }
.usuario-topo { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--vermelho);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.conteudo { padding: 26px; max-width: 1400px; width: 100%; margin: 0 auto; }

/* ---------- tabelas ---------- */
.tabela-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--cinza-borda); font-size: 0.92rem; }
th { color: var(--azul); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.4px; }
tr:hover td { background: var(--cinza-fundo); }

/* ---------- modal ---------- */
.modal-fundo {
  position: fixed; inset: 0; background: rgba(12,51,70,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; z-index: 100;
}
.modal-caixa {
  background: #fff; border-radius: var(--radius);
  max-width: 560px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  padding: 26px;
  box-shadow: var(--sombra-forte);
}

/* ---------- tutorial de primeiro acesso ---------- */
.tutorial-fundo {
  position: fixed; inset: 0; background: rgba(12,51,70,0.7);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; z-index: 300;
}
.tutorial-caixa {
  background: #fff; border-radius: var(--radius);
  max-width: 420px; width: 100%;
  padding: 32px 28px 24px;
  box-shadow: var(--sombra-forte);
  text-align: center;
}
.tutorial-icone {
  width: 64px; height: 64px; margin: 0 auto 16px;
  background: var(--azul); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.tutorial-icone svg { width: 30px; height: 30px; }
.tutorial-caixa h2 { margin: 0 0 10px; }
.tutorial-caixa p { color: #555; font-size: 0.95rem; margin: 0 0 20px; }
.tutorial-pontos { display: flex; justify-content: center; gap: 6px; margin-bottom: 20px; }
.tutorial-pontos span { width: 7px; height: 7px; border-radius: 50%; background: var(--cinza-borda); }
.tutorial-pontos span.ativo { background: var(--vermelho); width: 18px; border-radius: 4px; }
.tutorial-acoes { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* ---------- toast ---------- */
#toast-container {
  position: fixed; bottom: 20px; right: 20px; z-index: 200;
  display: flex; flex-direction: column; gap: 10px;
  max-width: 340px;
}
.toast {
  background: var(--azul-escuro); color: #fff;
  padding: 14px 18px; border-radius: var(--radius-sm);
  box-shadow: var(--sombra-forte);
  font-size: 0.9rem;
  animation: entra-toast .2s ease;
}
.toast.sucesso { background: var(--sucesso); }
.toast.erro { background: var(--vermelho); }
.toast.alerta { background: var(--alerta); }
@keyframes entra-toast { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- tela de login ---------- */
.tela-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, var(--azul) 0%, var(--azul-escuro) 60%, var(--vermelho-escuro) 140%);
  padding: 20px;
}
.caixa-login {
  background: #fff;
  border-radius: 18px;
  padding: 40px 36px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--sombra-forte);
}
.caixa-login .marca-login {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--azul);
  margin-bottom: 4px;
}
.caixa-login .marca-login span { color: var(--vermelho); }
.caixa-login .subtitulo-login {
  text-align: center;
  color: #7a7a7a;
  margin-bottom: 26px;
  font-size: 0.95rem;
}

/* ---------- vazio / empty state ---------- */
.estado-vazio {
  text-align: center;
  padding: 50px 20px;
  color: #8a8a8a;
}
.estado-vazio svg { width: 60px; height: 60px; opacity: 0.5; margin-bottom: 12px; }

/* ---------- indicadores / stat cards ---------- */
.grid-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.stat-card {
  background: #fff; border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--sombra);
  border-left: 5px solid var(--vermelho);
}
.stat-card .numero { font-size: 1.8rem; font-weight: 800; color: var(--azul); }
.stat-card .rotulo { font-size: 0.85rem; color: #7a7a7a; font-weight: 600; }
.stat-card.azul { border-left-color: var(--azul); }

/* barra de progresso de consumo do plano */
.barra-progresso {
  height: 10px; border-radius: 999px; background: var(--cinza-borda);
  overflow: hidden; margin-top: 6px;
}
.barra-progresso > div { height: 100%; background: var(--azul); border-radius: 999px; transition: width .3s ease; }
.barra-progresso.cheio > div { background: var(--vermelho); }

/* ---------- responsivo ---------- */
@media (max-width: 900px) {
  .barra-lateral {
    position: fixed;
    left: -260px;
    transition: left .2s ease;
    box-shadow: var(--sombra-forte);
  }
  .barra-lateral.aberta { left: 0; }
  .barra-topo .btn-menu-mobile {
    display: inline-flex; background: none; border: none; cursor: pointer;
    color: var(--azul); padding: 6px;
  }
  .barra-topo .btn-menu-mobile svg { width: 24px; height: 24px; flex-shrink: 0; }
  .conteudo { padding: 16px; }
  #overlay-menu {
    display: none;
    position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 15;
  }
  #overlay-menu.ativo { display: block; }
}

.help-box {
  background: var(--azul-claro);
  border-left: 4px solid var(--azul);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 0.88rem;
  color: var(--azul-escuro);
  margin-bottom: 16px;
}
.help-box strong { color: var(--azul); }

/* =====================================================================
   LEMBRETES — sino da barra de topo e painel da página inicial
   ===================================================================== */

/* ---------- sino ao lado da foto do usuário ---------- */
.sino-area { position: relative; display: inline-flex; }
.btn-sino {
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  display: inline-flex;
  color: var(--azul);
}
.btn-sino:hover { background: var(--azul-claro); }
.btn-sino svg { width: 22px; height: 22px; }
.btn-sino.tem-atraso { color: var(--vermelho); }
.btn-sino.tem-atraso svg { animation: sino-balanca 3s ease-in-out infinite; transform-origin: top center; }
@keyframes sino-balanca {
  0%, 84%, 100% { transform: rotate(0); }
  87% { transform: rotate(13deg); }
  91% { transform: rotate(-11deg); }
  95% { transform: rotate(6deg); }
}
.sino-contador {
  position: absolute;
  top: 1px;
  right: 0;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  background: var(--vermelho);
  color: #fff;
  border: 2px solid #fff;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.painel-sino {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 340px;
  max-width: 86vw;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--sombra-forte);
  z-index: 60;
  overflow: hidden;
  animation: entra-toast 0.15s ease;
}
.painel-sino-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  background: var(--azul);
  color: #fff;
}
.painel-sino-topo strong { font-size: 0.95rem; }
.painel-sino-topo .btn-mini { background: rgba(255,255,255,0.15); border-color: transparent; color: #fff; }
.painel-sino-topo .btn-mini:hover { background: rgba(255,255,255,0.28); }
.painel-sino-lista { max-height: 62vh; overflow-y: auto; padding: 10px; }
.painel-sino-rodape {
  display: block;
  padding: 11px 14px;
  border-top: 1px solid var(--cinza-borda);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  color: var(--azul);
}
.painel-sino-rodape:hover { background: var(--azul-claro); text-decoration: none; }
.sino-vazio { padding: 18px 14px; text-align: center; }

/* ---------- painel da página inicial ---------- */
.card-lembretes { border-top: 5px solid var(--azul); }
.card-lembretes.tem-atraso { border-top-color: var(--vermelho); }
#lembretes.destacado { box-shadow: 0 0 0 3px var(--vermelho), var(--sombra); }

.lembretes-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.lembretes-topo h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.lembretes-topo h2 svg { width: 22px; height: 22px; color: var(--vermelho); }
.lembretes-acoes-topo { display: flex; gap: 8px; }

.lembretes-resumo { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.chip-resumo {
  background: var(--cinza-fundo);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #6d6d6d;
}
.chip-resumo strong { color: var(--azul); }
.chip-resumo.atrasado { background: var(--vermelho-claro); color: var(--vermelho-escuro); }
.chip-resumo.atrasado strong { color: var(--vermelho-escuro); }
.chip-resumo.hoje { background: var(--alerta-fundo); color: var(--alerta); }
.chip-resumo.hoje strong { color: var(--alerta); }

.grupo-lembretes { margin-top: 16px; }
.grupo-lembretes > h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #7a7a7a;
  margin: 0 0 8px;
}
.contagem-grupo {
  background: var(--cinza-borda);
  color: var(--azul);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 0.75rem;
}

/* ---------- item de lembrete ---------- */
.item-lembrete {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: #fff;
  border: 1px solid var(--cinza-borda);
  border-left: 4px solid var(--azul);
  border-radius: var(--radius-sm);
  transition: opacity .2s ease;
}
.item-lembrete.atrasado { border-left-color: var(--vermelho); background: #fff8f8; }
.item-lembrete.hoje { border-left-color: var(--alerta); background: #fffaf2; }
.item-lembrete.saindo { opacity: 0.35; }
.item-lembrete.concluido { border-left-color: var(--sucesso); background: var(--sucesso-fundo); }
.item-lembrete .item-corpo { flex: 1; min-width: 190px; }
.item-lembrete .item-texto {
  margin: 0;
  font-weight: 600;
  color: var(--azul-escuro);
  font-size: 0.94rem;
}
.item-lembrete .item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.item-lembrete .item-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }

.item-lembrete.compacto {
  border-left-width: 4px;
  padding: 10px 12px;
  margin-bottom: 6px;
}
.item-lembrete.compacto .item-texto { font-size: 0.88rem; font-weight: 600; }

.btn-concluir {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  margin-top: 1px;
  border: 2px solid var(--cinza-borda);
  border-radius: 50%;
  background: #fff;
  color: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.btn-concluir svg { width: 14px; height: 14px; }
.btn-concluir:hover:not(:disabled) {
  border-color: var(--sucesso);
  background: var(--sucesso-fundo);
  color: var(--sucesso);
}
.btn-concluir:disabled { cursor: default; }
.marca-concluido {
  width: 26px; height: 26px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--sucesso); color: #fff;
}
.marca-concluido svg { width: 15px; height: 15px; }

.btn-mini {
  background: #fff;
  border: 1px solid var(--cinza-borda);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--azul);
  cursor: pointer;
  font-family: var(--fonte);
  white-space: nowrap;
}
.btn-mini:hover:not(:disabled) { background: var(--azul-claro); text-decoration: none; }
.btn-mini.perigo { color: var(--vermelho); }
.btn-mini.perigo:hover:not(:disabled) { background: var(--vermelho-claro); }

.btn-link-lembretes {
  background: none;
  border: none;
  padding: 6px 0;
  font-family: var(--fonte);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--azul);
  cursor: pointer;
  text-decoration: underline;
}
.lembretes-historico { margin-top: 14px; border-top: 1px dashed var(--cinza-borda); padding-top: 10px; }

/* ---------- estado vazio e modelos prontos ---------- */
.lembretes-vazio {
  background: var(--azul-claro);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  margin-top: 14px;
}
.lembretes-vazio p { margin: 0 0 6px; }
.lista-exemplos {
  margin: 8px 0 14px;
  padding-left: 20px;
  font-size: 0.88rem;
  color: var(--azul-escuro);
}
.lista-exemplos li { margin-bottom: 4px; }

.sugestoes-lembrete { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-sugestao {
  background: var(--azul-claro);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 7px 13px;
  font-family: var(--fonte);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--azul);
  cursor: pointer;
}
.chip-sugestao:hover { border-color: var(--azul); background: #fff; }

@media (max-width: 600px) {
  .item-lembrete .item-acoes { margin-left: 38px; width: 100%; }
  /* No celular o painel do sino vira uma faixa presa embaixo da barra de
     topo — encostado no sino ele sairia pela lateral esquerda da tela. */
  .painel-sino {
    position: fixed;
    top: 68px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
  }
}

/* =====================================================================
   RADAR DE OPORTUNIDADES — página "Base de Clientes"
   ===================================================================== */
.card-radar { border-top: 5px solid var(--vermelho); }
.radar-titulo { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.radar-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

/* ---------- chips 🔥 / 🟠 / 🧊 / ✅ (clicáveis: filtram a tabela) ---------- */
.radar-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.chip-radar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  background: var(--cinza-fundo);
  font-family: var(--fonte);
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s;
}
.chip-radar:hover { transform: translateY(-2px); }
.chip-radar.vazio { opacity: 0.55; }
.chip-radar-emoji { font-size: 1.3rem; line-height: 1; }
.chip-radar-numero { font-size: 1.5rem; font-weight: 800; color: var(--azul); line-height: 1; }
.chip-radar-rotulo { font-size: 0.8rem; font-weight: 600; color: #6d6d6d; line-height: 1.2; }

.chip-radar.quente { background: var(--vermelho-claro); }
.chip-radar.quente .chip-radar-numero { color: var(--vermelho-escuro); }
.chip-radar.morno { background: var(--alerta-fundo); }
.chip-radar.morno .chip-radar-numero { color: var(--alerta); }
.chip-radar.frio { background: var(--azul-claro); }
.chip-radar.frio .chip-radar-numero { color: var(--azul); }
.chip-radar.fechado { background: var(--sucesso-fundo); }
.chip-radar.fechado .chip-radar-numero { color: var(--sucesso); }

.chip-radar.quente.ativo { border-color: var(--vermelho); }
.chip-radar.morno.ativo { border-color: var(--alerta); }
.chip-radar.frio.ativo { border-color: var(--azul); }
.chip-radar.fechado.ativo { border-color: var(--sucesso); }

/* ---------- faixa "precisam de você hoje" ---------- */
.radar-urgentes {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--vermelho-claro);
  border-left: 4px solid var(--vermelho);
}
.radar-urgentes-titulo {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--vermelho-escuro);
  margin-bottom: 8px;
}
.radar-urgentes-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-urgente {
  background: #fff;
  border: 1px solid var(--vermelho);
  border-radius: 999px;
  padding: 6px 13px;
  font-family: var(--fonte);
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--vermelho-escuro);
  cursor: pointer;
}
.chip-urgente span { font-weight: 500; color: #8a5a5a; margin-left: 6px; }
.chip-urgente:hover { background: var(--vermelho); color: #fff; }
.chip-urgente:hover span { color: #ffdede; }

/* ---------- briefing escrito pela IA ---------- */
.radar-briefing {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--azul-claro);
  border-left: 4px solid var(--azul);
}
.radar-briefing-texto {
  margin: 0 0 6px;
  color: var(--azul-escuro);
  font-size: 0.95rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

/* ---------- lista "comece por estes" ---------- */
.radar-subtitulo {
  margin: 20px 0 10px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #7a7a7a;
}
.radar-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.radar-item {
  border: 1px solid var(--cinza-borda);
  border-left: 5px solid var(--cinza-borda);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  background: #fff;
}
.radar-item.quente { border-left-color: var(--vermelho); }
.radar-item.morno { border-left-color: var(--alerta); }
.radar-item.frio { border-left-color: var(--azul); }

.radar-item-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.radar-posicao {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--azul);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.radar-item-nome { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; }
.radar-item-nome strong { font-size: 1.02rem; color: var(--azul-escuro); }
.radar-pontos {
  margin-left: auto;
  font-size: 1.1rem;
  font-weight: 800;
  color: #b9b0b0;
  cursor: help;
}

.tag-temp-quente { background: var(--vermelho-claro); color: var(--vermelho-escuro); }
.tag-temp-morno { background: var(--alerta-fundo); color: var(--alerta); }
.tag-temp-frio { background: var(--azul-claro); color: var(--azul); }
.tag-temp-fechado { background: var(--sucesso-fundo); color: var(--sucesso); }

.radar-motivos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.motivo-radar {
  background: var(--cinza-fundo);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 0.78rem;
  color: #6d6d6d;
}
.motivo-radar.positivo { background: var(--sucesso-fundo); color: var(--sucesso); }
.motivo-radar.atencao { background: var(--alerta-fundo); color: var(--alerta); }

.radar-porque {
  margin: 12px 0 0;
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--cinza-texto);
}
.radar-porque-marca {
  display: inline-block;
  background: var(--azul);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  border-radius: 4px;
  padding: 2px 6px;
  margin-right: 6px;
  vertical-align: 1px;
}
.radar-acao { margin: 10px 0 0; font-size: 0.9rem; color: var(--cinza-texto); }
.radar-acao strong { color: var(--azul-escuro); }

.radar-mensagem {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--cinza-fundo);
  border: 1px dashed var(--cinza-borda);
}
.radar-mensagem p {
  margin: 4px 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--cinza-texto);
  white-space: pre-wrap;
}

.radar-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }

.btn-link-radar {
  margin-top: 12px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--fonte);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--azul);
  cursor: pointer;
  text-decoration: underline;
}
.radar-rodape { margin: 16px 0 0; line-height: 1.5; }

/* ---------- destaque na tabela de clientes ---------- */
tr.linha-urgente td { background: #fffaf3; }
.urgente-texto { color: var(--vermelho-escuro); font-weight: 700; }

@media (max-width: 600px) {
  .radar-chips { grid-template-columns: repeat(2, 1fr); }
  .radar-pontos { margin-left: 0; }
  .radar-acoes .btn { flex: 1; text-align: center; }
}

/* =====================================================================
   DIGI ASSISTENTE — a conversa com a IA (digi-assistente.html)
   ===================================================================== */
.card-assistente { border-top: 5px solid var(--azul); }

.assistente-marca { display: flex; align-items: flex-start; gap: 12px; max-width: 640px; }
.assistente-emoji {
  font-size: 1.9rem;
  line-height: 1;
  background: var(--azul-claro);
  border-radius: 50%;
  padding: 8px;
  flex-shrink: 0;
}

.assistente-status {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--cinza-fundo);
  font-size: 0.88rem;
  color: var(--cinza-texto);
  line-height: 1.5;
}
.assistente-status-linha strong { color: var(--azul); }
.assistente-status-erro { display: block; margin-top: 6px; color: var(--alerta); font-weight: 600; }

/* ---------- ferramentas rápidas ---------- */
.assistente-ferramentas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}
.ferramenta-assistente {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--cinza-borda);
  background: var(--branco-puro);
  font-family: var(--fonte);
  cursor: pointer;
  transition: 0.15s;
}
.ferramenta-assistente:hover { border-color: var(--azul); background: var(--azul-claro); transform: translateY(-2px); }
.ferramenta-emoji { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
.ferramenta-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ferramenta-texto strong { color: var(--azul); font-size: 0.9rem; }

/* ---------- conversa ---------- */
.card-conversa { display: flex; flex-direction: column; }
.assistente-mensagens {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: min(58vh, 560px);
  overflow-y: auto;
  padding: 4px 4px 8px;
  scroll-behavior: smooth;
}

.msg-usuario {
  align-self: flex-end;
  max-width: 78%;
  padding: 11px 15px;
  border-radius: 14px;
  border-bottom-right-radius: 3px;
  background: var(--vermelho);
  color: #fff;
  font-size: 0.92rem;
  line-height: 1.5;
  white-space: pre-wrap;
}
.msg-assistente {
  align-self: flex-start;
  max-width: 88%;
  padding: 13px 16px;
  border-radius: 14px;
  border-bottom-left-radius: 3px;
  background: var(--azul-claro);
  color: var(--cinza-texto);
  font-size: 0.92rem;
  line-height: 1.6;
}
.msg-assistente.abertura { background: var(--branco); border: 1px dashed var(--cinza-borda); }
.msg-assistente.erro { background: var(--vermelho-claro); color: var(--vermelho-escuro); }
.msg-assistente p { margin: 0 0 8px; }
.msg-assistente p:last-of-type { margin-bottom: 0; }
.msg-assistente .titulo-resposta {
  font-weight: 800;
  color: var(--azul);
  font-size: 0.82rem;
  letter-spacing: 0.4px;
  margin-top: 12px;
}
.lista-assistente { margin: 4px 0 10px; padding-left: 20px; }
.lista-assistente li { margin-bottom: 5px; }

.btn-copiar-resposta {
  margin-top: 10px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--fonte);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--azul);
  cursor: pointer;
  text-decoration: underline;
}

/* ---------- caixa de escrever ---------- */
.assistente-rodape {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--cinza-borda);
}
.assistente-rodape textarea {
  flex: 1;
  resize: none;
  min-height: 52px;
  margin: 0;
}
.assistente-rodape .btn { flex-shrink: 0; }

@media (max-width: 700px) {
  .assistente-mensagens { height: 60vh; }
  .msg-usuario, .msg-assistente { max-width: 95%; }
  .assistente-ferramentas { grid-template-columns: 1fr; }
  /* No celular o título e os botões dividirem a mesma linha espremeria o
     texto numa coluna de duas palavras: cada um fica com a largura toda. */
  .card-assistente .card-titulo,
  #card-ferramentas .card-titulo {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* =====================================================================
   DIGI ASSISTENTE FLUTUANTE — o botão e o painel no canto da tela
   (montado pelo js/auth-guard.js em todas as páginas internas)
   ===================================================================== */
.assistente-flutuante {
  position: fixed;
  right: 20px;
  bottom: 20px;
  /* Acima do menu lateral (20) e do véu do menu no celular (15),
     abaixo dos modais (100) e dos avisos que somem sozinhos (200). */
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.btn-assistente-flutuante {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border: none;
  border-radius: 999px;
  background: var(--azul);
  color: #fff;
  font-family: var(--fonte);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--sombra-forte);
  transition: 0.18s;
}
.btn-assistente-flutuante:hover { background: var(--azul-escuro); transform: translateY(-2px); }
.btn-assistente-flutuante svg { width: 24px; height: 24px; }
.btn-assistente-flutuante.aberto { background: var(--vermelho); }

.painel-assistente {
  width: 384px;
  max-width: calc(100vw - 40px);
  height: min(560px, calc(100vh - 150px));
  background: var(--branco-puro);
  border-radius: var(--radius);
  box-shadow: var(--sombra-forte);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.painel-assistente.oculto { display: none !important; }

.painel-assistente-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  background: var(--azul);
  color: #fff;
}
.painel-assistente-marca { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.95rem; }
.painel-assistente-marca svg { width: 20px; height: 20px; }
.painel-assistente-acoes { display: flex; align-items: center; gap: 2px; }
.painel-assistente-acoes a,
.painel-assistente-acoes button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #dceaf1;
  font-family: var(--fonte);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.painel-assistente-acoes a:hover,
.painel-assistente-acoes button:hover { background: rgba(255,255,255,0.15); color: #fff; text-decoration: none; }

.painel-assistente-status {
  padding: 8px 14px;
  background: var(--cinza-fundo);
  border-bottom: 1px solid var(--cinza-borda);
  font-size: 0.78rem;
  color: #6f6f6f;
  line-height: 1.45;
}
.painel-assistente-status strong { color: var(--azul); }
.painel-assistente-status .assistente-status-erro { font-size: 0.78rem; }

.painel-assistente-chips {
  display: flex;
  gap: 6px;
  padding: 10px 12px 2px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.chip-ferramenta {
  flex-shrink: 0;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--cinza-borda);
  background: var(--branco-puro);
  color: var(--azul);
  font-family: var(--fonte);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.chip-ferramenta:hover { border-color: var(--azul); background: var(--azul-claro); }

.painel-assistente-corpo {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 12px 12px;
}
/* Dentro do painel a lista de mensagens ocupa o espaço que sobrar, em
   vez da altura fixa que ela tem na página cheia. */
.painel-assistente .assistente-mensagens {
  flex: 1;
  height: auto;
  min-height: 0;
  padding-top: 10px;
}
.painel-assistente .msg-usuario,
.painel-assistente .msg-assistente { max-width: 92%; font-size: 0.88rem; }
.painel-assistente .assistente-rodape { margin-top: 10px; padding-top: 10px; }
.painel-assistente .assistente-rodape textarea { min-height: 46px; font-size: 0.9rem; padding: 9px 11px; }
.painel-assistente .assistente-rodape .btn { padding: 10px 14px; font-size: 0.85rem; }

/* A conversa da página cheia é montada pelo mesmo motor da bolha. */
.area-conversa { display: flex; flex-direction: column; }

@media (max-width: 700px) {
  .assistente-flutuante { left: 12px; right: 12px; bottom: 12px; }
  .painel-assistente { width: 100%; max-width: none; height: min(72vh, calc(100vh - 110px)); }
  /* No celular o botão vira só o ícone: ocupa menos e continua óbvio. */
  .btn-assistente-flutuante { padding: 14px; }
  .btn-assistente-rotulo { display: none; }
}

/* Na impressão (ex.: extrato do financeiro) a bolha não faz sentido. */
@media print {
  .assistente-flutuante { display: none; }
}

/* =====================================================================
   CENTRAL DO GESTOR — abas, filtros e ações em linha
   ===================================================================== */

.abas {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--cinza-borda);
}
.abas .aba {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 10px 16px;
  font-family: var(--fonte);
  font-size: 0.95rem;
  font-weight: 700;
  color: #8a8a8a;
  cursor: pointer;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.abas .aba:hover { color: var(--azul); background: var(--azul-claro); }
.abas .aba.ativa { color: var(--azul); border-bottom-color: var(--vermelho); }

.filtros-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.filtros-linha input,
.filtros-linha select {
  flex: 1 1 190px;
  min-width: 150px;
  padding: 9px 12px;
  border: 1px solid var(--cinza-borda);
  border-radius: var(--radius-sm);
  font-family: var(--fonte);
  font-size: 0.9rem;
  background: #fff;
  color: var(--cinza-texto);
}

/* Fileira de botõezinhos de ação dentro de uma linha da tabela. */
.acoes-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.acoes-linha .btn-icone {
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
}
.btn-icone.perigo:hover { background: var(--perigo-fundo); }

/* Caixa de aviso antes de uma ação sem volta (excluir usuário). */
.aviso-perigo {
  background: var(--perigo-fundo);
  border-left: 4px solid var(--vermelho);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 0.9rem;
  color: var(--vermelho-escuro);
}
.aviso-perigo ul { margin: 8px 0 0; padding-left: 20px; }
.aviso-perigo li { margin-bottom: 4px; }

/* Botão que parece link, para uma saída alternativa dentro de um texto. */
.btn-link-texto {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--azul);
  text-decoration: underline;
  cursor: pointer;
}

.titulo-secao {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--azul);
  margin-bottom: 8px;
}

.lista-simples {
  margin: 0;
  padding-left: 18px;
  font-size: 0.9rem;
}
.lista-simples li { margin-bottom: 6px; }

.campo-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  margin-bottom: 14px;
  cursor: pointer;
}
.campo-checkbox input { width: 18px; height: 18px; accent-color: var(--azul); }

/* =====================================================================
   FICHA DO IMÓVEL
   Quartos, vagas, área e características. É o que faz o imóvel aparecer
   nos filtros e no match com o cliente.
   ===================================================================== */

/* Caixinhas de "o que este imóvel tem". Alvo grande de propósito: o
   corretor preenche isso no celular, muitas vezes dentro do imóvel. */
.grade-caracteristicas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}

.opcao-caixa {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 2px solid var(--cinza-borda);
  border-radius: var(--radius-sm);
  background: var(--branco-puro);
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.opcao-caixa:hover { border-color: var(--azul); }
.opcao-caixa input { width: 18px; height: 18px; margin: 0; accent-color: var(--azul); }
.opcao-caixa:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); }

/* Linha compacta da ficha no cartão da lista e no mapa. */
.ficha-resumo {
  font-size: 0.82rem;
  color: var(--azul);
  font-weight: 600;
}

/* Tabelinha da ficha na página do imóvel. */
.ficha-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.ficha-item {
  background: var(--cinza-fundo);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.ficha-item .rotulo {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #8a8a8a;
}
.ficha-item .valor {
  font-weight: 700;
  color: var(--azul);
  font-size: 1.02rem;
}

/* Selos de característica ("Piscina", "Elevador"). */
.selos-caracteristicas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.selo-caracteristica {
  background: var(--azul-claro);
  color: var(--azul);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* Aviso de cadastro incompleto: imóvel sem foto e sem ficha é dinheiro
   parado que o corretor nem percebe que está perdendo. */
.aviso-cadastro-fraco {
  background: var(--alerta-fundo);
  border-left: 4px solid var(--alerta);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-top: 12px;
  font-size: 0.88rem;
  color: #6d3d00;
}
.aviso-cadastro-fraco strong { color: var(--alerta); }

/* =====================================================================
   MATCH CLIENTE × IMÓVEL
   A aba "Imóveis para ele" dentro do cliente, e o perfil de busca.
   ===================================================================== */

/* O perfil de busca fica recolhido: quem só quer anotar um nome e um
   telefone às pressas não pode tropeçar num formulário grande. */
.bloco-busca {
  border: 2px solid var(--cinza-borda);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--cinza-fundo);
}
.bloco-busca > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--azul);
  font-size: 0.92rem;
}
.bloco-busca[open] > summary { margin-bottom: 10px; }
.bloco-busca .campo:last-child { margin-bottom: 0; }

.lista-match { display: flex; flex-direction: column; gap: 12px; }

.item-match {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  background: var(--branco-puro);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.item-match .match-foto {
  background: var(--azul-claro) center/cover no-repeat;
  border-radius: var(--radius-sm);
  min-height: 110px;
}
.item-match .match-corpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.item-match strong { color: var(--azul); }

/* O "por que este imóvel" é o que faz o corretor confiar na sugestão em
   vez de tratá-la como chute do sistema. */
.match-porque {
  margin: 8px 0 0;
  font-size: 0.88rem;
  color: var(--sucesso);
  font-weight: 600;
}
.match-alerta {
  margin: 4px 0 0;
  font-size: 0.83rem;
  color: var(--alerta);
}

@media (max-width: 560px) {
  .item-match { grid-template-columns: 1fr; }
  .item-match .match-foto { min-height: 150px; }
}

/* ---------- faixa "tenho imóvel para estes" ----------
   Reaproveita a faixa de urgentes, trocando o vermelho de urgência pelo
   verde de oportunidade: um não é mais grave que o outro, são coisas
   diferentes — uma cobra o que ficou para trás, a outra oferece o que
   está pronto para vender hoje. */
.radar-com-imovel {
  background: var(--sucesso-fundo);
  border-left-color: var(--sucesso);
}
.radar-com-imovel .radar-urgentes-titulo { color: var(--sucesso); }
.radar-com-imovel .chip-urgente {
  border-color: var(--sucesso);
  color: var(--sucesso);
  text-decoration: none;
}
.radar-com-imovel .chip-urgente span { color: #5a8a6a; }
.radar-com-imovel .chip-urgente:hover { background: var(--sucesso); color: #fff; }
.radar-com-imovel .chip-urgente:hover span { color: #dff5e6; }

/* =====================================================================
   VENDAS FECHADAS
   ===================================================================== */

/* Contador na aba "Vendas fechadas": o gestor precisa ver que tem
   comissão esperando sem ter que abrir a aba para descobrir. */
.contador-aba {
  display: inline-block;
  min-width: 20px;
  padding: 1px 7px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--vermelho);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
}

/* Valor que o sistema calcula sozinho (comissão, líquido a pagar). Tem
   cara de resultado, não de campo, para ninguém tentar digitar nele. */
.valor-calculado {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--azul-claro);
  color: var(--azul);
  font-weight: 800;
  font-size: 1.15rem;
}

/* =====================================================================
   CONTRATOS — o assistente do "próximo, próximo, próximo"
   =====================================================================
   A tela toda é desenhada para o gestor não parar: uma etapa por vez,
   sempre cabendo na tela, com o botão de avançar no mesmo lugar. */

/* ---------- trilha de etapas ---------- */
.passos-contrato {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.passo-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 2px solid var(--cinza-borda);
  border-radius: 999px;
  background: #fff;
  color: var(--cinza-texto);
  font-family: var(--fonte);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.passo-chip:hover { border-color: var(--azul); color: var(--azul); }
.passo-chip .passo-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cinza-borda);
  color: var(--azul-escuro);
  font-size: 0.72rem;
  font-weight: 800;
}
.passo-chip.atual { border-color: var(--vermelho); color: var(--vermelho); background: var(--vermelho-claro); }
.passo-chip.atual .passo-numero { background: var(--vermelho); color: #fff; }
.passo-chip.feito { border-color: var(--sucesso); color: var(--sucesso); }
.passo-chip.feito .passo-numero { background: var(--sucesso); color: #fff; }

/* Em telas estreitas a trilha vira só os números: sete rótulos por
   extenso empurrariam o formulário para baixo da dobra. */
@media (max-width: 640px) {
  .passo-chip .passo-nome { display: none; }
  .passo-chip { padding: 6px; }
}

/* ---------- barra de navegação ---------- */
/* Fica grudada no rodapé: em contrato longo, procurar o botão "próximo"
   rolando a página é o tipo de atrito que faz desistir do sistema. */
.barra-navegacao-contrato {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 16px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 -2px 14px rgba(19, 75, 103, 0.12);
}
.barra-navegacao-contrato .btn { min-width: 120px; }

/* A barra é `sticky`, e sticky só gruda enquanto há conteúdo abaixo: numa
   etapa curta (só três campos) ela para no meio da tela, onde o conteúdo
   termina. Isso era um problema de verdade, não de estética — a bolha do
   Digi Assistente e os avisos que somem sozinhos são FIXOS no canto de
   baixo, então numa etapa curta eles caíam exatamente em cima do botão
   "Próximo", e o clique do gestor não fazia nada.
   Empurrar a barra para o fim da tela com `margin-top: auto` resolve a
   causa: ela passa a ficar SEMPRE encostada embaixo, etapa curta ou
   longa, e aí basta manter a bolha e os avisos acima dela. */
.tela-com-barra-inferior .area-principal { display: flex; flex-direction: column; }
.tela-com-barra-inferior .conteudo { flex: 1; display: flex; flex-direction: column; padding-bottom: 0; }
.tela-com-barra-inferior .barra-navegacao-contrato { margin-top: auto; }

/* Com a barra sempre embaixo, a bolha sobe para cima dela. O painel do
   assistente encolhe junto: subir a bolha sem encolher o painel faria o
   topo dele sair pela borda de cima da tela. */
.tela-com-barra-inferior .assistente-flutuante { bottom: 108px; }
.tela-com-barra-inferior .painel-assistente { height: min(560px, calc(100vh - 242px)); }

/* Os avisos que somem sozinhos nascem no mesmo canto e, por ficarem
   4 segundos na tela, cobriam o "Próximo" logo depois de uma ação que
   avisa alguma coisa ("12 parcelas geradas") — justo quando o gestor
   vai clicar para seguir. Sobem também. */
.tela-com-barra-inferior #toast-container { bottom: 168px; }

@media (max-width: 640px) {
  .barra-navegacao-contrato { padding: 10px 12px; }
  /* No celular a barra precisa caber numa linha só: o "Etapa 3 de 9" já
     está escrito na trilha do topo, então some daqui. */
  .barra-navegacao-contrato #dica-etapa { display: none; }
  .tela-com-barra-inferior .assistente-flutuante { bottom: 92px; }
  .tela-com-barra-inferior .painel-assistente { height: min(72vh, calc(100vh - 190px)); }
  .tela-com-barra-inferior #toast-container { bottom: 152px; }
}

/* ---------- escolha do tipo ---------- */
.grade-tipos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.cartao-tipo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border: 2px solid var(--cinza-borda);
  border-radius: var(--radius);
  background: #fff;
  text-align: left;
  font-family: var(--fonte);
  color: var(--cinza-texto);
  cursor: pointer;
}
.cartao-tipo:hover { border-color: var(--azul); box-shadow: var(--sombra); }
.cartao-tipo.escolhido { border-color: var(--vermelho); background: var(--vermelho-claro); }
.cartao-tipo strong { color: var(--azul); font-size: 1.02rem; line-height: 1.3; }
.cartao-tipo-categoria {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--vermelho);
}
.cartao-tipo-marca {
  margin-top: auto;
  padding-top: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--azul);
}

/* ---------- campos ---------- */
.campo-cheio { grid-column: 1 / -1; }
.campo-ajuda { margin: 6px 0 0; color: #6b6b6b; }
.marca-obrigatorio { color: var(--vermelho); }

.entrada-com-prefixo { display: flex; align-items: stretch; }
.entrada-com-prefixo span {
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 2px solid var(--cinza-borda);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--cinza-fundo);
  font-weight: 700;
  color: var(--azul);
}
.entrada-com-prefixo input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* ---------- pessoas ---------- */
.bloco-pessoas { border-top: 1px solid var(--cinza-borda); padding-top: 14px; }
.cartao-pessoa {
  border: 1px solid var(--cinza-borda);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 12px;
  background: var(--cinza-fundo);
}
.cartao-pessoa-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.cartao-pessoa-topo strong { color: var(--azul); }
.cartao-pessoa .campo { margin-bottom: 10px; }

/* ---------- parcelas ---------- */
.tabela-parcelas input { padding: 8px 10px; font-size: 0.9rem; }
.tabela-parcelas th { white-space: nowrap; }
.gerador-parcelas {
  margin-top: 12px;
  padding: 14px;
  border: 2px dashed var(--azul);
  border-radius: var(--radius-sm);
  background: var(--azul-claro);
}

/* ---------- cláusulas ---------- */
.lista-clausulas { display: flex; flex-direction: column; gap: 10px; }
.clausula-item {
  border: 1px solid var(--cinza-borda);
  border-left: 4px solid var(--sucesso);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: #fff;
}
.clausula-item.clausula-fora { border-left-color: #bbb; opacity: 0.68; }
.clausula-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.clausula-topo strong { color: var(--azul); margin-right: 8px; }
.clausula-acoes { display: flex; gap: 4px; flex-wrap: wrap; }
.clausula-previa {
  margin: 8px 0 0;
  font-size: 0.88rem;
  color: #5c5c5c;
  white-space: pre-line;
}
.clausula-previa-aberta {
  background: var(--cinza-fundo);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.clausula-editor { margin-top: 10px; }
.clausula-editor textarea { font-family: Georgia, "Times New Roman", serif; line-height: 1.6; }

/* ---------- conferência final ---------- */
.aviso-bloqueio,
.aviso-atencao {
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 0.92rem;
}
.aviso-bloqueio { background: var(--perigo-fundo); border-left: 4px solid var(--vermelho); color: var(--vermelho-escuro); }
.aviso-atencao { background: var(--alerta-fundo); border-left: 4px solid var(--alerta); color: var(--alerta); }
.aviso-bloqueio ul,
.aviso-atencao ul { margin: 8px 0 0; padding-left: 20px; }
.link-pendencia {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* =====================================================================
   CADASTRO DE IMÓVEL ASSISTIDO
   O formulário em passos, a barra de força do anúncio e o painel de
   conferência das sugestões da IA.
   ===================================================================== */

/* ---------- guia rápido (recolhível) ---------- */
.guia-rapido {
  background: var(--azul-claro);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  color: var(--azul-escuro);
}
.guia-rapido > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--azul);
  list-style: none;
}
.guia-rapido > summary::before { content: "▸ "; }
.guia-rapido[open] > summary::before { content: "▾ "; }
.guia-rapido > summary::-webkit-details-marker { display: none; }
.guia-passos { margin: 10px 0 0; padding-left: 20px; }
.guia-passos li { margin-bottom: 5px; }

/* ---------- rascunho recuperado ---------- */
.aviso-rascunho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--alerta-fundo);
  border-left: 4px solid var(--alerta);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 16px;
  color: #6d3d00;
}
.aviso-rascunho strong { display: block; color: var(--alerta); }

/* ---------- força do anúncio ---------- */
/* A cor da barra é o resumo mais rápido possível: vermelho enquanto o
   anúncio some na lista, amarelo quando dá para publicar e verde quando
   está pronto para mandar para cliente. */
.forca-anuncio {
  background: var(--cinza-fundo);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 20px;
}
.forca-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.forca-topo strong { color: var(--azul); }
.forca-numero { font-weight: 800; font-size: 1.1rem; color: var(--azul); }
.forca-anuncio .barra-progresso { margin-top: 8px; }
.forca-anuncio[data-nivel="vazio"] .barra-progresso > div,
.forca-anuncio[data-nivel="fraco"] .barra-progresso > div { background: var(--vermelho); }
.forca-anuncio[data-nivel="bom"] .barra-progresso > div { background: var(--alerta); }
.forca-anuncio[data-nivel="forte"] .barra-progresso > div { background: var(--sucesso); }

.forca-itens { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.forca-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--cinza-borda);
  border-radius: 999px;
  background: var(--branco-puro);
  padding: 5px 11px;
  font-family: var(--fonte);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cinza-texto);
  cursor: pointer;
}
.forca-item:hover { border-color: var(--azul); }
.forca-marca { font-weight: 800; }
.forca-pronto { color: var(--sucesso); border-color: #bfe3cc; background: var(--sucesso-fundo); }
.forca-meio { color: var(--alerta); border-color: #f0d5b0; background: var(--alerta-fundo); }
.forca-falta { color: #8a6f6f; }

/* ---------- passos do formulário ---------- */
/* Numerar os blocos resolve a pergunta que trava quem está com pressa:
   "por onde eu começo?". A ordem não é decorativa — fotos primeiro
   porque é delas que a IA tira o resto do cadastro. */
.passo {
  border-top: 2px solid var(--cinza-borda);
  padding-top: 18px;
  margin-top: 24px;
}
.passo:first-of-type { border-top: none; padding-top: 0; margin-top: 8px; }
.passo-cabecalho { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.passo-numero {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--azul);
  color: var(--branco-puro);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}
.passo-cabecalho h3 { margin: 0 0 2px; }
.passo-cabecalho p { margin: 0; }

/* ---------- chamada do preenchimento com IA ---------- */
.bloco-ia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--azul-claro);
  border: 1px dashed var(--azul);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-top: 14px;
}
.bloco-ia-texto { flex: 1; min-width: 220px; }
.bloco-ia-texto strong { color: var(--azul); }

/* ---------- painel de conferência das sugestões ---------- */
.painel-ia {
  border: 2px solid var(--azul);
  border-radius: var(--radius-sm);
  background: var(--branco-puro);
  padding: 16px;
  margin-top: 14px;
}
.ia-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.ia-topo strong { color: var(--azul); }
.ia-trabalhando { display: flex; align-items: center; gap: 12px; }
.ia-trabalhando strong { color: var(--azul); }
.ia-erro { color: var(--vermelho-escuro); }
.ia-erro strong { color: var(--vermelho); }

.ia-conflito-aviso {
  background: var(--alerta-fundo);
  border-left: 4px solid var(--alerta);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 0.86rem;
  color: #6d3d00;
}
.ia-conflito-aviso strong { display: block; color: var(--alerta); }

.ia-lista { display: flex; flex-direction: column; gap: 8px; }
/* A caixinha some do fluxo do texto e fica alinhada no topo: descrição
   ocupa cinco linhas, e uma caixa centralizada verticalmente ao lado de
   um parágrafo parece estar marcando outra coisa. */
.ia-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 2px solid var(--cinza-borda);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: pointer;
  background: var(--branco-puro);
}
.ia-item:hover { border-color: var(--azul); }
.ia-item:has(input:checked) { border-color: var(--azul); background: var(--azul-claro); }
.ia-item > input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--azul); flex-shrink: 0; }
.ia-item-conflito { border-color: var(--alerta); background: var(--alerta-fundo); }
.ia-item-corpo { flex: 1; min-width: 0; }
.ia-item-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ia-item-rotulo { font-weight: 700; color: var(--azul); font-size: 0.88rem; }
.ia-item-valor { margin-top: 3px; font-size: 0.95rem; }
.ia-item-texto { font-size: 0.88rem; white-space: pre-wrap; line-height: 1.5; }
.ia-item-atual { margin-top: 4px; font-size: 0.8rem; color: var(--alerta); }
.ia-item-base { margin-top: 4px; font-size: 0.78rem; color: #7a7a7a; font-style: italic; }

/* Selo de confiança. Vale mais do que parece: é ele que separa "isso a
   IA leu na foto" de "isso a IA achou que era". */
.ia-selo {
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.confianca-alta { background: var(--sucesso-fundo); color: var(--sucesso); }
.confianca-media { background: var(--alerta-fundo); color: var(--alerta); }
.confianca-baixa { background: var(--perigo-fundo); color: var(--vermelho); }

.ia-conferir {
  background: var(--cinza-fundo);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-top: 12px;
  font-size: 0.86rem;
}
.ia-conferir strong { color: var(--azul); }
.ia-conferir ul { margin: 6px 0 0; }
.ia-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* ---------- respostas do CEP e do contador da descrição ---------- */
.cep-ok { color: var(--sucesso); font-weight: 600; }
.cep-alerta { color: var(--alerta); font-weight: 600; }
.cep-erro { color: var(--vermelho); font-weight: 600; }

@media (max-width: 600px) {
  .bloco-ia .btn,
  .aviso-rascunho .btn { width: 100%; }
  .aviso-rascunho > div:last-child { width: 100%; flex-direction: column; }
}

/* =====================================================================
   SIMULADOR DE FINANCIAMENTO
   ---------------------------------------------------------------------
   Esta tela é usada COM O CLIENTE OLHANDO JUNTO — muitas vezes na mesa
   do corretor, com os dois vendo o mesmo monitor, ou no celular dentro
   do imóvel. Isso decidiu praticamente todo o desenho daqui:

   • O RESULTADO FICA GRUDADO NO TOPO (.simulador-destaque). O cliente
     precisa ver a prestação mudar no instante em que responde "consigo
     dar R$ 20 mil de entrada". Se ele tiver que rolar a tela para achar
     o número, a conversa quebra.
   • NÚMERO GRANDE. A prestação é o único número que a família leva para
     casa na cabeça; ela é lida a um metro de distância, de lado.
   • CADA VALOR ASSUMIDO APARECE MARCADO (.selo-assumido). Atendimento
     transparente é o cliente conseguir apontar para a tela e perguntar
     "de onde saiu isso?" — e ter resposta.
   ===================================================================== */

/* ---------- faixa de resultado, fixa no topo ---------- */
.simulador-destaque {
  position: sticky;
  /* Gruda LOGO ABAIXO da barra de topo do sistema, não por cima dela.
     A barra de topo também é `sticky` no topo (z-index 10), então sem
     este deslocamento o resultado cobria o título da página, o sino de
     lembretes e o botão de sair. A altura real é medida na hora pelo
     financiamento.js — o valor aqui é só a reserva para o primeiro
     quadro, antes de o script rodar. */
  top: var(--altura-barra-topo, 66px);
  z-index: 9;
  background: linear-gradient(120deg, var(--azul), var(--azul-escuro));
  color: #fff;
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 16px;
  box-shadow: var(--sombra-forte);
}
.simulador-destaque h2, .simulador-destaque h3 { color: #fff; }

.destaque-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px 22px;
  align-items: end;
}
.destaque-item .rotulo {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #a9cede;
  font-weight: 700;
  margin-bottom: 2px;
}
.destaque-item .numero { font-size: 1.35rem; font-weight: 800; line-height: 1.15; }
.destaque-item .apoio { font-size: 0.78rem; color: #c7e0ea; }

/* A prestação é o número da tela. Tudo o mais é apoio. */
.destaque-item.principal .numero { font-size: 2.3rem; }
.destaque-item.principal .rotulo { color: #ffd7d7; }

.destaque-veredito {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  font-weight: 800; font-size: 0.86rem;
  margin-top: 12px;
}
.destaque-veredito.cabe { background: #d8f5e3; color: #10592c; }
.destaque-veredito.nao-cabe { background: #ffdada; color: #8c0000; }
.destaque-veredito.sem-renda { background: rgba(255,255,255,0.16); color: #e8f4f9; }

/* ---------- as duas colunas ---------- */
.simulador-colunas {
  display: grid;
  /* O `minmax(0, 1fr)` da segunda coluna não é firula. Um `1fr` sozinho
     vale `minmax(auto, 1fr)`, e esse `auto` impede a coluna de encolher
     abaixo da largura mínima do conteúdo dela. Como aqui dentro há
     tabelas de comparação com células que não quebram (valores em
     reais), a coluna estourava a tela inteira e a página ganhava rolagem
     horizontal — levando junto a faixa de resultado do topo. Com o
     `minmax(0, ...)` a coluna encolhe, e quem rola é só a tabela, dentro
     do `.tabela-wrap` dela. */
  grid-template-columns: minmax(330px, 400px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 1080px) {
  /* O `minmax(0, ...)` vale aqui pelo mesmo motivo da versão de duas
     colunas: sem ele, a tabela de comparação de bancos empurrava a
     coluna inteira e o celular ganhava rolagem horizontal na página. */
  .simulador-colunas { grid-template-columns: minmax(0, 1fr); }

  /* No celular o resultado CONTINUA grudado — é onde ele mais importa,
     porque o corretor está com o aparelho na mão, mostrando a tela para
     o cliente enquanto preenche. O que muda é o formato: em vez de uma
     grade que ocuparia meia tela, os números viram uma tira que rola
     para o lado, com a prestação sempre visível na frente. */
  .simulador-destaque { padding: 12px 14px; }
  .destaque-grade {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .destaque-grade > .destaque-item { flex: 0 0 auto; scroll-snap-align: start; }
  .destaque-item.principal .numero { font-size: 1.8rem; }
  .destaque-veredito { margin-top: 8px; padding: 6px 11px; font-size: 0.79rem; }
}

/* ---------- blocos do formulário ---------- */
.bloco-form { border-bottom: 1px solid var(--cinza-borda); }
.bloco-form:last-child { border-bottom: none; }
.bloco-form > summary {
  cursor: pointer;
  padding: 14px 4px;
  font-weight: 800;
  color: var(--azul);
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
}
.bloco-form > summary::-webkit-details-marker { display: none; }
.bloco-form > summary::after {
  content: "▾";
  margin-left: auto;
  color: #9ab4c0;
  transition: transform .15s ease;
}
.bloco-form[open] > summary::after { transform: rotate(180deg); }
.bloco-form > summary:hover { color: var(--vermelho); }
.bloco-form .corpo-bloco { padding: 2px 4px 18px; }
.bloco-form .campo:last-child { margin-bottom: 0; }

/* O contador de "quantos campos deste bloco já foram preenchidos".
   Serve para o corretor saber onde parou sem abrir bloco por bloco —
   e para deixar claro que NADA aqui é obrigatório. */
.bloco-selo {
  font-size: 0.72rem; font-weight: 800;
  padding: 2px 8px; border-radius: 999px;
  background: var(--cinza-fundo); color: #8a8a8a;
}
.bloco-selo.preenchido { background: var(--sucesso-fundo); color: var(--sucesso); }
.bloco-selo.essencial { background: var(--vermelho-claro); color: var(--vermelho-escuro); }

/* ---------- campo em linha compacta ---------- */
.campo-duplo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.campo-triplo {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
@media (max-width: 520px) {
  .campo-triplo { grid-template-columns: 1fr 1fr; }
}

/* Prefixo "R$" / sufixo "%" colados no campo, para o corretor não
   precisar decifrar se aquele 12 é reais, meses ou por cento. */
.campo-unidade { display: flex; align-items: stretch; }
.campo-unidade .marca-unidade {
  display: flex; align-items: center;
  padding: 0 11px;
  background: var(--azul-claro);
  border: 2px solid var(--cinza-borda);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  color: var(--azul);
  font-weight: 800;
  font-size: 0.9rem;
  white-space: nowrap;
}
.campo-unidade .marca-unidade.direita {
  border-right: 2px solid var(--cinza-borda);
  border-left: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.campo-unidade input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.campo-unidade input.com-sufixo { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }

/* ---------- selo de valor assumido pelo sistema ---------- */
/* Aparece ao lado de todo número que o simulador preencheu sozinho. É a
   peça central da promessa de transparência desta tela. */
.selo-assumido {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.7rem; font-weight: 800;
  padding: 2px 7px; border-radius: 999px;
  background: var(--alerta-fundo); color: var(--alerta);
  margin-left: 6px;
  vertical-align: middle;
}
.selo-estimado { background: #ece4fb; color: #59389c; }

/* ---------- prazo com barra ---------- */
input[type="range"] {
  width: 100%;
  padding: 0;
  border: none;
  accent-color: var(--vermelho);
  background: transparent;
  height: 26px;
}
.prazo-marcas {
  display: flex; justify-content: space-between;
  font-size: 0.75rem; color: #8a8a8a; margin-top: -2px;
}

/* ---------- composição da prestação ---------- */
.composicao-lista { display: flex; flex-direction: column; gap: 9px; }
.composicao-item { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; }
.composicao-cor { width: 13px; height: 13px; border-radius: 4px; flex-shrink: 0; }
.composicao-item .nome { flex: 1; }
.composicao-item .valor { font-weight: 800; color: var(--azul); white-space: nowrap; }
.composicao-barra {
  display: flex; height: 16px; border-radius: 999px;
  overflow: hidden; margin-bottom: 14px; background: var(--cinza-borda);
}
.composicao-barra > span { display: block; height: 100%; }

/* ---------- medidor de comprometimento de renda ---------- */
.medidor { margin-top: 4px; }
.medidor-trilho {
  position: relative;
  height: 26px; border-radius: 999px;
  background: linear-gradient(90deg, #d8f5e3 0%, #d8f5e3 60%, #fff1de 60%, #fff1de 85%, #ffdada 85%, #ffdada 100%);
  overflow: hidden;
}
.medidor-preenchido {
  height: 100%; border-radius: 999px;
  background: rgba(19,75,103,0.78);
  transition: width .25s ease;
}
/* A linha do limite do banco: o cliente enxerga na hora se passou. */
.medidor-limite {
  position: absolute; top: -3px; bottom: -3px; width: 3px;
  background: var(--vermelho);
}
.medidor-legenda {
  display: flex; justify-content: space-between;
  font-size: 0.78rem; color: #7a7a7a; margin-top: 5px;
}

/* ---------- gráficos ---------- */
.grafico-caixa { width: 100%; overflow-x: auto; }
.grafico-caixa svg { display: block; width: 100%; height: auto; min-width: 300px; }
.grafico-legenda {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-size: 0.8rem; color: #6b7a82; margin-top: 8px;
}
.grafico-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.grafico-legenda i {
  width: 11px; height: 11px; border-radius: 3px; display: inline-block;
}

/* ---------- comparação de bancos ---------- */
.linha-banco-nome { display: flex; align-items: center; gap: 9px; }
.marca-banco {
  width: 9px; height: 30px; border-radius: 3px; flex-shrink: 0;
}
tr.melhor-opcao td { background: var(--sucesso-fundo) !important; }
tr.linha-escolhida td { background: var(--azul-claro) !important; font-weight: 700; }

/* ---------- painel do que foi assumido ---------- */
.painel-assumido {
  background: var(--alerta-fundo);
  border-left: 4px solid var(--alerta);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-size: 0.87rem;
  color: #6b4300;
}
.painel-assumido strong { color: #57370a; }
.painel-assumido ul { margin: 8px 0 0; padding-left: 18px; }
.painel-assumido li { margin-bottom: 6px; }
.painel-assumido li:last-child { margin-bottom: 0; }

/* ---------- lista de amortizações extras ---------- */
.aporte-item {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 9px;
  align-items: end;
  padding: 12px;
  border: 2px solid var(--cinza-borda);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}
.aporte-item .campo { margin-bottom: 0; }
.aporte-item label { font-size: 0.8rem; }

/* ---------- cartão de economia ---------- */
.cartao-economia {
  background: var(--sucesso-fundo);
  border-left: 4px solid var(--sucesso);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.cartao-economia .numero { font-size: 1.5rem; font-weight: 800; color: var(--sucesso); }

/* ---------- tabela de parcelas ---------- */
.tabela-parcelas-sim th, .tabela-parcelas-sim td {
  padding: 7px 10px;
  font-size: 0.84rem;
  white-space: nowrap;
}
/* A primeira coluna (nome do banco e da linha de crédito) é a única de
   texto, e é ela que decide a largura da tabela toda. Deixá-la quebrar
   em duas linhas faz a comparação de bancos caber na tela sem rolagem
   lateral — que é a tabela que o corretor mostra ao cliente. */
.tabela-parcelas-sim td:first-child { white-space: normal; min-width: 190px; }
.tabela-parcelas-sim td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela-parcelas-sim th.num { text-align: right; }
.tabela-parcelas-sim tbody tr.ano-cheio td { background: var(--azul-claro); font-weight: 700; }

/* ---------- lista de simulações salvas ---------- */
.simulacao-salva {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 2px solid var(--cinza-borda);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.simulacao-salva .principal { flex: 1; min-width: 190px; }
.simulacao-salva .principal strong { color: var(--azul); display: block; }