/* ===========================================================================
   AdaptClass — camada de marca sobre o tema
   Baseado no Manual de Marca v1 (2026).

   Fica em public/ de propósito: não passa pelo Vite, então ajustar a marca
   não exige recompilar assets nem derrubar o deploy.

   A cor primária (menta) vem de config/custom.php, que o tema injeta em
   tempo de execução. Aqui ficam só o que o tema não cobre.
   =========================================================================== */

:root {
  --ac-petroleo: #082429;
  --ac-petroleo-claro: #0D3138;
  --ac-menta: #12907B;
  --ac-menta-escura: #0B6B5B;
  --ac-menta-clara: #7ACFBB;
  --ac-ambar: #E0921F;
  --ac-ambar-claro: #F7BC55;
  --ac-terracota: #C64A2E;
  --ac-terracota-clara: #F0705A;
  --ac-cinza-azul: #5A737A;
  --ac-menta-faixa: #D6EDE5;
  --ac-areia: #FBEFD9;
}

/* ---------------------------------------------------------------------------
   Menu lateral em petróleo.

   O tema já trata todos os estados via variáveis — só trocamos os valores.
   O seletor precisa mirar o próprio <aside>: no modo semi-dark ele recebe
   data-bs-theme="dark", e o tema declara --bs-menu-bg ali mesmo. Uma regra
   no :root perde, por estar mais longe do elemento.
   --------------------------------------------------------------------------- */
.layout-menu[data-bs-theme="dark"],
[data-semidark-menu="true"] .layout-menu {
  --bs-menu-bg: var(--ac-petroleo);
  --bs-menu-color: rgba(255, 255, 255, .72);
  --bs-menu-color-rgb: 255, 255, 255;
  --bs-menu-hover-color: #FFFFFF;
  --bs-menu-sub-active-color: #FFFFFF;
  --bs-menu-box-shadow: 0 .125rem .5rem 0 rgba(8, 36, 41, .28);
}

/* cabeçalhos de grupo do menu, mais legíveis sobre petróleo */
.layout-menu .menu-header-text {
  color: rgba(255, 255, 255, .42);
  letter-spacing: .11em;
}

/* ---------------------------------------------------------------------------
   Ação principal da tela — terracota.
   O manual reserva terracota para "botão de ação"; num app, isso significa a
   ação principal de cada tela (Gerar PEI, Enviar para Geração), não todo botão.
   --------------------------------------------------------------------------- */
.btn-acao {
  --bs-btn-bg: var(--ac-terracota);
  --bs-btn-border-color: var(--ac-terracota);
  --bs-btn-color: #FFFFFF;
  --bs-btn-hover-bg: #A93B22;
  --bs-btn-hover-border-color: #A93B22;
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-active-bg: #8F3119;
  --bs-btn-active-border-color: #8F3119;
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-focus-shadow-rgb: 198, 74, 46;
  --bs-btn-disabled-bg: var(--ac-terracota);
  --bs-btn-disabled-border-color: var(--ac-terracota);
  --bs-btn-disabled-color: #FFFFFF;
}

/* ---------------------------------------------------------------------------
   Tipografia — só os títulos maiores.
   O manual pede tracking apertado no display; aplicar isso em h5/h6 quebraria
   os cartões da interface inteira, então fica restrito a h1 e h2.
   --------------------------------------------------------------------------- */
h1, .h1, h2, .h2 {
  letter-spacing: -.035em;
}

/* nunca preto puro (regra do manual) */
body {
  color: var(--ac-petroleo-claro);
}

/* ---------------------------------------------------------------------------
   Marca no menu e no login
   --------------------------------------------------------------------------- */
.ac-logo {
  display: block;
  height: 2rem;
  width: auto;
}

.ac-wordmark {
  font-weight: 700;
  letter-spacing: -.045em;
  font-size: 1.35rem;
  line-height: 1;
}

/* ---------------------------------------------------------------------------
   Tela de login
   --------------------------------------------------------------------------- */
.ac-login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  /* No empilhamento, a faixa de marca ocupa só o que precisa e o formulário
     fica com o resto. Sem isto o grid estica as duas linhas por igual e a
     faixa escura come metade da tela do celular. */
  grid-template-rows: auto 1fr;
}

@media (min-width: 992px) {
  .ac-login {
    grid-template-columns: 1.05fr 1fr;
    grid-template-rows: 1fr;
  }
}

.ac-login__marca {
  background: var(--ac-petroleo);
  color: rgba(255, 255, 255, .78);
  padding: clamp(1.75rem, 4vw, 4rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.ac-login__frase {
  color: #FFFFFF;
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.05;
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  margin: 0;
  max-width: 16ch;
}

/* as três formas soltas do logotipo, como motivo gráfico */
.ac-formas {
  display: flex;
  align-items: flex-end;
  gap: .65rem;
  margin-bottom: .9rem;
}

.ac-formas i {
  display: block;
}

.ac-formas .f1 { width: 2.1rem; height: 2.1rem; border-radius: 50%;   background: var(--ac-menta-clara); }
.ac-formas .f2 { width: 1.9rem; height: 1.9rem; border-radius: .6rem; background: var(--ac-ambar-claro); }
.ac-formas .f3 { width: 1.5rem; height: 2.2rem; border-radius: .75rem; background: var(--ac-terracota-clara); }

.ac-formas__linha {
  height: .28rem;
  width: 11rem;
  border-radius: .2rem;
  background: rgba(255, 255, 255, .28);
}

.ac-login__form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.75rem, 4vw, 3.5rem);
  background: #FFFFFF;
}

.ac-login__form-inner {
  width: 100%;
  max-width: 26rem;
}

.ac-login__rodape {
  color: rgba(255, 255, 255, .42);
  font-size: .8125rem;
  margin: 0;
}

/* no celular a faixa de marca vira um cabeçalho compacto */
@media (max-width: 991.98px) {
  .ac-login__marca {
    padding-block: 2rem;
    /* sem distribuir: logo e frase ficam juntos, e o formulário sobe na tela */
    justify-content: flex-start;
    gap: 1.75rem;
  }

  .ac-login__frase { font-size: 1.6rem; max-width: none; }
  .ac-login__rodape { display: none; }

  /* As três formas já aparecem no logotipo, logo acima. Empilhadas no
     celular a repetição vira ruído — no desktop elas ficam distantes o
     bastante para lerem como sistema gráfico. */
  .ac-formas,
  .ac-formas__linha { display: none; }
}