/* Plantel — base visual
   Menos moldura, mais respiro: nada de borda em volta de tudo. Superficie
   separa por tom (papel / branco / cinza quente), nao por linha. */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Geist:wght@400;500;600;700&display=swap');

:root {
  --papel:       #F5F3EE;
  --papel-fundo: #ECE9E2;
  --carta:       #FFFFFF;
  --tom:         #EFECE6;   /* campo, ficha, bloco de numero */
  --tom-2:       #E6E2DA;
  --tinta:       #14151A;
  --tinta-2:     #585B63;
  --tinta-3:     #979AA2;
  --linha:       rgba(20,21,26,.07);
  --linha-forte: rgba(20,21,26,.14);

  --marca:       #2838E0;   /* cobalto */
  --marca-2:     #1E2BC0;
  --marca-leve:  #E8EBFF;
  --marca-tinta: #1A2598;

  --apito:       #FF6A2B;   /* laranja do gerente e dos destaques */
  --apito-leve:  #FFEBDD;

  --coral:       var(--apito);
  --coral-leve:  var(--apito-leve);
  --sim:         #0E9A6A;
  --sim-leve:    #DDF3EA;
  --nao:         #E0474C;
  --nao-leve:    #FCE4E4;
  --ouro:        #B07D1F;

  --r-p: 12px;
  --r-m: 18px;
  --r-g: 24px;
  --r-xg: 32px;

  --sombra-p: 0 1px 2px rgba(20,21,26,.05);
  --sombra-m: 0 6px 20px -8px rgba(20,21,26,.18);
  --sombra-g: 0 24px 60px -24px rgba(20,21,26,.40), 0 2px 8px rgba(20,21,26,.06);

  --fonte: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fonte-titulo: 'Bricolage Grotesque', 'Geist', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

body { min-height: 100dvh; }

h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -.025em; font-family: var(--fonte-titulo); font-weight: 700; }
h4 { font-family: var(--fonte); }
p { margin: 0 0 .8em; }
a { color: var(--marca); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

img { max-width: 100%; display: block; }

.oculto { display: none !important; }
.so-leitor {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

::selection { background: var(--marca-leve); color: var(--marca-tinta); }

/* ------------------------------------------------------------- marca */

.marca {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none;
  color: var(--tinta);
}
.marca .sinal {
  width: 30px; height: 30px; flex: 0 0 30px;
  display: block;
  background: url('/icone.svg') center / contain no-repeat;
  font-size: 0; color: transparent;
}
.marca .texto {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -.045em;
  line-height: 1;
}
.marca .texto em { font-style: normal; color: var(--marca); }

/* ------------------------------------------------------------ botoes */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 14px 22px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -.01em;
  background: var(--tinta);
  color: #fff;
  text-decoration: none;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:active { transform: scale(.98); }
.btn:hover { background: #2A2C33; }
.btn[disabled] { opacity: .45; pointer-events: none; }

.btn.coral, .btn.marca { background: var(--marca); }
.btn.coral:hover, .btn.marca:hover { background: var(--marca-2); }

.btn.contorno {
  background: var(--tom); color: var(--tinta);
}
.btn.contorno:hover { background: var(--tom-2); }

.btn.fantasma { background: transparent; color: var(--tinta-2); }
.btn.fantasma:hover { background: var(--tom); }

.btn.bloco { width: 100%; }
.btn.pequeno { padding: 10px 16px; font-size: 14px; }

/* ------------------------------------------------------------ campos */

.campo { display: block; margin-bottom: 16px; }
.campo > span {
  display: block;
  font-size: 13.5px; font-weight: 600;
  color: var(--tinta);
  margin-bottom: 7px;
}
.campo > span .dica { font-style: normal; font-weight: 400; color: var(--tinta-3); margin-left: 4px; }

.campo input, .campo select, .campo textarea {
  width: 100%;
  background: var(--tom);
  border: 1.5px solid transparent;
  border-radius: var(--r-m);
  padding: 13px 15px;
  outline: none;
  font-size: 15.5px;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--tinta-3); }
.campo textarea { min-height: 104px; resize: vertical; line-height: 1.45; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  background: var(--carta);
  border-color: var(--marca);
  box-shadow: 0 0 0 4px var(--marca-leve);
}
.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23585B63' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
  padding-right: 38px;
}

.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dupla-larga { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }

/* fichas selecionaveis (chips) */
.fichas { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--tom);
  border-radius: 999px;
  padding: 9px 15px;
  font-size: 14px; font-weight: 500;
  user-select: none;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.ficha:hover { background: var(--tom-2); }
.ficha input { position: absolute; opacity: 0; pointer-events: none; }
.ficha:has(input:checked) { background: var(--tinta); color: #fff; }
.ficha:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--marca-leve); }

/* escolha grande de duas opcoes (corretor / gerente) */
.escolha { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.escolha label {
  position: relative; cursor: pointer;
  background: var(--tom); border-radius: var(--r-m);
  padding: 14px 15px 13px;
  border: 1.5px solid transparent;
  transition: background .14s ease, border-color .14s ease;
}
.escolha label b { display: block; font-size: 15.5px; letter-spacing: -.01em; }
.escolha label span { display: block; font-size: 13px; color: var(--tinta-2); line-height: 1.35; margin-top: 2px; }
.escolha input { position: absolute; opacity: 0; pointer-events: none; }
.escolha label:has(input:checked) { background: var(--marca-leve); border-color: var(--marca); }
.escolha label:has(input:checked) b { color: var(--marca-tinta); }

/* interruptor */
.chave { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.chave input { position: absolute; opacity: 0; pointer-events: none; }
.chave .trilho {
  width: 46px; height: 28px; border-radius: 999px;
  background: var(--tom-2); position: relative;
  transition: background .18s ease; flex: 0 0 46px;
}
.chave .trilho::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: transform .2s cubic-bezier(.3,.7,.4,1.3);
}
.chave input:checked + .trilho { background: var(--sim); }
.chave input:checked + .trilho::after { transform: translateX(18px); }

/* ------------------------------------------------------------ etiquetas */

.etiqueta {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 12.5px; font-weight: 600;
  background: var(--tom);
  color: var(--tinta-2);
  white-space: nowrap;
}
.etiqueta.verde { background: var(--sim-leve); color: #0A6E4C; }
.etiqueta.coral, .etiqueta.apito { background: var(--apito-leve); color: #B7440F; }
.etiqueta.marca { background: var(--marca-leve); color: var(--marca-tinta); }
.etiqueta.ouro  { background: #F7EDD5; color: #815B12; }
.etiqueta.escura { background: var(--tinta); color: #fff; }

/* ------------------------------------------------------------ avisos */

.aviso {
  border-radius: var(--r-m);
  padding: 13px 16px;
  font-size: 14.5px;
  margin-bottom: 14px;
}
.aviso.ruim { background: var(--nao-leve); color: #9A2A2E; }
.aviso.bom  { background: var(--sim-leve); color: #0A6E4C; }
.aviso.neutro { background: var(--tom); color: var(--tinta-2); }

/* ------------------------------------------------------------ diversos */

.vazio {
  text-align: center;
  padding: 46px 24px;
  color: var(--tinta-2);
}
.vazio h3 { font-size: 21px; margin-bottom: 8px; color: var(--tinta); }
.vazio p { font-size: 15px; max-width: 36ch; margin-inline: auto; }

.carregando {
  display: inline-block; width: 20px; height: 20px;
  border: 2.5px solid var(--tom-2); border-top-color: var(--marca);
  border-radius: 50%;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.aviso-flutuante {
  position: fixed; left: 50%; bottom: 104px; transform: translateX(-50%) translateY(14px);
  background: var(--tinta); color: #fff;
  padding: 13px 20px; border-radius: 999px;
  font-size: 14.5px; font-weight: 500;
  box-shadow: var(--sombra-g);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .25s cubic-bezier(.3,.7,.4,1.2);
  z-index: 190; max-width: min(92vw, 420px); text-align: center;
}
.aviso-flutuante.aparece { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}