/* =========================================================================
   Painel interno. Mesma paleta da proposta, sem efeito nenhum:
   é ferramenta de trabalho, precisa abrir rápido no celular no meio
   de uma reunião.
   ========================================================================= */

@font-face{
  font-family:"Conceito Grotesk";
  src:url("../fonts/AnthemGrotesk-VF.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  --creme:#FAF2E7;
  --azul:#1236FE;
  --roxo:#A700FF;
  --lilas:#C4CBFF;
  --fundo:#00081F;
  --borda:rgba(196,203,255,.16);
  --pad:clamp(1rem,4vw,2.5rem);
}

*,*::before,*::after{box-sizing:border-box}

body.painel{
  margin:0;min-height:100svh;
  background:var(--fundo);color:var(--creme);
  font-family:"Conceito Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:.98rem;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ambiente */
.ambiente{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.malha{
  position:absolute;inset:0;opacity:.3;
  background-image:
    linear-gradient(var(--borda) 1px,transparent 1px),
    linear-gradient(90deg,var(--borda) 1px,transparent 1px);
  background-size:82px 82px;
  -webkit-mask-image:radial-gradient(at 50% 30%,#000 15%,transparent 75%);
  mask-image:radial-gradient(at 50% 30%,#000 15%,transparent 75%);
}
.brilho{position:absolute;border-radius:50%;filter:blur(80px)}
.brilho--a{
  width:min(60vw,760px);aspect-ratio:1;right:-16vw;top:-26vh;
  background:radial-gradient(circle at 45% 45%,
    color-mix(in srgb,var(--azul) 52%,transparent),
    color-mix(in srgb,var(--roxo) 24%,transparent) 50%,transparent 72%);
}
.brilho--b{
  width:min(44vw,520px);aspect-ratio:1;left:-12vw;bottom:-24vh;
  background:radial-gradient(circle at 50% 50%,
    color-mix(in srgb,var(--azul) 34%,transparent),transparent 68%);
}

/* marca */
.marca{position:relative;z-index:2;display:grid;justify-items:center;gap:.35rem;margin-bottom:2rem}
.marca--linha{display:flex;align-items:center;gap:.7rem;margin:0}
.marca__sub{
  font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  color:color-mix(in srgb,var(--lilas) 70%,transparent);
}

/* topo */
.topo{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.4rem var(--pad);
}
.link-sair{
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  color:color-mix(in srgb,var(--creme) 55%,transparent);text-decoration:none;
}
.link-sair:hover{color:var(--creme)}

/* cartões */
.entrar{
  position:relative;z-index:2;
  min-height:100svh;display:grid;place-items:center;padding:var(--pad);
}
.painel__grade{
  position:relative;z-index:2;
  display:grid;gap:1.2rem;
  grid-template-columns:minmax(0,1fr);
  max-width:1180px;margin:0 auto;padding:0 var(--pad) 4rem;
}
@media (min-width:960px){
  .painel__grade{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
}

.cartao{
  padding:clamp(1.4rem,3vw,2.2rem);
  border:1px solid var(--borda);border-radius:22px;
  background:rgba(196,203,255,.05);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.cartao--estreito{width:min(100%,420px)}
.cartao--lista{max-height:none}
.cartao__titulo{
  margin:0 0 1.4rem;font-size:1.6rem;font-weight:600;letter-spacing:-.025em;
}
.cartao__titulo--menor{font-size:1.15rem;display:flex;align-items:center;gap:.6rem}
.contador{
  font-size:.72rem;font-weight:600;padding:.16rem .55rem;border-radius:999px;
  background:rgba(196,203,255,.14);color:var(--lilas);
}
.cartao__texto{margin:0 0 1.2rem;color:color-mix(in srgb,var(--creme) 72%,transparent)}

/* campos */
.campo{display:block;margin-bottom:1rem}
.campo__rotulo{
  display:block;margin-bottom:.4rem;
  font-size:.85rem;font-weight:600;letter-spacing:.01em;
}
.campo__rotulo--secao{
  margin:1.6rem 0 .8rem;padding-top:1.2rem;
  border-top:1px solid var(--borda);
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in srgb,var(--lilas) 78%,transparent);
}
.campo__opc{font-weight:400;color:color-mix(in srgb,var(--creme) 45%,transparent)}
.campo__input{
  width:100%;
  padding:.72rem .9rem;
  border:1px solid var(--borda);border-radius:12px;
  background:rgba(0,8,31,.55);color:var(--creme);
  font:inherit;font-size:.98rem;
  transition:border-color .25s,background .25s;
}
.campo__input:focus{
  outline:none;border-color:color-mix(in srgb,var(--azul) 70%,transparent);
  background:rgba(0,8,31,.8);
}
select.campo__input{appearance:none;cursor:pointer}
select.campo__input option{background:#00081F;color:var(--creme)}
textarea.campo__input{resize:vertical;line-height:1.5}

.dupla{display:grid;gap:1rem;grid-template-columns:1fr 1fr}

/* linha de plano */
.planos-campos{margin-bottom:.4rem}
.linha-plano{
  display:grid;gap:.7rem;align-items:center;
  grid-template-columns:minmax(5.5rem,1fr) minmax(0,9rem) auto;
  margin-bottom:.6rem;
}
.linha-plano__nome{font-size:.94rem;font-weight:600}
.campo-moeda{position:relative}
.campo-moeda__cifrao{
  position:absolute;left:.85rem;top:50%;translate:0 -50%;
  font-size:.86rem;color:color-mix(in srgb,var(--creme) 45%,transparent);
  pointer-events:none;
}
.campo-moeda .campo__input{padding-left:2.4rem;font-variant-numeric:tabular-nums}
.mini-check{
  display:flex;align-items:center;gap:.35rem;cursor:pointer;
  font-size:.78rem;color:color-mix(in srgb,var(--creme) 55%,transparent);
}
.mini-check input{accent-color:var(--azul)}
.dica{
  margin:.7rem 0 0;font-size:.8rem;line-height:1.45;
  color:color-mix(in srgb,var(--creme) 48%,transparent);
}

/* botões */
.botao{
  display:inline-block;width:100%;
  margin-top:.6rem;padding:.92rem 1.4rem;
  border:0;border-radius:999px;cursor:pointer;
  font:inherit;font-size:1rem;font-weight:700;letter-spacing:.02em;
  background:var(--creme);color:#130513;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
  text-align:center;text-decoration:none;
}
.botao:hover{transform:translateY(-2px)}
.botao--menor{width:auto;margin:0;padding:.72rem 1.2rem;font-size:.9rem}
.botao--fantasma{
  width:auto;background:transparent;color:var(--creme);
  border:1px solid var(--borda);font-weight:600;font-size:.9rem;padding:.7rem 1.2rem;
}
.botao--fantasma:hover{border-color:color-mix(in srgb,var(--lilas) 46%,transparent)}

.link-pronto{display:flex;gap:.6rem;margin-bottom:1rem}
.link-pronto .campo__input{font-size:.9rem}
.acoes-pronto{display:flex;flex-wrap:wrap;gap:.6rem}

.aviso{margin:.9rem 0 0;padding:.7rem .9rem;border-radius:10px;font-size:.9rem}
.aviso--erro{background:rgba(255,90,90,.14);color:#ffb4b4}

/* lista */
.lista{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.lista__item{
  padding:.95rem 1.05rem;
  border:1px solid var(--borda);border-radius:14px;
  background:rgba(0,8,31,.4);
}
.lista__item--vencida{opacity:.5}
.lista__topo{display:flex;align-items:baseline;justify-content:space-between;gap:.7rem}
.lista__cliente{font-size:1rem;font-weight:600}
.lista__codigo{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.78rem;letter-spacing:.1em;
  color:color-mix(in srgb,var(--lilas) 72%,transparent);
}
.lista__meta{
  margin:.25rem 0 .7rem;font-size:.82rem;
  color:color-mix(in srgb,var(--creme) 55%,transparent);
}
.nao-vista{color:#ffc98a}
.lista__acoes{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.lista__acoes form{margin:0}
.mini{
  border:1px solid var(--borda);border-radius:999px;
  background:transparent;color:color-mix(in srgb,var(--creme) 75%,transparent);
  padding:.3rem .8rem;font:inherit;font-size:.76rem;cursor:pointer;
  text-decoration:none;display:inline-block;
}
.mini:hover{color:var(--creme);border-color:color-mix(in srgb,var(--lilas) 42%,transparent)}
.mini--perigo:hover{color:#ffb4b4;border-color:rgba(255,90,90,.4)}