/* ATENCAO: a Hostinger serve este arquivo com
   cache-control: max-age=31536000, immutable -- o navegador nunca revalida.
   Mudou algo aqui? INCREMENTE o ?v= no <link> de TODAS as telas do admin,
   senao a mudanca so aparece para quem nunca abriu o painel. */
/* Backoffice — mesma linguagem visual do site */
:root{
  --verde:#052F2D; --verde-alto:#063836; --ouro:#D8A623; --ouro-suave:#C5A46A;
  --creme:#F3EFE6; --grafite:#39423F;
  --disp:#4F9D5D; --res:#D8A623; --contr:#3E8E9C; --cauc:#7A6CA8; --vend:#A44A3F;
  --linha:rgba(243,239,230,.16);
  --ui:"Jost","Avenir Next",Avenir,system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--verde);color:var(--creme);font-family:var(--ui);font-size:15px;line-height:1.5}
body.centro{display:grid;place-items:center;min-height:100vh;padding:1.5rem}
a{color:var(--ouro)}
:focus-visible{outline:2px solid var(--ouro);outline-offset:2px}

.cartao{background:var(--verde-alto);border:1px solid var(--linha);padding:2.25rem;max-width:380px;width:100%}
.cartao h1{margin:0 0 .4rem;font-weight:400;font-size:1.5rem}
.apoio{color:rgba(243,239,230,.55);font-size:.86rem}
.erro{background:rgba(164,74,63,.2);border-left:3px solid var(--vend);padding:.7rem .9rem;margin:1rem 0;font-size:.9rem}
.ok{background:rgba(79,157,93,.18);border-left:3px solid var(--disp);padding:.7rem .9rem;margin:1rem 0;font-size:.9rem}

label{display:block;margin:1.1rem 0}
label small{color:rgba(243,239,230,.5)}
input[type=password]{
  width:100%;margin-top:.4rem;padding:.7rem .8rem;font:inherit;
  background:var(--verde);color:var(--creme);border:1px solid var(--linha)}
input[type=password]:focus{border-color:var(--ouro);outline:none}
button{
  margin-top:.5rem;padding:.75rem 1.5rem;font:inherit;font-weight:500;cursor:pointer;
  background:var(--ouro);color:var(--verde);border:1px solid var(--ouro)}
button:hover{background:transparent;color:var(--ouro)}

.topo{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:1rem clamp(1rem,4vw,2.5rem);border-bottom:1px solid var(--linha);background:var(--verde-alto)}
.topo nav{display:flex;gap:1.25rem;font-size:.9rem}
.painel{padding:clamp(1.25rem,4vw,2.5rem);max-width:1250px;margin-inline:auto}

.resumo{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:1px;background:var(--linha);border:1px solid var(--linha);margin-bottom:2.5rem}
.resumo__item{background:var(--verde-alto);padding:1rem 1.2rem;display:flex;flex-direction:column;gap:.1rem}
.resumo__item b{font-size:1.7rem;font-weight:400;color:var(--ouro)}
.resumo__item span{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(243,239,230,.5)}
.resumo__item em{font-style:normal;font-size:.8rem;color:rgba(243,239,230,.7);margin-top:.25rem}
.resumo__item{border-top:2px solid transparent}
.resumo__item--disponivel{border-top-color:var(--disp)}
.resumo__item--reservado{border-top-color:var(--res)}
.resumo__item--em_contrato{border-top-color:var(--contr)}
.resumo__item--caucionado{border-top-color:var(--cauc)}
.resumo__item--vendido{border-top-color:var(--vend)}
/* So aparece quando ha status fora dos quatro conhecidos: e defeito, nao estado. */
.resumo__item--indefinido{border-top-color:#A44A3F}
.resumo__item--indefinido b{color:#E08A7C}
.resumo__item--total b{color:var(--creme)}

.quadra{margin-bottom:2.5rem}
.quadra h2{font-weight:400;font-size:1.15rem;margin:0 0 1rem;padding-bottom:.6rem;border-bottom:1px solid var(--linha)}
.quadra h2 .apoio{margin-left:.5rem}
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:.7rem}

.lote{background:var(--verde-alto);border:1px solid var(--linha);border-left:3px solid var(--linha);padding:.7rem .8rem}
.lote--disponivel{border-left-color:var(--disp)}
.lote--reservado {border-left-color:var(--res)}
.lote--em_contrato{border-left-color:var(--contr)}
.lote--caucionado{border-left-color:var(--cauc)}
.lote--vendido   {border-left-color:var(--vend);opacity:.72}
.lote--comum{border-left-color:rgba(243,239,230,.3);opacity:.8}
.lote__comum{margin:0;font-size:.78rem;line-height:1.45;color:rgba(243,239,230,.55)}

/* contagem regressiva da reserva */
.prazo{
  margin:.5rem 0 0;font-size:.74rem;letter-spacing:.02em;color:var(--res);
  display:flex;gap:.3rem;flex-wrap:wrap}
.prazo span{color:rgba(243,239,230,.75)}
.prazo--vencido{color:var(--vend)}
.prazo--vencido span{color:var(--vend);font-weight:500}
.lote__cab{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;margin-bottom:.55rem}
.lote__cab b{font-weight:500}
.lote__cab span{font-size:.78rem;color:rgba(243,239,230,.5)}
/* Tabela de parceiros: a coluna de acoes empilha botoes curtos em vez de
   esticar a tabela, e o nome tem espaco para respirar. */
.tabela--parceiros{ table-layout:fixed; width:100% }
.tabela--parceiros th:nth-child(1), .tabela--parceiros td:nth-child(1){ width:27% }
.tabela--parceiros th:nth-child(2), .tabela--parceiros td:nth-child(2){ width:19% }
.tabela--parceiros th:nth-child(3), .tabela--parceiros td:nth-child(3){ width:30% }
.tabela--parceiros th:nth-child(4), .tabela--parceiros td:nth-child(4){ width:24% }
.tabela--parceiros td{ vertical-align:top }
/* break-word, nao anywhere: o e-mail quebra entre palavras e so parte no meio
   se nao couber de jeito nenhum -- "gmail.co / m" era feio e dificil de ler. */
.tabela--parceiros td{ overflow-wrap:break-word }
.tabela--parceiros .contato{ font-variant-numeric:tabular-nums; line-height:1.45 }
/* Os botoes ficam do mesmo tamanho: uns sao <a>, outros <button> dentro de
   <form>, e sem isto so o <a> esticava. */
.tabela--parceiros .acoes{ display:flex; flex-direction:column; gap:.75rem }
.tabela--parceiros .acoes__grupo{ display:flex; flex-direction:column; gap:.35rem }
/* Uma linha fina separa o que e trabalho do que e manutencao de cadastro. */
.tabela--parceiros .acoes__grupo + .acoes__grupo{
  padding-top:.75rem; border-top:1px solid var(--linha) }
.tabela--parceiros .acoes form{ margin:0; display:block }
.tabela--parceiros .acoes .mini{ display:block; width:100%; text-align:center; box-sizing:border-box }
.tabela--parceiros .acoes__nota{ margin:0; font-size:.78rem; color:rgba(243,239,230,.55); text-align:center }
/* O PIN e o envio andam juntos: campo curto ao lado do botao, nao uma caixa
   solta ocupando a largura toda. */
.tabela--parceiros .enviar{ display:flex; gap:.35rem; align-items:center }
.tabela--parceiros .enviar__pin{
  display:flex; align-items:center; gap:.3rem; margin:0; flex:0 0 auto;
  font-size:.7rem; letter-spacing:.04em; color:rgba(243,239,230,.6) }
.tabela--parceiros .enviar__pin input{ width:4.2rem; padding:.3rem .35rem; text-align:center }
.tabela--parceiros .enviar .mini{ flex:1 1 auto; width:auto }
.tabela--parceiros .mini--acao{ background:var(--ouro); border-color:var(--ouro); color:var(--verde); font-weight:600 }

/* Marca um item errado no meio de uma lista, sem virar uma faixa inteira. */
.erro-inline{ color:#E8A0A0; font-weight:600 }
/* Selo da quadra no titulo do lote. Dentro do <b>, entao precisa desfazer o
   tom apagado que a regra acima da a todo span deste cabecalho. */
.lote__cab b .lote__q{
  display:inline-block;background:#D8A623;color:#052F2D;
  font-size:.72rem;font-weight:600;line-height:1;
  padding:.2rem .35rem;border-radius:.25rem;margin-right:.3rem;vertical-align:.08em;
}

/* Cinco situacoes numa grade de dois: a ultima ficaria sozinha e torta, entao
   "Em contrato" -- a terceira -- ocupa a linha inteira e separa o antes do
   depois: Disponivel/Reservado em cima, Caucionado/Vendido embaixo. */
.opcoes{display:grid;grid-template-columns:repeat(2,1fr);gap:2px}
.opcoes .op--em_contrato{grid-column:1 / -1}
.op{margin:0;position:relative}
.op input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.op span{
  display:block;text-align:center;padding:.4rem .2rem;font-size:.7rem;letter-spacing:.03em;
  background:var(--verde);border:1px solid var(--linha);color:rgba(243,239,230,.55);cursor:pointer}
.op input:checked + span{color:var(--verde);font-weight:500}
.op--disponivel input:checked + span{background:var(--disp);border-color:var(--disp)}
.op--reservado  input:checked + span{background:var(--res); border-color:var(--res)}
.op--em_contrato input:checked + span{background:var(--contr);border-color:var(--contr);color:var(--creme)}
.op--caucionado input:checked + span{background:var(--cauc);border-color:var(--cauc);color:var(--creme)}
.op--vendido    input:checked + span{background:var(--vend);border-color:var(--vend);color:var(--creme)}
.op input:focus-visible + span{outline:2px solid var(--ouro);outline-offset:1px}

.barra{
  position:sticky;bottom:0;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:1rem 0;background:linear-gradient(to top,var(--verde) 70%,transparent)}
.barra button{margin:0}

/* PIN de confirmacao */
.pin{display:flex;align-items:center;gap:.6rem;margin:0}
.pin span{font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:rgba(243,239,230,.55)}
.pin input{
  width:6.5rem;margin:0;padding:.55rem .7rem;background:var(--verde-alto);
  border:1px solid var(--linha);color:var(--creme);font-family:var(--ui);
  font-size:1rem;letter-spacing:.3em;text-align:center}
.barra--pede-pin .pin input{border-color:var(--ouro);background:rgba(216,166,35,.1)}
.barra--pede-pin .pin span{color:var(--ouro)}
.pin__nota{margin:.1rem 0 1.5rem;font-size:.78rem;line-height:1.5;max-width:52ch}
.pin__nota b{font-weight:500;color:rgba(243,239,230,.8)}

.aviso{
  background:rgba(216,166,35,.12); border-left:3px solid var(--ouro);
  padding:.75rem .9rem; margin:1rem 0; font-size:.85rem; line-height:1.55;
}
.aviso code{ font-family:ui-monospace,Menlo,monospace; color:var(--ouro); }
input[type=text]{
  width:100%; margin-top:.4rem; padding:.7rem .8rem; font:inherit;
  background:var(--verde); color:var(--creme); border:1px solid var(--linha);
  letter-spacing:.08em; text-transform:uppercase;
}
input[type=text]:focus{ border-color:var(--ouro); outline:none; }

/* ------------------------------------------------ pessoas e registro */
.painel--estreito{ max-width:1000px }
.bloco{ margin-bottom:2.5rem }
.bloco h2, .convite h2{ font-weight:400; font-size:1.1rem; margin:0 0 1rem;
  padding-bottom:.6rem; border-bottom:1px solid var(--linha) }

.linha-form{ display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end }
.linha-form label{ margin:0; flex:1 1 170px }
.linha-form button{ margin:0 }
select{ width:100%; margin-top:.4rem; padding:.7rem .8rem; font:inherit;
  background:var(--verde); color:var(--creme); border:1px solid var(--linha) }

.convite{ background:var(--verde-alto); border:1px solid var(--ouro);
  padding:1.5rem; margin-bottom:2.5rem }
.convite__codigo{ font-family:ui-monospace,Menlo,monospace; font-size:1.9rem;
  letter-spacing:.14em; color:var(--ouro); margin:.5rem 0 1rem; user-select:all }
.convite code{ font-family:ui-monospace,Menlo,monospace; color:var(--ouro) }

.tabela{ width:100%; border-collapse:collapse; font-size:.92rem }
.tabela th{ text-align:left; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(243,239,230,.5); font-weight:500; padding:.6rem .7rem; border-bottom:1px solid var(--linha) }
.tabela td{ padding:.75rem .7rem; border-bottom:1px solid var(--linha); vertical-align:top }
.tabela tr.apagada{ opacity:.5 }
.nowrap{ white-space:nowrap }

.tag{ display:inline-block; padding:.15rem .5rem; font-size:.7rem; letter-spacing:.05em }
.tag--on{ background:rgba(79,157,93,.22); color:#8FD39C }
.tag--pend{ background:rgba(216,166,35,.2); color:var(--ouro) }
.tag--exp{ background:rgba(164,74,63,.2); color:#E0998F }
.tag--off{ background:rgba(243,239,230,.1); color:rgba(243,239,230,.55) }

.tabela{ table-layout:auto }
.c-nome{ width:18% } .c-cpf{ width:12% } .c-email{ width:20% } .c-papel{ width:9% }
.c-sit{ width:13% } .c-acoes{ width:28% }
.ta-dir{ text-align:right }
td.acoes{ text-align:right; white-space:nowrap }
.acoes__grupo{ display:inline-flex; gap:.3rem; justify-content:flex-end; flex-wrap:nowrap }
.acoes__grupo form{ margin:0 }
.tabela tbody tr:hover{ background:rgba(243,239,230,.04) }
.mini{ margin:0; padding:.3rem .55rem; font-size:.72rem; white-space:nowrap;
  background:transparent; color:var(--creme); border:1px solid var(--linha) }
.mini:hover{ background:var(--creme); color:var(--verde) }
.mini--perigo{ border-color:rgba(164,74,63,.6); color:#E0998F }
.mini--perigo:hover{ background:var(--vend); color:var(--creme); border-color:var(--vend) }

/* ------------------------------------------------------ responsivo */
@media (max-width: 720px){
  .topo{ padding:.85rem 1rem }
  /* No dedo, link de 20px de altura nao se acerta. Cada item do menu vira um
     alvo de 44px -- a medida que a Apple e o Google recomendam --, sem mudar
     o tamanho da letra nem o desenho da barra. */
  .topo nav{ gap:.25rem .9rem; font-size:.85rem; flex-wrap:wrap }
  .topo nav a{ display:inline-flex; align-items:center; min-height:44px; padding:0 .15rem }
  .voltar{ min-height:44px; display:inline-flex; align-items:center; padding:0 .6rem }
  .painel{ padding:1.25rem 1rem }
  .cartao{ padding:1.75rem 1.35rem }
  .grade{ grid-template-columns:1fr }
  .resumo{ grid-template-columns:1fr 1fr; margin-bottom:1.75rem }
  .resumo__item{
    flex-direction:row; align-items:baseline; flex-wrap:wrap;
    gap:.1rem .5rem; padding:.7rem .85rem }
  .resumo__item b{ font-size:1.35rem }
  .resumo__item span{ font-size:.64rem; letter-spacing:.09em }
  .resumo__item em{ margin:0; width:100%; font-size:.74rem }
  .linha-form{ flex-direction:column; align-items:stretch }
  .linha-form label{ flex:none }
  .linha-form button{ width:100% }
  /* tabelas rolam em vez de espremer */
  .tabela{ display:block; overflow-x:auto; white-space:nowrap }
  .tabela td, .tabela th{ padding:.6rem .5rem }
  .acoes__grupo{ flex-wrap:nowrap }
  .convite__codigo{ font-size:1.5rem; letter-spacing:.1em; word-break:break-all }
  /* alvos de toque */
  button, .mini{ min-height:40px }
  .op span{ padding:.6rem .2rem }
  .barra{ padding:.85rem 0; background:var(--verde); box-shadow:0 -12px 18px -8px var(--verde) }
  .barra button{ width:100% }
  .pin{ width:100%; justify-content:space-between }
  .pin input{ width:7.5rem }
}
@media (max-width: 380px){
  .op span{ padding:.55rem .25rem; font-size:.66rem }
}

.ou{ text-align:center; margin:1.4rem 0 .9rem; font-size:.78rem; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(243,239,230,.35); position:relative }
.ou::before,.ou::after{ content:""; position:absolute; top:50%; width:38%; height:1px; background:var(--linha) }
.ou::before{ left:0 } .ou::after{ right:0 }
.botao-vazado{
  display:block; text-align:center; padding:.75rem 1.5rem;
  font-family:var(--ui); font-weight:500; font-size:15px; text-decoration:none;
  color:var(--ouro); background:transparent; border:1px solid var(--ouro);
}
.botao-vazado:hover{ background:var(--ouro); color:var(--verde) }

.cf-turnstile{ margin:1.1rem 0 .4rem; min-height:65px }

/* somente leitura: corretor ve a situacao mas nao muda */
.aviso-leitura{
  background:rgba(216,166,35,.1); border-left:3px solid var(--ouro);
  padding:.7rem .9rem; margin:0 0 2rem; color:var(--creme-70, rgba(243,239,230,.7));
}
.op--travada span{ cursor:default; opacity:.5 }
.op--travada input:checked + span{ opacity:1 }
.lote:has(.op--travada){ opacity:.95 }

/* ------------------------------------------- fichas de proposta */
.bloco{ margin:0 0 2.25rem }
.bloco h2{
  font-weight:400; font-size:1.05rem; margin:0 0 .3rem;
  padding-bottom:.55rem; border-bottom:1px solid var(--linha) }
.bloco h2 .apoio{ margin-left:.5rem; font-size:.78rem }
.bloco--apagado{ opacity:.45 }
.bloco--apagado:focus-within{ opacity:1 }

.campos{
  display:grid; gap:0 1rem;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr)) }
.campos label{ margin:.9rem 0 0 }

textarea{
  width:100%; margin-top:.4rem; padding:.7rem .8rem; font:inherit; line-height:1.5;
  background:var(--verde-alto); border:1px solid var(--linha); color:var(--creme);
  resize:vertical }
textarea:focus{ border-color:var(--ouro); outline:none }

.sub{ font-weight:400; font-size:.92rem; margin:1.75rem 0 .6rem; color:rgba(243,239,230,.7) }

.doc{ border:1px solid var(--linha); border-left:3px solid var(--disp);
      padding:.9rem 1rem; margin-bottom:.7rem; background:var(--verde-alto) }
.doc--travado{ border-left-color:var(--res); opacity:.85 }
.doc__cab{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap }
.doc__cab b{ font-weight:500 }
.doc__acao{ margin-top:.8rem }
.doc__acao label{ margin:0; flex:0 0 7.5rem }
.doc__acao input{ width:100%; margin-top:.3rem; padding:.5rem .6rem; text-align:center;
  letter-spacing:.3em; background:var(--verde); border:1px solid var(--linha); color:var(--creme) }

/* atalho para a ficha, dentro do cartao do lote */
.lote__ficha{
  display:block; margin-top:.55rem; padding-top:.5rem;
  border-top:1px solid var(--linha);
  font-size:.74rem; letter-spacing:.05em; color:rgba(243,239,230,.5);
  text-decoration:none }
.lote__ficha:hover{ color:var(--ouro) }
.lote__ficha--tem{ color:var(--ouro-suave) }

@media (max-width: 720px){
  .campos{ grid-template-columns:1fr }
  .doc__acao label{ flex:1 1 auto }
}

/* A caixa-alta de input[type=text] foi feita para CPF e código de convite.
   Na ficha o texto tem de sair como a pessoa escreveu — e os tipos email,
   date e tel precisam do mesmo visual dos de texto. */
.bloco input[type=text], .bloco input[type=email], .bloco input[type=date],
.bloco input[type=tel], .bloco input[type=number]{
  width:100%; margin-top:.4rem; padding:.7rem .8rem; font:inherit;
  background:var(--verde); color:var(--creme); border:1px solid var(--linha);
  letter-spacing:normal; text-transform:none;
}
.bloco input:focus{ border-color:var(--ouro); outline:none }
.bloco input[type=date]{ color-scheme:dark }

/* Formulario de um campo dentro da celula da tabela: o e-mail de acesso e
   editado na propria linha, sem tela de edicao a parte. Vem depois da regra
   do .bloco de proposito -- senao perde a largura e o respiro para ela. */
.linha-min{ display:flex; gap:.3rem; align-items:center }
.bloco .linha-min input, .linha-min input{
  width:auto; min-width:0; flex:1 1 auto; margin:0;
  font-size:.8rem; padding:.35rem .45rem; letter-spacing:normal; text-transform:none;
}
.linha-min button{ margin:0; flex:none }

/* faixa comercial, sob os campos de parcelamento */
.faixa{ margin:.6rem 0 0; padding:.5rem .8rem; font-size:.82rem;
  border-left:3px solid var(--disp); background:rgba(79,157,93,.1) }
.faixa--juros{ border-left-color:var(--res); background:rgba(216,166,35,.1) }
.conta{ margin:.5rem 0 0; padding:.6rem .8rem; font-size:.85rem;
  background:var(--verde-alto); border:1px solid var(--linha); color:var(--creme) }
/* seta de voltar no cabecalho da ficha */
.voltar{ display:inline-block; margin-right:.5rem; padding:.1rem .45rem;
  font-size:1.05rem; line-height:1.3; text-decoration:none;
  color:var(--creme); border:1px solid var(--linha) }
.voltar:hover{ background:var(--creme); color:var(--verde) }

/* painel de conferencia antes de mandar para assinatura. E um <details>, que
   abre sem JavaScript: como <dialog> so abria por script, numa maquina com o
   script bloqueado o botao de enviar ficava inalcancavel. */
.conferir{ background:var(--verde-alto); color:var(--creme); border:1px solid var(--linha);
  max-width:620px; padding:0 clamp(1.25rem,4vw,2rem) clamp(1.25rem,4vw,2rem) }
.conferir__abrir{
  cursor:pointer; list-style:none; margin:0 calc(clamp(1.25rem,4vw,2rem) * -1);
  padding:.85rem clamp(1.25rem,4vw,2rem);
  background:var(--ouro); color:var(--verde); font-weight:600; text-align:center }
.conferir__abrir::-webkit-details-marker{ display:none }
.conferir[open] .conferir__abrir{ margin-bottom:1.25rem }
.conferir h2{ font-weight:400; font-size:1.2rem; margin:0 0 1rem }
.conferir__docs{ margin:.4rem 0 0; padding-left:1.2rem; font-size:.92rem; line-height:2 }
.conferir__docs .mini{ margin-left:.5rem }
.conferir .linha-form{ margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--linha) }
/* dentro da janela a tabela quebra linha: rolagem horizontal aqui confunde */
.conferir .tabela{ display:table; white-space:normal; overflow:visible }
/* e-mail longo nao cabe inteiro numa linha estreita: quebra em vez de rolar */
.conferir__docs li{ overflow-wrap:anywhere }