/* ==========================================================================
   Tela de entrada (Login do Gestor) — identidade da CDC
   ==========================================================================

   Escrita em 08/09/2026, mudança `aplicar-identidade-visual-cdc`. Substitui
   o `style=` inline que o `LoginGestor.razor` carregava desde a tradução
   pixel a pixel do protótipo.

   POR QUE SAIU DO INLINE
   ----------------------
   `:hover` e `:focus` não existem em atributo de estilo — é o mesmo motivo
   já registrado no `ShellDesktop.razor` em 27/07/2026, quando o cabeçalho
   do Shell migrou. Num formulário isso não é organização: campo de senha
   sem foco visível é problema de acessibilidade.

   O QUE NÃO ESTÁ AQUI, E É DE PROPÓSITO
   -------------------------------------
   🔑 O degradê e a textura diagonal do painel de marca. Eles vêm de
   `.superficie-marca`, em `shell-sidebar.css` — a MESMA declaração que a
   barra lateral do Shell usa. A Delta Spec proíbe copiar os valores:
   "duas cópias do mesmo degradê são o começo de dois degradês diferentes".
   Se este arquivo declarasse um `linear-gradient`, seria exatamente isso.

   🔴 E o que saiu de vez: a MOLDURA DE NAVEGADOR FALSA. Até esta mudança a
   tela desenhava três bolinhas de semáforo e uma barra de endereço com o
   texto `gestao.cdcequipamentos.com.br/login` — que não é o endereço do
   sistema (`app.cdcequipamentos.com.br`). Veio da tradução literal do
   protótipo, onde a moldura existia para mostrar "é assim que fica no
   navegador". Dentro do navegador de verdade, ela mostrava ao usuário um
   endereço que não era o dele.
   ========================================================================== */

.entrada-cartao {
  display: flex;
  width: 1152px;
  max-width: calc(100vw - 2 * var(--space-4));
  height: 648px;
  max-height: calc(100vh - 2 * var(--space-4));
  margin: auto;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-bg);
  box-shadow: 0 20px 60px var(--color-backdrop);
}

/* ---- Painel de marca (esquerda) -------------------------------------- */

.entrada-marca {
  display: flex;
  box-sizing: border-box;
  flex: 0 0 46%;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);

  /* `overflow: hidden` porque a textura de `.superficie-marca` é um
     `::before` com `inset: 0` — sem isto ela ignora o raio do cartão e
     aparece quadrada no canto. */
  overflow: hidden;
  padding: var(--space-7) var(--space-6);
}

/* A textura fica atrás; logo e texto na frente. Mesma regra que a barra
   aplica com `.app-sidebar > *`. */
.entrada-marca > * {
  position: relative;
  z-index: 1;
}

/* Mesmo arquivo de imagem da barra lateral — `object-fit: contain` mostra
   a marca inteira, aqui sem recorte nenhum (não há estado recolhido). */
.entrada-logo {
  display: block;
  width: 100%;
  max-width: 296px;
  height: auto;
}

.entrada-marca-texto {
  max-width: 340px;
  margin: 0;
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  line-height: 1.55;
}

/* ---- Formulário (direita) -------------------------------------------- */

.entrada-painel {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.entrada-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 360px;
  max-width: 100%;
}

.entrada-titulo {
  margin: 0;
  color: var(--color-ink-forte);
  font-size: 20px;
  font-weight: 700;
}

.entrada-subtitulo {
  margin: 4px 0 12px;
  color: var(--color-muted);
  font-size: 13px;
}

.entrada-rotulo {
  display: block;
  margin-bottom: 5px;
  color: var(--color-muted);
  font-size: 11px;
}

.entrada-input {
  box-sizing: border-box;
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--color-border-soft);
  border-radius: 11px;
  background: var(--color-surface);
  color: var(--color-ink-forte);
  font-family: inherit;
  font-size: 13px;
}

.entrada-input::placeholder {
  color: var(--color-disabled);
}

/* `:hover` e `:focus` — os dois estados que o `style=` inline não permitia
   declarar. O anel de foco em si vem de componentes-base.css
   (`input:focus-visible`); aqui só a borda acompanha. */
.entrada-input:hover,
.entrada-input:focus {
  border-color: var(--color-focus);
}

.entrada-senha {
  display: flex;
  gap: 6px;
}

.entrada-validacao {
  display: block;
  margin-top: 5px;
  color: var(--warning-text);
  font-size: 11px;
}

/* ---- Ação principal, na cor de marca ---------------------------------
   Era `--color-primary`, que renderiza VERDE — cor que não pertence à
   identidade da CDC (temas.css: #0a7988 no claro, #10b981 no escuro).
   `--color-cdc-blue-deep` é marca e NÃO muda com o tema ("Identidade CDC:
   mantida — é a marca, não muda com o tema", temas.css:242).

   Branco sobre #155f96 dá 6,75:1 — acima do mínimo AA (4,5:1). O
   `--color-cdc-blue` (#1e7bbc) daria 4,19:1 e reprovaria neste tamanho de
   texto, então o hover ESCURECE em vez de clarear. */
.entrada-botao {
  height: 44px;
  margin-top: 4px;
  border: 0;
  border-radius: 12px;
  background: var(--color-cdc-blue-deep);
  color: #ffffff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s, opacity .12s;
}

.entrada-botao:hover:not(:disabled) {
  background: var(--color-brand-panel);
}

.entrada-botao:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ---- Rodapé do formulário -------------------------------------------- */

.entrada-link {
  border: 0;
  background: none;
  color: var(--color-muted);
  font-family: inherit;
  font-size: 11.5px;
  text-align: center;
  text-decoration: underline;
  cursor: pointer;
}

.entrada-link:hover {
  color: var(--color-ink);
}

.entrada-nota {
  padding: 10px 12px;
  border: 1px solid var(--color-border-soft);
  border-radius: 10px;
  background: var(--color-surface-panel);
  color: var(--color-muted);
  font-size: 11.5px;
  line-height: 1.5;
  text-align: center;
}

.entrada-nota-detalhe {
  color: var(--color-subtle);
}

.entrada-mensagem {
  color: var(--warning-text);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.entrada-mensagem--bloqueada {
  color: var(--danger-text);
}

.entrada-mensagem--sucesso {
  color: var(--color-focus);
}

/* ---- Senha e acesso ---------------------------------------------------
   Mudança `reset-de-senha-sem-a-ti`: "Esqueci minha senha", "Redefinir
   senha" e "Trocar senha" usam a mesma moldura do login. Medidas do
   protótipo "Senha e Acesso — handoff (04-10-2026)" (OneDrive, Módulo 00),
   peças 1, 2 e 3; cores só por token. */

/* Regra da senha nova, sempre visível e ligada ao campo por
   aria-describedby. */
.entrada-regra {
  margin: 6px 0 0;
  color: var(--color-muted);
  font-size: 11px;
  line-height: 1.45;
}

/* Indicadores que ficam verdes ao digitar — aria-hidden: o texto da regra
   já diz o mesmo a quem usa leitor de tela. */
.entrada-regra-indicadores {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font-size: 11px;
  font-weight: 600;
}

.entrada-regra-item {
  color: var(--color-disabled);
}

.entrada-regra-item--ok {
  color: var(--success-text);
}

/* Erro por campo: sob o campo, aria-live, e a borda do campo acompanha. */
.entrada-erro-campo {
  display: block;
  margin-top: 5px;
  color: var(--danger-text);
  font-size: 11.5px;
  font-weight: 600;
}

.entrada-erro-campo:empty {
  margin-top: 0;
}

.entrada-input--invalido,
.entrada-input--invalido:hover,
.entrada-input--invalido:focus {
  border-color: var(--danger-text);
}

/* Caixas de estado: a mensagem que SUBSTITUI o formulário (pedido
   recebido, link inválido, recuperação indisponível, sucesso). */
.entrada-caixa {
  padding: 12px 14px;
  border: 1px solid var(--color-border-soft);
  border-radius: 10px;
  background: var(--color-surface-panel);
  color: var(--color-ink);
  font-size: 13px;
  line-height: 1.5;
}

.entrada-caixa--aviso {
  border-color: var(--warning-border);
  background: var(--warning-bg);
  color: var(--warning-text);
  font-weight: 600;
}

.entrada-caixa--sucesso {
  border-color: var(--success-border);
  background: var(--success-bg);
  color: var(--success-text);
  font-weight: 600;
}

/* "Voltar" + ação principal lado a lado (troca voluntária). */
.entrada-acoes {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.entrada-acoes .entrada-botao {
  flex: 1;
  margin-top: 0;
}

.entrada-botao-secundario {
  flex: 0 0 112px;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-acao-secundaria);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.entrada-botao-secundario:hover {
  border-color: var(--color-acao-secundaria);
}

/* ---- Telas estreitas --------------------------------------------------
   O cartão tem 1152px fixos; abaixo disso o painel de marca vira faixa no
   topo em vez de sumir — a identidade é o ponto desta mudança. */
@media (max-width: 900px) {
  .entrada-cartao {
    flex-direction: column;
    height: auto;
    max-height: none;
  }

  .entrada-marca {
    flex: none;
    align-items: center;
    padding: var(--space-6);
    text-align: center;
  }

  .entrada-logo {
    max-width: 220px;
  }
}