/* Telas de conta (entrar, criar acesso, redefinir senha). 23/09/2026
   Lê Comigo: fundo creme, tinta roxa-escura, teal e laranja da Lia, borda de 3px, sombra dura deslocada. */

:root{
  --ink:#2D2A4A; --papel:#FFFFFF; --fundo:#FFF8EC; --branco:#fff;
  --vermelho:#FF8A3D; --amarelo:#FFC93C; --azul:#2BB5B0; --verde:#34B75A;
  --txt2:#5F5C7D;
  --f:"Baloo 2","Trebuchet MS",Verdana,system-ui,sans-serif;
  --b:3px solid var(--ink);
  --dura:6px 6px 0 var(--ink); --dura-sm:4px 4px 0 var(--ink);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh; background:var(--fundo); color:var(--ink);
  font:400 16px/1.6 var(--f);
  display:flex; align-items:center; justify-content:center;
  padding:28px 16px 48px;
  /* meio-tom de quadrinho, bem discreto, igual ao da landing */
  background-image:radial-gradient(var(--ink) .5px,transparent .5px);
  background-size:16px 16px; background-position:0 0;
}
body::before{content:"";position:fixed;inset:0;background:var(--fundo);opacity:.94;z-index:-1}

.caixa{width:100%;max-width:440px}

.marca{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 auto 22px;font:800 30px/1 var(--f);color:var(--ink);text-decoration:none}
.marca img{width:64px;height:auto}
.marca em{font-style:normal;color:var(--azul)}

.cartao{
  background:var(--papel); border:var(--b); border-radius:22px;
  box-shadow:var(--dura); padding:30px 26px 26px;
}

h1{margin:0 0 6px;font-size:26px;line-height:1.2;font-weight:800}
.sub{margin:0 0 22px;color:var(--txt2);font-size:15.5px;font-weight:600}

label{display:block;margin:0 0 6px;font-weight:700;font-size:14.5px}
.campo{margin-bottom:16px}
input{
  width:100%; padding:13px 14px; font:600 16px/1.2 var(--f); color:var(--ink);
  background:var(--branco); border:var(--b); border-radius:12px; outline:none;
}
input:focus{box-shadow:var(--dura-sm);transform:translate(-2px,-2px)}
input:disabled{background:#efe8da;color:var(--txt2)}

/* o olhinho de mostrar a senha: um campo que a pessoa nao consegue conferir vira erro de digitacao */
.senha{position:relative}
.senha input{padding-right:52px}
.olho{
  position:absolute; right:6px; top:6px; width:40px; height:40px;
  background:none; border:0; cursor:pointer; font-size:19px; line-height:1;
  color:var(--txt2); border-radius:9px;
}
.olho:hover{background:#0000000d}

button.acao{
  width:100%; margin-top:8px; padding:16px; cursor:pointer;
  font:800 18px/1.2 var(--f); color:#fff;
  background:var(--vermelho); border:var(--b); border-radius:14px; box-shadow:var(--dura-sm);
  transition:transform .12s, box-shadow .12s;
}
button.acao:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:var(--dura)}
button.acao:active:not(:disabled){transform:translate(2px,2px);box-shadow:none}
button.acao:disabled{background:#c9c2b4;cursor:default;box-shadow:none}

.link{
  display:inline-block; margin-top:16px; background:none; border:0; padding:0; cursor:pointer;
  font:700 15px var(--f); color:var(--azul); text-decoration:underline; text-underline-offset:3px;
}
.centro{text-align:center}

.aviso{
  margin:0 0 18px; padding:13px 15px; border:var(--b); border-radius:12px;
  font-size:15px; font-weight:600; line-height:1.5;
}
.aviso.erro{background:#ffe6e6}
.aviso.ok{background:#e8fbf4}
.aviso.espera{background:#fff3d1}
.esconde{display:none !important}

.rodape{margin:20px 4px 0;text-align:center;font-size:13.5px;color:var(--txt2);line-height:1.7}
.rodape a{color:var(--azul);font-weight:700;text-decoration:none}

@media(max-width:420px){
  .cartao{padding:24px 20px 22px}
  h1{font-size:23px}
}