/*
 * assets/css/app.css — aparência do sistema.
 * Menu lateral escuro + área clara; tela inicial no padrão "Busca Global" (busca no topo e
 * atalhos em cartões). Celular (até 991px): menu vira gaveta; até 600px: cartões menores.
 */
:root {
  --lp-menu-fundo: #2a3f54;
  --lp-menu-texto: #e7edf3;
  --lp-menu-hover: rgba(255, 255, 255, .07);
  --lp-menu-ativo: #34495e;
  --lp-destaque: #26b99a;
  --lp-destaque-escuro: #1e9c81;
  --lp-fundo: #f4f6f9;
  --lp-texto: #3c4757;
  --lp-largura-menu: 236px;
}

body { background: var(--lp-fundo); color: var(--lp-texto); }

/* ── menu lateral ─────────────────────────────────────────────────────────────── */
.lp-menu {
  position: fixed; inset: 0 auto 0 0; width: var(--lp-largura-menu); background: var(--lp-menu-fundo);
  color: var(--lp-menu-texto); display: flex; flex-direction: column; z-index: 1040;
  transition: transform .2s ease;
}
.lp-marca { display: flex; align-items: center; gap: 10px; padding: 18px 16px; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.08); }
.lp-marca:hover { color: #fff; }
.lp-marca-ico { width: 40px; height: 40px; border-radius: 11px; background: var(--lp-destaque); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; flex: 0 0 auto; }
.lp-marca-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.lp-marca-txt strong { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-marca-txt small { font-size: 12px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lp-nav { flex: 1 1 auto; overflow-y: auto; padding: 10px 8px; }
.lp-item, .lp-grupo {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 8px;
  color: var(--lp-menu-texto); text-decoration: none; font-size: 14px; background: none; border: 0; text-align: left;
}
.lp-item:hover, .lp-grupo:hover { background: var(--lp-menu-hover); color: #fff; }
.lp-item.ativo { background: var(--lp-menu-ativo); color: #fff; box-shadow: inset 3px 0 0 var(--lp-destaque); }
.lp-grupo { font-weight: 600; margin-top: 4px; }
.lp-grupo span { flex: 1 1 auto; }
.lp-seta { font-size: 11px; transition: transform .15s ease; }
.lp-grupo[aria-expanded="true"] .lp-seta { transform: rotate(180deg); }
.lp-sub { display: none; padding-left: 10px; }
.lp-sub.aberto { display: block; }
.lp-sub .lp-item { font-size: 13.5px; padding: 7px 12px; }

.lp-menu-rodape { display: flex; border-top: 1px solid rgba(255,255,255,.08); }
.lp-menu-rodape > a, .lp-menu-rodape button {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center; padding: 12px 0;
  color: var(--lp-menu-texto); background: rgba(0,0,0,.12); border: 0; font-size: 16px; text-decoration: none;
}
.lp-menu-rodape form { flex: 1 1 0; display: flex; }
.lp-menu-rodape > a:hover, .lp-menu-rodape button:hover { background: rgba(0,0,0,.25); color: #fff; }

/* ── área principal ───────────────────────────────────────────────────────────── */
.lp-principal { margin-left: var(--lp-largura-menu); min-height: 100vh; display: flex; flex-direction: column; }
.lp-topo { display: none; }
.lp-conteudo { flex: 1 1 auto; padding: 24px 28px; max-width: 1500px; width: 100%; }
.lp-titulo { font-size: 26px; font-weight: 300; color: #44607a; margin: 4px 0 20px; }
.lp-rodape { padding: 14px 28px; font-size: 12px; color: #8a96a3; }
.lp-fundo { display: none; }
.form-estreito { max-width: 520px; }
.form-medio { max-width: 860px; }
.aviso-card { max-width: 620px; }
.diag-ico { width: 32px; }
.detalhe-auditoria { max-width: 420px; }

/* ── tela inicial: busca + atalhos (modelo "Busca Global") ───────────────────── */
.qa-hero { background: #fff; border: 1px solid #edeff3; border-radius: 14px; padding: 20px 22px; margin-bottom: 26px; box-shadow: 0 1px 2px rgba(24,34,54,.04); }
.qa-hero-form { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.qa-hero-lbl { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #6b7785; margin: 0; }
.qa-input-box { flex: 1 1 320px; display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--lp-destaque); border-radius: 10px; padding: 0 12px; background: #fff; }
.qa-input-box .bi { color: #8a96a3; }
.qa-input-box input { flex: 1 1 auto; border: 0; outline: 0; padding: 11px 0; font-size: 15px; min-width: 0; background: transparent; }
.qa-input-box:focus-within { box-shadow: 0 0 0 3px rgba(38,185,154,.18); }
.qa-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--lp-destaque); color: #fff; border: 0; border-radius: 10px; padding: 11px 26px; font-weight: 700; box-shadow: 0 6px 14px -6px rgba(38,185,154,.7); }
.qa-btn:hover { background: var(--lp-destaque-escuro); }

.qa-sec { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8a96a3; margin: 6px 0 12px; }
.qa-sec::after { content: ""; flex: 1 1 auto; height: 1px; background: #e6e9ef; }
.qa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 11px; margin-bottom: 26px; }
.qa-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 14px 8px 12px;
  background: #fff; border: 1px solid #edeff3; border-radius: 12px; text-decoration: none; color: var(--lp-texto);
  position: relative; overflow: hidden; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.qa-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.qa-card:hover { transform: translateY(-3px); box-shadow: 0 12px 22px -12px rgba(24,34,54,.3); color: #1f2a37; }
.qa-card:hover::before { transform: scaleX(1); }
.qa-ico { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); transition: background .16s ease, color .16s ease, transform .16s ease; }
.qa-card:hover .qa-ico { background: var(--c); color: #fff; transform: scale(1.07) rotate(-3deg); }
.qa-label { font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.qa-resultados { margin-bottom: 26px; }

.cor-azul { --c: #3b82f6; } .cor-verde { --c: #16a34a; } .cor-laranja { --c: #f97316; }
.cor-roxo { --c: #7c3aed; } .cor-rosa { --c: #db2777; } .cor-ciano { --c: #0891b2; }
.cor-cinza { --c: #64748b; } .cor-vermelho { --c: #dc2626; } .cor-amarelo { --c: #ca8a04; }

/* ── telas sem menu (login, instalação) ─────────────────────────────────────── */
.lp-simples { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #2a3f54 0%, #34495e 45%, #f4f6f9 45%); padding: 16px; }
.lp-simples-caixa { width: 100%; max-width: 440px; }
.lp-simples-marca { display: flex; align-items: center; gap: 10px; justify-content: center; color: #fff; font-size: 20px; margin-bottom: 18px; }

/* ── celular e tablet: menu vira gaveta ─────────────────────────────────────── */
@media (max-width: 991.98px) {
  .lp-menu { transform: translateX(-100%); box-shadow: 0 0 40px rgba(0,0,0,.3); }
  .lp-menu-aberto .lp-menu { transform: none; }
  .lp-menu-aberto .lp-fundo { display: block; position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 1030; }
  .lp-principal { margin-left: 0; }
  .lp-topo { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 1020; background: var(--lp-menu-fundo); color: #fff; padding: 8px 12px; }
  .lp-abrir { background: none; border: 0; color: #fff; font-size: 24px; line-height: 1; padding: 4px 6px; }
  .lp-topo-nome { font-weight: 600; }
  .lp-conteudo { padding: 18px 16px; }
  .lp-titulo { font-size: 22px; margin-bottom: 14px; }
}
@media (max-width: 600px) {
  .qa-hero { padding: 16px; }
  .qa-hero-form { gap: 10px; }
  .qa-hero-lbl { flex-basis: 100%; }
  .qa-input-box { flex: 1 1 100%; }
  .qa-btn { width: 100%; justify-content: center; }
  .qa-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 9px; }
  .qa-card { padding: 11px 6px 9px; }
  .lp-rodape { padding: 12px 16px; }
}

/* ── estoque: cartões de empreendimento, resumo, grade de lotes e mapa ───────── */
.card-empreendimento h2 a { text-decoration: none; }
.resumo-status { border-left: 4px solid var(--bs-gray-400); color: inherit; }
.resumo-status.borda-success { border-left-color: #16a34a; } .resumo-status.borda-warning { border-left-color: #f59e0b; }
.resumo-status.borda-danger { border-left-color: #dc2626; } .resumo-status.borda-secondary { border-left-color: #94a3b8; }
.grade-lotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.lote-card { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border-radius: 10px; text-decoration: none; color: #1f2a37; border: 1px solid transparent; transition: transform .12s ease, box-shadow .12s ease; }
.lote-card:hover { transform: translateY(-2px); box-shadow: 0 8px 16px -10px rgba(24,34,54,.4); color: #111; }
.lote-num { font-weight: 700; font-size: 16px; }
.lote-area, .lote-valor { font-size: 11.5px; line-height: 1.25; }
.st-disponivel { background: #dcfce7; border-color: #86efac; }
.st-reservado { background: #fef3c7; border-color: #fcd34d; }
.st-vendido { background: #fee2e2; border-color: #fca5a5; }
.st-indisponivel { background: #e2e8f0; border-color: #cbd5e1; color: #64748b; }
.legenda { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid; vertical-align: -1px; }
.mapa-planta { position: relative; display: inline-block; max-width: 100%; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.12); background: #fff; }
.mapa-planta img { display: block; max-width: 100%; height: auto; cursor: crosshair; }
.mapa-ponto { position: absolute; transform: translate(-50%, -50%); min-width: 22px; height: 22px; padding: 0 4px; border-radius: 11px; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; text-decoration: none; color: #111; border: 1px solid; box-shadow: 0 1px 3px rgba(0,0,0,.35); -webkit-user-drag: none; }
.mapa-ponto.st-disponivel { background: #22c55e; border-color: #15803d; color: #fff; }
.mapa-ponto.st-reservado { background: #f59e0b; border-color: #b45309; color: #fff; }
.mapa-ponto.st-vendido { background: #ef4444; border-color: #b91c1c; color: #fff; }
.mapa-ponto.st-indisponivel { background: #94a3b8; border-color: #64748b; color: #fff; }
.mapa-legenda.st-disponivel { background: #22c55e; border-color: #15803d; } .mapa-legenda.st-reservado { background: #f59e0b; border-color: #b45309; }
.mapa-legenda.st-vendido { background: #ef4444; border-color: #b91c1c; } .mapa-legenda.st-indisponivel { background: #94a3b8; border-color: #64748b; }
/* visor com zoom (data-lp-zoom): sem JavaScript, a planta fica inteira na largura, como antes */
.mapa-visor { position: relative; border-radius: 10px; background: #eef1f5; box-shadow: inset 0 0 0 1px #dfe3ea; }
.mapa-visor.zoom-ativo { height: calc(100vh - 230px); min-height: 380px; overflow: hidden; touch-action: none; cursor: grab; user-select: none; }
.mapa-visor.zoom-ativo.arrastando, .mapa-visor.zoom-ativo.arrastando * { cursor: grabbing; }
.mapa-visor.zoom-ativo .mapa-planta { position: absolute; top: 0; left: 0; max-width: none; border-radius: 0; }
.mapa-visor.zoom-ativo .mapa-planta img { width: 100%; height: 100%; max-width: none; cursor: inherit; }
.mapa-visor.zoom-ativo.mapa-modo-posicionar .mapa-planta img { cursor: crosshair; }
.mapa-visor.zoom-ativo .mapa-ponto { cursor: pointer; transition: box-shadow .1s ease; }
.mapa-visor.zoom-ativo .mapa-ponto:hover { box-shadow: 0 0 0 3px rgba(31,111,235,.45), 0 1px 3px rgba(0,0,0,.35); z-index: 2; }
.mapa-ponto.mapa-ponto-escolhido { outline: 3px solid #1f6feb; outline-offset: 2px; z-index: 3; }
.mapa-zoom-botoes { position: absolute; top: 10px; right: 10px; z-index: 5; }
.mapa-visor:not(.zoom-ativo) .mapa-zoom-botoes { display: none; }
.mapa-visor:fullscreen { height: 100vh; border-radius: 0; background: #eef1f5; }
.mapa-posicionar { position: sticky; top: 8px; z-index: 6; }
.mapa-posicionar-lote { width: auto; min-width: 220px; }
@media (max-width: 600px) { .grade-lotes { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; } .lote-num { font-size: 15px; } .lote-area, .lote-valor { font-size: 10.5px; } }

/* ── área do corretor: seleção de lotes, barra fixa, textos ───────────────────── */
.lote-selecionavel { cursor: pointer; position: relative; }
.lote-selecionavel input { position: absolute; opacity: 0; pointer-events: none; }
.lote-selecionavel.marcado { outline: 3px solid #1f6feb; outline-offset: 1px; background: #dbeafe; border-color: #1f6feb; }
.lote-bloqueado { cursor: not-allowed; opacity: .75; }
.lote-bloqueado:hover { transform: none; box-shadow: none; }
.lote-info { cursor: pointer; font: inherit; }
.lote-info:focus-visible { outline: 3px solid #1f6feb; outline-offset: 1px; }
.lote-aviso { font-size: .7rem; font-weight: 600; color: #b45309; }
.lote-selecionavel.marcado::after { content: "✓"; position: absolute; top: 2px; right: 6px; font-weight: 700; color: #1f6feb; }
.barra-selecao { position: sticky; bottom: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px 14px; box-shadow: 0 -6px 18px -12px rgba(0,0,0,.35); margin-top: 8px; }
@media (max-width: 600px) { .barra-selecao .btn, .barra-selecao-botoes { width: 100%; } .barra-selecao-botoes .btn { flex: 1 1 0; width: auto; } }
.texto-pre { white-space: pre-line; }
/* mapa de escolha de lotes: o ponto disponível é marcável como o cartão da grade */
.mapa-ponto-marcavel input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mapa-ponto-marcavel:focus-within { box-shadow: 0 0 0 3px rgba(31,111,235,.6); }
.mapa-ponto-marcavel.marcado { background: #1f6feb; border-color: #1e40af; color: #fff; outline: 3px solid #93c5fd; outline-offset: 1px; z-index: 3; }
.mapa-visor.zoom-ativo .mapa-ponto-bloqueado, .mapa-ponto-bloqueado { cursor: not-allowed; }
button.mapa-ponto { font-family: inherit; }

/* ── contrato: a "folha" (pré-visualização e editor) ── */
.folha-contrato { background: #fff; color: #000; font-family: Georgia, "DejaVu Serif", serif; font-size: 15px; line-height: 1.55; text-align: justify; padding: 2.5rem 2.8rem; max-width: 52rem; margin: 0 auto; }
.folha-contrato h1 { font-size: 1.15rem; text-align: center; font-weight: 700; }
.folha-contrato h2 { font-size: 1rem; font-weight: 700; margin-top: 1.4rem; }
.folha-contrato table { width: 100%; border-collapse: collapse; margin: .4rem 0 1rem; }
.folha-contrato td, .folha-contrato th { border: 1px solid #555; padding: .25rem .4rem; vertical-align: top; text-align: left; }
.folha-contrato table.assinaturas td { border: none; padding-top: 2.2rem; text-align: center; }
.folha-contrato mark { background: #ffe08a; }
.lp-editor-area { min-height: 60vh; outline: none; border-radius: 0 0 .375rem .375rem; }
.lp-editor-area:focus { box-shadow: inset 0 0 0 2px rgba(13, 110, 253, .25); }
.lp-editor-fonte { min-height: 60vh; }
.lista-marcadores dt { font-weight: normal; margin-top: .4rem; }
.lista-marcadores dd { color: var(--bs-secondary-color); margin-bottom: 0; }
@media (max-width: 575.98px) { .folha-contrato { padding: 1.2rem 1rem; font-size: 14px; } }

/* ── Pix ── */
.qr-pix { width: 220px; max-width: 100%; background: #fff; padding: 4px; }
.qr-pix svg { width: 100%; height: auto; display: block; }

/* ── contador de pendências no cartão de atalho ── */
.qa-card { position: relative; }
.qa-contador { position: absolute; top: .45rem; right: .45rem; min-width: 1.6rem; height: 1.6rem; padding: 0 .45rem; border-radius: 999px;
  background: #dc2626; color: #fff; font-size: .8rem; font-weight: 700; line-height: 1.6rem; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.25); }