/* Base compartilhada: botões, portão de login e painel de admin.

   Vieram do wizard.css quando o wizard de passos saiu (a tela única tomou o
   lugar dele). O nome .wz-btn ficou porque login, admin e importador usam;
   a aparência v3 (pílula, brilho) vem do pele.css. */

/* ------------------------------------------------------------ controles */
.wz-btn {
  height: var(--h-ctrl-w);
  padding: 0 20px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--e2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  color: var(--ink);
  font: inherit; font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast) var(--t-ease);
}
.wz-btn:hover:not(:disabled) { background: var(--e3); }
.wz-btn.sm { height: 32px; padding: 0 var(--s4); font-size: 13px; font-weight: 500; }
.wz-btn.primary {
  padding: 0 22px;
  background: var(--accent); border-color: var(--accent);
  color: var(--accent-ink); font-size: 14px; font-weight: 600;
}
.wz-btn.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.wz-btn:disabled {
  background: var(--off-bg); border-color: var(--off-line);
  color: var(--off-ink); cursor: not-allowed;
}
.wz-ret { font-family: var(--font-mono); font-size: 12px; color: #3D2408; }
.wz-btn:disabled .wz-ret { color: inherit; }


/* ------------------------------------------------------- portão de login */
/* Mesma paleta clara do wizard: quem entra reconhece o produto antes mesmo de
   ver a primeira tela. */
.auth {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  padding: var(--s-7);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-ui);
  z-index: 60;
}
.auth[hidden] { display: none; }
.auth-card {
  width: min(380px, 100%);
  display: flex; flex-direction: column; gap: var(--s-5);
  padding: 28px;
  background: var(--e1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
}
.auth-brand {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
}
/* o simbolo do coyote: tamanho padrao (era do wizard.css, que saiu); quem
   precisa de outro tamanho (topo da tela unica, editor) define o seu */
.cy-simbolo { width: 20px; height: 20px; flex: none; color: var(--accent); }
.auth-title { margin: 0; font-size: 22px; font-weight: 600; }
.auth-lead { margin: -8px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.auth-field { display: flex; flex-direction: column; gap: var(--s-2); }
.auth-field > span {
  font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-dim); font-weight: 600;
}
#wizardRoot .auth-field input,
.auth-field input {
  height: var(--h-ctrl-w);
  padding: 0 var(--s-4);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  color: var(--ink);
  font: inherit; font-size: 15px;
  width: 100%;
}
/* A recusa leva a barra de acento: é a única coisa que precisa ser vista. */
.auth-erro {
  margin: 0;
  padding: 10px var(--s-5);
  background: var(--e1);
  border: 1px solid var(--accent-wash-line);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-lg);
  font-size: 13px; color: var(--warn);
}
.auth-go { width: 100%; height: 44px; font-size: 14px; }
.auth-nota { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-dim); }

/* os campos ficam juntos num bloco: some inteiro na tela de espera */
.auth-campos { display: flex; flex-direction: column; gap: var(--s-5); }
.auth-campos[hidden], .auth-espera[hidden] { display: none; }
.auth-troca {
  margin: 0;
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  font-size: 13px; color: var(--ink-soft);
}
.auth-troca[hidden] { display: none; }
.auth-link {
  min-height: 32px; padding: 0 var(--s1);
  background: none; border: 0; border-radius: var(--r-md);
  color: var(--accent); font: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.auth-link:hover { color: var(--accent-hover); }

/* Contas modernas: Google, separador, captcha e "esqueci a senha". */
.auth-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 44px; border-radius: var(--r-xl); text-decoration: none;
  background: #fff; color: #1f1f1f; font-weight: 600; font-size: 14px;
  border: 1px solid #dadce0;
}
.auth-google:hover { background: #f5f5f5; }
.auth-google:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.auth-google svg { width: 18px; height: 18px; flex: none; }
.auth-google[hidden], .auth-ou[hidden], .auth-captcha[hidden],
.auth-esqueci[hidden] { display: none; }
.auth-ou {
  display: flex; align-items: center; gap: 10px; margin: 2px 0;
  color: var(--ink-dim); font-size: 12px;
}
.auth-ou::before, .auth-ou::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-esqueci { align-self: flex-end; margin-top: -6px; font-size: 13px; }
.auth-captcha { min-height: 65px; display: flex; justify-content: center; }
.auth-espera { display: flex; flex-direction: column; gap: var(--s4); }
.auth-espera-conta {
  margin: 0; padding: 10px var(--s-5);
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  font-size: 13px; color: var(--ink-body);
}
.auth-espera-conta[hidden] { display: none; }

/* ------------------------------------------------------------- admin */
/* O link do cabeçalho: o número de contas aguardando vem entre parênteses,
   em texto. A cor âmbar só reforça — sem ela o número continua lá. */
.adm-link { gap: 6px; }
.adm-link .adm-n { font-size: 12px; font-variant-numeric: tabular-nums; }
.adm-link .adm-n[hidden] { display: none; }
.adm-link.tem-pendente .adm-n { color: var(--accent); font-weight: 600; }
.wz-btn kbd {
  font-family: var(--font-mono); font-size: 10px; font-weight: 400;
  color: var(--ink-dim);
  border: 0; background: none; padding: 0;
}

.modal.adm {
  width: min(880px, 94vw);
  max-width: none;
  max-height: 88vh;
  padding: 0;
}
.modal.adm[open] { display: flex; flex-direction: column; }
.adm-cab {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
}
.adm-cab h2 { margin: 0; }
.adm-resumo { font-size: 12px; color: var(--ink-soft); }
.adm-cab .modal-x { margin-left: auto; }
.adm-corpo {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--s6);
  padding: var(--s5);
}
.adm-sec { display: flex; flex-direction: column; gap: var(--s3); }
.adm-sec-tit {
  margin: 0;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
}
.adm-sec-tit .mono { letter-spacing: 0; color: var(--accent); }
.adm-vazio { margin: 0; font-size: 13px; color: var(--ink-dim); }
.adm-vazio[hidden], .adm-erro[hidden] { display: none; }
.adm-erro {
  margin: 0; padding: 10px var(--s4);
  background: var(--e1); border: 1px solid var(--err); border-radius: var(--r-lg);
  font-size: 13px; color: var(--ink);
}

.adm-pend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.adm-pedido {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--accent-wash);
  border: 1px solid var(--accent-wash-line);
  border-radius: var(--r-xl);
}
.adm-quem { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-quem b { font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.adm-quem .mono { font-size: 11.5px; color: var(--ink-soft); }
.adm-acoes { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: flex-end; }

.adm-tabela-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-xl); }
.adm-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.adm-tabela th {
  padding: var(--s2) var(--s3);
  text-align: left;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
  background: var(--e1); border-bottom: 1px solid var(--line);
}
.adm-tabela td {
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-body); vertical-align: middle;
}
.adm-tabela tr:last-child td { border-bottom: 0; }
.adm-tabela td.mono { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.adm-conta b { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.adm-eu {
  margin-left: var(--s2);
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-dim);
}
.adm-eu[hidden] { display: none; }
/* a situação é sempre a palavra; o ponto colorido só reforça */
.adm-sit { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.adm-sit::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-dim); }
.adm-sit.aprovado::before { background: var(--ok); }
.adm-sit.pendente::before { background: var(--warn); }
.adm-sit.recusado::before { background: var(--err); }
.adm-sit.off { color: var(--ink-dim); }
.adm-senha { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: flex-end; }
#wizardRoot .adm-senha input, .adm-senha input {
  width: 150px; height: 32px; padding: 0 var(--s3);
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  color: var(--ink); font: inherit; font-size: 13px;
}

/* quem está logado, no topo */
.quem {
  font-size: 12.5px; color: var(--ink-soft);
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


/* Emoji da Apple dentro de texto corrido.
   Onde a pessoa LÊ o hook (sugestões do editor, listas de hooks) o emoji vem
   como imagem, para bater com o que sai no MP4. Antes era a fonte do sistema,
   que no Windows desenha outra carinha. */
.emo {
  display: inline-block;
  width: 1.15em; height: 1.15em;
  vertical-align: -0.22em;
  /* a imagem não pode esticar a linha nem ser arrastada para fora do texto */
  object-fit: contain;
  -webkit-user-drag: none;
}

/* link da politica de privacidade, no rodape do cartao de login */
.auth-priv { display: block; margin-top: 18px; text-align: center; font-size: 12px; color: var(--ink-dim); }
.auth-priv:hover { color: var(--ink-soft); }