/* Páginas de autenticação (entrar, cadastro e recuperação de senha) no visual do Design System do Portal da OBSAT.
   Só vale onde existe a coluna da marca (.ds-marca).
   O Filament usa camadas de CSS (@layer); regras sem camada, como estas, vencem sem precisar de !important. */

.fi-simple-layout:has(.ds-marca) {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
  background: var(--fundo-pagina);
  color: var(--tinta);
  font-family: var(--font-texto);
}
@media (min-width: 1024px) {
  .fi-simple-layout:has(.ds-marca) { grid-template-columns: 1fr 1fr; }
}

/* Cadastro: formulário em etapas precisa de mais largura */
@media (min-width: 1024px) {
  .fi-simple-layout:has(.ds-marca--cadastro) { grid-template-columns: minmax(340px, 2fr) 3fr; }
}

/* Coluna da marca */
.ds-marca {
  display: none;
  background: var(--marca-marinho);
  color: #fff;
  padding: 48px;
  flex-direction: column;
  justify-content: flex-end;
  gap: 24px;
  position: sticky; top: 0; height: 100vh; align-self: start; overflow-y: auto;
}
@media (min-width: 1024px) { .ds-marca { display: flex; } }
.ds-marca__sobretitulo { margin: 0; font-family: var(--font-titulos); font-weight: 600; font-size: 14px; line-height: 20px; letter-spacing: .12em; text-transform: uppercase; color: var(--energia); }
.ds-marca__lema { font-family: var(--font-exibicao); font-weight: 700; font-size: 44px; line-height: 48px; margin: 0; max-width: 520px; }
.ds-marca__texto { font-size: 16px; line-height: 24px; margin: 0; max-width: 460px; }
.ds-marca__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; max-width: 480px; }
.ds-marca__lista li { display: flex; gap: 12px; }
.ds-marca__lista li > div { display: grid; gap: 2px; }
.ds-marca__lista strong { font-family: var(--font-titulos); font-weight: 600; font-size: 16px; line-height: 24px; }
.ds-marca__lista span { font-size: 14px; line-height: 20px; }
.ds-marca__lista b {
  flex: none; width: 24px; height: 24px; border-radius: var(--raio-pilula);
  background: var(--energia); color: #0f172a; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; line-height: 1;
}

/* Coluna do formulário */
.fi-simple-layout:has(.ds-marca) .fi-simple-main-ctn {
  display: flex; align-items: center; justify-content: center; padding: 32px 16px;
}
.fi-simple-layout:has(.ds-marca) .fi-simple-main {
  width: 100%; max-width: 26rem; margin: 0;
  background: var(--fundo-cartao); border: 1px solid var(--borda); border-radius: var(--raio-grande);
  box-shadow: var(--sombra-pequena); padding: 32px; --tw-ring-shadow: 0 0 #0000;
}
.fi-simple-layout:has(.ds-marca) .fi-simple-header-heading {
  font-family: var(--font-titulos); font-weight: 600; font-size: 24px; line-height: 32px; color: var(--tinta);
}
.fi-simple-layout:has(.ds-marca) .fi-simple-header-subheading { color: var(--tinta-suave); font-size: 14px; line-height: 20px; }

.fi-simple-layout:has(.ds-marca--cadastro) .fi-simple-main { max-width: 48rem; }
.fi-simple-layout:has(.ds-marca) .fi-simple-main-ctn { align-items: flex-start; }
@media (min-height: 900px) { .fi-simple-layout:has(.ds-marca):not(:has(.ds-marca--cadastro)) .fi-simple-main-ctn { align-items: center; } }

/* Campos */
.fi-simple-layout:has(.ds-marca) .fi-fo-field-label-content { font-weight: 600; font-size: 14px; line-height: 20px; color: var(--tinta); }
.fi-simple-layout:has(.ds-marca) .fi-input-wrp {
  min-height: 44px; border-radius: var(--raio-medio); background: var(--fundo-cartao);
  border: 2px solid var(--borda-controle); box-shadow: none; --tw-ring-shadow: 0 0 #0000;
}
.fi-simple-layout:has(.ds-marca) .fi-input-wrp:focus-within { outline: 2px solid var(--foco); outline-offset: 2px; border-color: var(--foco); }
.fi-simple-layout:has(.ds-marca) .fi-input { font-family: var(--font-texto); font-size: 16px; line-height: 24px; color: var(--tinta); }
.fi-simple-layout:has(.ds-marca) .fi-fo-field-wrp-error-message { color: var(--erro); font-weight: 600; }

/* Botão principal: rosa de ação com texto contrastante (o rosa da marca não sustenta texto branco).
   Os demais botões (Voltar, cancelar) ficam como secundários, com contorno visível. */
.fi-simple-layout:has(.ds-marca) .fi-btn {
  min-height: 44px; border-radius: var(--raio-medio); font-family: var(--font-texto); font-weight: 600; font-size: 14px;
  background: var(--fundo-cartao); color: var(--tinta); border: 2px solid var(--borda-controle); box-shadow: none;
}
.fi-simple-layout:has(.ds-marca) .fi-btn.fi-color-primary,
.fi-simple-layout:has(.ds-marca) button[type="submit"].fi-btn {
  background: var(--acao); color: var(--sobre-acao); border-color: transparent;
}
.fi-simple-layout:has(.ds-marca) .fi-btn.fi-color-primary:hover,
.fi-simple-layout:has(.ds-marca) button[type="submit"].fi-btn:hover { background: var(--acao-passar); }
.fi-simple-layout:has(.ds-marca) .fi-btn:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* Caixa de seleção (Lembre de mim, termos): borda escura quando vazia e fundo de ação com marca branca quando marcada,
   para que ela seja visível nos dois estados. */
.fi-simple-layout:has(.ds-marca) input[type="checkbox"].fi-checkbox-input {
  width: 20px; height: 20px; border-radius: var(--raio-pequeno);
  background-color: var(--fundo-cartao); border: 2px solid var(--borda-controle); box-shadow: none; --tw-ring-shadow: 0 0 #0000;
}
.fi-simple-layout:has(.ds-marca) input[type="checkbox"].fi-checkbox-input:checked {
  background-color: var(--acao); border-color: var(--acao);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23ffffff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}
.fi-simple-layout:has(.ds-marca) input[type="checkbox"].fi-checkbox-input:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.fi-simple-layout:has(.ds-marca) input[type="checkbox"].fi-checkbox-input.fi-invalid { border-color: var(--erro); }

/* Etapas do cadastro */
.fi-simple-layout:has(.ds-marca) .fi-sc-wizard-header { border-color: var(--borda); }
.fi-simple-layout:has(.ds-marca) .fi-sc-wizard-header-step-label { font-weight: 600; color: var(--tinta); }
.fi-simple-layout:has(.ds-marca) .fi-sc-wizard-header-step-description { color: var(--tinta-suave); }
.fi-simple-layout:has(.ds-marca) .fi-sc-wizard-header-step-icon-ctn { border: 2px solid var(--borda-controle); background: var(--fundo-cartao); color: var(--tinta); }
.fi-simple-layout:has(.ds-marca) .fi-active .fi-sc-wizard-header-step-icon-ctn { border-color: var(--acao); background: var(--acao); color: var(--sobre-acao); }

/* Links */
.fi-simple-layout:has(.ds-marca) .fi-link,
.fi-simple-layout:has(.ds-marca) .fi-simple-main a:not(.fi-btn) { color: var(--marca-azul); font-weight: 600; }
.fi-simple-layout:has(.ds-marca) .fi-simple-main a:not(.fi-btn):focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* Logo do painel */
.fi-simple-layout:has(.ds-marca) .fi-logo { max-height: 3rem; }

@media (prefers-reduced-motion: reduce) {
  .fi-simple-layout:has(.ds-marca) * { transition: none !important; animation: none !important; }
}