/* Login do admin: foto à esquerda, formulário à direita. Só tokens de base.css. */
.login { position: relative; display: grid; grid-template-rows: 160px 1fr; min-height: 100dvh; background: var(--fundo); }
@media (min-width: 900px) {
  .login { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
}

/* ---------- foto com véu azul-marinho ---------- */
.login__foto { position: relative; overflow: hidden; background: var(--marinho); color: var(--shari); }
.login__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 72%; }
.login__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--marinho), color-mix(in srgb, var(--marinho) 80%, transparent)); }
.login__marca { position: absolute; z-index: 1; left: 1rem; right: 1rem; bottom: 1rem; display: flex; align-items: center; gap: .8rem; }
.login__logo { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; }
.login__logo--inicial { display: grid; place-items: center; background: var(--shari); color: var(--marinho); font-size: var(--t4); font-weight: 700; }
.login__loja { margin: 0; font-size: var(--t3); font-weight: 700; line-height: 1.1; }
.login__frase { margin: .15rem 0 0; font-size: var(--t1); }
@media (min-width: 900px) {
  .login__foto::after { background: linear-gradient(to top, var(--marinho) 8%, color-mix(in srgb, var(--marinho) 45%, transparent) 55%, color-mix(in srgb, var(--marinho) 20%, transparent)); }
  .login__img { object-position: 50% 62%; }
  .login__marca { left: 3rem; right: 3rem; bottom: 3rem; gap: 1.1rem; }
  .login__logo { width: 72px; height: 72px; }
  .login__logo--inicial { font-size: var(--t5); }
  .login__loja { font-size: var(--t5); }
  .login__frase { margin-top: .4rem; font-size: var(--t3); }
}

/* ---------- botão voltar e olho: círculo com um véu que escurece ---------- */
.login__voltar, .login__olho { position: relative; isolation: isolate; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; color: var(--texto); }
.login__voltar::before, .login__olho::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--texto); opacity: 0; transition: opacity var(--hover-media) var(--suave); }
.login__voltar { position: absolute; z-index: 2; top: 1rem; left: 1rem; background: var(--superficie); text-decoration: none; transition: transform var(--hover-rapida) var(--suave); }
.login__voltar .icone { transition: transform var(--hover-media) var(--suave); }
.login__olho { position: absolute; top: 50%; right: .25rem; margin-top: -22px; background: transparent; }
.login__olho[hidden] { display: none; }
.login__voltar:active, .login__olho:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .login__voltar:hover::before, .login__voltar:focus-visible::before { opacity: .14; }
  .login__voltar:hover .icone, .login__voltar:focus-visible .icone { transform: translateX(-2px); }
  .login__olho:hover::before, .login__olho:focus-visible::before { opacity: .1; }
}

/* ---------- formulário ---------- */
.login__painel { display: grid; align-items: center; padding: 2rem 1rem; }
.login__form { width: 100%; max-width: 24rem; margin: 0 auto; gap: 1.1rem; }
.login__form h1 { margin: 0 0 .25rem; font-size: var(--t5); }
.login__form input:not([type="checkbox"]) { width: 100%; min-height: 48px; }
.login__senha { position: relative; }
.login__senha input { padding-right: 3.25rem; }
/* "Manter conectado": caixinha discreta + texto pequeno; o selo wasabi do .chip pula dentro da caixinha */
.login__manter { justify-self: start; gap: .55rem; padding: 0 .25rem 0 0; border: 0; background: none; color: var(--mudo); font-size: var(--t1); }
.login__manter::before { content: ""; flex: none; width: 18px; height: 18px; border: 1.5px solid var(--borda-campo); border-radius: 6px; transition: border-color var(--hover-media) var(--suave); }
.login__manter::after { top: calc(50% - 9px); left: 0; right: auto; width: 18px; height: 18px; border-radius: 6px; }
.login__manter:has(input:checked) { border: 0; background: none; color: var(--texto); }
.login__manter:has(input:checked)::before { border-color: var(--wasabi); }
.login__manter:has(input:focus-visible) { outline-offset: 4px; border-radius: 6px; }
@media (hover: hover) and (pointer: fine) {
  .login__manter:hover, .login__manter:focus-within { color: var(--texto); }
  .login__manter:hover::before, .login__manter:focus-within::before { border-color: var(--texto); }
}
.login__form .botao { width: 100%; min-height: 48px; }
.login__ajuda { margin: .25rem 0 0; color: var(--mudo); font-size: var(--t1); }
.login__ajuda code { padding: .1em .4em; border-radius: 6px; background: var(--fundo-suave); color: var(--texto); font-size: .95em; overflow-wrap: anywhere; }
@media (min-width: 900px) { .login__painel { padding: 3rem; } }

/* ---------- movimento reduzido: só cor e opacidade ---------- */
@media (prefers-reduced-motion: reduce) {
  .login__voltar:active, .login__olho:active { transform: none; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .login__voltar:hover .icone, .login__voltar:focus-visible .icone { transform: none; }
}

/* ---------- cadastro, Google e nova loja ---------- */
.login__ou { display: flex; align-items: center; gap: .75rem; color: var(--mudo); font-size: var(--t1); }
.login__ou::before, .login__ou::after { content: ""; flex: 1; height: 1px; background: var(--borda); }
.login__google { gap: .6rem; }
.login__google .icone { width: 20px; height: 20px; stroke: none; } /* o G é preenchido; sem o contorno padrão dos ícones */
/* hover: o "G" desliza até o centro do botão por cima do texto, que some (segue lá para leitor de tela) */
.login__google-conteudo { position: relative; display: inline-flex; align-items: center; padding-left: calc(20px + .6rem); }
.login__google-g { position: absolute; inset: 0; display: flex; align-items: center; pointer-events: none; transition: transform var(--hover-lenta) var(--suave); }
.login__google-g .icone { transition: transform var(--hover-lenta) var(--suave); }
.login__google-txt { clip-path: inset(0 0 0 0); transition: clip-path var(--hover-lenta) var(--suave), opacity var(--hover-lenta) var(--suave); }
/* hover: o contorno vira as cores do Google, que ficam correndo em volta (anel feito com máscara) */
.login__google::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  /* degradê das cores do Google, com o azul repetido no fim para o laço não ter emenda */
  background: linear-gradient(90deg, #4285F4, #EA4335, #FBBC05, #34A853, #4285F4) 0 0 / 200% 100% repeat-x;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity var(--hover-media) var(--suave); }
@media (hover: hover) and (pointer: fine) {
  .login__google:hover::after, .login__google:focus-visible::after { opacity: 1; animation: google-fluxo 2.4s linear infinite; }
  /* 50% = metade do conteúdo (G + texto), que já é centralizado no botão: o G para no meio */
  .login__google:hover .login__google-g, .login__google:focus-visible .login__google-g { transform: translateX(calc(50% - 10px)); }
  /* o G gira uma volta enquanto desliza até o centro */
  .login__google:hover .login__google-g .icone, .login__google:focus-visible .login__google-g .icone { transform: rotate(360deg) scale(1.25); }
  .login__google:hover .login__google-txt, .login__google:focus-visible .login__google-txt { clip-path: inset(0 0 0 50%); opacity: 0; }
}
/* -200% com imagem de 200% = anda uma volta inteira do degradê */
@keyframes google-fluxo { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .login__google:hover::after, .login__google:focus-visible::after { animation: none; }
  .login__google:hover .login__google-g, .login__google:focus-visible .login__google-g { transform: none; }
  .login__google:hover .login__google-g .icone, .login__google:focus-visible .login__google-g .icone { transform: none; }
  .login__google:hover .login__google-txt, .login__google:focus-visible .login__google-txt { clip-path: none; opacity: 1; }
}
.login__troca { margin: 0; text-align: center; }
.login__link { display: flex; align-items: center; gap: .4rem; }
.login__link input { flex: 1; min-width: 0; }
.login__link span { color: var(--mudo); white-space: nowrap; }
.login__sair { display: flex; justify-content: center; margin-top: 1.5rem; }
.login__aviso { margin: 0; padding: .75rem 1rem; border-radius: var(--raio); background: color-mix(in srgb, var(--wasabi) 26%, var(--superficie)); }
.login__sair + .login__sair { margin-top: .25rem; }