/* cliente.css — V9: a área do cliente (cliente.html). O menu de baixo igual ao do app do profissional (pro.css: mesmas medidas,
   cores e comportamento; no computador, a coluna da esquerda), o "Fazer um novo pedido" no topo, a faixa "Proteja sua conta",
   o cartão do progresso do Perfil e a troca do WhatsApp. */

/* ----- menu de baixo (o mesmo do pro) ----- */
.abas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; justify-content: center;
  background: rgba(255, 255, 255, .97); border-top: 1px solid var(--linha);
  padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}
.abas[hidden] { display: none; }
.abas a {
  flex: 1; max-width: 120px; min-height: 56px;
  display: grid; justify-items: center; align-content: center; gap: 3px;
  font-size: 12px; font-weight: 800; color: var(--apagado); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.abas .ico {
  position: relative; width: 56px; height: 30px; border-radius: 999px; display: grid; place-items: center;
  transition: background-color var(--d-entrada) var(--ease-out), color var(--d-entrada);
}
.abas svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.abas a[aria-current="page"] { color: var(--laranja-escuro); }
.abas a[aria-current="page"] .ico { background: var(--laranja-claro); animation: pop 300ms var(--ease-out); }
.abas a:active .ico { transform: scale(.92); }
.abas a:focus-visible { outline: 3px solid var(--foco, var(--laranja)); outline-offset: 2px; border-radius: 14px; }
.aba-n {
  position: absolute; top: -4px; right: 6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center; background: var(--amarelo); color: var(--tinta); font: 800 12px/1 var(--f-ui);
  box-shadow: 0 0 0 2px var(--superficie);
}
body.com-abas .cliente { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
body.com-abas .toasts { bottom: calc(84px + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce) {
  .abas .ico { transition: none; }
  .abas a[aria-current="page"] .ico { animation: none; }
}
@media (min-width: 1024px) {
  body.com-abas { padding-left: 96px; }
  body.com-abas .abas {
    top: 0; right: auto; width: 96px; flex-direction: column; justify-content: flex-start; gap: 6px;
    padding: 76px 8px 16px; border-top: 0; border-right: 1px solid var(--linha); background: var(--superficie); z-index: 15;
  }
  body.com-abas .abas a { flex: none; max-width: none; min-height: 68px; border-radius: 14px; }
  body.com-abas .abas a:hover { background: var(--fundo); }
  body.com-abas .cliente { padding-bottom: 40px; }
  body.com-abas .toasts { bottom: 24px; }
}

/* ----- Pedidos: o novo pedido no topo e a faixa do e-mail ----- */
.novo-pedido { justify-self: stretch; }
.novo-pedido-fim { justify-self: center; }
@media (min-width: 600px) { .novo-pedido { justify-self: start; min-width: 260px; } }
.faixa-email {
  display: flex; align-items: center; gap: 4px; min-height: 48px; padding: 0 4px 0 12px; border-radius: 12px;
  background: var(--petroleo-claro); color: var(--petroleo); font-size: var(--t-sm); font-weight: 800;
}
.faixa-email > a { flex: 1; display: flex; align-items: center; gap: 8px; min-height: 44px; color: inherit; text-decoration: none; }
.faixa-email .e { font-size: 18px; }
.faixa-email .ir { margin-left: auto; font-size: 20px; line-height: 1; }
.faixa-x {
  flex: none; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: inherit;
  font: 800 22px/1 var(--f-ui); cursor: pointer;
}
.faixa-x:hover { background: rgba(0, 0, 0, .05); }
.av-cli .ped-onde { color: var(--tinta); }

/* ----- Perfil: "Proteja sua conta" ----- */
.proteja { display: grid; gap: 10px; }
.pj-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pj-topo .titulo-3 { margin: 0; }
.pj-conta { font-weight: 800; font-size: var(--t-sm); color: var(--apagado); white-space: nowrap; }
.pj-barra { height: 8px; border-radius: 999px; background: var(--fundo); overflow: hidden; }
.pj-barra > span { display: block; height: 100%; border-radius: inherit; background: var(--petroleo); }
.proteja.completo .pj-barra > span { background: var(--ok); }
.proteja > .sub { margin: 0; }
.pj-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pj-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 48px; }
.pj-marca {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px;
  background: var(--fundo); color: var(--apagado);
}
.pj-item.ok .pj-marca { background: var(--ok-soft); color: var(--ok-tinta); }
.pj-item.pendente .pj-marca { background: var(--warn-soft); color: var(--warn-tinta); }
.pj-txt { display: grid; min-width: 0; }
.pj-txt .miudo { overflow-wrap: anywhere; }

/* ----- Perfil: trocar o WhatsApp ----- */
.whats-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.whats-linha .lugar-fixo { margin: 0; }
.troca-whats { display: grid; gap: 10px; margin-top: 8px; padding: 14px; border-radius: var(--r-campo); background: var(--superficie-2); }
.troca-whats[hidden] { display: none; }
.troca-whats > .botao.fantasma { justify-self: start; width: auto; }
.troca-conf { display: grid; gap: 12px; }
.cliente h1:focus { outline: none; }