/* ==========================================================================
   MODAL DE ACESSO — Entrar · Criar conta · Recuperar senha
   --------------------------------------------------------------------------
   Migrado de loomty.com. Como no painel da Iara, os valores saíram do CSS
   COMPUTADO das páginas no ar, não de estimativa em cima de screenshot: a
   grade de 1,04fr / 0,8fr do quadro, os 720px de teto, o verde #007a40 do
   botão, o degradê duplo sobre a foto, os 10,4s da deriva da imagem.

   Anatomia: um quadro de duas colunas. À esquerda um carrossel de oito
   destaques (foto com deriva lenta, tarja, título e uma régua de progresso
   que serve de paginação). À direita o painel do formulário, que assume três
   feitios — entrar, criar conta e recuperar senha — sem trocar de moldura.

   O escopo `[data-v-…]` do Vue sai; o prefixo .acm- / .auth-media já isola.
   ========================================================================== */

/* ==========================================================================
   1. O QUADRO
   ========================================================================== */

.acm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: safe center;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  background: rgba(13, 13, 13, .7);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s ease, visibility linear .24s;
}
.acm-overlay.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }

.acm-shell {
  position: relative;
  display: grid;
  /* a coluna da foto respira e a do formulário tem piso: abaixo de 420px os
     campos começariam a espremer o rótulo em versalete */
  grid-template-columns: minmax(0, 1.04fr) minmax(420px, .8fr);
  gap: 10px;
  width: 100%;
  max-width: min(1120px, 100vw - 32px);
  height: min(720px, 100dvh - 48px);
  min-height: 0;
  margin: auto;
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  background: #111413;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .48);
  color: #fafafa;
  transform: translateY(12px) scale(.985);
  transition: transform .28s cubic-bezier(.22, .8, .26, 1);
}
.acm-overlay.is-open .acm-shell { transform: none; }

.acm-close {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 4px;
  background: #1a1d1c;
  color: #fafafa;
  cursor: pointer;
  appearance: none;
  transition: background .2s, color .2s, border-color .2s;
}
.acm-close:hover { background: #fafafa; border-color: #fafafa; color: #0c0c0a; }
/* `display:inline-flex` acima ganha do atributo [hidden] sozinho — sem esta
   linha, o X continuaria na tela na página de redefinir senha, que abre o
   modal em modo fixo justamente por não ter para onde fechar */
.acm-close[hidden] { display: none; }
.acm-close svg { width: 20px; height: 20px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   2. A COLUNA DA FOTO
   ========================================================================== */

.auth-media {
  position: relative;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
  isolation: isolate;
  border-radius: 8px;
  background: #050505;
}
.auth-media-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(.45, 0, .55, 1);
}
.auth-media-slide.is-active { opacity: 1; }
/* Classe dobrada de propósito. O responsive.css traz
   `img:not([width]):not([height]) { height: auto }`, que pesa 0,2,1 e
   ganharia de um `.auth-media-slide img` (0,1,1): a foto ficava só com a
   altura natural dela e sobrava um vão preto embaixo, em vez de cobrir a
   coluna inteira. Dobrar empata em 0,2,1 e a ordem (este arquivo carrega
   por último) desempata a nosso favor. */
.auth-media-slide.auth-media-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  /* a deriva é o que impede a foto parada de parecer um print: 10,4s de ida
     e volta, num percurso curto demais para virar assunto */
  animation: auth-media-drift 10.4s ease-in-out infinite alternate;
}
/* dois degradês: um vertical, que assenta o texto no pé, e um lateral, que
   descola a foto da coluna do formulário */
.auth-media-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .74)),
              linear-gradient(90deg, rgba(0, 0, 0, .26), transparent 52%);
}

.auth-media-copy {
  position: absolute;
  bottom: 86px;
  left: clamp(24px, 4vw, 44px);
  right: clamp(24px, 4vw, 44px);
  z-index: 2;
  min-height: 240px;
  pointer-events: none;
}
.auth-media-copy-slide {
  position: absolute;
  inset: auto 0 0;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity .72s cubic-bezier(.45, 0, .55, 1), transform .72s cubic-bezier(.45, 0, .55, 1);
}
.auth-media-copy-slide.is-active { opacity: 1; transform: translateZ(0); }
.auth-media-chip {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  margin: 0 0 14px;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: rgba(255, 255, 255, .86);
  font-family: var(--mono, monospace);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.auth-media-copy h2 {
  max-width: 440px;
  margin: 0;
  font-family: var(--display, sans-serif);
  font-size: clamp(2.35rem, 3.6vw, 3.8rem);
  line-height: .94;
  text-transform: uppercase;
  color: #fafafa;
}
.auth-media-copy p:last-child {
  max-width: 520px;
  margin: 16px 0 0;
  font-size: .98rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .74);
}

/* a paginação é uma régua: oito rótulos em duas páginas de quatro, e o traço
   do ativo cresce no compasso do próprio slide (--auth-carousel-progress) */
.auth-media-dots {
  position: absolute;
  bottom: 28px;
  left: clamp(24px, 4vw, 44px);
  right: clamp(24px, 4vw, 44px);
  z-index: 2;
  overflow: hidden;
}
.auth-media-dots-track { display: flex; width: 200%; transform: translateX(0); transition: transform .5s; }
.auth-media-dots-track.is-second-page { transform: translateX(-50%); }
.auth-media-dots button {
  position: relative;
  flex: 0 0 12.5%;
  min-width: 0;
  padding: 11px 8px 0 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .42);
  font-family: var(--mono, monospace);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}
.auth-media-dots button::before,
.auth-media-dots button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 8px;
  height: 3px;
  border-radius: 999px;
}
.auth-media-dots button::before { background: rgba(255, 255, 255, .22); }
.auth-media-dots button::after {
  background: #fafafa;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
}
.auth-media-dots button.is-active { color: #fafafa; }
.auth-media-dots button.is-active::after { opacity: 1; transform: scaleX(var(--auth-carousel-progress, 0)); }
.auth-media-dots span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@keyframes auth-media-drift {
  0%   { transform: scale(1.055) translate3d(-.6%, -.35%, 0); }
  100% { transform: scale(1.012) translate3d(.6%, .35%, 0); }
}

/* ==========================================================================
   3. O PAINEL DO FORMULÁRIO
   ========================================================================== */

.acm-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: clamp(32px, 4.2vw, 54px);
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: #0d0f0f;
}
.acm-panel-logo {
  display: block;
  width: clamp(150px, 15vw, 190px);
  max-width: 58%;
  height: auto;
  margin: 0 auto 54px;
  object-fit: contain;
}

.acm-tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 18px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: #1a1d1c;
}
/* A pastilha branca é UM objeto que desliza, não um fundo que acende num
   botão e apaga no outro. Trocar `background` entre os dois dava um corte
   seco; aqui ela viaja, e o trajeto conta ao olho para onde a escolha foi.
   A largura sai da própria grade: 4px de recuo de cada lado e 4px de vão no
   meio somam os 12px descontados. */
.acm-tabs::after {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 12px) / 2);
  border-radius: 9px;
  background: #fafafa;
  transition: transform .32s cubic-bezier(.22, .8, .26, 1);
}
.acm-tabs[data-ativo="criar"]::after { transform: translateX(calc(100% + 4px)); }

.acm-tab {
  /* acima da pastilha: ela passa por baixo do rótulo, não por cima */
  position: relative;
  z-index: 1;
  padding: 11px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(255, 255, 255, .58);
  font: inherit;
  font-size: .8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: color .2s ease;
}
/* sem fundo próprio: quem pinta é a pastilha que deslizou até aqui */
.acm-tab.is-active { background: transparent; color: #0c0c0a; }

/* ---------- a troca de formulário ----------
   Só opacidade e um passo lateral. A altura muda muito entre entrar (2
   campos) e criar conta (4 campos + 2 aceites), e animar altura junto faria
   o quadro inteiro pular — o deslize curto já dá a leitura de "trocou". O
   sentido vem de --acm-sentido: para a direita ao avançar, para a esquerda
   ao voltar. */
.acm-form { transition: opacity .16s ease, transform .16s ease; }
.acm-form.is-saindo { opacity: 0; transform: translateX(calc(var(--acm-sentido, 1) * -8px)); }
.acm-form.is-entrando { opacity: 0; transform: translateX(calc(var(--acm-sentido, 1) * 8px)); transition: none; }

.acm-form,
.acm-field { display: flex; flex-direction: column; }
.acm-form { gap: 13px; }
.acm-field { gap: 7px; }
.acm-field > span {
  color: rgba(255, 255, 255, .52);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.acm-field input,
.acm-field select {
  height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  background: #171a19;
  color: #fafafa;
  font: inherit;
  font-size: 1rem;
}
.acm-field input[type="date"] { color-scheme: dark; }
.acm-field input:focus,
.acm-field select:focus {
  outline: none;
  border-color: #007a40;
  background: #1b1f1d;
  box-shadow: 0 0 0 3px rgba(0, 122, 64, .1);
}
/* o autofill do Chrome pinta o campo de azul-claro e apaga o texto branco;
   a sombra interna de 1000px é o único jeito de devolver o fundo escuro */
.acm-field input:-webkit-autofill,
.acm-field input:-webkit-autofill:hover,
.acm-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fafafa;
  box-shadow: inset 0 0 0 1000px #171a19;
  transition: background-color 9999s ease-out;
}

.acm-pass { position: relative; }
.acm-pass input { width: 100%; padding-right: 48px; }
.acm-eye {
  position: absolute;
  top: 50%;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, .6);
  cursor: pointer;
  transform: translateY(-50%);
  transition: color .2s;
}
.acm-eye:hover,
.acm-eye:focus-visible { color: #fafafa; }
.acm-eye svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.acm-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255, 255, 255, .66);
  font-size: .875rem;
  line-height: 1.45;
}
.acm-check input { flex: 0 0 auto; margin-top: 2px; accent-color: #00bb60; }
.acm-check a { color: #fafafa; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.acm-check a:hover { color: #ff6633; }

.acm-note,
.acm-error { padding: 12px 14px; font-size: .875rem; }
.acm-note {
  border-left: 3px solid #00bb60;
  border-radius: 10px;
  background: rgba(0, 187, 96, .08);
  color: rgba(255, 255, 255, .72);
  line-height: 1.5;
}
.acm-error {
  border: 1px solid rgba(255, 102, 51, .42);
  border-radius: 10px;
  background: rgba(204, 51, 0, .1);
  color: #ffb49e;
}

.acm-text-action {
  align-self: flex-end;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .68);
  font: inherit;
  font-size: .8125rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.acm-text-action:hover { color: #fafafa; }

/* ---------- o que a página de redefinir senha acrescentou ----------
   Três peças, e nenhuma delas inventa medida nova: a espera reusa o mesmo
   .acm-spin do envio, a saída reusa o .acm-text-action e o campo escondido
   não tem aparência nenhuma. */

/* como <a>, o .acm-text-action perde o align-self de item de flex-column e
   ganha um sublinhado que já vem do próprio link; só o alinhamento volta */
a.acm-saida {
  align-self: center;
  margin-top: 2px;
  color: rgba(255, 255, 255, .55);
  font-weight: 400;
}

.acm-espera {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* a moldura tem altura fixa em desktop; sem um respiro aqui, esta tela —
     que é uma linha só — deixaria o quadro visivelmente vazio */
  padding: 40px 0;
  color: rgba(255, 255, 255, .6);
  font-size: .9375rem;
}

/* o campo de usuário existe só para o gerenciador de senhas saber de qual
   conta é a credencial nova. Sai do fluxo sem `display:none`, que faria
   alguns gerenciadores ignorarem o formulário inteiro. */
.acm-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* medida única de botão (--btn-*, em styles.css): eram 52 de altura, canto 10
   e .75rem/.08em. Fallbacks nos var() porque este modal também é carregado
   por páginas que não trazem o styles.css inteiro. */
.acm-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--btn-h, 44px);
  min-height: var(--btn-h, 44px);
  margin-top: 8px;
  padding: 0 var(--btn-pad-x, 22px);
  border: 0;
  border-radius: var(--radius-8, 8px);
  background: #007a40;
  color: #fafafa;
  font-family: var(--mono, monospace);
  font-size: var(--btn-fs, 12px);
  font-weight: var(--btn-fw, 700);
  letter-spacing: var(--btn-ls, 1.2px);
  text-transform: uppercase;
  cursor: pointer;
  transition: filter .15s, transform .15s, background .2s;
}
.acm-submit:hover { filter: brightness(1.08); transform: translateY(-1px); }
.acm-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* o rodinha de espera do envio */
.acm-spin {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fafafa;
  border-radius: 50%;
  animation: acm-gira .7s linear infinite;
}
@keyframes acm-gira { to { transform: rotate(360deg); } }

/* ==========================================================================
   4. SESSÃO ABERTA — o "Entrar" da topbar vira o nome de quem entrou
   ========================================================================== */

.nav-login[data-logado] { display: inline-flex; align-items: center; gap: 8px; }
.nav-login[data-logado]::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00bb60;
}

/* ==========================================================================
   5. TELAS ESTREITAS — as duas colunas viram uma pilha
   ========================================================================== */

@media (max-width: 900px) {
  .acm-shell {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: auto;
    max-width: min(680px, 100vw - 24px);
  }
  .acm-panel { max-height: none; padding: 30px 24px 26px; }
  .auth-media { min-height: 310px; }
  .auth-media-copy { bottom: 72px; min-height: 190px; }
  .auth-media-copy h2 { font-size: clamp(2rem, 7vw, 3rem); max-width: 420px; }
  .auth-media-copy p:last-child { font-size: .875rem; line-height: 1.5; }
  .auth-media-chip { font-size: .6875rem; letter-spacing: .12em; }
  .auth-media-dots { padding-bottom: 2px; }
  .auth-media-dots button { font-size: .5rem; letter-spacing: .05em; }
  /* iOS dá zoom em campo com fonte < 16px; o piso de 1em resolve sem mexer
     na escala do resto do painel */
  .acm-panel :where(input, button, label, p, a) { font-size: max(1em, .875rem); }
}

@media (max-width: 560px) {
  .acm-overlay { padding: 10px; }
  .acm-shell { gap: 8px; max-width: 100%; padding: 8px; border-radius: 16px; }
  .acm-close { top: 18px; right: 18px; }
  .acm-panel { padding: 24px 18px 20px; }
  .acm-panel-logo { width: 148px; max-width: 54%; margin-bottom: 36px; }
  .acm-tabs { margin-bottom: 14px; }
  .acm-field input,
  .acm-field select { height: 46px; }
  .auth-media { min-height: 238px; }
  .auth-media-copy { bottom: 54px; left: 18px; right: 18px; min-height: 150px; }
  .auth-media-chip { margin-bottom: 10px; padding: 7px 9px; font-size: .6875rem; }
  .auth-media-copy h2 { font-size: clamp(1.7rem, 8.5vw, 2.25rem); max-width: 310px; }
  .auth-media-copy p:last-child { margin-top: 10px; }
  .auth-media-dots { bottom: 20px; left: 18px; right: 18px; }
  .auth-media-dots button { padding-right: 5px; font-size: .6875rem; }
  .auth-media-dots button::before,
  .auth-media-dots button::after { right: 5px; }
}

/* a página não rola atrás do quadro aberto */
body.acm-aberto { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .acm-overlay,
  .acm-shell,
  .auth-media-slide,
  .auth-media-copy-slide,
  .auth-media-dots-track { transition: none; }
  .auth-media-slide img { animation: none; transform: none; }
  .auth-media-dots button.is-active::after { transform: scaleX(1); }
}