/* ==========================================================================
   VISUAL NOVO DAS TELAS DE ENTRADA (login, cadastro, senha, confirmar e-mail) - 18/10/2026
   Usado por entrada_topo.php (incluído logo depois de <body>). Mesmas cores do Início e das telas internas.
   Os seletores começam com html[data-theme] para valerem por cima do <style> antigo de cada tela.
   ========================================================================== */
html[data-theme="dark"]{--bg:#0b1120;--card:#111827;--soft:#0f172a;--text:#e5e7eb;--muted:#94a3b8;--border:#1f2937;
    --primary:#3b82f6;--primary-dark:#1d4ed8;--bg-card:#111827;--text-soft:#94a3b8;--border-soft:#1f2937;
    --fc-sombra:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);color-scheme:dark}
html[data-theme="light"]{--bg:#f1f5f9;--card:#ffffff;--soft:#f8fafc;--text:#0f172a;--muted:#64748b;--border:#e2e8f0;
    --primary:#2563eb;--primary-dark:#1d4ed8;--bg-card:#ffffff;--text-soft:#64748b;--border-soft:#e2e8f0;
    --fc-sombra:0 1px 2px rgba(15,23,42,.06),0 10px 30px rgba(15,23,42,.08);color-scheme:light}

/* página: marca à esquerda, formulário à direita */
html[data-theme] body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);
    font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:center;justify-items:center}
html[data-theme] body > .wrap{width:100%;max-width:440px;padding:32px 20px}

/* painel da marca */
.entrada-marca{align-self:stretch;width:100%;box-sizing:border-box;padding:56px 56px 32px;display:flex;flex-direction:column;gap:28px;
    color:#fff;background:linear-gradient(150deg,#1e40af 0%,#2563eb 50%,#15803d 100%);position:relative;overflow:hidden}
.entrada-marca::after{content:"";position:absolute;right:-120px;bottom:-120px;width:360px;height:360px;border-radius:50%;
    background:rgba(255,255,255,.08)}
.em-topo{display:flex;align-items:center;gap:12px}
.em-logo{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;
    font-weight:800;font-size:17px}
.em-nome{font-weight:800;font-size:18px}
.em-sub{font-size:13px;opacity:.8}
.entrada-marca h2{margin:auto 0 0;font-size:34px;line-height:1.15;font-weight:800;letter-spacing:-.02em;max-width:460px}
.entrada-marca ul{list-style:none;margin:0 0 auto;padding:0;display:flex;flex-direction:column;gap:16px;max-width:460px}
.entrada-marca li{display:flex;gap:14px;align-items:flex-start;font-size:13.5px;line-height:1.45;opacity:.95}
.entrada-marca li b{display:block;font-size:15px;opacity:1}
.em-ico{flex:0 0 40px;height:40px;border-radius:12px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center}
.em-ico svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.em-rodape{font-size:12px;opacity:.7;position:relative;z-index:1}

/* cartão do formulário */
html[data-theme] .wrap .card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:30px 28px 24px;box-shadow:var(--fc-sombra)}
html[data-theme] .wrap .logo{width:44px;height:44px;border-radius:13px;color:#fff;font-weight:800;font-size:16px;margin-bottom:14px;
    background:linear-gradient(135deg,var(--primary),#22c55e);display:flex;align-items:center;justify-content:center}
html[data-theme] .wrap .title{font-size:24px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
html[data-theme] .wrap .subtitle{font-size:13.5px;color:var(--muted);line-height:1.5;margin-bottom:20px}
html[data-theme] .wrap label{font-size:13px;font-weight:600;color:var(--text);margin-bottom:6px}
html[data-theme] .wrap .field{margin-bottom:14px}
html[data-theme] .wrap input[type="email"],html[data-theme] .wrap input[type="password"],html[data-theme] .wrap input[type="text"],
html[data-theme] .wrap input[type="tel"],html[data-theme] .wrap select{width:100%;box-sizing:border-box;padding:12px 13px;border-radius:12px;
    border:1px solid var(--border);background:var(--soft);color:var(--text);font-size:14.5px;font-family:inherit;transition:border-color .15s,box-shadow .15s}
html[data-theme] .wrap input:focus,html[data-theme] .wrap select:focus{outline:none;border-color:var(--primary);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 22%,transparent)}
html[data-theme] .wrap .manter{font-size:13.5px;color:var(--text);font-weight:500}

/* botões: o principal cheio; "Criar novo usuário" com borda; "Esqueci minha senha" como link */
html[data-theme] .wrap .btn{width:100%;margin-top:12px;padding:13px 0;border-radius:12px;border:0;font-size:15px;font-weight:700;font-family:inherit;
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;cursor:pointer;transition:filter .15s,transform .15s}
html[data-theme] .wrap .btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
html[data-theme] .wrap .btn[type="button"]{background:transparent;color:var(--text);border:1px solid var(--border)}
html[data-theme] .wrap .btn[type="button"]:hover{border-color:var(--primary);color:var(--primary);filter:none}
html[data-theme] .wrap .btn[type="button"]:last-of-type{border:0;margin-top:4px;padding:8px 0;font-weight:600;font-size:13.5px;color:var(--primary)}
html[data-theme] .wrap .btn[type="button"]:last-of-type:hover{text-decoration:underline;transform:none}

/* mensagens */
html[data-theme] .wrap .error,html[data-theme] .wrap .erro,html[data-theme] .wrap .success,html[data-theme] .wrap .sucesso{
    border-radius:12px;font-size:13.5px;line-height:1.45;padding:11px 13px;margin:0 0 14px}
html[data-theme="dark"] .wrap .error,html[data-theme="dark"] .wrap .erro{color:#fecaca}
html[data-theme="dark"] .wrap .success,html[data-theme="dark"] .wrap .sucesso{color:#bbf7d0}
html[data-theme] .wrap .footer{margin-top:16px;font-size:13px;color:var(--muted);text-align:center}
html[data-theme] .wrap .footer a{color:var(--primary);font-weight:600}

/* tablet e celular: faixa da marca em cima, formulário embaixo */
@media (max-width: 900px){
    html[data-theme] body{display:block}
    .entrada-marca{padding:22px 20px;gap:0}
    .entrada-marca h2,.entrada-marca ul,.em-rodape{display:none}
    .entrada-marca::after{width:200px;height:200px;right:-70px;bottom:-110px}
    html[data-theme] body > .wrap{margin:0 auto;padding:20px 16px 32px}
    html[data-theme] .wrap .logo{display:none}
    html[data-theme] .wrap .card{padding:24px 20px 20px}
}