/* Tela de entrar / criar senha. Base: /hub/hub.css (cores, fontes, topo). Aqui só o bloco do login. */
.pg-entrar{min-height:100vh;display:flex;flex-direction:column}
.pg-entrar .topo{position:static}
.pg-entrar .marca{cursor:default}
.area-entrar{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:9vh 16px 48px}

/* o mesmo bloco dos painéis: branco, borda fina e barrinha colorida no topo */
.caixa{position:relative;width:min(420px,100%);background:var(--papel);border:1px solid var(--linha);border-radius:8px;padding:30px 30px 26px;overflow:hidden;box-shadow:0 10px 30px rgba(20,30,45,.06)}
.caixa::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--rogga)}
h1{font-family:var(--titulo);font-weight:600;font-size:26px;line-height:1.15;margin:0 0 6px}
.sub{margin:0 0 22px;color:var(--tinta-2);font-size:14px;line-height:1.5}
label{display:block;font-size:13px;font-weight:600;margin:16px 0 6px;color:var(--tinta-2)}
input{width:100%;height:44px;padding:0 12px;border:1px solid var(--linha);border-radius:8px;font:inherit;font-size:15px;background:var(--papel);color:var(--tinta)}
input:focus{outline:2px solid var(--foco);outline-offset:-1px;border-color:transparent}
.campo-senha{position:relative}
.campo-senha input{padding-right:84px}
.ver{position:absolute;right:6px;top:6px;height:32px;padding:0 10px;border:0;background:transparent;color:var(--tinta-2);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;border-radius:6px}
.ver:hover{background:var(--hover);color:var(--tinta)}

.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:46px;margin-top:20px;border-radius:8px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;border:1px solid transparent}
.btn:disabled{opacity:.6;cursor:wait}
.btn-primario{background:var(--rogga);color:#fff}
.btn-primario:hover{background:#a50d25}
.btn-bio{background:var(--tinta);color:var(--papel);margin-top:2px}
.btn-bio:hover{background:color-mix(in srgb,var(--tinta) 85%,var(--papel))}
.btn-bio svg{width:22px;height:22px}
.btn-sec{background:transparent;color:var(--tinta-2);border-color:var(--linha);margin-top:10px}
.btn-sec:hover{border-color:var(--tinta-3);color:var(--tinta)}
.ou{display:flex;align-items:center;gap:10px;margin:22px 0 0;color:var(--tinta-3);font-size:12.5px}
.ou::before,.ou::after{content:"";flex:1;height:1px;background:var(--linha)}
.ajuda{margin:18px 0 0;font-size:13px;color:var(--tinta-2);text-align:center}

.regras{margin:8px 0 0;padding:0;list-style:none;font-size:13px;color:var(--tinta-2)}
.regras li{display:flex;align-items:center;gap:7px;margin:4px 0}
.regras li::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid var(--tinta-3)}
.regras li.ok{color:var(--ok)}
.regras li.ok::before{background:var(--ok);border-color:var(--ok)}

.msg{margin-top:16px;padding:10px 12px;border-radius:8px;font-size:13.5px;font-weight:600;background:color-mix(in srgb,var(--alerta) 10%,var(--papel));color:var(--alerta)}
.msg.info{background:color-mix(in srgb,var(--foco) 9%,var(--papel));color:var(--foco)}
.msg.ok{background:color-mix(in srgb,var(--ok) 10%,var(--papel));color:var(--ok)}

.bio-ic{width:56px;height:56px;border-radius:12px;background:color-mix(in srgb,var(--a0) 10%,var(--papel));color:var(--a0);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.bio-ic svg{width:32px;height:32px}

@media (max-width:480px){
  .area-entrar{padding:24px 14px 40px}
  .caixa{padding:26px 20px 22px}
}