/* Gestor de Pedidos · Zéca Delivery
   Soma-se ao base.css, ao entrada.css (mosaico do login) e ao painel.css (gaveta do pedido, diálogos, etiquetas),
   que são cópias dos arquivos do Portal do Parceiro. Aqui ficam só a tela de conta e o quadro de pedidos. */

/* ============================== entrada ============================== */
.cartao { margin-bottom: 0; }
.instalar-gestor { margin-top: 22px; text-align: center; }
.instalar-gestor .link { font-size: 15px; }
.como-instalar {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--fundo);
  color: var(--tinta); font-size: 14px; line-height: 1.4; text-align: left;
}

/* conta: cartão branco no meio de um painel cinza, como nas telas de login dos gestores de pedido */
body.tela-conta { min-height: 100vh; min-height: 100dvh; background: #fff; }
.conta {
  display: grid; place-items: center; min-height: calc(100vh - 16px); min-height: calc(100dvh - 16px);
  margin: 8px; padding: 24px 16px; border-radius: 24px; background: #f4f4f4;
}
.cartao-conta {
  width: min(400px, 100%); padding: 30px 24px 0; overflow: hidden;
  border: 1px solid #ececec; border-radius: 24px; background: #fff;
}
.conta-logo { display: block; width: 74px; height: auto; margin: 0 0 26px; }
.cartao-conta h2 { margin: 0 0 14px; font-size: 21px; font-weight: 700; color: #141414; }
.cartao-conta .sub { margin: -4px 0 18px; font-size: 15px; line-height: 1.4; }
.campo-flutuante {
  display: block; margin: 0 0 14px; padding: 9px 14px 8px; border: 1px solid #141414; border-radius: 12px;
  background: #fff; cursor: text; transition: border-color .15s, box-shadow .15s;
}
.campo-flutuante > span { display: block; font-size: 12px; line-height: 1.2; color: #3f3f3f; }
.campo-flutuante input { display: block; width: 100%; padding: 3px 0 0; border: 0; outline: 0; background: none; font-size: 16px; color: #141414; }
.campo-flutuante input::placeholder { color: #9a9a9a; }
.campo-flutuante:focus-within { border-color: var(--vermelho); box-shadow: 0 0 0 3px rgba(204, 0, 0, .12); }
.campo-flutuante:has(.invalida) { border-color: var(--vermelho); background: #fffafa; }
.campo-flutuante .entrada-codigo { height: auto; padding: 6px 0 2px; font-size: 26px; letter-spacing: 10px; text-align: center; }
.cartao-conta .btn { height: 48px; border-radius: 12px; font-size: 16px; }
.voltar-inicio { margin: 16px 0 24px; text-align: center; font-size: 15px; }
.voltar-inicio.entre { display: flex; justify-content: center; gap: 10px; }
.voltar-inicio .link { color: #141414; }
.voltar-inicio .link:disabled { color: #9a9a9a; cursor: default; text-decoration: none; }
.dicas-acesso { margin: -6px 0 22px; padding: 0 0 0 18px; font-size: 13px; line-height: 1.45; color: var(--suave); }
.dicas-acesso li { margin: 3px 0; }
.rodape-conta { margin: 0 -24px; padding: 20px; border-top: 1px solid #ececec; text-align: center; }
.rodape-conta .link { color: #141414; font-size: 15px; }
.cartao-conta .lista-situacao { margin-bottom: 16px; }
.cartao-conta [data-passo="situacao"] .btn { margin-bottom: 0; }

/* primeira visita: o início só aparece depois de saber se a pessoa já entrou (quem já entrou vai direto ao quadro).
   Se o JavaScript falhar, a animação mostra a tela depois de 3 s. */
.verificando #entrada { visibility: hidden; animation: g-revelar 0s 3s forwards; }
@keyframes g-revelar { to { visibility: visible; } }