/* Tela de entrar e painel das portas: IGUAIS aos do CAPTURE atual (referência: Drive, capture-referencia-visual).
   Paleta e regras copiadas do CSS do CAPTURE (8f784dd), escopadas em .cx para não colidir com o resto do protótipo. */
.cx {
  --fundo: #f1efe8; --superficie: #ffffff; --superficie-2: #f8f6f1; --borda: #ded8ca; --borda-forte: #c2b9a5;
  --texto: #16283c; --texto-medio: #4b5b70; --texto-fraco: #586576; --realce: #eae5d9;
  --marca: #79633a; --marca-viva: #c9a45c; --marca-fundo: #f7efdc; --sobre-marca: #16283c; --creme: #f2ede3;
  --acento: #2945a7; --sobre-acento: #ffffff;
  --menu-fundo: #101e31; --menu-fundo-2: #16283c; --menu-texto: #f2ede3; --menu-texto-fraco: #9aabbe; --menu-marca: #c9a45c; --menu-link: #e6c88a;
  --sombra: 0 1px 2px rgba(12, 27, 45, .10);
  --fonte-corpo: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fonte-titulo: 'Spectral', Georgia, 'Times New Roman', serif;
  --corpo: 14px; --rotulo: 12px; --tipo-nota: .8125rem; --tipo-titulo-tela: 1.3125rem; --tipo-destaque: 1.5rem; --tipo-leitura: 1.625rem; --tipo-marca: 2.25rem; --tipo-capture: 2.75rem;
  --espaco-1: .25rem; --espaco-2: .5rem; --espaco-3: .75rem; --espaco-4: 1rem; --espaco-5: 1.5rem; --espaco-6: 2rem;
  --raio-1: .25rem; --raio-2: .3rem; --raio-3: .5rem;
  font-family: var(--fonte-corpo); font-size: var(--corpo); background: var(--fundo); color: var(--texto); min-height: 100vh; min-height: 100dvh;
}
.cx[data-tema="escuro"] {
  --fundo: #0c1b2d; --superficie: #16283c; --superficie-2: #1b3149; --borda: #24354a; --borda-forte: #33475f;
  --texto: #f2ede3; --texto-medio: #b8c4d2; --texto-fraco: #95a5b7; --realce: #1f3350;
  --marca: #c9a45c; --marca-fundo: #33291a; --acento: #7f9cf0; --sobre-acento: #0c1b2d; --sombra: 0 1px 2px rgba(0, 0, 0, .45);
}
.cx *, .cx *::before, .cx *::after { box-sizing: border-box; }
.cx a { color: inherit; }
.cx-casca { display: flex; min-height: 100vh; min-height: 100dvh; flex-direction: column; }
.cx-topo { background: var(--superficie); border-bottom: 1px solid var(--borda); padding: var(--espaco-4) var(--espaco-6); display: flex; align-items: center; gap: .6rem; }
.cx-marca { margin: 0; font-family: var(--fonte-titulo); font-size: var(--tipo-titulo-tela); font-weight: 600; letter-spacing: .14em; color: var(--marca); }
.cx-tema { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.cx-tema button, .cx-sair button, .cx-ver select { font-family: var(--fonte-corpo); font-size: var(--rotulo); padding: .18rem .45rem; cursor: pointer; border: 1px solid var(--borda); background: var(--superficie-2); color: var(--texto-medio); border-radius: var(--raio-1); }
.cx-tema button.ativo { background: var(--marca-viva); color: var(--sobre-marca); border-color: var(--marca-viva); font-weight: 600; }
.cx-ver { display: flex; align-items: center; gap: .3rem; font-size: var(--rotulo); color: var(--texto-fraco); margin-left: .6rem; }
.cx-quem { margin-left: .4rem; font-size: var(--tipo-nota); color: var(--texto-medio); display: flex; align-items: center; gap: .4rem; white-space: nowrap; }
.cx-quem a { color: var(--acento); }
.cx-sair { margin: 0; }
.cx-main { padding: var(--espaco-6); width: 100%; max-width: 72rem; margin: 0 auto; flex: 1 1 auto; }
.cx-titulo { margin: 0 0 var(--espaco-1); font-family: var(--fonte-titulo); font-size: var(--tipo-marca); font-weight: 600; }
.cx-ajuda { margin: 0 0 var(--espaco-6); color: var(--texto-medio); }
.cx-portas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espaco-5); }
.cx-porta { display: flex; flex-direction: column; gap: var(--espaco-3); min-height: 13.75rem; padding: var(--espaco-6) var(--espaco-6) var(--espaco-5); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-3); box-shadow: var(--sombra); color: var(--texto); text-decoration: none; text-align: left; font: inherit; cursor: pointer; }
.cx-porta:hover { border-color: var(--marca); }
.cx-porta:disabled { opacity: .55; cursor: not-allowed; }
.cx-porta:disabled:hover { border-color: var(--borda); }
.cx-porta-icone { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--raio-3); background: var(--marca-fundo); color: var(--marca); }
.cx-porta-nome { font-family: var(--fonte-titulo); font-size: var(--tipo-leitura); font-weight: 600; }
.cx-porta-frase { line-height: 1.45; color: var(--texto-medio); }
.cx-porta-abrir { display: inline-flex; align-items: center; gap: var(--espaco-1); margin-top: auto; font-weight: 600; color: var(--marca); }
.cx-porta-semacesso { margin-top: auto; font-weight: 600; color: var(--texto-fraco); }
.cx-versao { padding: .35rem 1rem .5rem; font-size: var(--rotulo); color: var(--texto-fraco); border-top: 1px solid var(--borda); text-align: right; }
.cx-exemplo { margin: var(--espaco-5) 0 0; font-size: var(--rotulo); color: var(--texto-fraco); }

/* ---------- entrar: sempre escura, com a foto das colunas ---------- */
.cx-acesso { color-scheme: dark; background: var(--menu-fundo); --texto: var(--menu-texto); --texto-medio: var(--menu-texto-fraco); --texto-fraco: var(--menu-texto-fraco); --acento: var(--menu-link); --borda: var(--menu-fundo-2); color: var(--texto); }
.cx-acesso .cx-casca { justify-content: center; }
.cx-acesso-marca { margin: 0; }
.cx-acesso-sistema { font-family: var(--fonte-titulo); font-size: var(--tipo-capture); font-weight: 500; letter-spacing: .14em; line-height: 1.1; color: var(--menu-marca); margin: 0; }
.cx-acesso-sistema::after { content: ""; display: block; width: 56px; height: 2px; background: var(--menu-marca); margin: var(--espaco-3) 0 var(--espaco-2); }
.cx-acesso-assinatura { font-family: var(--fonte-titulo); font-size: var(--rotulo); letter-spacing: .18em; color: var(--menu-texto-fraco); margin: 0 0 var(--espaco-5); }
.cx-acesso h1 { font-family: var(--fonte-titulo); font-size: var(--tipo-titulo-tela); font-weight: 600; margin: 0; white-space: nowrap; color: var(--texto); }
.cx-form label { display: block; margin: var(--espaco-3) 0; font-size: var(--rotulo); text-transform: uppercase; letter-spacing: .06em; color: var(--texto-medio); }
.cx-form input { display: block; width: 100%; margin-top: var(--espaco-1); padding: .65rem .75rem; font: inherit; font-size: var(--corpo); text-transform: none; letter-spacing: normal; border: 1px solid color-mix(in srgb, var(--menu-marca) 55%, transparent); border-radius: var(--raio-2); background: color-mix(in srgb, var(--menu-fundo-2) 85%, transparent); color: var(--texto); caret-color: var(--acento); }
.cx-form input:focus { outline: 2px solid var(--menu-marca); outline-offset: 0; }
.cx-botao { font-family: var(--fonte-corpo); font-size: var(--tipo-nota); padding: .4rem .8rem; border-radius: var(--raio-1); display: inline-flex; align-items: center; gap: .35rem; border: 1px solid transparent; cursor: pointer; background: var(--marca-viva); color: var(--sobre-marca); font-weight: 600; transition: background-color .15s ease-out, color .15s ease-out, border-color .15s ease-out; }
.cx-botao:hover { background: #33291a; color: var(--marca-viva); border-color: var(--marca-viva); }
.cx-form .cx-botao { width: 100%; justify-content: center; margin-top: var(--espaco-5); }
.cx-entrar-ajuda { font-size: var(--tipo-nota); line-height: 1.4; color: var(--texto-medio); }
.cx-entrar-ajuda a { color: var(--acento); }
.cx-entrar-erro { background: #3a1a20; color: #f27583; padding: var(--espaco-2) var(--espaco-3); border-radius: var(--raio-1); margin-top: var(--espaco-3); }
.cx-acesso .cx-versao { border-top: 0; padding: var(--espaco-5) 0 var(--espaco-4); text-align: left; }
@media screen and (min-width: 48rem) {
  .cx-acesso { background: var(--menu-fundo) url(../assets/entrada-larga.webp) center / cover no-repeat; }
  .cx-acesso .cx-casca { flex-direction: column; justify-content: center; align-items: flex-end; padding: var(--espaco-6) 8%; }
  .cx-acesso-marca, .cx-acesso-bloco { flex: none; align-self: flex-end; width: min(22.5rem, 100%); }
}
@media screen and (max-width: 47.99rem) {
  .cx-acesso .cx-casca { display: block; }
  .cx-acesso-marca { height: 56vh; background: var(--menu-fundo) url(../assets/entrada-alta.webp) center 30% / cover no-repeat; }
  .cx-acesso-marca p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cx-acesso-bloco { padding: 0 var(--espaco-4); }
  .cx-acesso-bloco h1 { padding-top: var(--espaco-5); }
  .cx-topo { padding: var(--espaco-3) var(--espaco-4); flex-wrap: wrap; }
  .cx-main { padding: var(--espaco-5) var(--espaco-4); }
  .cx-titulo { font-size: var(--tipo-destaque); }
  .cx-portas { grid-template-columns: minmax(0, 1fr); }
  .cx-porta { min-height: 0; padding: var(--espaco-5); }
}
@media (prefers-reduced-motion: reduce) { .cx-botao { transition: none; } }
.cx-chip { margin-left: .6rem; font-size: var(--rotulo); color: #a86a0f; background: #fbf0da; border-radius: 99px; padding: 2px 10px; font-weight: 600; }
.cx[data-tema="escuro"] .cx-chip { color: #e0a844; background: #2e2410; }
.cx-icone { font-family: var(--fonte-corpo); font-size: var(--rotulo); padding: .18rem .55rem; cursor: pointer; border: 1px solid var(--borda); background: var(--superficie-2); color: var(--texto-medio); border-radius: var(--raio-1); margin-left: .4rem; }