/* =====================================================================
   KODACOM — estilo compartilhado por todas as telas
   Vidro (glass) leve sobre um fundo claro com gradientes suaves.
   ===================================================================== */

:root {
  --texto: #1d1d1f;
  --texto-2: #6e6e73;
  --texto-3: #aeaeb2;
  --linha: rgba(29, 29, 31, 0.08);
  --vidro: rgba(255, 255, 255, 0.62);
  --vidro-forte: rgba(255, 255, 255, 0.86);
  --vidro-borda: rgba(255, 255, 255, 0.75);
  --sombra: 0 10px 30px rgba(31, 41, 72, 0.08);
  --sombra-p: 0 2px 10px rgba(31, 41, 72, 0.06);

  --kodacom: #1d2b45;
  --imoveis: #2c5375;
  --kostrucom: #f87445;
  --khost: #ff355d;
  --verde: #34c759;
  --vermelho: #ff3b30;
  --laranja: #ff9500;
  --azul: #2c5375;
  --roxo: #7c5cff;

  --cor: var(--kodacom);
  --cor-suave: rgba(29, 43, 69, 0.08);
  --raio: 18px;
  --raio-p: 12px;
  --toque: 44px;
  --lateral: 250px;
}
[data-empresa='imoveis'] { --cor: var(--imoveis); --cor-suave: rgba(44, 83, 117, 0.1); }
[data-empresa='kostrucom'] { --cor: var(--kostrucom); --cor-suave: rgba(248, 116, 69, 0.13); }
[data-empresa='khost'] { --cor: var(--khost); --cor-suave: rgba(255, 53, 93, 0.11); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: 14.5px; line-height: 1.5;
  color: var(--texto);
  background:
    radial-gradient(1100px 700px at 8% -10%, #e6efff 0%, transparent 60%),
    radial-gradient(900px 650px at 100% 15%, #efe6ff 0%, transparent 55%),
    radial-gradient(700px 500px at 60% 110%, #e7f7ff 0%, transparent 55%),
    linear-gradient(180deg, #f7f9ff 0%, #f4f2fb 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 22px; line-height: 1.25; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: var(--cor); }
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
.texto-2 { color: var(--texto-2); }
.pequeno { font-size: 12.5px; }
.forte { font-weight: 500; }
:focus-visible { outline: 2px solid var(--cor); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- vidro ---------- */
.vidro {
  background: var(--vidro);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--vidro-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

/* ---------- casca: lateral + topo + conteúdo ---------- */
.casca { display: grid; grid-template-columns: 1fr; min-height: 100dvh; }
.lateral {
  position: fixed; inset: 0 auto 0 0; width: var(--lateral); z-index: 30;
  margin: 14px 0 14px 14px; padding: 22px 14px;
  display: flex; flex-direction: column; gap: 4px;
  transform: translateX(calc(-100% - 20px)); transition: transform 0.25s ease;
}
.lateral.aberta { transform: none; }
.lateral-marca { font-size: 20px; font-weight: 600; letter-spacing: 0.06em; color: var(--kodacom); padding: 4px 12px 22px; text-align: center; }
.lateral-grupo { font-size: 11.5px; font-weight: 500; color: var(--texto-3); padding: 14px 12px 4px; }
.lateral a {
  display: flex; align-items: center; gap: 10px;
  min-height: 42px; padding: 8px 12px; border-radius: 12px;
  color: var(--texto); text-decoration: none; font-weight: 400;
  transition: background 0.15s ease;
}
.lateral a:hover { background: rgba(255, 255, 255, 0.5); }
.lateral a.ativo { background: #fff; color: var(--cor); font-weight: 500; box-shadow: var(--sombra-p); box-shadow: var(--sombra-p), inset 3px 0 0 var(--cor); }
.lateral a .ponto-marca { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.lateral a .badge { margin-left: auto; }
.lateral-rodape { margin-top: auto; padding: 8px 12px 0; font-size: 12px; color: var(--texto-3); }
.cortina { position: fixed; inset: 0; background: rgba(29, 29, 31, 0.25); z-index: 25; }

.principal { min-width: 0; padding: 14px 14px 40px; }
.topo {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; margin-bottom: 18px;
  position: relative;
}
.topo::before { display: none; }
[data-empresa] .topo { border-left: 4px solid var(--cor); }
[data-empresa] .topo h1 { display: flex; align-items: center; gap: 10px; }
.topo h1 { flex: 1; min-width: 0; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-menu { width: 40px; height: 40px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.6); display: grid; place-items: center; }
.btn-menu svg { width: 22px; height: 22px; }
.usuario { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.7); font-size: 13px; font-weight: 500; white-space: nowrap; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--cor); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 600; }

@media (min-width: 1000px) {
  .casca { grid-template-columns: calc(var(--lateral) + 14px) 1fr; }
  .lateral { position: sticky; top: 14px; align-self: start; height: calc(100dvh - 28px); transform: none; margin: 14px 0 14px 14px; }
  .cortina, .btn-menu { display: none; }
  .principal { padding: 14px 22px 60px; }
  .topo { padding: 14px 22px; }
  .topo h1 { font-size: 20px; }
}

/* ---------- faixa de demonstração ---------- */
.faixa-demo { padding: 8px 14px; margin-bottom: 14px; border-radius: 12px; background: rgba(255, 247, 237, 0.9); border: 1px solid #fed7aa; color: #9a3412; font-size: 12.5px; text-align: center; }
.faixa-demo a { color: inherit; font-weight: 500; }

/* ---------- seções e painéis ---------- */
.secao-titulo { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 12px 4px; }
.secao-titulo h2 { font-size: 15px; }
.secao-titulo .conta { color: var(--texto-3); font-size: 13px; }
.secao-titulo .acao { margin-left: auto; }

.painel { padding: 18px 20px; }
.painel-cabecalho { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.painel-cabecalho h2 { flex: 1; }
.grade { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .grade-2 { grid-template-columns: repeat(2, 1fr); } .grade-3 { grid-template-columns: repeat(3, 1fr); } .grade-4 { grid-template-columns: repeat(2, 1fr); } .grade-agenda { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.grade-2 > .painel > .kpi, .grade-2 > .kpi { min-width: 0; }
@media (min-width: 1200px) { .grade-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .grade-item { grid-template-columns: 3fr 2fr; align-items: start; } }

/* ---------- KPI ---------- */
.kpi { display: block; padding: 18px 20px 16px; text-decoration: none; color: inherit; border-left: 4px solid var(--kpi-cor, var(--cor)); transition: transform 0.15s ease; }
a.kpi:hover { transform: translateY(-2px); }
.kpi-rotulo { font-size: 13px; color: var(--texto-2); }
.kpi-valor { font-size: 34px; font-weight: 600; line-height: 1.1; margin: 6px 0 4px; letter-spacing: -0.02em; }
.kpi-sub { font-size: 12px; color: var(--texto-3); }

/* ---------- listas ---------- */
.lista .linha { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 10px 4px; border-bottom: 1px solid var(--linha); text-decoration: none; color: inherit; }
.lista li:last-child .linha { border-bottom: 0; }
.linha-texto { flex: 1; min-width: 0; }
.linha-titulo { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-meta { font-size: 12.5px; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-data { font-size: 12.5px; color: var(--texto-2); white-space: nowrap; }
.linha-data.urgente { color: var(--vermelho); font-weight: 500; }
.seta { color: var(--texto-3); flex-shrink: 0; }
.vazio { color: var(--texto-2); padding: 18px 4px; font-size: 13.5px; }

.chip { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; background: var(--cor-suave); color: var(--cor); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.chip-ok { background: rgba(52, 199, 89, 0.14); color: #1f8f3f; }
.chip-erro { background: rgba(255, 59, 48, 0.12); color: #c1271f; }
.chip-aviso { background: rgba(255, 149, 0, 0.14); color: #9a5b00; }
.chip-neutro { background: rgba(29, 29, 31, 0.07); color: var(--texto-2); }

/* ---------- kanban ---------- */
.barra-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.barra-filtros input[type='search'] { flex: 1; min-width: 160px; min-height: 40px; padding: 0 14px; border: 1px solid var(--vidro-borda); border-radius: 12px; background: rgba(255, 255, 255, 0.7); }
.kanban { display: flex; gap: 12px; overflow-x: auto; padding: 4px 4px 16px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.coluna { flex: 0 0 min(82vw, 290px); scroll-snap-align: start; display: flex; flex-direction: column; max-height: calc(100dvh - 210px); padding: 12px; }
.coluna.alvo { outline: 2px dashed var(--cor); outline-offset: -4px; }
.coluna-cabecalho { display: flex; align-items: center; gap: 8px; padding: 2px 4px 10px; }
.coluna-cabecalho h3 { flex: 1; font-size: 13.5px; }
.coluna { border-top: 3px solid var(--cor-suave); }
.coluna-cabecalho .conta { font-size: 12px; color: var(--texto-3); }
.numero { width: 22px; height: 22px; border-radius: 50%; background: var(--cor); color: #fff; font-size: 11.5px; font-weight: 600; display: grid; place-items: center; flex-shrink: 0; }
.coluna-corpo { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; min-height: 60px; padding-bottom: 2px; }
.cartao { display: block; padding: 12px 14px; border-left: 3px solid var(--cor); border-radius: 14px; background: var(--vidro-forte); border: 1px solid var(--vidro-borda); box-shadow: var(--sombra-p); text-decoration: none; color: inherit; cursor: grab; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.cartao:hover { transform: translateY(-1px); box-shadow: var(--sombra); }
.cartao:active { cursor: grabbing; }
.cartao-titulo { font-weight: 500; font-size: 13.5px; line-height: 1.35; }
.cartao-meta { font-size: 12px; color: var(--texto-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao-rodape { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.progresso { flex: 1; height: 4px; border-radius: 2px; background: var(--linha); overflow: hidden; }
.progresso span { display: block; height: 100%; background: var(--cor); border-radius: 2px; transition: width 0.3s ease; }
.progresso-texto { font-size: 11px; color: var(--texto-3); white-space: nowrap; }
.coluna-vazia { font-size: 12.5px; color: var(--texto-3); text-align: center; padding: 16px 8px; border: 1px dashed var(--linha); border-radius: 12px; }

/* ---------- trilho de etapas (tela do item) ---------- */
.trilho { display: flex; gap: 6px; margin: 18px 0 4px; }
.trilho-etapa { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.trilho-barra { display: block; height: 5px; border-radius: 3px; background: var(--linha); transition: background 0.3s ease; }
.trilho-etapa.feita .trilho-barra { background: var(--cor); }
.trilho-etapa.atual .trilho-barra { background: var(--cor); box-shadow: 0 0 0 3px var(--cor-suave); }
.trilho-nome { font-size: 11px; line-height: 1.25; color: var(--texto-2); display: none; }
.trilho-etapa.atual .trilho-nome { display: block; color: var(--cor); font-weight: 500; }
@media (min-width: 720px) { .trilho-nome { display: block; } }
.trilho-legenda { color: var(--texto-2); font-size: 12.5px; }

/* ---------- checklist ---------- */
.checklist li { border-bottom: 1px solid var(--linha); }
.checklist li:last-child { border-bottom: 0; }
.check { width: 100%; display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 8px 4px; background: none; border: 0; text-align: left; }
.check-circulo { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--texto-3); display: grid; place-items: center; color: transparent; font-size: 13px; font-weight: 600; transition: background 0.15s ease, border-color 0.15s ease; }
.check.feito .check-circulo { background: var(--cor); border-color: var(--cor); color: #fff; }
.check.feito span:last-child { color: var(--texto-2); }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--cor); color: #fff; font-weight: 500; text-decoration: none; white-space: nowrap; transition: opacity 0.15s ease, transform 0.1s ease; }
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled { background: rgba(29, 29, 31, 0.08); color: var(--texto-3); cursor: not-allowed; }
.btn-grande { width: 100%; min-height: 50px; font-size: 15.5px; font-weight: 600; border-radius: 14px; margin-top: 16px; }
.btn-suave { background: var(--cor-suave); color: var(--cor); }
.btn-branco { background: rgba(255, 255, 255, 0.8); color: var(--texto); border: 1px solid var(--vidro-borda); }
.btn-texto { background: none; border: 0; padding: 6px 4px; color: var(--cor); font-weight: 500; min-height: 36px; }
.btn-texto.perigo { color: var(--vermelho); }
.btn-pequeno { min-height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 10px; }
.ajuda { margin-top: 10px; font-size: 12.5px; color: var(--texto-2); text-align: center; }
.erro { margin-top: 14px; padding: 12px 14px; border-radius: var(--raio-p); background: rgba(255, 59, 48, 0.1); color: #c1271f; font-size: 13.5px; }

/* ---------- formulários ---------- */
.campos { display: grid; gap: 14px; margin-top: 10px; }
@media (min-width: 720px) { .campos-2 { grid-template-columns: 1fr 1fr; } .campo.largo { grid-column: 1 / -1; } }
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo > span { font-size: 12.5px; font-weight: 500; color: var(--texto-2); }
.campo input, .campo textarea, .campo select { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid transparent; border-radius: 12px; background: rgba(255, 255, 255, 0.75); transition: box-shadow 0.15s ease, border-color 0.15s ease; }
.campo textarea { resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: none; border-color: var(--cor); box-shadow: 0 0 0 3px var(--cor-suave); }
.segmentos { display: inline-flex; padding: 3px; border-radius: 12px; background: rgba(29, 29, 31, 0.06); }
.segmentos button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--texto-2); font-weight: 500; font-size: 13px; }
.segmentos button.ativo { background: #fff; color: var(--texto); box-shadow: var(--sombra-p); }
.linha-form { display: flex; gap: 8px; margin-top: 12px; }
.linha-form input, .linha-form select { min-height: 42px; padding: 0 12px; border: 1px solid transparent; border-radius: 12px; background: rgba(255, 255, 255, 0.75); }
.linha-form input { flex: 1; min-width: 0; }
.linha-form input:focus, .linha-form select:focus { outline: none; border-color: var(--cor); }

/* ---------- modal ---------- */
.modal-fundo { position: fixed; inset: 0; z-index: 40; background: rgba(29, 29, 31, 0.3); display: flex; align-items: flex-end; justify-content: center; padding: 0; }
.modal { width: 100%; max-width: 560px; max-height: 92dvh; overflow-y: auto; padding: 22px 20px 26px; border-radius: 22px 22px 0 0; background: var(--vidro-forte); }
.modal h2 { margin-bottom: 4px; }
@media (min-width: 720px) { .modal-fundo { align-items: center; padding: 20px; } .modal { border-radius: 22px; } }

/* ---------- mídias ---------- */
.fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
@media (min-width: 720px) { .fotos { grid-template-columns: repeat(5, 1fr); } }
.foto { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: rgba(29, 29, 31, 0.05); }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto a { display: block; width: 100%; height: 100%; }
.foto-link { display: grid; place-items: center; text-align: center; padding: 8px; font-size: 11.5px; color: var(--cor); text-decoration: none; }
.foto .remover { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 15px; line-height: 1; }
.acoes-midia { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.acoes-midia label { cursor: pointer; }
.acoes-midia input[type='file'] { display: none; }
.videos li { display: flex; justify-content: space-between; align-items: center; min-height: 46px; border-bottom: 1px solid var(--linha); }

/* ---------- notas / histórico / avisos ---------- */
.notas li { padding: 12px 4px; border-bottom: 1px solid var(--linha); }
.notas li:last-child { border-bottom: 0; }
.nota-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--texto-3); margin-top: 4px; }
.historico li { display: flex; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--linha); font-size: 13.5px; }
.historico li:last-child { border-bottom: 0; }
.historico time { color: var(--texto-3); white-space: nowrap; font-size: 12.5px; }
.avisos li { display: flex; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--linha); }
.avisos li:last-child { border-bottom: 0; }
.avisos .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--cor); margin-top: 8px; flex-shrink: 0; }
.avisos .ponto.lido { background: transparent; }
.badge { min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--vermelho); color: #fff; font-size: 11px; font-weight: 600; display: inline-grid; place-items: center; }

/* ---------- tabelas ---------- */
.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabela th { text-align: left; font-weight: 500; font-size: 12px; color: var(--texto-3); padding: 6px 8px; border-bottom: 1px solid var(--linha); }
.tabela td { padding: 10px 8px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela-rolagem { overflow-x: auto; }
.valor-pos { color: #1f8f3f; }
.valor-neg { color: #c1271f; }

/* ---------- login ---------- */
.login-fundo { min-height: 100dvh; display: grid; place-items: center; padding: 20px; }
.login { width: 100%; max-width: 400px; padding: 32px 28px; }
.login-marca { font-size: 22px; font-weight: 600; letter-spacing: 0.06em; color: var(--kodacom); margin-bottom: 4px; }
.login-marcas { display: flex; gap: 6px; margin: 14px 0 22px; }
.login-marcas span { width: 26px; height: 5px; border-radius: 3px; }

/* ---------- utilitários ---------- */
.perfil-linha { display: flex; justify-content: space-between; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--linha); }
.perfil-linha:last-child { border-bottom: 0; }
.requisito { display: flex; align-items: center; gap: 10px; min-height: 46px; border-bottom: 1px solid var(--linha); padding: 0 4px; }
.requisito:last-child { border-bottom: 0; }
.requisito span { flex: 1; }
.passos li { padding: 10px 4px; border-bottom: 1px solid var(--linha); font-size: 13.5px; }
.passos code { background: rgba(29, 29, 31, 0.06); padding: 2px 6px; border-radius: 6px; font-size: 12.5px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; padding: 12px 18px; border-radius: 14px; background: var(--kodacom); color: #fff; font-size: 13.5px; box-shadow: var(--sombra); max-width: 90vw; }
.voltar { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; text-decoration: none; font-weight: 500; font-size: 13.5px; }
.tela-carregando { min-height: 100dvh; display: grid; place-items: center; color: var(--texto-2); }

/* ---------- marca da empresa (bolinha + nome) ---------- */
.marca { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--marca); white-space: nowrap; }
.marca-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 18%, transparent); flex-shrink: 0; }
[data-empresa] .painel { border-top: 3px solid var(--cor); }
.painel[data-empresa='imoveis'] { --cor: var(--imoveis); --cor-suave: rgba(44, 83, 117, 0.1); border-top: 3px solid var(--cor); }
.painel[data-empresa='kostrucom'] { --cor: var(--kostrucom); --cor-suave: rgba(248, 116, 69, 0.13); border-top: 3px solid var(--cor); }
.painel[data-empresa='khost'] { --cor: var(--khost); --cor-suave: rgba(255, 53, 93, 0.11); border-top: 3px solid var(--cor); }

/* ---------- relatórios ---------- */
.periodo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.periodo input[type='date'] { min-height: 38px; padding: 0 10px; border: 1px solid var(--vidro-borda); border-radius: 12px; background: rgba(255, 255, 255, 0.7); }
.delta { font-size: 12px; font-weight: 500; }
.delta.sobe { color: #1f8f3f; } .delta.desce { color: #c1271f; } .delta.igual { color: var(--texto-3); }
.barras { width: 100%; height: 150px; display: block; }
.legenda { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; font-size: 12px; color: var(--texto-2); }
.legenda span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); margin-right: 6px; vertical-align: -1px; }
.usuario-linha { display: grid; gap: 10px; padding: 14px 4px; border-bottom: 1px solid var(--linha); }
.usuario-linha:last-child { border-bottom: 0; }
.opcoes { display: flex; flex-wrap: wrap; gap: 6px; }
.opcao { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--linha); background: rgba(255, 255, 255, 0.6); font-size: 12.5px; cursor: pointer; user-select: none; }
.opcao.ligada { background: var(--cor-suave); border-color: transparent; color: var(--cor); font-weight: 500; }
.opcao input { display: none; }

/* ---------- documentos ---------- */
.docs li { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--linha); }
.docs li:last-child { border-bottom: 0; }
.doc-icone { width: 40px; height: 40px; border-radius: 10px; background: var(--cor-suave); color: var(--cor); font-size: 10px; font-weight: 600; display: grid; place-items: center; flex-shrink: 0; letter-spacing: 0.04em; }
.doc-nome { background: none; border: 0; padding: 0; font-weight: 500; text-align: left; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.doc-nome:hover { color: var(--cor); }

/* ---------- pessoas ---------- */
.pessoas .pessoa-linha { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid var(--linha); border-left: 3px solid transparent; }
.pessoas .pessoa-linha:last-child { border-bottom: 0; }
.pessoas .pessoa-linha.alerta { border-left-color: var(--vermelho); background: rgba(255, 59, 48, 0.05); border-radius: 0 10px 10px 0; }
.campo-alerta > span { color: #c1271f; }
.campo-alerta input { border-color: rgba(255, 59, 48, 0.35); }

/* ---------- tarefas ---------- */
.tarefa { display: flex; align-items: flex-start; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--linha); }
.tarefa:last-child { border-bottom: 0; }
.tarefa.feita { opacity: 0.55; }
.tarefa .check { width: auto; min-height: 0; padding: 2px 0; }
.tarefa-prazo { font-size: 12px; color: var(--texto-2); white-space: nowrap; }
.tarefa-prazo.atrasada { color: #c1271f; font-weight: 500; }
.tarefa-prazo.hoje { color: #9a5b00; font-weight: 500; }

/* ---------- agenda ---------- */
.cal-topo { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cal-filtro { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--linha); background: rgba(255, 255, 255, 0.5); font-size: 12px; color: var(--texto-2); }
.cal-filtro::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); opacity: 0.35; }
.cal-filtro.ligado { color: var(--texto); background: rgba(255, 255, 255, 0.85); }
.cal-filtro.ligado::before { opacity: 1; }
.cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-cabecalho { font-size: 11.5px; color: var(--texto-3); text-align: center; margin-bottom: 4px; }
.cal-dia { min-height: 92px; padding: 6px; border-radius: 10px; background: rgba(255, 255, 255, 0.55); border: 1px solid transparent; cursor: pointer; overflow: hidden; }
.cal-dia.fora { opacity: 0.45; }
.cal-dia.hoje { border-color: var(--cor); }
.cal-dia.aberto { background: rgba(255, 255, 255, 0.9); box-shadow: var(--sombra-p); }
.cal-num { font-size: 12px; font-weight: 500; color: var(--texto-2); margin-bottom: 4px; }
.cal-dia.hoje .cal-num { color: var(--cor); }
.cal-lista { display: grid; gap: 3px; }
.cal-ev { display: block; padding: 2px 6px; border-radius: 6px; border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 12%, white); color: var(--texto); font-size: 11px; line-height: 1.3; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ev:hover { background: color-mix(in srgb, var(--c) 22%, white); }
.cal-mais { font-size: 10.5px; color: var(--texto-3); }
.cal-pontos { display: none; gap: 3px; margin-top: 4px; }
.cal-pontos span { width: 6px; height: 6px; border-radius: 50%; }
.cal-dia-aberto { display: none; margin-top: 12px; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.7); }
.cal-dia-aberto .cal-ev { white-space: normal; margin-bottom: 4px; }
@media (max-width: 719px) {
  .cal-dia { min-height: 54px; padding: 4px; }
  .cal-lista, .cal-mais { display: none; }
  .cal-pontos, .cal-dia-aberto { display: flex; flex-wrap: wrap; }
  .cal-dia-aberto { display: block; }
}
.cal-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-coluna { padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.55); min-height: 120px; display: grid; gap: 4px; align-content: start; }
.cal-coluna.hoje { border: 1px solid var(--cor); }
.cal-coluna .cal-ev { white-space: normal; }
.cal-coluna-titulo { font-size: 12.5px; margin-bottom: 4px; }
@media (max-width: 719px) { .cal-semana { grid-template-columns: 1fr; } .cal-coluna { min-height: 0; } }
.cal-listagem { display: grid; gap: 8px; }
.cal-listagem-dia { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--linha); }
.cal-listagem-data { width: 92px; flex-shrink: 0; font-size: 12.5px; font-weight: 500; color: var(--texto-2); text-transform: capitalize; }
.cal-listagem-data.hoje { color: var(--cor); }
.cal-listagem .cal-ev { white-space: normal; }

/* =====================================================================
   V2.1 — ajuste de design: cantos discretos, mais respiro, menos vidro.
   Estas regras vêm por último e valem sobre as de cima.
   ===================================================================== */
:root {
  --raio: 8px; --raio-p: 6px;
  --vidro: rgba(255, 255, 255, 0.74);
  --vidro-forte: rgba(255, 255, 255, 0.92);
  --vidro-borda: rgba(255, 255, 255, 0.9);
  --sombra: 0 4px 18px rgba(31, 41, 72, 0.05);
  --sombra-p: 0 1px 4px rgba(31, 41, 72, 0.05);
  --linha: rgba(29, 29, 31, 0.07);
}
body {
  background:
    radial-gradient(900px 600px at 10% -10%, #eaf0fb 0%, transparent 60%),
    radial-gradient(800px 600px at 100% 10%, #f1ecfa 0%, transparent 55%),
    linear-gradient(180deg, #f8f9fc 0%, #f4f4f8 100%);
}
.vidro { border-radius: var(--raio); border: 1px solid rgba(29, 29, 31, 0.05); box-shadow: var(--sombra); }

/* lateral: cabe na tela e rola quando o menu é longo */
.lateral { overflow-y: auto; overscroll-behavior: contain; gap: 2px; padding: 22px 12px; scrollbar-width: thin; }
.lateral a { min-height: 38px; padding: 7px 12px; border-radius: 6px; font-size: 14px; }
.lateral a.ativo { box-shadow: inset 3px 0 0 var(--cor); border-radius: 0 6px 6px 0; }
.lateral-grupo { padding: 12px 12px 3px; }
.lateral-marca { padding: 2px 12px 16px; }
.lateral-rodape { padding-top: 14px; }

/* respiro */
.principal { padding: 18px 18px 56px; }
@media (min-width: 1000px) { .principal { padding: 18px 30px 72px; } .topo { padding: 16px 26px; } }
.topo { margin-bottom: 22px; border-radius: var(--raio); }
.painel { padding: 24px 26px; }
.painel-cabecalho { margin-bottom: 16px; }
.grade { gap: 18px; }
.secao-titulo { margin: 36px 0 14px 4px; }
.kpi { padding: 22px 24px 20px; border-left-width: 3px; }
.kpi-valor { margin: 8px 0 6px; }
.lista .linha { min-height: 58px; padding: 12px 6px; }
.perfil-linha { padding: 13px 4px; }
.campos { gap: 18px; margin-top: 14px; }
.campo > span { margin-bottom: 1px; }
.barra-filtros { gap: 10px; margin-bottom: 18px; }
.kanban { gap: 16px; padding: 4px 4px 20px; }
.coluna { padding: 14px; border-radius: var(--raio); }
.coluna-corpo { gap: 10px; }
.coluna-cabecalho { padding-bottom: 12px; }
.cartao { padding: 14px 16px; border-radius: 6px; border-left-width: 3px; }
.cartao-rodape { margin-top: 12px; }
.checklist .check { min-height: 54px; padding: 10px 4px; gap: 16px; }
.docs li, .notas li, .pessoas .pessoa-linha, .historico li, .avisos li, .tarefa { padding-top: 12px; padding-bottom: 12px; }
.tabela td { padding: 12px 10px; }
.tabela th { padding: 8px 10px; }

/* cantos discretos em tudo que era muito redondo */
.btn, .btn-secundario, .usuario, .modal, .campo input, .campo textarea, .campo select, .linha-form input, .linha-form select,
.barra-filtros input[type='search'], .segmentos, .btn-menu, .foto, .doc-icone, .cal-dia, .cal-coluna, .cal-dia-aberto,
.faixa-demo, .erro, .toast, .opcao, .cal-filtro, .chip, .kpi, .painel[data-empresa] { border-radius: 6px; }
.segmentos button { border-radius: 4px; }
.cal-ev { border-radius: 3px; }
.chip { padding: 3px 9px; }
.avatar, .numero, .check-circulo, .marca-ponto, .ponto-marca, .badge, .avisos .ponto { border-radius: 50%; }
.badge { border-radius: 9px; }
@media (min-width: 720px) { .modal { border-radius: 8px; } }
.modal { padding: 26px 26px 30px; }
.modal-fundo { background: rgba(29, 29, 31, 0.22); }

/* ficha de venda / aluguel (Imóveis na Itália) */
.ficha-resumo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 18px; }
@media (min-width: 720px) { .ficha-resumo { grid-template-columns: repeat(4, 1fr); } }
.ficha-resumo div { padding: 14px 16px; border-radius: 6px; background: rgba(255, 255, 255, 0.7); }
.ficha-resumo .r { font-size: 12px; color: var(--texto-2); }
.ficha-resumo .v { font-size: 20px; font-weight: 600; margin-top: 4px; letter-spacing: -0.01em; }
.alerta-lista { display: grid; gap: 6px; margin-bottom: 14px; }
.alerta-lista div { padding: 10px 14px; border-radius: 6px; background: rgba(255, 59, 48, 0.07); color: #c1271f; font-size: 13px; border-left: 3px solid var(--vermelho); }
.alerta-lista div.ok { background: rgba(52, 199, 89, 0.1); color: #1f8f3f; border-left-color: var(--verde); }
.subtitulo { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-3); margin: 22px 0 8px; }
.subtitulo:first-child { margin-top: 0; }

/* =====================================================================
   V2.2 — caixas de cadastro sólidas e centralizadas, logos, busca,
   ação rápida, índice do item, estoque
   ===================================================================== */
.modal-fundo { align-items: center; justify-content: center; padding: 16px; background: rgba(29, 29, 31, 0.35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 80; }
.modal { background: #fff; border: 1px solid rgba(29, 29, 31, 0.06); border-radius: 8px; box-shadow: 0 24px 60px rgba(31, 41, 72, 0.18); max-height: 90dvh; width: min(100%, 600px); -webkit-backdrop-filter: none; backdrop-filter: none; }
.modal h2 { font-size: 18px; }
.modal-fechar { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(29, 29, 31, 0.06); font-size: 18px; line-height: 1; display: grid; place-items: center; }
.modal { position: relative; }

/* logos das marcas */
.logo { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.logo-g { width: 40px; height: 40px; }
.lateral a .logo { width: 22px; height: 22px; margin-left: -2px; }
.login-logos { display: flex; gap: 18px; justify-content: center; margin: 18px 0 8px; }
.login-logos img { width: 40px; height: 40px; object-fit: contain; }

/* topo: busca e ação rápida */
.topo { gap: 10px; }
.topo h1 { flex: 0 1 auto; }
.topo-espaco { flex: 1; }
.busca { position: relative; flex: 1; max-width: 420px; min-width: 120px; }
.busca input { width: 100%; min-height: 38px; padding: 0 12px 0 34px; border: 1px solid rgba(29, 29, 31, 0.08); border-radius: 6px; background: rgba(29, 29, 31, 0.04); font-size: 13.5px; }
.busca input:focus { outline: none; background: #fff; border-color: var(--cor); }
.busca svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--texto-3); }
.busca-lista { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 70; background: #fff; border: 1px solid rgba(29, 29, 31, 0.08); border-radius: 8px; box-shadow: 0 16px 40px rgba(31, 41, 72, 0.14); max-height: 60vh; overflow-y: auto; padding: 6px; }
.busca-lista a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px; text-decoration: none; color: inherit; }
.busca-lista a:hover, .busca-lista a.ativo { background: var(--cor-suave); }
.busca-lista .grupo { font-size: 11px; color: var(--texto-3); padding: 8px 10px 2px; text-transform: uppercase; letter-spacing: 0.04em; }
.busca-vazia { padding: 12px 10px; color: var(--texto-2); font-size: 13px; }
.acao-rapida { position: relative; }
.acao-rapida-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 70; min-width: 220px; background: #fff; border: 1px solid rgba(29, 29, 31, 0.08); border-radius: 8px; box-shadow: 0 16px 40px rgba(31, 41, 72, 0.14); padding: 6px; }
.acao-rapida-menu button, .acao-rapida-menu a { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 6px; background: none; text-align: left; text-decoration: none; color: inherit; font-size: 13.5px; }
.acao-rapida-menu button:hover, .acao-rapida-menu a:hover { background: rgba(29, 29, 31, 0.05); }
.acao-rapida-menu .grupo { font-size: 11px; color: var(--texto-3); padding: 8px 10px 2px; text-transform: uppercase; letter-spacing: 0.04em; }
@media (max-width: 719px) { .busca { display: none; } .topo h1 { flex: 1; } .topo-espaco { display: none; } }
.btn-icone { width: 38px; height: 38px; padding: 0; border-radius: 6px; }

/* índice da tela do item */
.indice { position: sticky; top: 8px; z-index: 20; display: flex; gap: 4px; overflow-x: auto; padding: 6px; margin-bottom: 18px; background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(29, 29, 31, 0.06); border-radius: 8px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.indice a { flex-shrink: 0; padding: 6px 12px; border-radius: 5px; font-size: 13px; color: var(--texto-2); text-decoration: none; white-space: nowrap; }
.indice a:hover { background: var(--cor-suave); color: var(--cor); }
.ancora { scroll-margin-top: 70px; }

/* nível da obra */
.nivel { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 5px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
.nivel::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.nivel-afazer { background: rgba(110, 110, 115, 0.12); color: #4b4b50; }
.nivel-emcurso { background: rgba(248, 116, 69, 0.16); color: #b34a1f; }
.nivel-finalizado { background: rgba(52, 199, 89, 0.14); color: #1f8f3f; }
.orcamento { padding: 14px 16px; border-radius: 6px; background: rgba(255, 255, 255, 0.7); border: 1px solid var(--linha); margin-bottom: 10px; }
.orcamento.aprovado { border-color: rgba(52, 199, 89, 0.5); background: rgba(52, 199, 89, 0.06); }
.orcamento-topo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.orcamento pre { white-space: pre-wrap; font: inherit; margin: 8px 0 0; color: var(--texto); }
.foto-legenda { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 6px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)); color: #fff; font-size: 11px; line-height: 1.25; }

/* modal por cima de tudo; um de cada vez; a página de trás não rola */
body.com-modal { overflow: hidden; position: fixed; left: 0; right: 0; width: 100%; }
.modal-fundo { z-index: 1000; }
.modal-fundo ~ .modal-fundo { display: none; }
.topo { z-index: 25; }
.lateral { z-index: 30; }

/* acompanhamento da procuração */
.passos-proc { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
@media (min-width: 720px) { .passos-proc { grid-template-columns: repeat(4, 1fr); } }
.passo-proc { display: grid; grid-template-columns: 24px 1fr; gap: 2px 10px; align-items: center; padding: 10px 12px; border-radius: 6px; background: rgba(29, 29, 31, 0.04); }
.passo-proc.feito { background: rgba(52, 199, 89, 0.1); }
.passo-num { grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; background: rgba(29, 29, 31, 0.1); color: var(--texto-2); display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.passo-proc.feito .passo-num { background: var(--verde); color: #fff; }
.passo-nome { font-size: 12.5px; font-weight: 500; }
.passo-data { font-size: 12px; color: var(--texto-2); }

/* anexos de uma comunicação */
.anexo { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; border-radius: 5px; background: rgba(29, 29, 31, 0.05); font-size: 12px; }
.anexo button { background: none; border: 0; padding: 2px 4px; color: var(--cor); font-weight: 500; font-size: 12px; }
.anexo .anexo-x { color: var(--texto-3); font-size: 14px; }

/* chavinha de idioma PT / IT */
.chave { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px; border: 0; border-radius: 15px; background: rgba(29, 29, 31, 0.08); position: relative; cursor: pointer; flex-shrink: 0; }
.chave-txt { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--texto-3); width: 18px; text-align: center; z-index: 1; transition: color 0.2s ease; }
.chave-bola { position: absolute; top: 3px; left: 3px; width: 30px; height: 24px; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.chave.it .chave-bola { transform: translateX(30px); }
.chave:not(.it) .chave-txt:first-child, .chave.it .chave-txt:last-child { color: var(--texto); }

/* caixa de confirmação própria */
.modal-fundo.confirma { z-index: 1100; }
.confirma-caixa { width: min(100%, 420px); padding: 24px 24px 20px; }
.confirma-texto { font-size: 15px; line-height: 1.55; white-space: pre-line; margin-bottom: 18px; }
.confirma-botoes { display: flex; gap: 10px; justify-content: flex-end; }
.btn-perigo { background: var(--vermelho); color: #fff; }
.modal-fundo.confirma ~ .modal-fundo.confirma { display: none; }

/* celular: topo que cabe na tela, "+" que não sai da tela, nada vaza para os lados */
html, body { overflow-x: hidden; max-width: 100vw; }
.principal { overflow-x: clip; }
.topo > * { flex-shrink: 0; }
.topo h1 { flex: 1 1 0; min-width: 0; }
@media (max-width: 719px) {
  .topo { padding: 10px 12px; gap: 8px; }
  .topo h1 { font-size: 16px; }
  .usuario { padding: 3px; }
  .usuario > span:last-child { display: none; }
  .chave { height: 28px; }
  .chave-bola { width: 28px; height: 22px; }
  .chave.it .chave-bola { transform: translateX(28px); }
  .acao-rapida { position: static; }
  .acao-rapida-menu { position: fixed; left: 12px; right: 12px; top: 74px; min-width: 0; max-height: calc(100dvh - 90px); overflow-y: auto; }
  .lateral { width: min(84vw, 300px); }
}

/* sub-abas (Venda / Aluguel) */
.subabas { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--linha); }
.subabas button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; background: none; font-size: 15px; font-weight: 500; color: var(--texto-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subabas button.ativa { color: var(--cor); border-bottom-color: var(--cor); }
.subabas .conta { font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 10px; background: rgba(29, 29, 31, 0.07); color: var(--texto-2); }
.subabas button.ativa .conta { background: var(--cor-suave); color: var(--cor); }

/* escolha de idioma (Minha conta) */
.idiomas { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.idioma { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border: 1px solid var(--linha); border-radius: 6px; background: rgba(255, 255, 255, 0.7); font-weight: 500; text-align: left; }
.idioma .bandeira { font-size: 22px; line-height: 1; }
.idioma.ativo { border-color: var(--cor); background: var(--cor-suave); color: var(--cor); }
.idioma > span:last-child { margin-left: auto; }
/* visualizador de anexos */
.modal-fundo.visor { z-index: 1050; padding: 12px; }
.visor-caixa { width: min(100%, 1100px); height: min(92dvh, 900px); background: #fff; border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(31, 41, 72, 0.25); }
.visor-topo { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--linha); }
.visor-nome { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visor-corpo { flex: 1; min-height: 0; background: #f2f2f5; display: grid; place-items: center; }
.visor-corpo iframe { width: 100%; height: 100%; border: 0; }
.visor-corpo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.visor-aviso { padding: 30px; color: var(--texto-2); text-align: center; }

/* celular: nada dentro dos painéis pode empurrar a página para fora da tela */
.grade > *, .grade-item > *, .grade-item > * > *, .painel, .painel > * { min-width: 0; max-width: 100%; }
.painel, .orcamento pre, .historico li span, .notas li, .cartao, .pessoa-linha > div, .tarefa > div, .linha-texto { overflow-wrap: anywhere; }
.historico li span { min-width: 0; }
.ficha-resumo > div { min-width: 0; overflow: hidden; }
.tabela-rolagem { max-width: 100%; }
.campos > * { min-width: 0; }

/* campo de escolha com pesquisa */
.escolher { position: relative; }
.escolher input { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid transparent; border-radius: 6px; background: rgba(255, 255, 255, 0.75); }
.escolher input:focus { outline: none; border-color: var(--cor); box-shadow: 0 0 0 3px var(--cor-suave); }
.escolher-lista { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; background: #fff; border: 1px solid rgba(29, 29, 31, 0.08); border-radius: 8px; box-shadow: 0 12px 30px rgba(31, 41, 72, 0.14); padding: 4px; max-height: 260px; overflow-y: auto; }
.escolher-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: 0; border-radius: 6px; background: none; text-align: left; font-size: 13.5px; }
.escolher-item:hover { background: var(--cor-suave); }
.escolher-vazio { padding: 8px 10px; font-size: 12.5px; color: var(--texto-3); }
.escolher-valor { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border-radius: 6px; background: rgba(255, 255, 255, 0.75); border: 1px solid var(--linha); }
/* campo de busca com escolha (pessoas e imóveis) */
.busca-sel { position: relative; }
.busca-sel input { width: 100%; min-height: 44px; padding: 10px 36px 10px 14px; border: 1px solid transparent; border-radius: 6px; background: rgba(255, 255, 255, 0.75); }
.busca-sel input:focus { outline: none; border-color: var(--cor); box-shadow: 0 0 0 3px var(--cor-suave); }
.busca-sel .limpar { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(29, 29, 31, 0.08); font-size: 15px; line-height: 1; }
.busca-sel .lista { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; max-height: 260px; overflow-y: auto; background: #fff; border: 1px solid rgba(29, 29, 31, 0.08); border-radius: 6px; box-shadow: 0 12px 30px rgba(31, 41, 72, 0.14); padding: 4px; }
.busca-sel .lista button { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 5px; background: none; text-align: left; font-size: 13.5px; }
.busca-sel .lista button:hover { background: var(--cor-suave); }
.busca-sel .lista .sub { display: block; font-size: 12px; color: var(--texto-2); }
.busca-sel .nada { padding: 10px; font-size: 13px; color: var(--texto-2); }
.responsavel { display: inline-flex; align-items: center; gap: 6px; }

/* =====================================================================
   V2.7 — realce sutil ao passar o mouse em tudo que é clicável
   ===================================================================== */
@media (hover: hover) {
  a, button:not(:disabled), [role='button'], label.opcao, .cartao, .lista .linha, a.kpi, .idioma, .doc-nome, .check, .cal-ev, .lateral a, .subabas button, .segmentos button, .indice a, .busca-lista a, .acao-rapida-menu a, .acao-rapida-menu button, .tabela tbody tr[onclick] { cursor: pointer; transition: background-color 0.15s ease, filter 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; }
  .btn:not(:disabled):hover, .btn-icone:not(:disabled):hover, .btn-menu:hover, .modal-fechar:hover, .remover:hover { filter: brightness(0.93); }
  .btn-texto:not(:disabled):hover, a:not(.btn):not(.kpi):not(.cartao):not(.linha):not(.cal-ev):not(.busca-lista a):not(.acao-rapida-menu a):not(.lateral a):not(.indice a):hover { text-decoration: underline; text-underline-offset: 3px; }
  .lista .linha:hover, .tarefa:hover, .docs li:hover, .notas li:hover, .avisos li:hover, .pessoas .pessoa-linha:hover, .historico li:hover, .tabela tbody tr:hover td { background: rgba(29, 29, 31, 0.035); }
  .lista .linha:hover { border-radius: 6px; }
  .check:not(:disabled):hover .check-circulo { border-color: var(--cor); box-shadow: 0 0 0 3px var(--cor-suave); }
  .check:not(:disabled):hover { background: rgba(29, 29, 31, 0.03); border-radius: 6px; }
  .subabas button:hover, .segmentos button:not(.ativo):hover, .indice a:hover, .cal-filtro:hover, .opcao:hover, .idioma:not(.ativo):hover { background: rgba(29, 29, 31, 0.06); }
  .segmentos button.ativo:hover { filter: brightness(0.98); }
  .lateral a:not(.ativo):hover { background: rgba(29, 29, 31, 0.05); }
  a.kpi:hover, .cartao:hover, .coluna:hover { box-shadow: var(--sombra), 0 0 0 1px var(--cor-suave); }
  .cal-dia:hover { background: rgba(255, 255, 255, 0.95); box-shadow: var(--sombra-p); }
  select:hover, input[type='date']:hover, input[type='file']:hover, .campo select:hover { cursor: pointer; border-color: rgba(29, 29, 31, 0.12); }
  .trilho-etapa:hover .trilho-nome { color: var(--cor); }
  .anexo button:hover { text-decoration: underline; }
}

/* venda sem ato agendado: destaque no kanban */
.cartao.destaque-alerta { border-left-color: var(--vermelho); background: rgba(255, 59, 48, 0.05); }

/* Kostrucom: cliente quitado (verde) ou com pagamento pendente (vermelho) */
.cartao.destaque-ok { border-left-color: var(--verde); background: rgba(52, 199, 89, 0.06); }
/* processos em grade com densidade ajustável */
.densidade { display: inline-flex; align-items: center; gap: 6px; }
.densidade button { width: 32px; height: 32px; border: 1px solid var(--linha); border-radius: 6px; background: rgba(255, 255, 255, 0.7); font-size: 16px; }

/* grupos do menu e painéis que abrem/fecham */
.lateral-grupo-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; background: none; text-align: left; cursor: pointer; border-radius: 6px; }
.lateral-grupo-btn:hover { background: rgba(29, 29, 31, 0.05); }
.seta-grupo { display: inline-block; width: 14px; text-align: center; color: var(--texto-3); font-size: 13px; }
.painel-toggle { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; }
.painel-toggle h2 { flex: 1; }
.painel-toggle:hover .seta-grupo { color: var(--cor); }
.painel-fechado { padding-bottom: 18px; }
.painel-fechado .painel-cabecalho { margin-bottom: 0; }
.painel-fechado .painel-cabecalho h2 { color: var(--texto-2); }

/* =====================================================================
   V3.2 — respiro e separação: nada colado, cada bloco com seu espaço
   ===================================================================== */
.secao { margin-bottom: 32px; }
.secao-titulo { margin: 34px 0 14px 4px; }
.secao:first-child .secao-titulo, .principal > div > .secao:first-child .secao-titulo { margin-top: 8px; }
.painel + .painel, .painel + .secao, .secao + .painel, .grade + .painel, .painel + .grade, .barra-filtros + .painel, .painel + .barra-filtros, .subabas + .barra-filtros, .painel + .grade-item, .kanban + .ajuda, .painel + p { margin-top: 20px; }
.barra-filtros { margin: 4px 0 20px; }
.painel-cabecalho { margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--linha); }
.painel-fechado .painel-cabecalho { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.subtitulo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 30px 0 14px; padding-top: 20px; border-top: 1px solid var(--linha); }
.subtitulo:first-child, .subabas + .subtitulo, .subabas + div > .subtitulo:first-child { border-top: 0; padding-top: 0; margin-top: 12px; }
.subtitulo .btn, .subtitulo a.btn { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.ficha-resumo { gap: 14px; margin: 14px 0 20px; }
.ficha-resumo + .ficha-resumo { margin-top: -6px; }
.ficha-resumo > div { padding: 16px 18px; }
.alerta-lista { margin: 4px 0 18px; }
.subabas { margin: 20px 0 22px; }
.painel > .subabas { margin-top: 12px; }
.tabela-rolagem { margin-top: 10px; }
.tabela th { padding: 10px 10px; }
.tabela td { padding: 13px 10px; }
.campos { margin-top: 12px; }
.campos + .campos { margin-top: 18px; }
.campos + .ajuda, .campos + p.ajuda { margin-top: 12px; }
.tarefa { padding: 13px 6px; }
.docs li, .notas li, .avisos li, .historico li, .pessoas .pessoa-linha { padding-top: 13px; padding-bottom: 13px; }
.lista .linha { min-height: 60px; }
.painel .vazio { padding: 22px 4px; }
.painel p.pequeno.texto-2 { line-height: 1.6; }
.grade { gap: 20px; }
.kpi { padding: 22px 24px 20px; }
.kpi-rotulo { margin-bottom: 2px; }
.kpi-sub { margin-top: 4px; }
.linha-form { margin-top: 14px; gap: 10px; }
.indice { margin-bottom: 22px; }
header + .grade-item, header + .grade { margin-top: 6px; }
.opcoes { gap: 8px; }
.orcamento { padding: 16px 18px; margin-bottom: 12px; }
.usuario-linha { padding: 16px 4px; }
.cal-topo { margin-bottom: 14px; }
.modal .campos { margin-top: 16px; }
.modal .segmentos { margin-top: 14px; }

/* =====================================================================
   V3.3 — menu com grupos visíveis, transição entre telas, animações leves
   ===================================================================== */
/* grupos do menu: agora parecem botões */
.lateral-grupo-btn { font-family: 'Poppins', system-ui, sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: var(--texto); background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(29, 29, 31, 0.07); border-radius: 8px; padding: 9px 12px; margin: 10px 0 4px; box-shadow: 0 1px 2px rgba(31, 41, 72, 0.05); transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.lateral-grupo-btn:hover { background: rgba(255, 255, 255, 0.95); box-shadow: 0 3px 10px rgba(31, 41, 72, 0.08); transform: translateY(-1px); }
.lateral-grupo-btn:active { transform: scale(0.98); }
.lateral-grupo-btn .seta-grupo { color: var(--texto-2); font-size: 15px; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.lateral-grupo-btn.fechado .seta-grupo { transform: none; }
.lateral-grupo:not(.lateral-grupo-btn) { padding: 6px 12px 0; }
.lateral a { transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; }
.lateral a:active { transform: scale(0.98); }

/* transição nativa entre telas (Chrome/Safari): cross-fade em vez de "piscar" */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
.lateral { view-transition-name: lateral; }
.topo { view-transition-name: topo; }
::view-transition-old(lateral), ::view-transition-new(lateral), ::view-transition-old(topo), ::view-transition-new(topo) { animation-duration: 0s; }

/* conteúdo entra suavemente */
@keyframes k-surgir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes k-aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes k-modal { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes k-toast { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes k-pop { 0% { transform: scale(0.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.principal > div:not(.faixa-demo) > *, .principal > div > .grade > * { animation: k-surgir 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.principal > div > *:nth-child(2) { animation-delay: 0.03s; } .principal > div > *:nth-child(3) { animation-delay: 0.06s; } .principal > div > *:nth-child(4) { animation-delay: 0.09s; } .principal > div > *:nth-child(n+5) { animation-delay: 0.12s; }
.modal-fundo { animation: k-aparecer 0.18s ease both; }
.modal, .confirma-caixa, .visor-caixa { animation: k-modal 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.toast { animation: k-toast 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.busca-lista, .acao-rapida-menu, .busca-sel .lista { animation: k-modal 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) both; transform-origin: top; }
.check.feito .check-circulo { animation: k-pop 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
.cartao, .kpi, .painel, .btn, .btn-texto, .chip, .opcao, .idioma, .doc-nome, .indice a, .subabas button, .segmentos button, .cal-ev, .cal-dia, .foto, .tarefa, .lista .linha { transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; }
.btn:active:not(:disabled), .btn-texto:active, .opcao:active, .idioma:active, .subabas button:active, .segmentos button:active, .indice a:active { transform: scale(0.97); }
.cartao:hover { transform: translateY(-2px); }
a.kpi:hover { transform: translateY(-2px); }
.foto:hover img { transform: scale(1.03); }
.foto img { transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.docs li:hover .doc-icone { transform: scale(1.06); }
.doc-icone { transition: transform 0.2s ease; }
.subabas button { position: relative; }
.subabas button::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--cor); transform: scaleX(0); transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
.subabas button.ativa { border-bottom-color: transparent; }
.subabas button.ativa::after { transform: scaleX(1); }
.trilho-barra { transition: background 0.3s ease, box-shadow 0.3s ease; }
.progresso span { transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.painel-toggle .seta-grupo { transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.painel-fechado .painel-toggle .seta-grupo { transform: rotate(-90deg); }
.badge { animation: k-pop 0.3s ease; }
.lateral.aberta { animation: none; }
@media (prefers-reduced-motion: reduce) { .principal > div > *, .modal, .toast, .badge { animation: none !important; } }

/* modos de visualização: kanban · lista · grade */
.vistas button { display: inline-flex; align-items: center; gap: 6px; }
.vistas .vista-nome { font-size: 12.5px; }
@media (max-width: 719px) { .vistas .vista-nome { display: none; } }
.grade-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.grade-cartao .cartao { display: block; }
.tabela tr.linha-clicavel { cursor: pointer; }
.tabela tr.linha-clicavel:hover td { background: var(--cor-suave); }

/* =====================================================================
   V3.4 — listas flutuantes acima de tudo, lateral recolhível, cargos
   ===================================================================== */
.flutuante { max-height: 320px; overflow-y: auto; }
.flutuante.escolher-lista, .flutuante.busca-lista { position: fixed !important; }
.escolher-lista, .busca-lista { z-index: 1200; }
.acao-rapida-menu { z-index: 1200; }
.modal-fundo { z-index: 1000; }
.modal-fundo .flutuante { z-index: 1300; }
/* (lateral sempre visível no computador; só os grupos do menu começam fechados) */
.cargo { font-size: 11px; padding: 1px 8px; border-radius: 4px; background: rgba(29, 29, 31, 0.07); color: var(--texto-2); }
.radio-linha { display: flex; gap: 8px; flex-wrap: wrap; }
.radio-linha label { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--linha); border-radius: 6px; background: rgba(255, 255, 255, 0.7); cursor: pointer; }
.radio-linha label.ativa { border-color: var(--cor); background: var(--cor-suave); color: var(--cor); font-weight: 500; }
.radio-linha input { accent-color: var(--cor); }
.pendencia { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 6px; background: rgba(255, 149, 0, 0.12); border-left: 3px solid var(--laranja); color: #9a5b00; font-weight: 500; margin-bottom: 18px; }

/* grupos do menu: seta na horizontal quando fechado, para baixo quando aberto */
.lateral-grupo-btn .seta-grupo { font-size: 15px; line-height: 1; }

/* =====================================================================
   V3.6 — escala 125%/150%: sem quebrar palavras, abas rolam, grades reduzem antes
   ===================================================================== */
.subabas { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.subabas button, .segmentos button, .btn, .btn-texto, .btn-pequeno, .chip, .opcao, .lateral a, .lateral-grupo-btn, .kpi-rotulo, .vistas button, .cal-filtro, .tabela th { white-space: nowrap; overflow-wrap: normal; word-break: normal; hyphens: none; }
.cartao-titulo, .ficha-resumo .v, .doc-nome, .notas li, .alerta-lista div { overflow-wrap: break-word; word-break: normal; }
h1, h2, h3, .kpi-valor, .painel-cabecalho h2 { overflow-wrap: break-word; word-break: normal; hyphens: none; }
@media (max-width: 1400px) {
  .ficha-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .grade-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-2 { grid-template-columns: 1fr; }
  .grade-item { grid-template-columns: 1fr; }
  .topo .busca { max-width: 260px; }
}
@media (max-width: 1000px) { .campos-2 { grid-template-columns: 1fr; } }
.kpi-valor { font-size: clamp(22px, 1.8vw, 30px); }

/* =====================================================================
   V3.7 — alerta de codice fiscale, cards que filtram, compromissos
   ===================================================================== */
.banner-perigo { margin: 0 0 18px; padding: 16px 20px; border-radius: 8px; background: rgba(255, 59, 48, 0.12); border: 1px solid rgba(255, 59, 48, 0.35); border-left: 5px solid var(--vermelho); color: #8a1c14; font-size: 14px; line-height: 1.55; animation: k-surgir 0.3s ease both; }
.banner-perigo-titulo { font-size: 16px; font-weight: 700; margin-bottom: 4px; letter-spacing: 0.01em; }
.kpi-clicavel { cursor: pointer; border-radius: var(--raio, 10px); transition: transform 0.18s ease, box-shadow 0.2s ease; }
.kpi-clicavel:hover { transform: translateY(-2px); }
.kpi-clicavel.ativo .kpi { outline: 2px solid var(--cor); box-shadow: 0 0 0 4px var(--cor-suave); }
.cal-ev.feito { opacity: 0.5; text-decoration: line-through; }
.cal-coluna-titulo:hover { color: var(--cor); }

/* =====================================================================
   V3.8 — linha de pessoa organizada, resumo do dia, financeiro por empresa
   ===================================================================== */
.pessoas .pessoa-linha { display: flex; gap: 14px; align-items: flex-start; padding: 16px 8px; border-bottom: 1px solid var(--linha); }
.pessoas .pessoa-linha.alerta { background: rgba(255, 59, 48, 0.05); border-left: 3px solid var(--vermelho); border-radius: 6px; padding-left: 12px; }
.pessoa-avatar { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 14px; margin-top: 2px; }
.pessoa-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pessoa-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pessoa-nome { font-weight: 600; font-size: 15px; color: inherit; text-decoration: none; }
.pessoa-nome:hover { color: var(--cor); }
.pessoa-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--texto-2); }
.pessoa-vinculos, .pessoa-conjuge { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; }
.pessoa-rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-3); margin-right: 2px; }
.vinculo-mini { font-size: 11.5px; padding: 2px 9px; border-radius: 4px; border: 1px solid; line-height: 1.5; white-space: nowrap; }
.pessoa-direita { flex: 0 0 auto; display: flex; gap: 8px; align-items: center; margin-top: 2px; }
@media (max-width: 719px) { .pessoas .pessoa-linha { flex-wrap: wrap; } .pessoa-direita { width: 100%; justify-content: flex-end; } }
.resumo-dia-lista { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.resumo-dia-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 8px; background: rgba(29, 29, 31, 0.035); border-left: 4px solid var(--c, var(--cor)); }
.resumo-dia-item .hora { min-width: 46px; font-weight: 600; color: var(--texto-2); }
.resumo-dia-item.alerta { background: rgba(255, 59, 48, 0.08); }

/* requisitos numerados e reordenáveis (Processos) */
.requisito { display: flex; align-items: center; gap: 8px; }
.ordem-botoes { display: inline-flex; gap: 4px; margin-right: 6px; }
.ordem-botoes .btn-icone { width: 28px; height: 28px; min-height: 0; padding: 0; font-size: 11px; border-radius: 6px; }
.ordem-botoes .btn-icone:disabled { opacity: 0.3; }

/* =====================================================================
   V3.8.2 — Processos: cabeçalho arejado e lista de requisitos limpa
   ===================================================================== */
.processos-topo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 22px; }
.processos-topo .densidade { margin: 0 0 0 auto; }
.processos-topo .segmentos { margin: 0; }
.requisito { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 4px; border-bottom: 1px solid var(--linha); transition: background 0.18s ease; }
.requisito:hover { background: rgba(29, 29, 31, 0.025); border-radius: 8px; }
.requisito span { flex: initial; }
.requisito .req-num { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--cor); background: var(--cor-suave); }
.requisito .req-texto { flex: 1; min-width: 0; font-size: 14px; line-height: 1.45; }
.ordem-botoes { display: inline-flex; gap: 2px; margin-right: 2px; opacity: 0.45; transition: opacity 0.18s ease; }
.requisito:hover .ordem-botoes { opacity: 1; }
.req-seta { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--texto-2); display: grid; place-items: center; cursor: pointer; transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease; }
.req-seta:hover:not(:disabled) { background: var(--cor-suave); color: var(--cor); }
.req-seta:active:not(:disabled) { transform: scale(0.9); }
.req-seta:disabled { opacity: 0.25; cursor: default; }
.req-remover { opacity: 0; transition: opacity 0.18s ease; font-size: 12.5px; }
.requisito:hover .req-remover, .req-remover:focus-visible { opacity: 1; }
@media (hover: none) { .req-remover, .ordem-botoes { opacity: 1; } }
.requisito { animation: k-surgir 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* =====================================================================
   V3.9 — chaves, provvigioni, painel de gráficos
   ===================================================================== */
.chaves-status { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 18px; border-radius: 10px; background: rgba(52, 199, 89, 0.08); border: 1px solid rgba(52, 199, 89, 0.25); transition: background 0.3s ease, border-color 0.3s ease; }
.chaves-status.fora { background: rgba(255, 149, 0, 0.1); border-color: rgba(255, 149, 0, 0.35); }
.chaves-icone { width: 44px; height: 44px; border-radius: 12px; background: #fff; display: grid; place-items: center; font-size: 22px; box-shadow: var(--sombra-p); }
.chaves-status .campo { margin: 0; }
.chaves-fotos { display: flex; flex-wrap: wrap; gap: 10px; }
.chaves-fotos .foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.chaves-add { display: grid; place-items: center; width: 120px; height: 120px; border: 1.5px dashed rgba(29, 29, 31, 0.2); border-radius: 8px; color: var(--texto-2); font-size: 13px; cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; }
.chaves-add:hover { border-color: var(--cor); color: var(--cor); background: var(--cor-suave); }
.chaves-hist li { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--linha); animation: k-surgir 0.25s ease both; }
.chaves-hist .ponto { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; }
.chaves-hist .ponto.ok { background: var(--verde); } .chaves-hist .ponto.fora { background: var(--laranja); box-shadow: 0 0 0 4px rgba(255, 149, 0, 0.18); }
.tabela-chaves td { vertical-align: middle; }
.chave-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; }
.chave-chip.fora { background: rgba(255, 149, 0, 0.14); color: #9a5b00; } .chave-chip.guardada { background: rgba(52, 199, 89, 0.14); color: #1f8f3f; }

/* provvigioni com parceiras */
.tabela-prov tr { transition: background 0.2s ease; }
.tabela-prov td.prov-agencia { position: relative; padding-left: 18px; }
.tabela-prov .prov-cor { position: absolute; left: 6px; top: 10px; bottom: 10px; width: 4px; border-radius: 4px; background: var(--faixa, var(--cor)); }
.tabela-prov tr:hover td { background: color-mix(in srgb, var(--faixa, #fff) 14%, transparent); }
.prov-select { min-height: 34px; padding: 0 8px; border: 1px solid var(--linha); border-radius: 6px; background: rgba(255, 255, 255, 0.8); font-size: 12.5px; }
.prov-pgto { border: 0; border-radius: 6px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; transition: transform 0.15s ease, background 0.2s ease; }
.prov-pgto:active { transform: scale(0.95); }
.prov-pgto.pago { background: rgba(52, 199, 89, 0.16); color: #1f8f3f; } .prov-pgto.pendente { background: rgba(255, 149, 0, 0.14); color: #9a5b00; }

/* painel de gráficos (Relatórios) */
.graf-wrap { width: 100%; }
.graf { width: 100%; height: auto; display: block; overflow: visible; }
.graf-barra { transform-box: fill-box; transform-origin: bottom; animation: k-cresce 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; transition: opacity 0.15s ease; cursor: default; }
.graf:hover .graf-barra { opacity: 0.55; } .graf .graf-barra:hover { opacity: 1; }
@keyframes k-cresce { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.painel-graf { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: start; }
@media (max-width: 719px) { .painel-graf { grid-template-columns: 1fr; } }
.graf-totais { display: flex; flex-direction: column; gap: 14px; }
.graf-totais div { display: flex; flex-direction: column; gap: 2px; }
.graf-totais span { font-size: 11.5px; color: var(--texto-2); text-transform: uppercase; letter-spacing: 0.04em; }
.graf-totais b { font-size: 18px; letter-spacing: -0.01em; }
.funil { display: flex; flex-direction: column; gap: 10px; }
.funil-linha { display: grid; grid-template-columns: minmax(120px, 190px) 1fr 32px; gap: 12px; align-items: center; animation: k-surgir 0.3s ease both; }
.funil-nome { font-size: 12.5px; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.funil-barra { height: 12px; border-radius: 6px; background: rgba(29, 29, 31, 0.06); overflow: hidden; }
.funil-barra span { display: block; height: 100%; border-radius: 6px; transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.funil-linha b { text-align: right; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .graf-barra, .funil-linha { animation: none !important; } }

/* busca personalizada: imóveis candidatos */
.busca-lista-imoveis { display: flex; flex-direction: column; gap: 12px; }
.busca-imovel { padding: 14px 16px; border-radius: 10px; background: rgba(29, 29, 31, 0.03); border-left: 4px solid rgba(29, 29, 31, 0.12); transition: background 0.2s ease, border-color 0.2s ease; animation: k-surgir 0.25s ease both; }
.busca-imovel.finalista { border-left-color: var(--laranja); background: rgba(255, 149, 0, 0.06); }
.busca-imovel.escolhido { border-left-color: var(--verde); background: rgba(52, 199, 89, 0.08); }
.busca-imovel-topo { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.busca-visita { margin-top: 8px; padding: 10px 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.7); }
.busca-imovel-acoes { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }

/* relatórios em abas */
.rel-topo { padding: 16px 20px 12px; border-radius: 12px; margin-bottom: 20px; }
.rel-abas { margin: 0 0 12px; }
.rel-controles { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rel-controles .segmentos { margin: 0; }
.rel-datas { display: inline-flex; align-items: center; gap: 8px; }
.rel-datas input { min-height: 38px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--vidro-borda); background: rgba(255, 255, 255, 0.7); }
.rel-periodo { margin-top: 10px; }
.rel-conteudo { animation: k-surgir 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.rel-conteudo .grade { margin-bottom: 20px; }
.rel-kpi .kpi-valor { font-size: clamp(20px, 1.6vw, 26px); }
.rel-kpi .kpi-sub { display: flex; flex-direction: column; gap: 2px; }
.delta { font-size: 12px; font-weight: 600; } .delta.sobe { color: #1f8f3f; } .delta.desce { color: #c1271f; } .delta.neutro { color: var(--texto-3); font-weight: 400; }

/* provvigioni: tabela arejada, chips que não quebram */
.tabela-prov th { white-space: nowrap; }
.tabela-prov td { vertical-align: middle; padding: 16px 12px; }
.tabela-prov td.prov-agencia { padding-left: 22px; min-width: 190px; }
.tabela-prov .prov-cor { top: 14px; bottom: 14px; width: 3px; }
.tabela-prov td.forte a, .tabela-prov td.prov-agencia a { color: var(--texto-2); font-weight: 400; text-decoration: none; }
.tabela-prov td.prov-agencia a:hover { color: var(--cor); }
.prov-select { min-height: 36px; min-width: 150px; }
.prov-pgto { white-space: nowrap; min-height: 30px; }
.prov-pgto.espera { background: rgba(29, 29, 31, 0.06); color: var(--texto-2); }
.prov-totais b { font-weight: 600; color: var(--texto); }

/* agenda compacta (Visão Geral) */
.cal-ev-grupo { font-style: italic; opacity: 0.85; }
.cal-ev-mais { display: block; font-size: 11.5px; color: var(--texto-2); text-decoration: none; padding: 2px 6px; }
.cal-ev-mais:hover { color: var(--cor); }
.compacto .cal-semana { min-height: 0; }
.compacto .cal-coluna { min-height: 120px; }

/* usuários: identidade de um lado, permissões do outro */
.usuario-card { display: grid; grid-template-columns: minmax(240px, 1fr) 2fr; gap: 28px; padding: 22px 24px; border-radius: 12px; margin-bottom: 16px; }
@media (max-width: 900px) { .usuario-card { grid-template-columns: 1fr; gap: 18px; } }
.usuario-ident { display: flex; gap: 14px; align-items: flex-start; }
.avatar-g { width: 44px; height: 44px; font-size: 17px; flex: 0 0 44px; }
.usuario-nome { width: 100%; min-height: 36px; padding: 0 10px; margin-left: -10px; border: 1px solid transparent; border-radius: 8px; background: transparent; font: inherit; font-weight: 600; font-size: 15px; transition: background 0.2s ease, border-color 0.2s ease; }
.usuario-nome:hover { background: rgba(29, 29, 31, 0.04); } .usuario-nome:focus { outline: none; background: #fff; border-color: var(--cor); }
.usuario-resumo { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.usuario-perm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
@media (max-width: 1100px) { .usuario-perm { grid-template-columns: 1fr; } }
.usuario-bloco { display: flex; flex-direction: column; gap: 8px; }
.usuario-rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-3); font-weight: 600; }
.usuario-select { min-height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--linha); background: rgba(255, 255, 255, 0.8); max-width: 320px; }
.usuario-perm .opcoes { gap: 8px; }

/* =====================================================================
   V4.1.1 — ajustes visuais
   ===================================================================== */
.radio-linha input[type="radio"] { width: 16px; height: 16px; min-height: 0; min-width: 0; flex: 0 0 16px; margin: 0; padding: 0; }
.chaves-status { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "icone texto" "acoes acoes"; gap: 14px 16px; align-items: center; }
.chaves-status .chaves-icone { grid-area: icone; }
.chaves-status .chaves-texto { grid-area: texto; min-width: 0; }
.chaves-status .chaves-texto .forte { font-size: 15px; overflow-wrap: normal; word-break: normal; }
.chaves-status .chaves-acoes { grid-area: acoes; display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.chaves-status .chaves-acoes .campo { flex: 1 1 220px; margin: 0; }
.chaves-status .chaves-acoes .btn { flex: 0 0 auto; }
@media (min-width: 1000px) { .chaves-status { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "icone texto acoes"; } .chaves-status .chaves-acoes .campo { flex: 0 0 220px; } }
.chaves-add-grupo { display: flex; gap: 10px; flex-wrap: wrap; }
.chaves-add { flex-direction: column; gap: 6px; text-align: center; font-size: 12.5px; line-height: 1.3; }
.chaves-add-icone { font-size: 22px; }
.pessoa-direita { flex-direction: column; align-items: flex-end; gap: 8px; }
.pessoa-direita .pessoa-alertas { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pessoa-direita > .btn, .pessoa-direita > a.btn { margin-left: 6px; }
@media (min-width: 720px) { .pessoa-direita { flex-direction: row; align-items: center; gap: 12px; } .pessoa-direita .pessoa-alertas { align-items: flex-end; } }
.cal-filtro-todos { font-weight: 600; }

/* =====================================================================
   V4.4 — Frota
   ===================================================================== */
.veiculos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.veiculo-card { position: relative; padding: 18px 20px 16px 24px; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; gap: 12px; animation: k-surgir 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.veiculo-card:hover { transform: translateY(-2px); box-shadow: var(--sombra-m); }
.veiculo-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--faixa); }
.veiculo-card.inativo { opacity: 0.6; }
.veiculo-topo { display: flex; gap: 12px; align-items: center; }
.veiculo-icone { width: 44px; height: 44px; border-radius: 12px; background: rgba(29, 29, 31, 0.05); display: grid; place-items: center; font-size: 22px; flex: 0 0 44px; }
.veiculo-placa { display: inline-block; margin-left: 8px; padding: 1px 8px; border: 1.5px solid rgba(29, 29, 31, 0.35); border-radius: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; vertical-align: middle; }
.veiculo-uso { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 8px; font-size: 13px; }
.veiculo-uso.livre { background: rgba(52, 199, 89, 0.1); } .veiculo-uso.fora { background: rgba(255, 149, 0, 0.12); }
.veiculo-vencimentos { display: flex; flex-wrap: wrap; gap: 6px; }
.venc { font-size: 11.5px; padding: 3px 9px; border-radius: 6px; font-weight: 500; }
.venc.ok { background: rgba(52, 199, 89, 0.12); color: #1f8f3f; } .venc.perto { background: rgba(255, 149, 0, 0.14); color: #9a5b00; } .venc.vencido { background: rgba(255, 59, 48, 0.12); color: #c1271f; font-weight: 600; }
.veiculo-acoes { display: flex; gap: 14px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid var(--linha); }

/* =====================================================================
   V4.6 — Gestão de Imóveis (aluguéis)
   ===================================================================== */
.gestao-nav { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 18px; padding: 6px; border-radius: 12px; background: rgba(29, 29, 31, 0.05); }
.gestao-nav a { padding: 8px 14px; border-radius: 8px; text-decoration: none; color: var(--texto-2); font-size: 13.5px; font-weight: 500; transition: background 0.18s ease, color 0.18s ease; }
.gestao-nav a:hover { color: var(--texto); background: rgba(255, 255, 255, 0.6); }
.gestao-nav a.ativa { background: #fff; color: var(--cor); box-shadow: var(--sombra-p); }
.gestao-imoveis-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.gestao-imovel-card { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 14px 22px; border-radius: 12px; text-decoration: none; color: inherit; position: relative; overflow: hidden; animation: k-surgir 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.gestao-imovel-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--faixa); }
.gestao-imovel-card:hover { transform: translateY(-2px); box-shadow: var(--sombra-m); }
.gestao-ic-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.gestao-ic-codigo { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--texto-3); text-transform: uppercase; }
.gestao-ic-contrato { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--linha); }
.gestao-cabecalho { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 18px 20px 18px 26px; border-radius: 12px; margin-bottom: 14px; position: relative; overflow: hidden; }
.gestao-cabecalho::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--faixa); }
.gestao-cabecalho h2 { font-size: 20px; letter-spacing: -0.01em; }
.gestao-abas { margin-bottom: 14px; overflow-x: auto; }
.gestao-abas button { white-space: nowrap; }
.tabela-parcelas tr.cancelada td { opacity: 0.5; text-decoration: line-through; }
.tabela-parcelas tr.atrasada td:first-child { border-left: 3px solid var(--vermelho); }
.tabela-parcelas .inline { min-height: 34px; padding: 0 8px; border: 1px solid var(--cor); border-radius: 6px; background: #fff; font: inherit; width: 130px; }
.tabela-parcelas .inline.num { text-align: right; width: 110px; }
.acoes-parcela { white-space: nowrap; }
.acao-icone { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-left: 2px; border: 0; border-radius: 8px; background: transparent; color: var(--texto-2); cursor: pointer; font-size: 14px; transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease; }
.acao-icone:hover { background: var(--cor-suave); color: var(--cor); } .acao-icone:active { transform: scale(0.9); }
.acao-icone.ok { color: #1f8f3f; } .acao-icone.ok:hover { background: rgba(52, 199, 89, 0.15); }
.acao-icone.perigo:hover { background: rgba(255, 59, 48, 0.12); color: var(--vermelho); }
.gestao-cards { display: flex; flex-direction: column; gap: 12px; }
.gestao-card { padding: 14px 16px; border-radius: 10px; background: rgba(29, 29, 31, 0.03); border-left: 4px solid rgba(29, 29, 31, 0.15); animation: k-surgir 0.25s ease both; }
.gestao-card.entrada { border-left-color: var(--verde); } .gestao-card.saida { border-left-color: var(--laranja); } .gestao-card.inativo { opacity: 0.6; }
.gestao-card-topo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fotos-mini { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fotos-mini img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; display: block; }
.foto-mini { position: relative; } .foto-mini .foto-x { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: #1d1d1f; color: #fff; cursor: pointer; font-size: 13px; line-height: 1; }
.gestao-linha-tempo { display: flex; flex-direction: column; gap: 14px; }
.gestao-lt-item { display: grid; grid-template-columns: 110px 1fr; gap: 14px; }
.gestao-lt-data { font-weight: 600; font-size: 13px; color: var(--texto-2); padding-top: 2px; position: relative; }
.gestao-lt-corpo { padding: 12px 14px; border-radius: 10px; background: rgba(29, 29, 31, 0.03); }
.gestao-hist-form { display: flex; gap: 8px; margin-bottom: 12px; }
.gestao-hist-form input { flex: 1; }
.gestao-hist li { padding: 10px 12px; border-radius: 8px; background: rgba(29, 29, 31, 0.03); margin-bottom: 8px; animation: k-surgir 0.25s ease both; }
.gestao-hist li.pendente { background: rgba(255, 149, 0, 0.1); border-left: 3px solid var(--laranja); }
.gestao-datas li { display: flex; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--linha); }
.gestao-datas li.passada { opacity: 0.55; }
.gestao-check { padding: 12px 14px; border-radius: 10px; background: rgba(29, 29, 31, 0.03); margin-bottom: 10px; }
.gestao-check-topo { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.check-lista { list-style: none; margin: 0; padding: 0; } .check-lista li { display: flex; gap: 10px; align-items: center; padding: 6px 0; }
.riscado { text-decoration: line-through; color: var(--texto-3); }
.gestao-alertas { list-style: none; margin: 0; padding: 0; }
.gestao-alertas li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--linha); font-size: 13.5px; }
.gestao-alertas li a { flex: 1; color: inherit; text-decoration: none; } .gestao-alertas li a:hover { color: var(--cor); }
.gestao-alertas .ponto { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.gestao-aviso { padding: 10px 12px; border-radius: 8px; background: rgba(30, 126, 140, 0.08); margin-bottom: 8px; }
.gestao-gerar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 14px 16px; border-radius: 10px; margin-bottom: 12px; }
.gestao-gerar > div:first-child { flex: 1; min-width: 220px; }
.gestao-bloco-pessoa { padding: 12px 14px; border-radius: 10px; background: rgba(30, 126, 140, 0.06); }
.pizza { width: 140px; height: 140px; } .pizza path { transition: opacity 0.2s ease; } .pizza:hover path { opacity: 0.6; } .pizza path:hover { opacity: 1; }
.btn-perigo { background: var(--vermelho); color: #fff; }

/* portal do cliente: código na ficha da pessoa */
.portal-codigo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.portal-codigo code { font-family: 'SF Mono', Consolas, monospace; font-size: 20px; font-weight: 600; letter-spacing: 0.12em; padding: 8px 14px; border-radius: 10px; background: rgba(30, 126, 140, 0.1); color: #1e7e8c; }

.grade-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1180px) { .grade-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 719px) { .grade-5 { grid-template-columns: 1fr 1fr; } }

/* gestão: proprietários e inquilinos */
.gestao-pessoas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.gestao-pessoa-card { text-align: left; font: inherit; color: inherit; cursor: pointer; padding: 16px 18px; border-radius: 12px; border: 1px solid transparent; display: flex; flex-direction: column; gap: 8px; animation: k-surgir 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.gestao-pessoa-card:hover { transform: translateY(-2px); box-shadow: var(--sombra-m); }
.gestao-pessoa-card.alerta { border-color: rgba(255, 59, 48, 0.35); }
.gestao-pc-topo { display: flex; gap: 12px; align-items: center; }
.gestao-pc-topo .avatar { width: 40px; height: 40px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-weight: 600; flex: 0 0 40px; }
.gestao-pc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.modal-largo { width: min(100%, 960px); max-width: 960px; overflow-x: hidden; }
.modal-largo .campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .modal-largo .ficha-resumo { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.modal-largo .tabela-rolagem { max-width: 100%; }

.gestao-ficha-pessoa { animation: k-surgir 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* V4.6.5 — sub-abas como links (Gestão e Comercial), no mesmo desenho das abas de Imóveis na Itália */
.subabas a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; text-decoration: none; color: var(--texto-2); font-size: 15px; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.18s ease, border-color 0.18s ease; white-space: nowrap; }
.subabas a:hover { color: var(--texto); }
.subabas a.ativa { color: var(--cor); border-bottom-color: var(--cor); }
.subabas a.ativa .conta { background: var(--cor-suave); color: var(--cor); }
.gestao-abas-topo, .comercial-abas { margin-bottom: 18px; overflow-x: auto; }

/* =====================================================================
   V4.7 — Marketing: funil de leads, postagens, integrações
   ===================================================================== */
.lead-funil { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
@media (max-width: 719px) { .lead-funil { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lead-funil-passo { font: inherit; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--linha); background: rgba(255, 255, 255, 0.7); cursor: pointer; display: flex; flex-direction: column; gap: 2px; border-top: 3px solid var(--c); transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease; }
.lead-funil-passo:hover { transform: translateY(-2px); box-shadow: var(--sombra-p); }
.lead-funil-passo.ativo { background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.lead-funil-passo b { font-size: 22px; letter-spacing: -0.01em; } .lead-funil-passo span { font-size: 12px; color: var(--texto-2); }
.lead-lista { display: flex; flex-direction: column; gap: 8px; }
.lead-linha { padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.7); border: 1px solid var(--linha); cursor: pointer; transition: box-shadow 0.2s ease, border-color 0.2s ease; animation: k-surgir 0.25s ease both; }
.lead-linha:hover { box-shadow: var(--sombra-p); } .lead-linha.aberto { border-color: var(--cor); background: #fff; }
.lead-linha.alerta { border-left: 4px solid var(--laranja); }
.lead-linha-topo { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.lead-linha-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.lead-linha-tempo { text-align: right; min-width: 120px; }
.lead-score { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid; font-weight: 700; font-size: 13px; flex: 0 0 40px; background: #fff; }
.lead-detalhe { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linha); cursor: default; }
.lead-bloco { padding: 10px 12px; border-radius: 10px; background: rgba(29, 29, 31, 0.035); font-size: 13px; }
.lead-bloco > span:first-child { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-3); margin-bottom: 4px; }
.lead-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tabela-postagens tr.atrasada td { background: rgba(255, 59, 48, 0.05); }
.tabela-postagens .segmentos button { min-height: 30px; padding: 0 10px; font-size: 12px; }
.integracoes .passos { padding-left: 20px; line-height: 1.6; } .integracoes .passos li { margin-bottom: 8px; }
.integracoes code { background: rgba(29, 29, 31, 0.06); padding: 1px 6px; border-radius: 4px; font-size: 12.5px; }
.integracoes .caixa-codigo { display: block; padding: 10px 12px; border-radius: 8px; background: rgba(29, 29, 31, 0.05); font-size: 12.5px; word-break: break-all; }
.integracoes .codigo { background: #1d1d1f; color: #f5f5f7; padding: 14px 16px; border-radius: 10px; font-size: 12px; overflow-x: auto; }

/* =====================================================================
   V4.7.1 — procuração (prévia) e folhas de pagamento
   ===================================================================== */
.alerta-lista div.atencao { background: rgba(255, 149, 0, 0.09); color: #9a5b00; border-left-color: var(--laranja); }
.folha-acao { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.folha-previa { display: grid; gap: 8px; margin: 14px 0 12px; }
.folha-previa div { display: grid; gap: 2px; padding: 10px 14px; border-radius: 6px; background: rgba(29, 29, 31, 0.035); }
.folha-previa span { font-size: 12px; color: var(--texto-2); }
.folha-previa b { font-size: 13.5px; font-weight: 500; }
.folha-conta { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 6px; background: rgba(44, 83, 117, 0.06); margin-bottom: 8px; }
.folha-conta span { font-size: 12.5px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.folha-info { min-height: 44px; display: flex; align-items: center; font-weight: 500; }
.folha-pagos { display: grid; gap: 6px; margin-bottom: 4px; }
.folha-pago { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 11px 14px; border: 0; border-radius: 8px; background: rgba(29, 29, 31, 0.04); color: var(--texto); font: inherit; text-align: left; cursor: pointer; transition: background 0.18s ease, transform 0.12s ease; }
.folha-pago:hover { background: rgba(29, 29, 31, 0.07); }
.folha-pago:active { transform: scale(0.99); }
.folha-pago.feito { background: rgba(52, 199, 89, 0.1); }
.folha-pago.feito:hover { background: rgba(52, 199, 89, 0.15); }
.folha-pago-check { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid rgba(29, 29, 31, 0.22); display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; transition: background 0.18s ease, border-color 0.18s ease; }
.folha-pago.feito .folha-pago-check { background: var(--verde); border-color: var(--verde); }
.folha-pago-nome { display: flex; flex-direction: column; gap: 1px; font-size: 13.5px; font-weight: 500; }
.folha-pago-nome small { font-size: 12px; font-weight: 400; color: var(--texto-2); }
.folha-pago-valor { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .folha-resumo > div { padding: 12px; }
  .folha-resumo > div > div { padding: 0; background: none; }
  .folha-resumo .v { font-size: 17px; margin: 6px 0 4px; }
}
@media (prefers-reduced-motion: reduce) { .folha-pago, .folha-pago-check { transition: none; } }

/* =====================================================================
   V4.8 — campos que parecem campos, cartão de pessoa harmônico, chaves,
   sub-abas sem rolagem fantasma, Gestão no mesmo padrão, varredura das integrações
   ===================================================================== */
:root { --campo: #f0f0f4; --campo-hover: #e8e8ed; --campo-borda: rgba(29, 29, 31, 0.08); --sombra-m: 0 10px 28px rgba(31, 41, 72, 0.1); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- campos: cinza claro = dá para escrever; ao clicar ficam brancos com o anel da cor da empresa ---- */
.campo input, .campo textarea, .campo select,
.linha-form input, .linha-form select, .escolher input, .busca-sel input, .escolher-valor,
.barra-filtros input[type='search'], .barra-filtros select, .periodo input[type='date'], .rel-datas input,
.prov-select, .usuario-select, .gestao-hist-form input {
  background-color: var(--campo); border: 1px solid var(--campo-borda); color: var(--texto);
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.2s ease;
}
@media (hover: hover) {
  .campo input:hover, .campo textarea:hover, .campo select:hover, .linha-form input:hover, .linha-form select:hover,
  .escolher input:hover, .busca-sel input:hover, .barra-filtros input[type='search']:hover, .barra-filtros select:hover,
  .periodo input[type='date']:hover, .rel-datas input:hover, .prov-select:hover, .usuario-select:hover, .gestao-hist-form input:hover {
    background-color: var(--campo-hover); border-color: rgba(29, 29, 31, 0.14);
  }
}
.campo input:focus, .campo textarea:focus, .campo select:focus, .linha-form input:focus, .linha-form select:focus,
.escolher input:focus, .busca-sel input:focus, .barra-filtros input[type='search']:focus, .barra-filtros select:focus,
.periodo input[type='date']:focus, .rel-datas input:focus, .prov-select:focus, .usuario-select:focus, .gestao-hist-form input:focus {
  outline: none; background-color: #fff; border-color: var(--cor); box-shadow: 0 0 0 3px var(--cor-suave);
}
.campo input::placeholder, .campo textarea::placeholder, .linha-form input::placeholder, .escolher input::placeholder,
.busca-sel input::placeholder, .gestao-hist-form input::placeholder, .barra-filtros input::placeholder { color: var(--texto-3); opacity: 1; }
.campo input:disabled, .campo select:disabled, .campo textarea:disabled, .campo input[readonly] { background-color: transparent; border-style: dashed; color: var(--texto-2); cursor: not-allowed; }
.campo-alerta input { border-color: rgba(255, 59, 48, 0.45); }
.gestao-hist-form input { min-height: 44px; padding: 0 14px; border-radius: 6px; }
.gestao-hist-form .btn { flex: 0 0 auto; }

/* ---- pessoa: cartão limpo, alerta discreto (ponto no avatar + selo ao lado do nome), ações à direita ---- */
.pessoas .pessoa-linha { gap: 14px; padding: 14px 12px; border-bottom: 1px solid var(--linha); border-left: 0; border-radius: 0; background: transparent; transition: background-color 0.18s ease; }
.pessoas .pessoa-linha:last-child { border-bottom: 0; }
.pessoas .pessoa-linha.alerta { background: transparent; border-left: 0; border-radius: 0; padding-left: 12px; }
@media (hover: hover) { .pessoas .pessoa-linha:hover { background: rgba(29, 29, 31, 0.03); } }
.pessoa-avatar { position: relative; flex: 0 0 38px; width: 38px; height: 38px; margin-top: 0; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 600; color: var(--cor); background: var(--cor-suave); }
.pessoa-avatar.com-alerta::after { content: ''; position: absolute; top: -1px; right: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--vermelho); box-shadow: 0 0 0 2px #fff; }
.pessoa-corpo { gap: 7px; padding-top: 1px; }
.pessoa-topo { gap: 6px 8px; }
.pessoa-nome { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.pessoa-topo .chip { font-size: 11px; padding: 2px 8px; }
.vinculo-mini { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; padding: 3px 10px 3px 8px; border: 0; border-radius: 6px; background: rgba(29, 29, 31, 0.05); color: var(--texto); line-height: 1.4; }
.vinculo-mini::before { content: ''; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--vc, var(--texto-3)); }
.pessoa-direita { gap: 10px; margin-top: 4px; }
.pessoa-direita .btn-texto.perigo { color: var(--texto-3); min-height: 32px; padding: 4px 8px; border-radius: 6px; transition: color 0.18s ease, background-color 0.18s ease; }
@media (hover: hover) {
  .pessoa-linha:hover .pessoa-direita .btn-texto.perigo { color: var(--texto-2); }
  .pessoa-direita .btn-texto.perigo:hover { color: var(--vermelho); background: rgba(255, 59, 48, 0.08); text-decoration: none; }
}

/* ---- chaves: o texto nunca mais fica espremido; lado a lado só quando o próprio painel é largo ---- */
.chaves-status { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "icone texto" "acoes acoes"; }
@media (min-width: 1000px) { .chaves-status { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "icone texto" "acoes acoes"; } .chaves-status .chaves-acoes .campo { flex: 1 1 220px; } }
.painel:has(> .chaves-status) { container-type: inline-size; }
@container (min-width: 640px) {
  .chaves-status { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "icone texto acoes"; }
  .chaves-status .chaves-acoes .campo { flex: 0 0 220px; }
}
.chaves-status .chaves-texto, .chaves-status .chaves-texto * { overflow-wrap: break-word; word-break: normal; }
.chaves-status .campo select { background-color: rgba(255, 255, 255, 0.85); }

/* ---- cartões de resumo: um cartão só (acabou a caixa dentro da caixa) ---- */
.ficha-resumo > div div { padding: 0; border-radius: 0; background: none; }
.ficha-resumo > div { border: 1px solid rgba(29, 29, 31, 0.06); }
.ficha-resumo .v { margin-top: 6px; line-height: 1.2; }

/* ---- sub-abas: sem a barrinha de rolagem fantasma; links (Gestão, Comercial) com o mesmo sublinhado animado ---- */
.subabas { border-bottom: 0; box-shadow: inset 0 -1px 0 var(--linha); overflow-y: hidden; overscroll-behavior-x: contain; }
.subabas button, .subabas a { margin-bottom: 0; border-bottom: 0; }
.subabas button::after { bottom: 0; }
.subabas a { position: relative; border-radius: 6px 6px 0 0; transition: color 0.18s ease, background-color 0.18s ease, transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1); }
.subabas a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px; background: var(--cor); transform: scaleX(0); transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
.subabas a.ativa::after { transform: scaleX(1); }
@media (hover: hover) { .subabas a:not(.ativa):hover { background: rgba(29, 29, 31, 0.06); color: var(--texto); } }
.subabas a:active { transform: scale(0.97); }
.gestao-abas, .gestao-abas-topo, .comercial-abas { overflow-y: hidden; }
/* o conteúdo de cada sub-aba entra suave ao trocar */
.subabas ~ * { animation: k-surgir 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.gestao-abas + .painel > *:not(.painel-cabecalho) { animation: k-surgir 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.ver-mais { margin-top: 6px; font-size: 13px; }
.folha-ref { margin-top: 10px; }

/* ---- Marketing › Integrações: varredura ---- */
.vr-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 14px; }
.vr-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 12px; border-radius: 6px; font-size: 12.5px; font-weight: 500; }
.vr-pill i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.vr-pill.ok { background: rgba(52, 199, 89, 0.12); color: #1f8f3f; }
.vr-pill.atencao { background: rgba(255, 149, 0, 0.14); color: #9a5b00; }
.vr-pill.off { background: rgba(255, 59, 48, 0.1); color: #c1271f; }
.vr-hora { margin-left: auto; font-size: 12px; color: var(--texto-3); }
.vr-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; transition: opacity 0.2s ease; }
.vr-lista.carregando { opacity: 0.55; }
.vr-item { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 14px; padding: 14px 16px; border-radius: 10px; background: rgba(29, 29, 31, 0.03); border-left: 3px solid transparent; animation: k-surgir 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; transition: background-color 0.18s ease; }
.vr-item.ok { border-left-color: var(--verde); }
.vr-item.atencao { border-left-color: var(--laranja); background: rgba(255, 149, 0, 0.05); }
.vr-item.off { border-left-color: var(--vermelho); background: rgba(255, 59, 48, 0.04); }
.vr-ponto { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; }
.vr-item.ok .vr-ponto { background: var(--verde); animation: vr-pulso 2.6s ease-in-out infinite; }
.vr-item.atencao .vr-ponto { background: var(--laranja); box-shadow: 0 0 0 4px rgba(255, 149, 0, 0.18); }
.vr-item.off .vr-ponto { background: var(--vermelho); box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.16); }
@keyframes vr-pulso { 0%, 100% { box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.22); } 50% { box-shadow: 0 0 0 7px rgba(52, 199, 89, 0.05); } }
.vr-topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.vr-topo b { font-size: 14px; font-weight: 600; }
.vr-estado { font-size: 12px; font-weight: 600; white-space: nowrap; }
.vr-item.ok .vr-estado { color: #1f8f3f; } .vr-item.atencao .vr-estado { color: #9a5b00; } .vr-item.off .vr-estado { color: #c1271f; }
.vr-texto { font-size: 13px; color: var(--texto-2); margin-top: 2px; }
.vr-detalhes { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--texto); display: flex; flex-direction: column; gap: 4px; }
.vr-botao .vr-seta { display: inline-block; margin-right: 6px; }
.vr-botao.girando .vr-seta { animation: vr-girar 0.9s linear infinite; }
@keyframes vr-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vr-item, .vr-item .vr-ponto, .vr-botao .vr-seta, .subabas ~ *, .gestao-abas + .painel > * { animation: none !important; } }

/* V4.8 — acertos vistos no teste: título do painel não some atrás dos botões; cartão da gestão sem texto sublinhado; seletores dentro de tabelas no padrão de campo */
.painel-cabecalho { flex-wrap: wrap; row-gap: 8px; }
.painel-cabecalho > .painel-toggle, .painel-cabecalho > h2 { flex: 1 0 auto; max-width: 100%; }
.painel-cabecalho > .painel-toggle h2 { white-space: normal; }
.gestao-imovel-card:hover, .gestao-imovel-card:hover * { text-decoration: none !important; }
.painel td > select { background-color: var(--campo) !important; border: 1px solid var(--campo-borda) !important; border-radius: 6px; min-height: 32px; padding: 0 8px; transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.2s ease; }
.painel td > select:focus { outline: none; background-color: #fff !important; border-color: var(--cor) !important; box-shadow: 0 0 0 3px var(--cor-suave); }
.select-campo { background-color: var(--campo); border: 1px solid var(--campo-borda); color: var(--texto); transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.2s ease; }
@media (hover: hover) { .select-campo:hover { background-color: var(--campo-hover); border-color: rgba(29, 29, 31, 0.14); } }
.select-campo:focus { outline: none; background-color: #fff; border-color: var(--cor); box-shadow: 0 0 0 3px var(--cor-suave); }

/* =====================================================================
   V4.8.1 — ficha da pessoa: cartão de apresentação, dados em grade, nada encavalado
   ===================================================================== */
.pessoa-pagina .voltar { margin-bottom: 10px; }
.pp-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px 22px; align-items: center; padding: 22px 24px; margin-bottom: 18px; border-radius: 14px; animation: k-surgir 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.pp-avatar { width: 64px; height: 64px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 600; letter-spacing: 0.02em; color: #fff; background: var(--cor); background: linear-gradient(145deg, color-mix(in srgb, var(--cor) 70%, #fff), var(--cor)); box-shadow: 0 6px 18px rgba(31, 41, 72, 0.16); }
.pp-hero-corpo { min-width: 0; display: grid; gap: 8px; }
.pp-hero h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: break-word; }
.pp-hero-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13.5px; }
.pp-vinculos { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-hero-acoes { display: flex; gap: 8px; align-self: start; }
.pp-acao { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 74px; min-height: 62px; padding: 8px 10px; border: 0; border-radius: 12px; background: var(--cor-suave); color: var(--cor); font: inherit; font-size: 12px; font-weight: 500; text-decoration: none; cursor: pointer; transition: background-color 0.18s ease, transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease; }
.pp-acao, .pp-acao:hover, .pp-acao:hover * { text-decoration: none !important; }
@media (hover: hover) { .pp-acao:hover { background: color-mix(in srgb, var(--cor) 16%, transparent); transform: translateY(-1px); } }
.pp-acao:active { transform: scale(0.96); }
.pp-acao:focus-visible { outline: 2px solid var(--cor); outline-offset: 2px; }
.pp-acao-principal { background: var(--cor); color: #fff; }
@media (hover: hover) { .pp-acao-principal:hover { background: var(--cor); box-shadow: 0 6px 16px rgba(31, 41, 72, 0.2); } }

.pp-grade { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pp-col { display: grid; gap: 16px; align-content: start; min-width: 0; }
.pp-largo { grid-column: 1 / -1; min-width: 0; }
.pp-grade .painel { margin: 0; }
.pp-col > *, .pp-largo > * { animation: k-surgir 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.pp-col > :nth-child(2) { animation-delay: 60ms; } .pp-col > :nth-child(3) { animation-delay: 120ms; } .pp-col > :nth-child(4) { animation-delay: 180ms; }
.pp-largo > * { animation-delay: 200ms; }

.pp-grupo { margin: 0 0 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-3); }
.pp-bloco + .pp-bloco { margin-top: 22px; }
.pp-dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; margin: 0; }
.pp-dado { min-width: 0; padding: 11px 0 12px; border-bottom: 1px solid var(--linha); }
.pp-dado.largo { grid-column: 1 / -1; }
.pp-dado dt { margin-bottom: 3px; font-size: 12px; color: var(--texto-2); overflow-wrap: normal; word-break: normal; }
.pp-dado dd { margin: 0; display: flex; align-items: flex-start; gap: 6px; font-size: 14.5px; line-height: 1.45; color: var(--texto); overflow-wrap: break-word; word-break: normal; }
.pp-dado dd > span { min-width: 0; }
.pp-mono { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.pp-copiar { flex: 0 0 auto; display: inline-grid; place-items: center; width: 26px; height: 26px; margin-top: -2px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--texto-3); cursor: pointer; opacity: 0; transition: opacity 0.18s ease, background-color 0.18s ease, color 0.18s ease, transform 0.15s ease; }
.pp-dado:hover .pp-copiar, .pp-copiar:focus-visible, .pp-copiar.ok { opacity: 1; }
@media (hover: none) { .pp-copiar { opacity: 1; } }
.pp-copiar:hover { background: var(--cor-suave); color: var(--cor); }
.pp-copiar:active { transform: scale(0.9); }
.pp-copiar.ok { color: #1f8f3f; background: rgba(52, 199, 89, 0.12); animation: k-pop 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }

.pp-conjuge { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; }
.pp-avatar-p { width: 44px; height: 44px; font-size: 15px; color: var(--cor); background: var(--cor-suave); box-shadow: none; }
.pp-conjuge-corpo { min-width: 0; display: grid; gap: 2px; }
.pp-conjuge-nome { font-size: 15px; font-weight: 600; overflow-wrap: break-word; }
.pp-conjuge .pp-dados { margin-top: 6px; }
.pp-conjuge .pp-dado:last-child, .pp-conjuge .pp-dado:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.pp-obs { margin: 0; white-space: pre-wrap; font-size: 14px; line-height: 1.6; }
.pp-rodape { margin: 22px 0 4px; text-align: center; }
/* na ficha, a linha de anexar documentos quebra em duas em vez de espremer a descrição */
.pessoa-pagina .linha-form select { flex: 1 1 170px; }
.pessoa-pagina .linha-form input { flex: 1 1 220px; }
.pessoa-pagina .portal-codigo { margin-bottom: 12px; }

@media (max-width: 980px) { .pp-grade { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 719px) {
  .pp-hero { grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; padding: 18px; }
  .pp-avatar { width: 54px; height: 54px; font-size: 19px; }
  .pp-hero h1 { font-size: 22px; }
  .pp-hero-acoes { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .pp-acao { min-width: 0; }
}
@media (max-width: 560px) { .pp-dados { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .pp-hero, .pp-col > *, .pp-largo > *, .pp-copiar.ok { animation: none !important; } }
.pp-vinculos .vinculo-mini { white-space: normal; max-width: 100%; }

/* =====================================================================
   V4.8.2 — Gestão › Notificações e alerta de possível atraso
   ===================================================================== */
.conta.conta-alerta, .subabas a .conta.conta-alerta, .gestao-abas-topo a .conta.conta-alerta { background: rgba(255, 59, 48, 0.12); color: #c1271f; }
.alerta-atraso { display: inline-block; margin-right: 6px; font-size: 14px; line-height: 1; vertical-align: -1px; cursor: help; animation: notif-pulso 2.4s ease-in-out infinite; }
@keyframes notif-pulso { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
.notif-banner { margin: 0 0 14px; padding: 12px 16px; border-radius: 12px; background: rgba(255, 149, 0, 0.1); color: #8a4f00; font-size: 13.5px; line-height: 1.5; animation: k-surgir 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.notif-resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
.notif-resumo > div { display: grid; gap: 2px; padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(29, 29, 31, 0.06); animation: k-surgir 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.notif-resumo > div:nth-child(2) { animation-delay: 50ms; } .notif-resumo > div:nth-child(3) { animation-delay: 100ms; }
.notif-resumo b { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.notif-resumo span { font-size: 12.5px; color: var(--texto-2); }
.notif-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.notif-barra input[type='search'] { flex: 1 1 240px; }
.notif-dia + .notif-dia { margin-top: 18px; }
.notif-dia-rotulo { margin: 0 0 6px 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-3); }
.notif-lista, .notif-atrasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.notif-item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px; border-radius: 12px; background: rgba(29, 29, 31, 0.025); transition: background-color 0.18s ease; animation: k-surgir 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@media (hover: hover) { .notif-item:hover { background: rgba(29, 29, 31, 0.045); } }
.notif-icone { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; background: var(--cor-suave); }
.notif-icone.recebida { background: rgba(52, 199, 89, 0.12); }
.notif-icone.equipe { background: rgba(255, 59, 48, 0.1); }
.notif-corpo { all: unset; box-sizing: border-box; display: grid; gap: 2px; min-width: 0; cursor: pointer; }
.notif-corpo:focus-visible { outline: 2px solid var(--cor); outline-offset: 3px; border-radius: 6px; }
.notif-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.notif-topo b { font-size: 14px; font-weight: 600; }
.notif-topo time { flex: 0 0 auto; font-size: 12px; color: var(--texto-3); }
.notif-quem { font-size: 12.5px; color: var(--texto-2); overflow-wrap: anywhere; }
.notif-assunto { font-size: 12.5px; font-weight: 500; color: var(--texto); margin-top: 4px; }
.notif-texto { margin-top: 2px; font-size: 13.5px; line-height: 1.5; color: var(--texto); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-item.aberto .notif-texto { display: block; overflow: visible; margin-top: 6px; }
.notif-status { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: 230px; text-align: right; }
.notif-atrasos li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: rgba(255, 59, 48, 0.045); animation: k-surgir 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.notif-atraso-corpo { min-width: 0; }
.notif-quando { text-align: right; font-size: 13px; font-weight: 500; }
.notif-quando span { display: block; font-size: 12px; font-weight: 500; color: #c1271f; }
.notif-como { margin-top: 12px; }
@media (max-width: 640px) {
  .notif-resumo { grid-template-columns: minmax(0, 1fr); }
  .notif-item, .notif-atrasos li { grid-template-columns: 32px minmax(0, 1fr); }
  .notif-status, .notif-quando { grid-column: 2; align-items: flex-start; text-align: left; max-width: none; }
  .notif-icone { width: 32px; height: 32px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .alerta-atraso, .notif-item, .notif-atrasos li, .notif-resumo > div, .notif-banner { animation: none !important; } }

/* =====================================================================
   V4.8.4 — Marketing › Conversão
   ===================================================================== */
.conv-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.conv-diagnostico { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; margin: 0 0 14px; padding: 14px 16px; border-radius: 12px; animation: k-surgir 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.conv-diagnostico p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.conv-diagnostico > span { font-size: 18px; line-height: 1.3; }
.conv-diagnostico.ok { background: rgba(52, 199, 89, 0.1); }
.conv-diagnostico.atencao { background: rgba(255, 149, 0, 0.1); }
.conv-diagnostico.neutro { background: rgba(29, 29, 31, 0.04); }
.conv-rolagem { overflow-x: auto; }
.conv-tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.conv-tabela th { padding: 8px 10px; font-size: 12px; font-weight: 500; color: var(--texto-2); text-align: left; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.conv-tabela td { padding: 11px 10px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.conv-tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.conv-tabela tfoot td { border-bottom: 0; font-weight: 500; color: var(--texto-2); }
.conv-fonte { display: block; font-size: 11px; color: var(--texto-3); }
.conv-taxa { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.conv-taxa b { min-width: 46px; font-variant-numeric: tabular-nums; }
.conv-barra { flex: 1; height: 6px; border-radius: 3px; background: rgba(29, 29, 31, 0.07); overflow: hidden; }
.conv-barra i { display: block; height: 100%; border-radius: 3px; background: var(--cor); transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.conv-grade { width: 100%; border-collapse: collapse; }
.conv-grade th { padding: 6px 6px 8px; font-size: 12px; font-weight: 500; color: var(--texto-2); text-align: left; white-space: nowrap; }
.conv-grade td { padding: 4px 6px; }
.conv-grade .conv-mes { font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.conv-grade input { width: 100%; min-width: 76px; min-height: 40px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--campo-borda); background-color: var(--campo); color: var(--texto); font: inherit; text-align: right; font-variant-numeric: tabular-nums; transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.2s ease; }
.conv-grade input::placeholder { color: var(--texto-3); opacity: 1; }
@media (hover: hover) { .conv-grade input:hover { background-color: var(--campo-hover); } }
.conv-grade input:focus { outline: none; background-color: #fff; border-color: var(--cor); box-shadow: 0 0 0 3px var(--cor-suave); }
.conv-negocios { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 12px; }
.conv-negocio { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(29, 29, 31, 0.06); }
.conv-negocio b { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.conv-negocio span { font-size: 12.5px; color: var(--texto-2); }
.conv-sem-origem { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 149, 0, 0.08); }
.conv-sem-origem p { margin: 0 0 6px; font-size: 13.5px; color: #8a4f00; }
.conv-sem-origem ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.conv-sem-origem li { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13.5px; }
@media (prefers-reduced-motion: reduce) { .conv-diagnostico { animation: none; } .conv-barra i { transition: none; } }
.conv-tabela { min-width: 520px; }
.conv-grade { min-width: 640px; }
.conv-tabela th, .conv-tabela td, .conv-grade th, .conv-grade td { overflow-wrap: normal; word-break: normal; }
.conv-tabela td:first-child { white-space: nowrap; }

/* =====================================================================
   V4.8.5 — Marketing › Portas de entrada
   ===================================================================== */
.portas-explica { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; margin-bottom: 16px; }
.portas-explica p { flex: 1 1 420px; margin: 0; font-size: 14px; line-height: 1.6; color: var(--texto-2); }
.portas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.porta-card { display: grid; gap: 9px; align-content: start; padding: 16px 18px; border-radius: 14px; background: rgba(255, 255, 255, 0.86); border: 1px solid rgba(29, 29, 31, 0.06); animation: k-surgir 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; transition: box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease; }
@media (hover: hover) { .porta-card:hover { box-shadow: var(--sombra-m); transform: translateY(-1px); } }
.porta-card.pausada { opacity: 0.6; }
.porta-direto { background: rgba(29, 29, 31, 0.025); border-style: dashed; }
.porta-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.porta-topo b { font-size: 15px; font-weight: 600; line-height: 1.35; }
.porta-texto { padding: 10px 13px; border-radius: 12px 12px 12px 4px; background: rgba(37, 211, 102, 0.1); font-size: 14px; line-height: 1.45; color: var(--texto); overflow-wrap: anywhere; }
.porta-numeros { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; font-size: 13px; color: var(--texto-2); }
.porta-numeros b { margin-right: 4px; font-size: 16px; font-weight: 600; color: var(--texto); }
.porta-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.porta-acoes .btn.copiado { background: #1f8f3f; color: #fff; }
.porta-previa { display: grid; gap: 6px; margin: 12px 0 14px; }
@media (prefers-reduced-motion: reduce) { .porta-card { animation: none; transition: none; } }

/* =====================================================================
   V4.9 — celular: tela inicial (busca + agenda) e folha "Criar"
   (esses elementos só existem abaixo de 720 px; nada aqui muda o computador)
   ===================================================================== */
.ic { display: grid; gap: 16px; padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.ic-cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 2px 0; animation: k-surgir 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.ic-ola { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.ic-pilula { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; background: rgba(255, 59, 48, 0.1); color: #c1271f; font-size: 13.5px; font-weight: 600; text-decoration: none; }
/* busca */
.ic-campo { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 8px 0 16px; border-radius: 16px; background: #fff; border: 1px solid rgba(29, 29, 31, 0.08); box-shadow: 0 6px 20px rgba(31, 41, 72, 0.08); color: var(--texto-2); transition: box-shadow 0.2s ease, border-color 0.2s ease; }
.ic-campo:focus-within { border-color: var(--cor); box-shadow: 0 0 0 4px var(--cor-suave), 0 6px 20px rgba(31, 41, 72, 0.08); }
.ic-campo input { flex: 1; min-width: 0; padding: 14px 0; border: 0; background: transparent; font: inherit; font-size: 17px; color: var(--texto); outline: none; -webkit-appearance: none; appearance: none; }
.ic-campo input::placeholder { color: var(--texto-3); }
.ic-campo input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ic-limpar, .ic-mic { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 12px; background: transparent; color: var(--texto-2); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ic-mic { background: var(--cor-suave); color: var(--cor); }
.ic-mic.ouvindo { background: #ff3b30; color: #fff; animation: ic-pulso 1.2s ease-in-out infinite; }
@keyframes ic-pulso { 50% { box-shadow: 0 0 0 8px rgba(255, 59, 48, 0.18); } }
.ic-resultados { display: grid; gap: 16px; margin-top: 14px; animation: k-surgir 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.ic-grupo-titulo { display: flex; justify-content: space-between; margin: 0 4px 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-3); }
.ic-grupo ul, .ic-agenda ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ic-res-linha { display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 4px; border-radius: 14px; background: #fff; border: 1px solid rgba(29, 29, 31, 0.06); }
.ic-res { all: unset; box-sizing: border-box; flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 6px 8px; border-radius: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 0.15s ease; }
.ic-res:active { background: rgba(29, 29, 31, 0.05); }
.ic-av { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--cor-suave); color: var(--cor); font-size: 14px; font-weight: 600; }
.ic-logo { flex: 0 0 34px; width: 34px; height: 34px; object-fit: contain; }
.ic-res-txt { min-width: 0; display: grid; gap: 1px; }
.ic-res-txt b { font-size: 15.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ic-res-txt small { font-size: 13px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ic-res-acoes { display: flex; gap: 6px; }
.ic-acao { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--cor-suave); color: var(--cor); text-decoration: none; transition: transform 0.12s ease; }
.ic-acao.whats { background: rgba(37, 211, 102, 0.14); color: #128c4a; }
.ic-acao:active, .ic-ir:active { transform: scale(0.94); }
.ic-vazio { margin: 6px 4px; font-size: 14.5px; color: var(--texto-2); }
/* agenda de hoje e amanhã */
.ic-corpo { display: grid; gap: 12px; }
.ic-agenda { padding: 16px; border-radius: 18px; background: #fff; border: 1px solid rgba(29, 29, 31, 0.06); box-shadow: 0 6px 20px rgba(31, 41, 72, 0.06); animation: k-surgir 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.ic-agenda + .ic-agenda { margin-top: 12px; animation-delay: 60ms; }
.ic-agenda.hoje { border-top: 4px solid var(--cor); }
.ic-agenda-topo { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.ic-agenda-topo b { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.ic-agenda-topo span { flex: 1; display: inline-block; font-size: 13.5px; color: var(--texto-2); }
.ic-agenda-topo span::first-letter { text-transform: uppercase; }
.ic-agenda-topo em { min-width: 28px; height: 28px; padding: 0 9px; border-radius: 14px; display: grid; place-items: center; font-style: normal; font-size: 13.5px; font-weight: 700; background: var(--cor-suave); color: var(--cor); }
.ic-agenda-vazia { margin: 4px 2px 2px; font-size: 14.5px; color: var(--texto-2); }
.ic-ev { display: flex; align-items: center; gap: 6px; border-radius: 14px; background: rgba(29, 29, 31, 0.03); border-left: 4px solid var(--ev, var(--cor)); transition: background-color 0.18s ease; }
.ic-ev.proximo { background: #fff; box-shadow: 0 6px 18px rgba(31, 41, 72, 0.1); }
.ic-ev.passou { opacity: 0.5; }
.ic-ev.feito .ic-ev-txt b { text-decoration: line-through; }
.ic-ev-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 8px 12px 12px; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.ic-ev-link, .ic-ev-link:hover, .ic-ev-link:hover * { text-decoration: none !important; }
.ic-ev-hora { flex: 0 0 52px; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texto); }
.ic-ev-hora.dia { font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--texto-2); }
.ic-ev-txt { min-width: 0; display: grid; gap: 2px; }
.ic-ev-txt b { font-size: 15.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ic-ev-txt small { font-size: 13px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ic-ev-txt em { justify-self: start; margin-bottom: 2px; padding: 2px 8px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; background: var(--ev, var(--cor)); }
.ic-ir { flex: 0 0 auto; display: grid; justify-items: center; gap: 2px; margin-right: 8px; padding: 8px 10px; border-radius: 12px; background: var(--cor-suave); color: var(--cor); font-size: 11px; font-weight: 700; text-decoration: none; transition: transform 0.12s ease; }
.ic-link { justify-self: center; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 500; color: var(--cor); text-decoration: none; cursor: pointer; }
.ic-painel { color: var(--texto-2); }
.ic-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.ic-chips::-webkit-scrollbar { display: none; }
.ic-chips a { flex: 0 0 auto; max-width: 220px; padding: 10px 14px; border-radius: 999px; background: #fff; border: 1px solid rgba(29, 29, 31, 0.08); font-size: 14px; color: var(--texto); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* botão + (alcance do polegar) */
.ic-fab { position: fixed; right: 18px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 40; width: 60px; height: 60px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--cor); color: #fff; box-shadow: 0 10px 28px rgba(31, 41, 72, 0.3); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1); animation: ic-fab-entra 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both; }
.ic-fab:active { transform: scale(0.92); }
@keyframes ic-fab-entra { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
/* folha "Criar" (sobe de baixo) */
body.cr-aberta { overflow: hidden; }
.cr-fundo { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; background: rgba(0, 0, 0, 0.32); animation: cr-fundo 0.2s ease both; }
.cr-fundo.saindo { animation: cr-fundo-sai 0.18s ease both; }
@keyframes cr-fundo { from { background: rgba(0, 0, 0, 0); } }
@keyframes cr-fundo-sai { to { background: rgba(0, 0, 0, 0); } }
.cr-folha { width: 100%; max-height: 92vh; max-height: 92dvh; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom, 0px); border-radius: 20px 20px 0 0; background: #f5f5f7; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18); animation: cr-sobe 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.cr-fundo.saindo .cr-folha { animation: cr-desce 0.18s ease-in both; }
@keyframes cr-sobe { from { transform: translateY(100%); } }
@keyframes cr-desce { to { transform: translateY(100%); } }
.cr-alca { width: 38px; height: 5px; margin: 8px auto 2px; border-radius: 3px; background: rgba(29, 29, 31, 0.18); }
.cr-topo { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: 4px 8px 8px; }
.cr-topo b { text-align: center; font-size: 17px; font-weight: 600; }
.cr-voltar, .cr-fechar { width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; font-size: 20px; color: var(--texto-2); cursor: pointer; }
.cr-voltar { font-size: 32px; line-height: 1; color: var(--cor); }
.cr-conteudo { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 4px 16px 22px; animation: k-surgir 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.cr-atalhos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cr-atalho { display: grid; justify-items: start; align-content: start; gap: 3px; min-height: 116px; padding: 16px; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 2px 10px rgba(31, 41, 72, 0.06); font: inherit; text-align: left; color: var(--texto); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.12s ease; }
.cr-atalho:active { transform: scale(0.97); }
.cr-atalho-ico { margin-bottom: 8px; font-size: 28px; line-height: 1; }
.cr-atalho b { font-size: 16.5px; font-weight: 600; }
.cr-atalho small { font-size: 13px; color: var(--texto-2); }
.cr-mais-titulo { margin: 20px 4px 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-3); }
.cr-mais { border-radius: 16px; background: #fff; overflow: hidden; }
.cr-linha { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 10px 16px; border-bottom: 1px solid var(--linha); font-size: 15.5px; color: var(--texto); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cr-linha:last-child { border-bottom: 0; }
.cr-linha:active { background: rgba(29, 29, 31, 0.05); }
.cr-linha span { flex: 1; display: grid; }
.cr-linha small { font-size: 12.5px; color: var(--texto-2); }
.cr-linha i { font-style: normal; font-size: 22px; color: var(--texto-3); }
.cr-linha .logo { width: 26px; height: 26px; object-fit: contain; }
.cr-form { display: grid; gap: 12px; }
.cr-form .campo input, .cr-form .campo select, .cr-form .campo textarea { min-height: 50px; font-size: 17px; }
.cr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-chip { min-height: 42px; padding: 0 15px; border: 1px solid rgba(29, 29, 31, 0.12); border-radius: 999px; background: #fff; font: inherit; font-size: 15px; color: var(--texto); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.cr-chip.ativo { background: var(--cor); border-color: var(--cor); color: #fff; }
.cr-data { min-height: 42px; padding: 0 12px; border: 1px solid rgba(29, 29, 31, 0.12); border-radius: 999px; background: #fff; font: inherit; font-size: 15px; color: var(--texto); }
.cr-escolher { display: grid; gap: 6px; }
.cr-opcoes { list-style: none; margin: 0; padding: 0; border-radius: 14px; background: #fff; overflow: hidden; }
.cr-opcoes button { all: unset; box-sizing: border-box; display: grid; width: 100%; padding: 12px 14px; border-bottom: 1px solid var(--linha); cursor: pointer; }
.cr-opcoes li:last-child button { border-bottom: 0; }
.cr-opcoes b { font-size: 15px; font-weight: 600; }
.cr-opcoes small { font-size: 12.5px; color: var(--texto-2); }
.cr-escolhido { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--cor-suave); }
.cr-escolhido span { flex: 1; min-width: 0; display: grid; }
.cr-escolhido small { font-size: 12.5px; color: var(--texto-2); }
.cr-arquivo { position: relative; display: grid; place-items: center; overflow: hidden; cursor: pointer; }
.cr-arquivo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cr-arquivo.desligado { opacity: 0.45; pointer-events: none; }
.cr-feito { display: grid; justify-items: center; gap: 12px; padding: 18px 4px 6px; text-align: center; }
.cr-feito-ico { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: #34c759; color: #fff; font-size: 32px; font-weight: 700; animation: cr-pop 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes cr-pop { from { transform: scale(0.5); opacity: 0; } }
.cr-feito p { margin: 0 0 4px; font-size: 16px; line-height: 1.5; }
.cr-feito .btn { width: 100%; }
@media (prefers-reduced-motion: reduce) { .ic *, .ic-fab, .cr-fundo, .cr-folha, .cr-conteudo, .cr-feito-ico { animation: none !important; } }
/* V4.9 — a grade nunca passa da largura da tela (textos longos cortam com reticências em vez de empurrar) */
.ic, .ic-corpo, .ic-resultados, .ic-busca { grid-template-columns: minmax(0, 1fr); }
.ic > *, .ic-corpo > *, .ic-resultados > *, .ic-agenda, .ic-grupo { min-width: 0; }
.ic-cabeca > .ic-ola { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* V4.9.1 — celular: resultado direto da busca (o arquivo, o orçamento ou o dado, com botão de abrir; embaixo, o dono) */
.ic-direto { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid rgba(29, 29, 31, 0.06); box-shadow: 0 6px 18px rgba(31, 41, 72, 0.07); animation: k-surgir 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) both; min-width: 0; }
.ic-direto-topo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ic-av.doc { background: rgba(255, 59, 48, 0.1); color: #c1271f; }
.ic-av.doc.orc { background: rgba(248, 116, 69, 0.14); color: #b8471c; }
.ic-direto-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ic-abrir { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 12px; font-size: 15px; font-weight: 600; text-decoration: none; }
.ic-abrir svg { width: 18px; height: 18px; }
.ic-abrir.copiado { background: #1f8f3f; color: #fff; }
.ic-dono { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-left: auto; padding: 0 6px; max-width: 100%; font-size: 14px; font-weight: 500; color: var(--cor); text-decoration: none; overflow: hidden; }
.ic-dono i { font-style: normal; font-size: 18px; }
.ic-dado-rotulo { font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--texto-2); }
.ic-dado-valor { font-size: 20px; font-weight: 600; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; color: var(--texto); overflow-wrap: anywhere; }

/* V4.9.2 — celular: idioma do microfone, ícones dos outros cadastros e detalhe do notaio */
.ic-voz { flex: 0 0 auto; min-width: 38px; height: 34px; padding: 0 8px; border: 1px solid rgba(29, 29, 31, 0.12); border-radius: 999px; background: #fff; font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--texto-2); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ic-voz:active { transform: scale(0.95); }
.ic-av-emoji { font-size: 19px; background: rgba(29, 29, 31, 0.05); }
.ic-dado-detalhe { margin-top: -4px; font-size: 13.5px; color: var(--texto-2); overflow-wrap: anywhere; }

/* =====================================================================
   V4.9.3 — celular: textos ajustados (nada muda no computador)
   A regra "overflow-wrap: anywhere" deixava o navegador espremer colunas até caber uma letra
   ("Rimbor so"). No celular, as palavras ficam inteiras e quem não cabe desce de linha ou rola.
   ===================================================================== */
@media (max-width: 719px) {
  .painel, .orcamento pre, .historico li span, .notas li, .cartao, .pessoa-linha > div, .tarefa > div, .linha-texto { overflow-wrap: break-word; word-break: normal; }
  /* tabelas largas: rolam para o lado dentro do quadro que já existe (.tabela-rolagem) */
  .tabela-rolagem { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .tabela th, .tabela td { min-width: 84px; }
  .tabela th:first-child, .tabela td:first-child { min-width: 140px; }
  .tabela td.num, .tabela th.num { white-space: nowrap; }
  /* tarefas (e listas no mesmo formato): o texto ocupa a linha; prazo e botões descem, alinhados com o texto */
  .tarefa { flex-wrap: wrap; row-gap: 6px; }
  .tarefa > div:first-of-type { flex: 1 1 calc(100% - 46px) !important; min-width: 0; }
  .tarefa > div:first-of-type + :not(div) { margin-left: 34px; }
  .tarefa .linha-form { flex-wrap: wrap; }
  /* formulários em linha: o campo de texto ocupa a linha e o resto desce */
  .linha-form { flex-wrap: wrap; }
  .linha-form > input:not([type=date]):not([type=checkbox]):not([type=number]):not([type=time]), .linha-form > textarea { flex: 1 1 100%; }
  /* cabeçalho da Gestão (imóvel / contrato): o nome em linha cheia; etiquetas e botões embaixo */
  .gestao-cabecalho > div:first-child { flex: 1 1 100% !important; min-width: 0; }
  .gestao-cabecalho h2 { font-size: 19px; line-height: 1.25; }
  /* cabeçalho dos painéis: o título fica com a maior parte; se não couber, os controles descem */
  .painel-cabecalho { flex-wrap: wrap; }
  .painel-cabecalho h2 { min-width: 55%; }
  /* trilho de etapas: só a etapa atual mostra o nome (as outras viram a barra de progresso) */
  .trilho-etapa:not(.atual) .trilho-nome { display: none; }
  .trilho-etapa.atual { flex: 4 1 0; }
  /* resumo financeiro da ficha (obra, venda, aluguel): uma coluna, para os valores não quebrarem */
  .ficha-resumo { grid-template-columns: 1fr; }
  /* subtítulo dos números do topo: no máximo 2 linhas */
  .kpi-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* requisitos (Processos): o texto fica com a maior parte da linha */
  .requisito { flex-wrap: wrap; }
  .requisito .req-texto { min-width: 55%; }
}
@media (max-width: 719px) {
  /* tabelas no celular em formato de planilha: cada célula numa linha só, a tabela rola para o lado;
     observações longas quebram dentro de uma largura confortável */
  .tabela td { white-space: nowrap; }
  .tabela td .pequeno, .tabela td.quebra { white-space: normal; min-width: 180px; max-width: 260px; }
  .kpi .kpi-sub, .kpi-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (max-width: 719px) {
  /* painéis lado a lado (ex.: Relatórios) ficam um embaixo do outro no celular */
  .grade:has(> .painel) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 719px) {
  /* tarefas com o círculo de concluir: o círculo vai para a margem e tudo (título, prazo, botões, atualizações) começa alinhado */
  .tarefa:has(> .check) { position: relative; padding-left: 40px; }
  .tarefa:has(> .check) > .check { position: absolute; left: 4px; top: 12px; }
  .tarefa:has(> .check) > div:first-of-type { flex-basis: 100% !important; }
  .tarefa:has(> .check) > div:first-of-type + :not(div) { margin-left: 0; }
  /* filas de botões (período, abas em pílula): deslizam para o lado em vez de cortar */
  .segmentos { max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .segmentos::-webkit-scrollbar { display: none; }
  .segmentos button { flex: 0 0 auto; }
}
@media (max-width: 719px) {
  /* rótulo dos números do topo: até 2 linhas, sem invadir o cartão vizinho */
  .kpi { min-width: 0; }
  .kpi .kpi-rotulo { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; }
}

/* =====================================================================
   V4.9.5 — celular: ficha rápida (tocar num resultado da busca mostra a informação na tela, grande)
   ===================================================================== */
.fr-folha .cr-conteudo { padding-top: 2px; }
.fr-cab { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.fr-cab > div { min-width: 0; }
.fr-ico { flex: 0 0 52px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: #fff; box-shadow: 0 2px 10px rgba(31, 41, 72, 0.08); font-size: 26px; overflow: hidden; }
.fr-iniciais { font-size: 18px; font-weight: 700; color: var(--cor); }
.fr-logo { width: 36px; height: 36px; object-fit: contain; }
.fr-cab h3 { margin: 0; font-size: 21px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; overflow-wrap: break-word; }
.fr-cab small { display: block; margin-top: 3px; font-size: 13.5px; color: var(--texto-2); }
.fr-destaque { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; padding: 16px 18px; border-radius: 18px; animation: cr-pop 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.fr-destaque > div { min-width: 0; }
.fr-destaque b { display: block; font-size: 23px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; overflow-wrap: break-word; }
.fr-destaque span { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.45; color: var(--texto-2); }
.fr-destaque-ico { flex: 0 0 auto; font-size: 30px; line-height: 1; }
.fr-destaque.ok { background: rgba(52, 199, 89, 0.13); }
.fr-destaque.fora { background: rgba(255, 149, 0, 0.14); }
.fr-destaque.alerta { background: rgba(255, 59, 48, 0.11); }
.fr-destaque.alerta b { color: #b3261e; }
.fr-destaque.neutro { background: #fff; box-shadow: 0 2px 10px rgba(31, 41, 72, 0.06); }
.fr-acoes { display: grid; gap: 10px; margin: 0 0 12px; }
.fr-acoes .btn { width: 100%; }
.fr-bloco { margin-bottom: 12px; padding: 2px 16px; border-radius: 16px; background: #fff; }
.fr-subtitulo { margin: 16px 4px 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-3); }
.fr-linha { display: block; padding: 13px 0; border-bottom: 1px solid var(--linha); }
.fr-linha:last-child { border-bottom: 0; }
.fr-rotulo { display: block; margin-bottom: 3px; font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.fr-valor { font-size: 17.5px; font-weight: 500; line-height: 1.4; color: var(--texto); overflow-wrap: anywhere; }
.fr-valor.longo { font-size: 16px; font-weight: 400; line-height: 1.6; white-space: pre-wrap; }
.fr-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: 15px; font-weight: 600; text-decoration: none; }
.fr-btn svg { width: 18px; height: 18px; }
.fr-btn.fr-whats { background: rgba(37, 211, 102, 0.14); color: #128c4a; }
.fr-btn.copiado { background: #1f8f3f; color: #fff; }
.fr-linha-botao { all: unset; box-sizing: border-box; position: relative; display: block; width: 100%; padding: 13px 26px 13px 0; border-bottom: 1px solid var(--linha); cursor: pointer; }
.fr-linha-botao i { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 22px; color: var(--texto-3); }
.fr-ligado-linha { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--linha); }
.fr-ligado-linha:last-child { border-bottom: 0; }
.fr-ligado { all: unset; box-sizing: border-box; flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fr-bloco > .fr-ligado { border-bottom: 1px solid var(--linha); }
.fr-bloco > .fr-ligado:last-child { border-bottom: 0; }
.fr-ligado > span:not(.ic-av) { flex: 1; min-width: 0; display: grid; }
.fr-ligado b { font-size: 15.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-ligado small { font-size: 13px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-ligado i { font-style: normal; font-size: 22px; color: var(--texto-3); }
.fr-select { width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid var(--campo-borda); border-radius: 12px; background: var(--campo); font: inherit; font-size: 16.5px; color: var(--texto); }
.fr-form { display: grid; gap: 12px; padding: 14px 16px; }
.fr-form .campo input { min-height: 48px; font-size: 17px; }
.fr-abrir { width: 100%; margin-top: 6px; }

/* =====================================================================
   V4.9.6 — Gestão › Proprietários e inquilinos em lista · Preferências do cliente (Kostrucom)
   ===================================================================== */
.vista-modo button { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 0 10px; }
.vista-modo svg { width: 17px; height: 17px; }
.gestao-pessoas-lista { padding: 4px 0; border-radius: 14px; overflow: hidden; animation: k-surgir 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.gpl-cab, .gpl-linha { display: grid; grid-template-columns: minmax(200px, 1.5fr) minmax(170px, 1.1fr) minmax(150px, 1fr) minmax(160px, 1.3fr) minmax(130px, 1fr); gap: 14px; align-items: center; padding: 10px 18px; }
.gpl-cab { font-size: 12px; font-weight: 500; color: var(--texto-2); border-bottom: 1px solid var(--linha); }
.gpl-linha { width: 100%; border: 0; border-bottom: 1px solid var(--linha); background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background-color 0.15s ease; }
.gpl-linha:last-child { border-bottom: 0; }
@media (hover: hover) { .gpl-linha:hover { background: rgba(29, 29, 31, 0.03); } }
.gpl-linha.alerta { box-shadow: inset 3px 0 0 #ff3b30; }
.gpl-nome { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gpl-nome > span:last-child { min-width: 0; }
.gpl-nome .avatar { flex: 0 0 32px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 600; }
.gpl-nome b { display: block; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gpl-nome small { font-size: 11.5px; color: var(--texto-3); }
.gpl-contato { display: grid; min-width: 0; font-size: 13px; color: var(--texto-2); }
.gpl-contato span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gpl-vinculo, .gpl-situacao { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.gpl-imoveis { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; color: var(--texto-2); }
@media (max-width: 719px) {
  .gpl-cab { display: none; }
  .gpl-linha { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px 14px; }
  .gpl-nome { grid-column: 1; grid-row: 1; }
  .gpl-situacao { grid-column: 2; grid-row: 1; justify-content: flex-end; }
  .gpl-contato, .gpl-vinculo, .gpl-imoveis { grid-column: 1 / -1; padding-left: 42px; }
}
/* Preferências do cliente (ficha da obra) */
.pref-obra { display: grid; gap: 12px; margin: 0 0 14px; padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(248, 116, 69, 0.24); background: linear-gradient(135deg, rgba(248, 116, 69, 0.11), rgba(248, 116, 69, 0.03)); }
.pref-obra.respondido { background: #fff; }
.pref-obra-topo { display: flex; align-items: flex-start; gap: 12px; }
.pref-obra-ico { flex: 0 0 auto; font-size: 24px; line-height: 1.2; }
.pref-obra-txt b { display: block; font-size: 15.5px; font-weight: 600; }
.pref-obra-txt span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.5; color: var(--texto-2); }
.pref-obra-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pref-obra-chips .chip { background: rgba(248, 116, 69, 0.12); color: #b8471c; }
.pref-obra-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pref-obra-acoes .btn.copiado { background: #1f8f3f; color: #fff; }
.pref-modal { display: grid; gap: 4px; }
.pref-secao { margin-bottom: 14px; }
.pref-secao h4 { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-3); }
.pref-linha { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linha); font-size: 14px; }
.pref-linha > span { color: var(--texto-2); }
.pref-cores { display: flex; flex-wrap: wrap; gap: 8px; }
.pref-cor { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: rgba(29, 29, 31, 0.05); font-size: 13px; }
.pref-cor i { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.pref-obs { margin-top: 6px; font-size: 14px; color: var(--texto); }
.pref-obs.grande { font-size: 15px; line-height: 1.6; white-space: pre-wrap; }
.pref-aviso { margin-top: 6px; padding: 12px 14px; border-radius: 12px; background: rgba(248, 116, 69, 0.08); font-size: 13px; line-height: 1.5; color: #6b3b25; }
@media (max-width: 719px) { .pref-linha { grid-template-columns: 1fr; gap: 2px; } .pref-obra-acoes .btn { flex: 1 1 auto; } }

/* =====================================================================
   V4.9.7 — Agenda no celular · Tela inicial do operário · Obra em modo leitura
   ===================================================================== */
.cal-filtros-botao { display: none; }
button.cal-ev-botao { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
button.cal-ev-botao span { font-size: 12px; font-weight: 600; opacity: 0.75; }
.cal-ev-recolher { justify-self: start; border: 0; background: none; padding: 2px 4px; font: inherit; font-size: 12px; color: var(--texto-2); cursor: pointer; }
.cal-grupo-aberto { display: grid; gap: 4px; }
@media (max-width: 719px) {
  /* topo: navegação numa linha; modos + botão de filtros na outra; empresas e tipos guardados no botão */
  .cal-topo { gap: 8px; margin-bottom: 10px; }
  .cal-topo > div { width: 100%; }
  .cal-topo .forte { display: inline-block; font-size: 15px; text-transform: none !important; white-space: nowrap; }
  .cal-topo .forte::first-letter { text-transform: uppercase; }
  .cal-topo > div:last-child { display: flex; flex-wrap: nowrap !important; gap: 8px; }
  .cal-topo > div:last-child > .segmentos:not(.cal-empresas) { flex: 1 1 auto; }
  .cal-topo > div:last-child > .segmentos:not(.cal-empresas) button { flex: 1 1 0; }
  .agenda.filtros-abertos .cal-topo > div:last-child { flex-wrap: wrap !important; }
  .agenda.filtros-abertos .cal-empresas { order: 3; width: 100%; }
  .cal-filtros-botao { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: 38px; padding: 0 14px; border: 1px solid rgba(29, 29, 31, 0.1); border-radius: 10px; background: #fff; font: inherit; font-size: 14px; font-weight: 500; color: var(--texto); cursor: pointer; white-space: nowrap; }
  .cal-filtros-botao.ativo { border-color: var(--cor); color: var(--cor); }
  .agenda:not(.filtros-abertos) .cal-empresas, .agenda:not(.filtros-abertos) .cal-filtros { display: none !important; }
  .agenda.filtros-abertos .cal-filtros { padding: 10px; border-radius: 12px; background: rgba(29, 29, 31, 0.03); animation: k-surgir 0.2s ease both; }
  /* dias: cabeçalho discreto, um evento por linha */
  .cal-semana { gap: 8px; }
  .cal-coluna { padding: 10px 12px; border-radius: 14px; }
  .cal-coluna-titulo { margin-bottom: 6px; font-size: 13.5px; }
  .cal-coluna > .texto-2.pequeno { display: block; font-size: 12px; opacity: 0.6; }
  .cal-semana .cal-ev, .cal-listagem .cal-ev { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; padding-top: 6px; padding-bottom: 6px; }
  .cal-semana button.cal-ev-botao, .cal-listagem button.cal-ev-botao { display: flex; }
  /* "+ Compromisso" vira botão flutuante; a ajuda longa sai do celular */
  .agenda-novo-linha { margin: 0 !important; }
  .agenda-novo { position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 40; min-height: 52px; padding: 0 20px; border-radius: 999px; box-shadow: 0 10px 28px rgba(31, 41, 72, 0.3); }
  .agenda-ajuda { display: none; }
  .agenda { padding-bottom: 70px; }
}
/* tela inicial do operário */
.io-atalhos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.io-atalho { display: grid; justify-items: start; gap: 2px; min-height: 104px; padding: 14px 16px; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 4px 16px rgba(31, 41, 72, 0.07); font: inherit; text-align: left; color: var(--texto); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.12s ease; animation: k-surgir 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.io-atalho:active { transform: scale(0.97); }
.io-atalho > span { margin-bottom: 6px; font-size: 28px; line-height: 1; }
.io-atalho b { font-size: 16px; font-weight: 600; }
.io-atalho small { font-size: 12.5px; color: var(--texto-2); }
.io-blocos { display: grid; gap: 12px; }
.io-botao { all: unset; box-sizing: border-box; flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 8px 12px 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.io-check { flex: 0 0 auto; width: 28px; height: 28px; margin-left: 12px; border: 2px solid rgba(29, 29, 31, 0.25); border-radius: 50%; background: #fff; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; }
.io-check:active { background: #34c759; border-color: #34c759; }
.io .ic-ev.io-atrasada b { color: #b3261e; }
/* obra em modo leitura (operário) */
.ol-faixa { margin-bottom: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(248, 116, 69, 0.1); font-size: 13.5px; color: #8a3f17; }
.ol-cab { margin-bottom: 14px; padding: 18px 20px; border-radius: 16px; }
.ol-cab h2 { margin: 4px 0 6px; font-size: 22px; letter-spacing: -0.02em; }
.ol-etapa { display: inline-block; margin-bottom: 12px; padding: 4px 12px; border-radius: 999px; background: rgba(248, 116, 69, 0.12); color: #b8471c; font-size: 13px; font-weight: 600; }
.ol-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.ol-grade > div { display: grid; gap: 4px; align-content: start; }
.ol-grade span { font-size: 12.5px; color: var(--texto-2); }
.ol-grade b { font-size: 15.5px; font-weight: 600; }
.ol-grade .btn { justify-self: start; margin-top: 4px; }
.ol-atrasada { color: #b3261e; }
.ol-lista { list-style: none; margin: 0; padding: 0; }
.ol-lista li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.ol-lista li:last-child { border-bottom: 0; }
.ol-lista li > div { display: grid; gap: 2px; min-width: 0; }
.ol-lista b { font-size: 14.5px; font-weight: 600; }
.ol-lista small { font-size: 12.5px; color: var(--texto-2); }
.ol-acoes { display: flex; gap: 6px; flex: 0 0 auto; }
.ol-nota { font-size: 14px; white-space: pre-wrap; }
.ol-foto { position: relative; display: grid; place-items: center; overflow: hidden; width: 100%; cursor: pointer; }
.ol-foto input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ol-foto.desligado { opacity: 0.5; pointer-events: none; }
.ol-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin-top: 12px; }
.ol-fotos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; }
.ol-obras { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ol-obra { display: grid; gap: 4px; padding: 16px 18px; border-radius: 14px; color: inherit; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.2s ease; }
@media (hover: hover) { .ol-obra:hover { transform: translateY(-2px); box-shadow: var(--sombra-m); } }
.ol-obra b { font-size: 15.5px; }
.ol-obra small { font-size: 13px; color: var(--texto-2); }
.ol-prazo { font-size: 13px; font-weight: 600; color: #b8471c; }
@media (max-width: 719px) { .ol-lista li { flex-wrap: wrap; } .ol-cab h2 { font-size: 20px; } }
@media (max-width: 719px) {
  /* a animação de entrada da página deixava uma "transformação" na linha do botão, e o botão fixo rolava junto */
  .agenda-novo-linha { animation: none !important; transform: none !important; }
}

/* =====================================================================
   V4.10 — Gestão › Importação do sistema antigo
   ===================================================================== */
.imp-passos { display: grid; gap: 14px; }
.imp-arquivo { position: relative; overflow: hidden; display: inline-flex; cursor: pointer; }
.imp-arquivo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.imp-resumo { margin-top: 12px; }
.imp-numeros { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 8px; }
.imp-numeros > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: rgba(29, 29, 31, 0.04); }
.imp-numeros b { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.imp-numeros span { font-size: 12.5px; color: var(--texto-2); }
.imp-numeros-linha { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 10px; }
.imp-tabela td:not(:first-child), .imp-tabela th:not(:first-child) { text-align: center; }
.imp-ligacoes { margin-top: 12px; font-size: 14px; }
.imp-ligacoes summary { cursor: pointer; font-weight: 500; }
.imp-ligacoes ul { margin: 8px 0 0; padding-left: 18px; max-height: 260px; overflow: auto; }
.imp-ligacoes li.aviso { color: #a35200; }
.imp-progresso { display: grid; gap: 8px; }
.imp-barra { height: 10px; border-radius: 99px; background: rgba(29, 29, 31, 0.08); overflow: hidden; }
.imp-barra span { display: block; height: 100%; border-radius: 99px; background: var(--cor, #1d2948); transition: width 0.3s ease; }
.imp-progresso ul { margin: 4px 0 0; padding-left: 0; list-style: none; }
.imp-lote { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0; padding: 10px 14px; border-radius: 12px; background: rgba(29, 41, 72, 0.06); }
.imp-pend td { vertical-align: top; }
.imp-pend tr.decidida { opacity: 0.75; }
.imp-pend td .pequeno { max-width: 320px; }
.imp-acoes { min-width: 230px; }
.imp-acoes input[type=date] { display: block; width: 100%; max-width: 230px; margin: 0 0 6px; }
.imp-acoes .btn { margin: 0 4px 4px 0; }
.imp-instrucoes { margin: 0 0 12px; padding-left: 20px; font-size: 14px; display: grid; gap: 4px; }
.pref-obra-chips .chip .pref-det { font-weight: 400; }

/* =====================================================================
   V4.15 · menu de escolha (filtros e ordenação) no estilo do sistema
   ===================================================================== */
.menu-k { position: relative; display: inline-flex; flex: none; }
.menu-botao { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 14px; border-radius: 10px; border: 1px solid var(--campo-borda); background-color: var(--campo); color: var(--texto); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.2s ease, transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1); }
@media (hover: hover) { .menu-botao:hover { background-color: var(--campo-hover); border-color: rgba(29, 29, 31, 0.14); } }
.menu-botao:active { transform: scale(0.98); }
.menu-botao:focus-visible, .menu-botao.aberto { outline: none; border-color: var(--cor); box-shadow: 0 0 0 3px var(--cor-suave); background-color: #fff; }
.menu-prefixo { color: var(--texto-2); font-weight: 400; }
.menu-conta { font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 10px; background: rgba(29, 29, 31, 0.07); color: var(--texto-2); }
.menu-seta { width: 12px; height: 12px; flex: none; color: var(--texto-2); transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
.menu-botao.aberto .menu-seta { transform: rotate(180deg); }
.menu-lista { padding: 6px; border-radius: 12px; border: 1px solid rgba(29, 29, 31, 0.08); background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.06); transform-origin: top center; animation: k-menu 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes k-menu { from { opacity: 0; transform: translateY(-4px) scale(0.97); } to { opacity: 1; transform: none; } }
.menu-item { gap: 10px; padding: 9px 10px; font-size: 14px; border-radius: 8px; transition: background-color 0.14s ease; }
.menu-item.escolhido { color: var(--cor); font-weight: 600; }
.menu-check { width: 14px; flex: none; color: var(--cor); font-weight: 700; }
.menu-rotulo { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.menu-sub { font-size: 12px; font-weight: 400; color: var(--texto-3); }
.menu-item .menu-conta { margin-left: 8px; }
@media (prefers-reduced-motion: reduce) { .menu-lista { animation: none; } .menu-seta, .menu-botao { transition: none; } }
/* lista dos imóveis da gestão (V4.15) */
.gestao-imoveis-lista td { vertical-align: middle; }
.gestao-imoveis-lista tbody tr { cursor: pointer; }
.gestao-imoveis-lista .gestao-lista-contrato { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* =====================================================================
   V4.16 · dicas "i" (K.Info)
   ===================================================================== */
.info-k { display: inline-flex; vertical-align: middle; margin-left: 6px; line-height: 0; }
.info-i { width: 16px; height: 16px; padding: 0; border-radius: 50%; border: 1px solid rgba(29, 29, 31, 0.22); background: transparent; color: var(--texto-2);
  font: italic 600 10.5px/1 Georgia, 'Times New Roman', serif; cursor: help; display: inline-flex; align-items: center; justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; }
@media (hover: hover) { .info-i:hover { background: var(--cor); border-color: var(--cor); color: #fff; } }
.info-i:active { transform: scale(0.92); }
.info-i.aberto { background: var(--cor); border-color: var(--cor); color: #fff; }
.info-i:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cor-suave); }
.flutuante.info-caixa { max-width: 320px; padding: 10px 12px; border-radius: 12px; font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--texto); text-transform: none; letter-spacing: normal;
  background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(29, 29, 31, 0.08); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.06); transform-origin: top left; animation: k-menu 0.16s cubic-bezier(0.2, 0.8, 0.2, 1) both; z-index: 1300; }
@media (prefers-reduced-motion: reduce) { .flutuante.info-caixa { animation: none; } .info-i { transition: none; } }
/* V4.16: no checklist das etapas, o "i" fica ao lado do item (fora do botão que marca) */
.checklist li { display: flex; align-items: center; }
.checklist li > button.check { flex: 1; min-width: 0; }
.checklist li > .info-k { margin: 0 10px 0 4px; }

/* =====================================================================
   V4.16.1 · comissões dos comerciais e lançamentos no Financeiro (aba Comissões da venda)
   ===================================================================== */
.bloco-fin { margin-top: 18px; padding: 14px 16px 6px; border-radius: 12px; background: rgba(29, 29, 31, 0.025); border: 1px solid var(--linha); }
.bloco-fin-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.bloco-fin-titulo { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-2); }
.bloco-fin-resumo { margin-left: auto; font-size: 13px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.bloco-fin-resumo b { font-weight: 600; color: var(--texto); }
.bloco-fin-nota, .bloco-fin-vazio { margin: 4px 0 12px; }
.linhas-fin { list-style: none; margin: 4px 0 0; padding: 0; }
.linha-fin { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 11px 2px; border-top: 1px solid var(--linha); }
.linha-fin-lanc { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.linha-fin-texto { min-width: 0; }
.linha-fin-texto .forte { font-size: 14px; }
.linha-fin-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.linha-fin-status:empty { display: none; }
.linha-fin-valor { min-width: 96px; text-align: right; font-variant-numeric: tabular-nums; }
.linha-fin-acoes { display: inline-flex; gap: 12px; }
.linha-fin .check { padding: 0; }
.btn-texto.apagar { color: var(--texto-3); }
@media (hover: hover) { .btn-texto.apagar:hover { color: #d93025; } }
@media (max-width: 640px) {
  .linha-fin { grid-template-columns: minmax(0, 1fr) auto; }
  .linha-fin-acoes { grid-column: 1 / -1; }
  .linha-fin-lanc { grid-template-columns: auto minmax(0, 1fr) auto; }
  .linha-fin-lanc .linha-fin-acoes { grid-column: 2 / -1; }
}

/* V4.17 · valor calculado da comissão do comercial */
.valor-calculado { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 40px; font-variant-numeric: tabular-nums; }
.valor-calculado b { font-size: 16px; }

/* V4.18 · itens opcionais do checklist */
.req-opcional-tag { color: var(--texto-3); font-size: 13px; }
.requisito .req-obrig { flex: none; border: 1px solid var(--linha); background: transparent; color: var(--texto-2); font: inherit; font-size: 12px; padding: 3px 10px; border-radius: 999px; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.requisito .req-obrig.opcional { background: rgba(29, 29, 31, 0.06); color: var(--texto-3); border-style: dashed; }
@media (hover: hover) { .requisito .req-obrig:hover { border-color: var(--cor); color: var(--cor); } }

/* V4.20 · botão "Baixar" ao lado do "Abrir" (no celular, só o ícone) */
.doc-baixar { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.doc-baixar svg { flex: none; }
@media (max-width: 560px) { .doc-baixar { padding-left: 10px; padding-right: 10px; } .doc-baixar-txt { display: none; } }

/* ===== V4.21 · formulário da busca personalizada (cartão na aba "O que busca" e respostas) ===== */
.pref-obra.form-busca { border-color: rgba(44, 83, 117, 0.22); background: linear-gradient(135deg, rgba(44, 83, 117, 0.09), rgba(44, 83, 117, 0.02)); margin-bottom: 18px; }
.pref-obra.form-busca.respondido { background: #fff; }
.form-busca .pref-obra-chips .chip { background: rgba(44, 83, 117, 0.1); color: #2c5375; }
.pref-aviso.erro { background: rgba(255, 59, 48, 0.08); color: #b3261e; }
.form-busca-modal .pref-aviso { background: rgba(44, 83, 117, 0.07); color: #1f3d57; }
.form-busca-modal .pref-linha > div { overflow-wrap: anywhere; }
.form-busca-links { display: grid; gap: 4px; }

/* V4.21.1 · faturas do fornecedor na aba Fornecedores da obra */
.fornecedor-docs { display: grid; gap: 2px; margin-top: 4px; min-width: 200px; }
.fornecedor-doc { display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.fornecedor-doc .btn-texto { padding: 0; }
.fornecedor-doc .btn-texto:first-child { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

/* ===== V4.22 · interventos de manutenção (chamados): lista, cartões e detalhe ===== */
.chamado-filtros { flex-wrap: wrap; }
.chamado-filtros button .conta { margin-left: 6px; font-size: 11px; padding: 1px 6px; border-radius: 999px; background: rgba(29, 29, 31, 0.08); }
.chamado-busca { flex: 1 1 220px; min-width: 160px; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--vidro-borda); background: rgba(255, 255, 255, 0.7); font: inherit; }
.chamado-lista { display: grid; gap: 10px; }
.chamado-card { position: relative; display: grid; gap: 6px; width: 100%; padding: 12px 14px 12px 18px; border: 1px solid var(--linha); border-left: 4px solid var(--cor, #8e8e93); border-radius: 14px; background: #fff; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.18s ease, border-color 0.18s ease; -webkit-tap-highlight-color: transparent; }
.chamado-card:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(31, 41, 72, 0.08); }
.chamado-card.fechado { opacity: 0.6; }
.chamado-card-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.chamado-card-topo b { font-size: 14.5px; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.chamado-card-topo .chip { flex: none; }
.chamado-card-imovel { display: flex; align-items: center; gap: 6px; font-size: 13px; min-width: 0; }
.chamado-card-imovel > span { min-width: 0; overflow-wrap: anywhere; }
.chamado-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.chamado-resp { display: inline-flex; gap: 3px; margin-left: auto; }
.chamado-resp .avatar { width: 24px; height: 24px; font-size: 10.5px; }
.chamado-card-ultima { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chamado-imovel-fixo { display: grid; gap: 2px; padding: 10px 14px; border-radius: 10px; background: rgba(29, 29, 31, 0.04); }
.chamado-detalhe { display: grid; gap: 10px; }
.chamado-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chamado-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 16px; padding: 12px 14px; border-radius: 12px; background: rgba(29, 29, 31, 0.035); font-size: 14px; }
.chamado-info > div > span { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 2px; }
.chamado-texto { white-space: pre-wrap; line-height: 1.55; font-size: 14.5px; }
.chamado-status-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.chamado-status-botoes .btn { gap: 6px; }
.chamado-ponto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.chamado-agenda { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(30, 126, 140, 0.08); }
.chamado-agenda .campo { flex: 0 1 180px; }
.chamado-msgs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.chamado-msgs li { padding: 10px 12px; border-radius: 12px; background: rgba(29, 29, 31, 0.035); }
.chamado-msgs li.status { background: rgba(30, 126, 140, 0.07); }
.chamado-msg-status { display: flex; align-items: center; gap: 6px; font-size: 13.5px; margin-top: 2px; }
.chamado-msg-texto { white-space: pre-wrap; margin-top: 2px; font-size: 14px; }
.chamado-rodape { display: flex; align-items: center; gap: 12px; padding-top: 6px; border-top: 1px solid var(--linha); }
.chamados.compacto .barra-filtros { gap: 8px; }
@media (max-width: 720px) { .chamado-info { grid-template-columns: 1fr 1fr; } .chamado-busca { flex-basis: 100%; } .chamado-card-topo { flex-direction: column; } }

/* ===== V4.23 · laudo do imóvel (vistoria técnica): cartão, checklist e reparos ===== */
.laudo-painel { border-color: rgba(30, 126, 140, 0.28); background: linear-gradient(135deg, rgba(30, 126, 140, 0.09), rgba(30, 126, 140, 0.02)); margin-bottom: 14px; }
.laudo-painel.respondido { background: #fff; }
.laudo-painel .pref-obra-topo .chip { margin-left: auto; flex: none; }
.laudo-painel .pref-obra-chips .chip { background: rgba(30, 126, 140, 0.1); color: #1e7e8c; }
.laudo-detalhe { display: grid; gap: 10px; }
.laudo-grupo h4 { margin: 10px 0 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-3); }
.laudo-item { padding: 10px 12px; border-radius: 12px; background: rgba(29, 29, 31, 0.035); margin-bottom: 6px; }
.laudo-item.ok { background: rgba(52, 199, 89, 0.08); }
.laudo-item.problema { background: rgba(255, 59, 48, 0.07); }
.laudo-item.na { opacity: 0.7; }
.laudo-item-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.laudo-item-texto { font-size: 14.5px; min-width: 0; flex: 1 1 220px; }
.laudo-estados { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(29, 29, 31, 0.06); flex: none; }
.laudo-estado { border: 0; background: transparent; padding: 6px 12px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; color: var(--texto-2); cursor: pointer; min-height: 32px; }
.laudo-estado.ativo.ok { background: #34c759; color: #fff; }
.laudo-estado.ativo.problema { background: #ff3b30; color: #fff; }
.laudo-estado.ativo.na { background: #8e8e93; color: #fff; }
.laudo-estado:disabled { cursor: default; }
.laudo-estado:disabled:not(.ativo) { opacity: 0.45; }
.laudo-item-mais { display: grid; gap: 8px; margin-top: 8px; }
.laudo-item-mais input { width: 100%; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--linha); background: #fff; font: inherit; }
.fotos-mini.pequeno img { width: 72px; height: 72px; }
.laudo-leituras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.laudo-reparos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.laudo-reparos li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: rgba(29, 29, 31, 0.035); }
.laudo-reparo-titulo { font-weight: 600; padding: 0; text-align: left; }
.opcao-laudo { display: grid; gap: 2px; width: 100%; padding: 12px 14px; border: 2px solid var(--linha); border-radius: 14px; background: #fff; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.opcao-laudo.ativo { border-color: var(--cor); background: var(--cor-suave); }
.opcao-laudo small { color: var(--texto-2); }
.req-laudo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; }
.req-laudo .chip { flex: none; }
@media (max-width: 560px) { .laudo-leituras { grid-template-columns: 1fr; } .laudo-estado { padding: 6px 9px; font-size: 12.5px; } }

/* V4.23 · modal por cima de outro modal (decisão do laudo, intervento aberto de dentro do laudo, editar intervento) */
.modal-fundo.empilhado { display: flex; z-index: 1080; }
/* V4.23 · a caixa de confirmação aparece mesmo com um modal aberto (apagar intervento, fatura, reparo recusado) */
.modal-fundo ~ .modal-fundo.confirma { display: flex; }

/* ===== V4.24 · Gestão repaginada: mesmo desenho do resto do sistema (cartões, ícones, hovers, entradas suaves) ===== */
/* cabeçalho das fichas (imóvel, contrato, pessoa): ícone na cor do status, trilha, título, pílulas e ações */
.gestao-cabecalho.gc { display: flex; align-items: center; gap: 16px; padding: 18px 20px 18px 26px; background: linear-gradient(135deg, var(--faixa-suave, rgba(29, 29, 31, 0.04)) 0%, rgba(255, 255, 255, 0) 48%), var(--vidro-forte); }
.gc-icone { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--faixa-suave, rgba(29, 29, 31, 0.06)); color: var(--faixa-texto, var(--faixa)); }
.gc-icone svg { width: 24px; height: 24px; }
.gc-inicial { font-size: 20px; font-weight: 600; line-height: 1; }
.gc-texto { flex: 1 1 260px; min-width: 0; display: grid; gap: 3px; }
.gc-trilha { display: flex; flex-wrap: wrap; gap: 0 4px; }
.gc-trilha a { color: var(--texto-2); text-decoration: none; transition: color 0.15s ease; }
.gc-trilha a:hover { color: var(--cor); text-decoration: underline; }
.gestao-cabecalho.gc h2 { margin: 0; font-size: 21px; line-height: 1.2; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.gc-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.gc-pill { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 2px 10px; border-radius: 6px; background: rgba(29, 29, 31, 0.05); font-size: 12.5px; color: var(--texto); }
.gc-pill a { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; font-weight: 500; }
.gc-pill a:hover { text-decoration: underline; }
.gc-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 719px) {
  .gestao-cabecalho.gc { flex-wrap: wrap; gap: 12px; padding: 16px 16px 16px 20px; }
  .gestao-cabecalho.gc > .gc-icone { flex: 0 0 44px !important; width: 44px; height: 44px; }
  .gestao-cabecalho.gc > .gc-texto { flex: 1 1 calc(100% - 60px) !important; }
  .gestao-cabecalho.gc > .gc-acoes { width: 100%; justify-content: flex-start; }
}

/* cartões (vistorias, avisos, modelos, checklist aplicado, diário da obra): brancos, com borda fina, faixa colorida e sombra ao passar */
.gestao-card { padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.85); border: 1px solid var(--linha); border-left: 3px solid rgba(29, 29, 31, 0.15); box-shadow: none; transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease; animation: k-surgir 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@media (hover: hover) { .gestao-card:hover { box-shadow: 0 6px 18px rgba(31, 41, 72, 0.08); transform: translateY(-1px); } }
.gestao-cards > .gestao-card:nth-child(2), .gestao-linha-tempo > :nth-child(2) .gestao-card, .gestao-datas > :nth-child(2) { animation-delay: 40ms; }
.gestao-cards > .gestao-card:nth-child(3), .gestao-linha-tempo > :nth-child(3) .gestao-card, .gestao-datas > :nth-child(3) { animation-delay: 80ms; }
.gestao-cards > .gestao-card:nth-child(4), .gestao-linha-tempo > :nth-child(4) .gestao-card, .gestao-datas > :nth-child(4) { animation-delay: 120ms; }
.gestao-cards > .gestao-card:nth-child(n+5), .gestao-linha-tempo > :nth-child(n+5) .gestao-card, .gestao-datas > :nth-child(n+5) { animation-delay: 160ms; }
.gestao-card.inativo { opacity: 0.6; }
.gestao-card.inativo:hover { opacity: 1; }
.gestao-card-topo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.gestao-card-topo b { font-size: 14.5px; }
.gestao-card-texto { white-space: pre-wrap; margin-top: 8px; font-size: 14px; line-height: 1.55; }
.gestao-card-acoes { display: inline-flex; gap: 2px; margin-left: auto; flex: none; }
.gestao-card-acoes .acao-icone { width: 32px; height: 32px; border-radius: 8px; color: var(--texto-3); }
@media (hover: hover) { .gestao-card-acoes .acao-icone { opacity: 0.55; } .gestao-card:hover .gestao-card-acoes .acao-icone, .gd-item:hover .gestao-card-acoes .acao-icone, .gestao-card-acoes .acao-icone:focus-visible { opacity: 1; } }
.gestao-card-acoes .acao-icone:hover { color: var(--cor); }
.gestao-card-acoes .acao-icone.perigo:hover { color: var(--vermelho); }
.acao-icone svg { width: 16px; height: 16px; }
.acao-icone.nosso { color: #1e7e8c; }
.acao-icone.tem-arquivo { color: #1e7e8c; }

/* fotos: miniaturas que abrem no visor, campo com "Tirar foto" e "Galeria" */
.foto-mini-btn { display: block; padding: 0; border: 0; background: none; border-radius: 8px; overflow: hidden; cursor: zoom-in; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.foto-mini-btn img { display: block; }
@media (hover: hover) { .foto-mini-btn:hover { transform: scale(1.03); box-shadow: 0 6px 16px rgba(31, 41, 72, 0.16); } }
.foto-mini { position: relative; }
.foto-mini .foto-x { z-index: 1; transition: transform 0.15s ease; }
.foto-mini .foto-x:hover { transform: scale(1.1); }
.gestao-fotos { display: grid; gap: 8px; }
.gestao-fotos .fotos-mini { margin-top: 0; }
.gestao-fotos-botoes { display: flex; gap: 8px; flex-wrap: wrap; }
.gestao-fotos-botoes label { cursor: pointer; gap: 6px; }
.gestao-fotos-botoes label.ocupado { opacity: 0.7; pointer-events: none; }
.gestao-fotos.compacto { flex: 1 1 auto; min-width: 0; }
.gestao-fotos.compacto .fotos-mini img, .gestao-fotos.compacto .fotos-mini .foto-mini-btn img { width: 64px; height: 64px; }
.visor-fotos .visor-corpo { position: relative; padding: 12px; background: #15151a; cursor: zoom-out; }
.visor-fotos .visor-corpo img { max-height: 100%; max-width: 100%; border-radius: 6px; cursor: default; animation: k-surgir 0.2s ease both; }
.visor-seta { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--texto); font-size: 26px; line-height: 1; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); transition: transform 0.15s ease, background 0.15s ease; cursor: pointer; }
.visor-seta.ant { left: 14px; } .visor-seta.prox { right: 14px; }
.visor-seta:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.visor-fotos .visor-nome { font-variant-numeric: tabular-nums; color: var(--texto-2); }

/* histórico (mural): caixa de registro com avatar, textarea e fotos; registros por dia, em conversa */
.gestao-historico { display: grid; gap: 14px; }
.gh-form { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.85); border: 1px solid var(--linha); transition: box-shadow 0.2s ease, border-color 0.2s ease; }
.gh-form:focus-within { border-color: rgba(29, 43, 69, 0.25); box-shadow: 0 0 0 3px var(--cor-suave); }
.gh-form .gestao-avatar { margin-top: 2px; }
.gh-form-corpo { flex: 1; min-width: 0; display: grid; gap: 10px; }
.gh-form textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid transparent; border-radius: 10px; background: var(--campo, #f0f0f4); font: inherit; line-height: 1.5; resize: vertical; transition: background 0.15s ease; }
.gh-form textarea:focus { outline: none; background: #fff; border-color: var(--linha); }
.gh-form-rodape { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.gh-form-rodape > .btn { margin-left: auto; }
.gh-aviso { margin: -4px 2px 0; }
.gh-dia { display: grid; gap: 8px; }
.gh-dia + .gh-dia { margin-top: 4px; }
.gh-dia-rotulo { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-3); }
.gh-dia-rotulo::before, .gh-dia-rotulo::after { content: ''; flex: 1; height: 1px; background: var(--linha); }
.gh-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gh-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: rgba(29, 29, 31, 0.03); border: 1px solid transparent; transition: background-color 0.18s ease, border-color 0.18s ease; animation: k-surgir 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.gh-lista > .gh-item:nth-child(2) { animation-delay: 40ms; } .gh-lista > .gh-item:nth-child(3) { animation-delay: 80ms; } .gh-lista > .gh-item:nth-child(n+4) { animation-delay: 120ms; }
@media (hover: hover) { .gh-item:hover { background: rgba(29, 29, 31, 0.05); } }
.gh-item.pendente { background: rgba(255, 149, 0, 0.08); border-color: rgba(255, 149, 0, 0.22); }
@media (hover: hover) { .gh-item.pendente:hover { background: rgba(255, 149, 0, 0.12); } }
.gestao-avatar { flex: 0 0 34px; width: 34px; height: 34px; font-size: 14px; font-weight: 600; color: #fff; display: grid; place-items: center; border-radius: 50%; }
.gestao-avatar.pequeno { flex-basis: 26px; width: 26px; height: 26px; font-size: 11px; }
.gh-corpo { flex: 1; min-width: 0; display: grid; gap: 4px; }
.gh-topo { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.gh-topo b { font-size: 14px; font-weight: 600; }
.gh-topo time { font-size: 12.5px; color: var(--texto-3); }
.gh-topo .chip { margin-left: auto; }
.gh-contexto { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--texto-2); padding: 1px 8px; border-radius: 6px; background: rgba(29, 29, 31, 0.05); }
.gh-contexto svg { width: 14px; height: 14px; }
.gh-texto { white-space: pre-wrap; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.gh-corpo .fotos-mini { margin-top: 4px; }
.gh-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.gh-acoes .btn-texto { min-height: 32px; }
.gestao-pendentes .gh-item.pendente { background: rgba(255, 255, 255, 0.85); border-color: var(--linha); border-left: 3px solid var(--laranja); }

/* datas importantes: bloco de data à esquerda, texto, ações */
.gestao-datas { display: grid; gap: 8px; }
.gestao-datas .gd-item { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border-radius: 12px; border: 1px solid var(--linha); border-bottom: 1px solid var(--linha); background: rgba(255, 255, 255, 0.85); transition: background-color 0.18s ease, box-shadow 0.2s ease; animation: k-surgir 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@media (hover: hover) { .gestao-datas .gd-item:hover { box-shadow: 0 6px 18px rgba(31, 41, 72, 0.08); } }
.gestao-datas .gd-item.passada { opacity: 0.6; }
.gestao-datas .gd-item.passada:hover { opacity: 1; }
.gestao-datas .gd-item.hoje { border-color: rgba(30, 126, 140, 0.35); background: rgba(30, 126, 140, 0.06); }
.gd-data { flex: 0 0 52px; width: 52px; display: grid; justify-items: center; padding: 6px 0; border-radius: 10px; background: var(--cor-suave); color: var(--cor); line-height: 1; }
.gd-data b { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.gd-data span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }
.gd-data small { font-size: 10px; color: var(--texto-3); margin-top: 2px; }
.gd-data.passada { background: rgba(29, 29, 31, 0.06); color: var(--texto-2); }
.gd-texto { flex: 1; min-width: 0; }
.gd-texto .forte { font-size: 14.5px; overflow-wrap: anywhere; }
/* diário da obra: linha do tempo com o bloco de data e o cartão */
.gestao-linha-tempo { gap: 12px; position: relative; margin-top: 12px; }
.gestao-modelo-itens { margin: 8px 0 0 18px; padding: 0; color: var(--texto-2); columns: 2; column-gap: 24px; }
.gestao-modelo-itens li { break-inside: avoid; padding: 1px 0; }
@media (max-width: 719px) { .gestao-modelo-itens { columns: 1; } }
.gestao-lt-item { grid-template-columns: 52px 1fr; gap: 14px; align-items: start; }
.gestao-lt-data { padding-top: 0; }
.gestao-lt-corpo.gestao-card { background: rgba(255, 255, 255, 0.85); }
@media (max-width: 560px) { .gestao-lt-item { grid-template-columns: 1fr; gap: 6px; } .gestao-lt-item .gd-data { width: auto; grid-auto-flow: column; justify-content: start; gap: 6px; padding: 4px 10px; } .gestao-lt-item .gd-data b { font-size: 15px; } }

/* checklist aplicado: cartão com progresso; os itens cabem no botão inteiro (antes o texto ia parar na beira direita) */
.gestao-check.gestao-card { margin-bottom: 10px; }
.gestao-check.completo { border-left-color: var(--verde); }
.gestao-check-topo b { flex: 0 1 auto; }
.gestao-check-lista { margin-top: 6px; }
.gestao-check-lista li { padding: 0; }
.gestao-check-lista .check { width: 100%; min-height: 44px; padding: 6px 4px; gap: 12px; border-radius: 8px; transition: background-color 0.15s ease; }
@media (hover: hover) { .gestao-check-lista .check:hover { background: rgba(29, 29, 31, 0.04); } .gestao-check-lista .check:hover .check-circulo { border-color: var(--cor); } }
.gestao-check-lista .check-circulo { width: 22px; height: 22px; font-size: 12px; }
.gestao-check-lista .check span:last-child { flex: 1; min-width: 0; text-align: left; }
.gestao-check .progresso { height: 6px; border-radius: 3px; }

/* parcelas: datas e valores sem quebrar, ícones de ação alinhados à direita */
.tabela-parcelas td:first-child, .tabela-parcelas td:nth-child(4), .tabela-parcelas .num { white-space: nowrap; }
.tabela-parcelas .acoes-parcela { white-space: nowrap; text-align: right; }
.tabela-parcelas .acoes-parcela .acao-icone { vertical-align: middle; }
.tabela-parcelas .inline { min-height: 36px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--linha); background: #fff; font: inherit; }
.tabela-parcelas .inline.num { width: 110px; text-align: right; }
.parcela-nota { display: flex; align-items: flex-start; gap: 5px; margin-top: 5px; color: #1e7e8c; max-width: 260px; line-height: 1.4; }
.parcela-nota svg { flex: none; width: 14px; height: 14px; margin-top: 2px; }
.tabela-contratos td:nth-child(4), .gestao-imoveis-lista td:last-child { white-space: nowrap; }
.tabela-contratos tbody tr, .gestao-imoveis-lista tbody tr { transition: background-color 0.15s ease; }

/* painel: listas de alerta com a linha inteira clicável, seta e hover (como a Visão Geral) */
.gestao-alertas li { display: block; padding: 0; border-bottom: 0; }
.ga-linha { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 7px 8px 7px 6px; margin: 0 -6px; border-radius: 8px; text-decoration: none; color: inherit; font-size: 13.5px; transition: background-color 0.15s ease; }
.gestao-alertas li + li .ga-linha { border-top: 1px solid var(--linha); border-radius: 0 0 8px 8px; }
@media (hover: hover) { .ga-linha:hover { background: rgba(29, 29, 31, 0.04); } .ga-linha:hover .ga-texto { color: var(--cor); } .ga-linha:hover .seta { transform: translateX(2px); } }
.ga-linha .ponto { flex: 0 0 8px; }
.ga-texto { flex: 1; min-width: 0; overflow-wrap: anywhere; transition: color 0.15s ease; }
.ga-linha b { font-size: 13px; white-space: nowrap; }
.ga-linha .seta { flex: none; width: 16px; height: 16px; color: var(--texto-3); transition: transform 0.15s ease; }
.ga-vazio { margin: 4px 0 0; }
.ga-aviso { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: rgba(255, 149, 0, 0.1); color: #9a5b00; }
.ga-aviso a { color: inherit; font-weight: 500; }
.gestao-aviso { padding: 12px 14px; border-radius: 10px; background: rgba(30, 126, 140, 0.07); border-left: 3px solid #1e7e8c; margin-bottom: 8px; }
.gestao .painel-cabecalho { flex-wrap: wrap; row-gap: 8px; }
.gestao-periodo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gestao-periodo > span { white-space: nowrap; }
.gestao-periodo input[type='date'] { min-height: 36px; }
.gestao .kpi { transition: transform 0.18s ease, box-shadow 0.2s ease; }
@media (hover: hover) { .gestao .kpi:hover { transform: translateY(-2px); box-shadow: var(--sombra-m); } }
.gestao .grade > .painel { animation: k-surgir 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.gestao .grade > .painel:nth-child(2) { animation-delay: 40ms; } .gestao .grade > .painel:nth-child(3) { animation-delay: 80ms; } .gestao .grade > .painel:nth-child(n+4) { animation-delay: 120ms; }
@media (prefers-reduced-motion: reduce) { .gestao-card, .gh-item, .gestao-datas .gd-item, .gestao .grade > .painel, .visor-fotos .visor-corpo img { animation: none !important; } }
/* V4.24 · modal do intervento: os segmentos (Quem avisou, Prioridade, Tipo, Cobrar de) ocupam o campo e dividem o espaço — antes vazavam e se sobrepunham */
.chamado-form .campo > .segmentos, .chamado-detalhe .campo > .segmentos { display: flex; width: 100%; }
.chamado-form .campo > .segmentos button, .chamado-detalhe .campo > .segmentos button { flex: 1 1 0; min-width: 0; padding: 0 6px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chamado-form .opcao .anexo-x { border: 0; background: none; padding: 0 2px; margin-left: 4px; color: inherit; font: inherit; font-size: 15px; line-height: 1; cursor: pointer; opacity: 0.7; transition: opacity 0.15s ease; }
.chamado-form .opcao .anexo-x:hover { opacity: 1; }
@media (max-width: 560px) { .chamado-form .campo > .segmentos { flex-wrap: wrap; gap: 2px; } .chamado-form .campo > .segmentos button { flex: 1 1 45%; } .chamado-form .campo > .segmentos button:first-child:nth-last-child(-n+3), .chamado-form .campo > .segmentos button:first-child:nth-last-child(-n+3) ~ button { flex-basis: 30%; } }
/* V4.24 · laudo: observações no mesmo estilo dos outros campos; fotos com o campo padrão */
.laudo-detalhe textarea { width: 100%; min-height: 84px; padding: 10px 12px; border: 1px solid transparent; border-radius: 10px; background: var(--campo, #f0f0f4); font: inherit; line-height: 1.5; resize: vertical; transition: background 0.15s ease, border-color 0.15s ease; }
.laudo-detalhe textarea:focus { outline: none; background: #fff; border-color: var(--linha); box-shadow: 0 0 0 3px var(--cor-suave); }
.laudo-detalhe textarea + .gestao-fotos { margin-top: 8px; }

/* ===== V4.25 · honorários iniciais da busca personalizada em parcelas (até 6x) ===== */
.parc-honorario .segmentos.parc-seg { display: inline-flex; align-self: flex-start; }
.parc-seg button { padding: 0 12px; }
.parc-seg button:disabled { opacity: 0.45; cursor: not-allowed; }
.parc-tabela-caixa { overflow-x: auto; margin-top: 6px; border: 1px solid var(--linha); border-radius: 10px; background: rgba(255, 255, 255, 0.85); }
.parc-tabela { font-size: 13.5px; }
.parc-tabela th, .parc-tabela td { white-space: nowrap; }
.parc-tabela .inline { min-height: 36px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--linha); background: #fff; font: inherit; }
.parc-tabela .inline.num { width: 104px; text-align: right; }
.parc-tabela input[type='date'].inline { width: 148px; }
.parc-tabela td:first-child .chip { margin-top: 3px; }
.parc-tabela td { vertical-align: top; padding-top: 10px; }
.parc-tabela tr.paga td { background: rgba(52, 199, 89, 0.06); }
.parc-tabela tr.atrasada td:first-child { box-shadow: inset 3px 0 0 var(--vermelho); }
.parc-tabela td .chip { vertical-align: middle; }
.parc-hoje { display: block; padding: 0; min-height: 24px; font-size: 12px; margin-top: 2px; }
.parc-rodape { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 8px; }
.parc-rodape .btn-texto { padding: 0; min-height: 0; }
.parc-alerta { color: #c1271f; font-weight: 500; }
.parc-estado { min-height: 44px; display: flex; align-items: center; }

/* ===== V4.26 · imóveis do site (WordPress/Houzez) no Cadastro interno ===== */
.cartao-capa { margin: -14px -16px 10px; border-radius: 6px 6px 0 0; overflow: hidden; aspect-ratio: 16 / 9; background: rgba(29, 29, 31, 0.05); }
.cartao-capa img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
@media (hover: hover) { .cartao:hover .cartao-capa img { transform: scale(1.03); } }
.cartao-capa.apagada img { filter: grayscale(0.6); opacity: 0.75; }
.site-info { display: grid; gap: 10px; }
.site-dados > div > div { font-size: 14px; }
.site-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.site-links .btn svg { width: 13px; height: 13px; }
.segmentos button .conta { margin-left: 6px; font-size: 11px; padding: 1px 6px; border-radius: 999px; background: rgba(29, 29, 31, 0.08); }

/* ===== V4.27 · "Onde este imóvel aparece": seção no topo da ficha, caixa "Faltam esses dados", obra/KHost ligados e varredura ===== */
.onde-painel { animation: k-surgir 0.35s ease both; }
.onde-painel .painel-cabecalho { flex-wrap: wrap; gap: 8px 12px; }
.onde-grupo + .onde-grupo { margin-top: 12px; }
.onde-grupo-rotulo { margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-3); }
.onde-grupo-rotulo .onde-grupo-sub { font-weight: 400; letter-spacing: 0; text-transform: none; }
.onde-grade { display: grid; gap: 10px; }
.onde-grade.funis { grid-template-columns: repeat(4, 1fr); }
.onde-grade.registros { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .onde-grade.funis, .onde-grade.registros { grid-template-columns: repeat(2, 1fr); } }
.onde-lugar { position: relative; display: flex; flex-direction: column; border-radius: 14px; border: 1px solid var(--linha); background: rgba(255, 255, 255, 0.55); animation: k-surgir 0.4s ease both; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease; }
.onde-lugar:nth-child(2) { animation-delay: 0.04s; } .onde-lugar:nth-child(3) { animation-delay: 0.08s; } .onde-lugar:nth-child(4) { animation-delay: 0.12s; } .onde-lugar:nth-child(5) { animation-delay: 0.16s; } .onde-lugar:nth-child(6) { animation-delay: 0.2s; } .onde-lugar:nth-child(7) { animation-delay: 0.24s; }
.onde-lugar.ligada { background: rgba(255, 255, 255, 0.9); background: color-mix(in srgb, var(--lugar-cor) 9%, #fff); border-color: color-mix(in srgb, var(--lugar-cor) 32%, transparent); }
.onde-lugar.aqui { box-shadow: 0 0 0 2px var(--lugar-cor), var(--sombra-p); }
.onde-lugar.concluida { background: rgba(29, 29, 31, 0.035); border-color: var(--linha); }
.onde-lugar.sem-acesso { opacity: 0.55; }
.onde-toggle { flex: 1; display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 12px 12px 10px; background: none; border: 0; border-radius: 14px; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.onde-toggle:disabled { cursor: not-allowed; }
.onde-marca { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; border-radius: 50%; border: 1.5px solid var(--texto-3); display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 600; line-height: 1; background: transparent; transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; }
.onde-lugar.ligada .onde-marca { background: var(--lugar-cor); border-color: var(--lugar-cor); animation: k-pop 0.3s ease; }
.onde-lugar.concluida .onde-marca { background: var(--texto-3); border-color: var(--texto-3); }
.onde-texto { display: flex; flex-direction: column; min-width: 0; }
.onde-nome { font-weight: 600; font-size: 13.5px; line-height: 1.25; }
.onde-status { font-size: 12px; line-height: 1.3; color: var(--texto-2); margin-top: 3px; }
.onde-dica { color: var(--texto-3); opacity: 0; transition: opacity 0.18s ease; }
.onde-mais { font-size: 11px; padding: 0 5px; border-radius: 999px; background: rgba(29, 29, 31, 0.08); margin-left: 2px; }
@media (hover: hover) {
  .onde-lugar.desligada:not(.sem-acesso):hover { transform: translateY(-1px); box-shadow: var(--sombra-p); border-color: rgba(29, 29, 31, 0.16); }
  .onde-lugar.desligada:hover .onde-dica { opacity: 1; }
  .onde-lugar.desligada:not(.sem-acesso):hover .onde-marca { border-color: var(--lugar-cor); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lugar-cor) 16%, transparent); }
  .onde-lugar.ligada:not(.aqui):hover { transform: translateY(-1px); box-shadow: var(--sombra-p); }
}
.onde-toggle:active .onde-marca { transform: scale(0.88); }
.onde-acoes { display: flex; align-items: center; gap: 6px; padding: 0 10px 9px 44px; margin-top: -4px; font-size: 12px; }
.onde-abrir { display: inline-flex; align-items: center; gap: 2px; font-weight: 500; color: var(--lugar-cor); text-decoration: none; }
.onde-abrir:hover { text-decoration: underline; }
.onde-abrir svg { width: 12px; height: 12px; }
.onde-aqui { font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--lugar-cor); }
.onde-x { margin-left: auto; width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; border: 0; background: rgba(29, 29, 31, 0.06); color: var(--texto-2); font: inherit; font-size: 15px; line-height: 1; cursor: pointer; opacity: 0.7; transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease; }
.onde-x:hover { opacity: 1; background: rgba(255, 59, 48, 0.14); color: #c1271f; }
.onde-site { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; padding: 8px 12px; border-radius: 10px; background: rgba(29, 29, 31, 0.04); font-size: 13px; }
.onde-ponto { width: 9px; height: 9px; flex-shrink: 0; border-radius: 50%; background: var(--texto-3); }
.onde-ponto.ok { background: var(--verde); box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.18); }
.onde-site a svg { width: 11px; height: 11px; }
/* caixas "Levar para …" e "Faltam esses dados" */
.onde-dialogo-botoes { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.onde-dialogo-botoes .btn-texto { width: 100%; }
.onde-form-cabecalho { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.onde-falta { margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: #9a5b00; background: rgba(255, 149, 0, 0.14); vertical-align: middle; }
.onde-ligar { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linha); }
/* na obra (Kostrucom) e no imóvel KHost: de qual imóvel é */
.onde-satelite { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px; margin-bottom: 14px; border-radius: 14px; animation: k-surgir 0.35s ease both; }
.onde-satelite-texto { flex: 1; min-width: 200px; }
.onde-satelite-escolher { flex: 1 1 260px; min-width: 240px; }
.onde-satelite .btn svg { width: 12px; height: 12px; }
/* Geral › Todos os Imóveis: barra de pesquisa em cima, listagem embaixo */
.onde-pesquisa { position: relative; display: flex; align-items: center; margin-bottom: 18px; padding: 6px 8px; border-radius: 14px; }
.onde-pesquisa svg { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--texto-3); pointer-events: none; }
.onde-pesquisa .onde-busca { width: 100%; min-height: 46px; padding: 0 14px 0 44px; border: 1px solid transparent; border-radius: 10px; background: rgba(29, 29, 31, 0.04); font: inherit; font-size: 15px; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
.onde-pesquisa .onde-busca:focus { outline: none; background: #fff; border-color: var(--linha); box-shadow: 0 0 0 3px var(--cor-suave); }
.onde-pesquisa .onde-busca::placeholder { color: var(--texto-3); }
.onde-filtros { display: flex; flex-wrap: wrap; margin-bottom: 12px; }
.onde-filtros button { font-size: 12.5px; padding: 0 10px; }
.onde-tabela-caixa { overflow-x: auto; }
.onde-tabela { width: 100%; }
.onde-tabela th, .onde-tabela td { padding: 8px 6px; }
.onde-tabela th { font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--texto-2); white-space: nowrap; }
.onde-tabela th.onde-th { text-align: center; }
.onde-td { text-align: center; vertical-align: middle; }
.onde-td .onde-marca { margin: 0 auto; }
.onde-td .onde-marca.vazia { border-style: dashed; opacity: 0.5; }
.onde-td.ligada .onde-marca { background: var(--lugar-cor); border-color: var(--lugar-cor); }
.onde-td.concluida .onde-marca { background: var(--texto-3); border-color: var(--texto-3); }
.onde-ponto-link { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; color: inherit; text-decoration: none; }
.onde-td-texto { max-width: 96px; font-size: 10.5px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onde-td-imovel { min-width: 180px; max-width: 260px; }
.onde-td-imovel .chip { margin-top: 4px; }
@media (max-width: 560px) { .onde-grade { gap: 8px; } .onde-toggle { padding: 10px 10px 8px; } .onde-acoes { padding-left: 42px; } .onde-filtros { gap: 2px; } .onde-pesquisa { margin-bottom: 14px; } }
@media (prefers-reduced-motion: reduce) { .onde-lugar, .onde-painel, .onde-satelite, .onde-lugar.ligada .onde-marca { animation: none !important; } }

/* ===== V4.28 · e-mail de boas-vindas ao portal (ficha da pessoa e Gestão › Notificações) ===== */
.portal-envio { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.portal-envio .btn-texto { padding: 0; min-height: 0; }
.notif-bv-previa { display: grid; gap: 10px; margin: 4px 0 12px; }
.notif-bv-previa .segmentos { align-self: flex-start; }
.notif-bv-texto { padding: 12px 14px; border-radius: 12px; background: rgba(29, 29, 31, 0.04); border: 1px solid var(--linha); }
.notif-bv-texto b { display: block; margin-bottom: 6px; }
.notif-bv-texto pre { margin: 0 0 8px; font: inherit; font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.notif-bv-texto > span { display: block; }
.notif-bv-texto > span + span { margin-top: 4px; }
.notif-bv-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.notif-bv-nomes { margin-top: 10px; display: grid; gap: 4px; font-size: 13px; }
.notif-extra { display: inline-flex; align-items: center; gap: 10px; }

/* ===== V4.29 · aviso por e-mail (canal) + lembrete amigável e "ignorar" na lista de atrasos ===== */
.aviso-canal { display: flex; width: 100%; }
.aviso-canal button { flex: 1 1 0; }
.aviso-canal-nota { display: block; margin-top: 6px; }
.notif-atrasos li { grid-template-columns: 36px minmax(0, 1fr) auto auto; }
.notif-atraso-acoes { display: flex; align-items: center; gap: 8px; }
.notif-atraso-acoes .btn-texto { padding: 0 4px; min-height: 0; }
.notif-lembrete-feito { display: block; font-size: 11.5px; font-weight: 500; color: #1f8f3f !important; }
.notif-lembrete { display: grid; gap: 12px; }
.notif-lembrete-quem { display: flex; flex-wrap: wrap; gap: 6px; }
.notif-lembrete-canal { display: flex; width: 100%; margin-bottom: 6px; }
.notif-lembrete-canal button { flex: 1 1 0; }
.notif-lembrete textarea { width: 100%; min-height: 220px; padding: 10px 12px; border: 1px solid transparent; border-radius: 10px; background: var(--campo, #f0f0f4); font: inherit; font-size: 13.5px; line-height: 1.5; resize: vertical; }
.notif-lembrete textarea:focus { outline: none; background: #fff; border-color: var(--linha); box-shadow: 0 0 0 3px var(--cor-suave); }
@media (max-width: 720px) { .notif-atrasos li { grid-template-columns: 32px minmax(0, 1fr); } .notif-atraso-acoes { grid-column: 2; } }

/* ===== V4.30 · vistoria do inquilino (ficha do contrato) + Chaves por imóvel ===== */
.vist-inq-prazo { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--cinza-claro, rgba(29, 29, 31, 0.04)); }
.vist-inq-prazo-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--linha); border-radius: 12px; }
.vist-inq-prazo-form .campo { margin: 0; }
.vist-inq-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; margin-top: 12px; }
.vist-inq-foto { margin: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vist-inq-abrir { padding: 0; border: 0; background: transparent; cursor: pointer; width: 100%; }
.vist-inq-abrir img, .vist-inq-semmini { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: grid; place-items: center; background: rgba(29, 29, 31, 0.06); font-size: 28px; }
.vist-inq-foto figcaption { font-size: 12.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; }
.vist-inq-foto figcaption b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vist-inq-foto .btn-texto { font-size: 12px; align-self: flex-start; }
.chaves-lugares { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chaves-lugar { font: inherit; font-size: 12.5px; font-weight: 500; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--linha); background: #fff; color: var(--texto-2); cursor: pointer; }
.chaves-lugar.ativo { background: var(--cor); border-color: var(--cor); color: #fff; }
.tabela-chaves-imoveis td { vertical-align: top; }
.tabela-chaves-imoveis tr.chave-fora td:first-child { box-shadow: inset 3px 0 0 #ff9500; }
.chaves-local-select { font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--linha); background: #fff; max-width: 220px; }