/* =====================================================================================================
   cfg-login.css — tela de entrada (index.html) no padrão visual único (item 18, onda 4, rodada 9).
   ARQUIVO IDÊNTICO em certifique-online e safeweb-online. Substitui as ~280 regras de login que estavam no
   legado (layout.css e smart3-theme.css, 281 delas com !important), removidas nesta onda.
   Só tokens --ui-* (cor da marca por portal, 3 temas e alto contraste), escala de 7 tamanhos, pesos 400/600/700,
   grade de 8, sem !important. Camada ui-components (vence o legado e a ponte).
   ===================================================================================================== */
@layer ui-components {
  html:has(body.login-screen) { background: var(--ui-bg); }
  body.login-screen { min-height: 100vh; min-height: 100dvh; margin: 0; background: var(--ui-bg); color: var(--ui-label); overflow-x: hidden; }

  /* ---------- fundo: imagens do carrossel (o JS põe a imagem em style.background) com véu do tema ---------- */
  .login-screen .login-background { position: fixed; inset: 0; z-index: 0; overflow: hidden; opacity: 0; background-color: var(--ui-bg); transition: opacity 1.2s ease; pointer-events: none; }
  .login-screen .login-background.is-visible { opacity: 1; }
  .login-screen .login-background::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--ui-bg) 58%, transparent); }
  :root[data-reduce-transparency="on"] .login-screen .login-background::after { background: var(--ui-bg); }
  .login-screen .login-background .cfg-login-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

  /* ---------- botão de tema (canto superior direito) ---------- */
  .login-screen .login-theme-toggle { position: fixed; top: var(--ui-s4); right: var(--ui-s4); z-index: 3; display: grid; place-items: center; width: var(--ui-control-h); height: var(--ui-control-h); min-width: 0; padding: 0; border: 0; border-radius: var(--ui-r-control); background: var(--ui-material); color: var(--ui-label); box-shadow: var(--ui-shadow-card); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); cursor: pointer; }
  .login-screen .login-theme-toggle :is(svg, img) { width: 20px; height: 20px; display: block; }

  /* ---------- página ---------- */
  .login-screen .login-page { position: relative; z-index: 1; box-sizing: border-box; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--ui-s7) var(--ui-s5) calc(var(--ui-s7) + var(--ui-s5)); }
  .login-screen .login-page .app-main { width: min(1080px, 100%); max-width: none; margin: 0; padding: 0; min-height: 0; }
  .login-screen .hero-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0; margin: 0; padding: 0; overflow: hidden; border-radius: var(--ui-r-sheet); background: var(--ui-surface); box-shadow: var(--ui-shadow-sheet); }

  /* painel da marca (cor do portal; texto branco: contraste AA conferido pelo teste de tokens) */
  .login-screen .hero-copy { display: flex; flex-direction: column; justify-content: center; gap: var(--ui-s5); min-width: 0; margin: 0; padding: var(--ui-s7) var(--ui-s6); background: var(--ui-accent); color: var(--ui-on-accent); box-shadow: none; border: 0; border-radius: 0; }
  .login-screen .hero-copy > div { display: flex; flex-direction: column; gap: var(--ui-s2); }
  .login-screen .login-brand-logo { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; box-sizing: border-box; width: min(220px, 100%); padding: var(--ui-s3) var(--ui-s4); border-radius: var(--ui-r-card); background: var(--ui-on-accent); box-shadow: var(--ui-shadow-card); }
  .login-screen .login-brand-logo::before { content: none; }
  .login-screen .login-hero-logo { display: block; width: 100%; max-width: 188px; height: auto; max-height: 64px; object-fit: contain; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; filter: none; }
  .login-screen .hero-copy .eyebrow { margin: 0; font: var(--ui-w-semibold) var(--ui-fs-footnote)/var(--ui-lh-footnote) var(--ui-font); letter-spacing: 0.04em; text-transform: none; color: var(--ui-on-accent); }
  .login-screen .login-hero-title { margin: 0; max-width: 16ch; font: var(--ui-w-bold) var(--ui-fs-largetitle)/var(--ui-lh-largetitle) var(--ui-font); letter-spacing: -0.02em; color: var(--ui-on-accent); }
  .login-screen .hero-copy .lead { margin: 0; max-width: 46ch; font: var(--ui-w-regular) var(--ui-fs-body)/var(--ui-lh-body) var(--ui-font); color: var(--ui-on-accent); }
  .login-screen .login-feature-list { display: flex; flex-direction: column; gap: var(--ui-s3); margin: 0; padding: 0; list-style: none; }
  .login-screen .login-feature-list li { display: flex; align-items: center; gap: var(--ui-s3); margin: 0; padding: 0; font: var(--ui-w-semibold) var(--ui-fs-callout)/var(--ui-lh-callout) var(--ui-font); color: var(--ui-on-accent); }
  .login-screen .login-feature-list li::before { content: "✓"; flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--ui-r-control); background: color-mix(in srgb, var(--ui-on-accent) 18%, transparent); font: var(--ui-w-bold) var(--ui-fs-footnote)/1 var(--ui-font); color: var(--ui-on-accent); }

  /* cartão de acesso */
  .login-screen .login-card { display: flex; flex-direction: column; justify-content: center; min-width: 0; margin: 0; padding: var(--ui-s7) var(--ui-s6); border: 0; border-radius: 0; background: var(--ui-surface); color: var(--ui-label); box-shadow: none; }
  .login-screen .login-card > * { width: 100%; max-width: 400px; margin-inline: auto; }
  .login-screen .login-secure-label { margin-block: 0 var(--ui-s1); font: var(--ui-w-semibold) var(--ui-fs-footnote)/var(--ui-lh-footnote) var(--ui-font); letter-spacing: 0.02em; text-transform: none; color: var(--ui-accent-text); }
  .login-screen .login-card .section-title { margin-block: 0 var(--ui-s1); font: var(--ui-w-bold) var(--ui-fs-largetitle)/var(--ui-lh-largetitle) var(--ui-font); letter-spacing: -0.02em; color: var(--ui-label); }
  .login-screen .login-card .lead { margin-block: 0 var(--ui-s5); font: var(--ui-w-regular) var(--ui-fs-body)/var(--ui-lh-body) var(--ui-font); color: var(--ui-label-2); }
  .login-screen .form-stack { display: flex; flex-direction: column; gap: var(--ui-s4); margin-block: 0; }
  .login-screen .field-group { display: flex; flex-direction: column; gap: 6px; margin: 0; }
  .login-screen .field-group > label { margin: 0; font: var(--ui-w-semibold) var(--ui-fs-footnote)/var(--ui-lh-footnote) var(--ui-font); color: var(--ui-label-2); }
  .login-screen .input-action-wrap { position: relative; display: flex; align-items: center; width: 100%; }
  .login-screen .input-action-wrap > input { flex: 1 1 auto; width: 100%; min-width: 0; padding-inline: var(--ui-s3) calc(var(--ui-control-h) + var(--ui-s1)); }
  .login-screen .input-action-button { position: absolute; top: 50%; right: var(--ui-s1); transform: translateY(-50%); display: grid; place-items: center; width: calc(var(--ui-control-h) - var(--ui-s2)); height: calc(var(--ui-control-h) - var(--ui-s2)); min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 6px; background: var(--ui-fill); color: var(--ui-label); box-shadow: none; cursor: pointer; }
  .login-screen .input-action-button[hidden] { display: none; }
  .login-screen .input-action-button .ui-svg-icon { width: 16px; height: 16px; filter: none; }
  :root:is(.theme-dark, .theme-dim) .login-screen .input-action-button .ui-svg-icon, :root[data-contrast="high"] .login-screen .input-action-button .ui-svg-icon { filter: invert(1); }
  .login-screen #login-submit { width: 100%; margin-top: var(--ui-s1); }
  .login-screen .forgot-password-link { align-self: center; height: var(--ui-control-h); padding: 0 var(--ui-s2); border: 0; border-radius: var(--ui-r-control); background: transparent; color: var(--ui-accent-text); font: var(--ui-w-semibold) var(--ui-fs-body)/1 var(--ui-font); text-decoration: none; box-shadow: none; cursor: pointer; }
  .login-screen .forgot-password-link:is(:hover, :focus-visible) { background: var(--ui-fill); }
  .login-screen #login-message { margin: 0; min-height: 0; text-align: center; font-size: var(--ui-fs-callout); line-height: var(--ui-lh-callout); color: var(--ui-label-2); }
  .login-screen #login-message:empty { display: none; }

  /* ---------- folha "Recuperação de senha" ---------- */
  .login-dialog-backdrop { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: var(--ui-s4); background: var(--ui-scrim); }
  .login-dialog-backdrop[hidden] { display: none; }
  .login-dialog-backdrop .login-dialog { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--ui-s3); width: min(440px, 100%); max-height: 92vh; overflow: auto; margin: 0; padding: var(--ui-s5); border: 0; border-radius: var(--ui-r-sheet); background: var(--ui-surface); color: var(--ui-label); box-shadow: var(--ui-shadow-sheet); }
  .login-dialog h2 { margin: 0; font: var(--ui-w-semibold) var(--ui-fs-headline)/var(--ui-lh-headline) var(--ui-font); color: var(--ui-label); }
  .login-dialog p { margin: 0; font-size: var(--ui-fs-callout); line-height: var(--ui-lh-callout); color: var(--ui-label-2); }
  .login-dialog .form-stack { gap: var(--ui-s3); }
  .login-dialog .form-stack > button, .login-dialog #forgot-password-close { width: 100%; }
  #recovery-request-status:empty { display: none; }

  /* ---------- celular: só a faixa da marca + cartão ---------- */
  @media (max-width: 767px) {
    .login-screen .login-page { place-items: start center; padding: calc(var(--ui-s7) + var(--ui-s2)) var(--ui-s4) calc(var(--ui-s7) + var(--ui-s5)); }
    .login-screen .hero-grid { grid-template-columns: minmax(0, 1fr); }
    .login-screen .hero-copy { align-items: center; gap: 0; padding: var(--ui-s4); }
    .login-screen .login-brand-logo { align-self: center; width: min(200px, 100%); padding: var(--ui-s2) var(--ui-s3); }
    .login-screen .hero-copy > div, .login-screen .login-feature-list { display: none; }
    .login-screen .login-card { padding: var(--ui-s5) var(--ui-s4) var(--ui-s4); }
    .login-dialog-backdrop { place-items: end stretch; padding: 0; }
    .login-dialog-backdrop .login-dialog { width: 100%; border-radius: var(--ui-r-sheet) var(--ui-r-sheet) 0 0; padding-bottom: calc(var(--ui-s5) + env(safe-area-inset-bottom, 0px)); }
  }
  /* telas baixas no computador: menos respiro vertical */
  @media (min-width: 768px) and (max-height: 760px) {
    .login-screen .login-page { padding-block: var(--ui-s5) calc(var(--ui-s6) + var(--ui-s5)); }
    .login-screen :is(.hero-copy, .login-card) { padding-block: var(--ui-s5); }
    .login-screen .hero-copy { gap: var(--ui-s4); }
  }

  /* ---------- CAP Mobile (index.html?destino=cap-mobile.html no portal CAP): só o fundo muda (vídeo); o cartão é o mesmo ---------- */
  html.cap-mobile-login body.login-screen { overflow-x: hidden; }

  /* ---------- logotipo: mesma caixa nos 3 portais (só a imagem muda) ---------- */
  .login-screen .login-brand-logo { height: 88px; }
  .login-screen .login-hero-logo { width: auto; max-width: 100%; height: 100%; max-height: 64px; }
  @media (max-width: 767px) { .login-screen .login-brand-logo { height: 64px; } .login-screen .login-hero-logo { max-height: 44px; } }

  /* ---------- folhas da entrada: troca de senha inicial (auth.js) e autenticador/MFA (mfa-login.js) ---------- */
  dialog.login-sheet { box-sizing: border-box; width: min(440px, calc(100vw - 32px)); max-height: 90vh; overflow: auto; margin: auto; padding: var(--ui-s5); border: 0; border-radius: var(--ui-r-sheet); background: var(--ui-surface); color: var(--ui-label); box-shadow: var(--ui-shadow-sheet); }
  dialog.login-sheet::backdrop { background: var(--ui-scrim); }
  .login-sheet .login-sheet-form { display: flex; flex-direction: column; gap: var(--ui-s3); margin: 0; }
  .login-sheet h2 { margin: 0; font: var(--ui-w-semibold) var(--ui-fs-headline)/var(--ui-lh-headline) var(--ui-font); color: var(--ui-label); }
  .login-sheet p { margin: 0; font-size: var(--ui-fs-callout); line-height: var(--ui-lh-callout); color: var(--ui-label-2); }
  .login-sheet .login-sheet-field { display: flex; flex-direction: column; gap: 6px; font: var(--ui-w-semibold) var(--ui-fs-footnote)/var(--ui-lh-footnote) var(--ui-font); color: var(--ui-label-2); }
  .login-sheet .login-sheet-field > input { width: 100%; }
  .login-sheet .login-sheet-alert { color: var(--ui-danger); font-weight: var(--ui-w-semibold); }
  .login-sheet .login-sheet-alert:empty { display: none; }
  .login-sheet .login-sheet-actions { display: flex; flex-wrap: wrap; gap: var(--ui-s2); margin-top: var(--ui-s1); }
  .login-sheet .login-sheet-actions > button { flex: 1 1 0; min-width: 0; }
  .login-sheet .login-sheet-actions > button[type="submit"] { flex: 1 0 100%; }
  .login-sheet .login-sheet-actions > [hidden] { display: none; }
  .login-sheet .login-sheet-setup { display: flex; flex-direction: column; gap: var(--ui-s2); }
  .login-sheet .login-sheet-setup[hidden] { display: none; }
  .login-sheet .login-sheet-qr { max-width: 240px; align-self: center; padding: var(--ui-s2); border-radius: var(--ui-r-control); background: var(--ui-on-accent); }
  .login-sheet code { overflow-wrap: anywhere; font: var(--ui-w-regular) var(--ui-fs-footnote)/var(--ui-lh-footnote) var(--ui-font-mono); color: var(--ui-label); }
  .login-sheet .login-sheet-codes { margin: 0; padding: var(--ui-s3); border-radius: var(--ui-r-control); background: var(--ui-surface-2); white-space: pre-wrap; overflow-wrap: anywhere; font: var(--ui-w-regular) var(--ui-fs-callout)/var(--ui-lh-callout) var(--ui-font-mono); color: var(--ui-label); }
  .login-sheet .login-sheet-form > .app-button { width: 100%; }
  @media (max-width: 767px) { dialog.login-sheet { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--ui-r-sheet) var(--ui-r-sheet) 0 0; padding-bottom: calc(var(--ui-s5) + env(safe-area-inset-bottom, 0px)); } }
}