/* ===========================================================================
   LF Pátio · casca do app e tela Entrar (LFP-1.16)
   Regras portadas do protótipo lf-preview (topo, abas, palco, rodapé, campo,
   botão de ação, acesso). Só consome tokens de tokens.css.
   =========================================================================== */
[hidden]{display:none !important}

/* ============================================================ topo / abas */
.topo{background:var(--grafite);border-bottom:var(--filete);position:sticky;top:0;z-index:40}
.topo-in{max-width:var(--largura-topo);margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px}
.marca{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.marca .lf{display:block;height:26px;width:auto}
.abas{display:flex;align-items:center;gap:var(--esp-1);flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.abas::-webkit-scrollbar{display:none}
.aba{
  appearance:none;border:1px solid transparent;background:transparent;color:var(--prata);
  font-size:var(--fs-aba);font-weight:600;letter-spacing:.01em;padding:7px 10px;border-radius:var(--raio-sm);
  cursor:pointer;white-space:nowrap;line-height:1.2;text-decoration:none;
}
.aba:hover{color:var(--gelo);background:var(--ardosia)}
.aba.ativa{background:var(--azul);color:var(--gelo);border-color:var(--azul)}
.topo-dir{flex:0 0 auto;display:flex;align-items:center;gap:var(--esp-4)}
.quem-topo{font-size:12px;font-weight:600;color:var(--prata);white-space:nowrap;max-width:22ch;overflow:hidden;text-overflow:ellipsis}
.sair-topo{
  appearance:none;background:transparent;border:1px solid var(--ardosia);color:var(--prata-fraco);
  font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  border-radius:var(--raio-sm);padding:7px 10px;cursor:pointer;line-height:1.2;
}
.sair-topo:hover{color:var(--gelo);border-color:var(--azul-borda)}

/* ============================================================== estrutura */
.palco{max-width:var(--largura-palco);margin:0 auto;padding:16px 16px 40px}
h2.tit{font-size:var(--fs-titulo);font-weight:700;color:var(--gelo);margin:0 0 3px;letter-spacing:-.005em}
p.sub{margin:0 0 14px;font-size:var(--fs-sub);color:var(--prata-fraco);line-height:1.45}
.rodape{max-width:var(--largura-palco);margin:0 auto;padding:22px 16px 34px;border-top:1px solid var(--ardosia);font-size:.78rem;color:var(--prata-fraco);line-height:1.6}
.rodape b{color:var(--prata)}

/* faixa de rede (o texto exato vem de quem liga: "sem conexão, não gravou" / "reconectando") */
.faixa-rede{
  position:sticky;top:0;z-index:45;background:var(--alerta);color:var(--onix);
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:8px 12px;
}

/* ============================================================== campo (portado de .campo) */
.campo{display:block;min-width:0}
.campo .r{display:block;font-size:9px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--prata-fraco);margin-bottom:5px}
.campo input,.campo select{
  width:100%;font-family:var(--fonte);font-size:.88rem;color:var(--gelo);background:var(--onix);
  border:1px solid var(--ardosia);border-radius:var(--raio-sm);padding:9px 11px;
}
.campo input:focus,.campo select:focus{outline:0;border-color:var(--azul)}

/* ============================================================ botão de ação (portado de .bt) */
.bt{
  appearance:none;border:0;border-radius:var(--raio-bt);min-height:var(--alvo-acao);font-size:var(--fs-botao);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;line-height:1.2;transition:filter .15s,transform .08s;
  width:100%;padding:0 16px;
}
.bt:active{transform:scale(.985)}
.bt.iniciar{background:var(--azul);color:var(--gelo)}
.bt.iniciar:hover{filter:brightness(1.12)}
.bt.pausar{background:transparent;border:2px solid var(--prata-fraco);color:var(--gelo)}
.bt.pausar:hover{border-color:var(--gelo)}
.bt.concluir{background:var(--gelo);color:var(--onix)}
.bt.concluir:hover{filter:brightness(1.05)}
.bt:disabled{background:var(--ardosia);color:var(--prata-fraco);cursor:default;filter:none;transform:none}

/* =================================================================== Entrar
   Mesma linguagem do "acesso do técnico" do protótipo (.ac-top/.ac-corpo):
   faixa grafite com filete azul, corpo no ônix, alvo de toque grande. */
body.modo-entrar .palco{padding:0;max-width:none}
.entrar{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px}
.entrar-caixa{
  width:100%;max-width:392px;background:var(--grafite);border:1px solid var(--ardosia);
  border-radius:var(--raio-card);overflow:hidden;
}
.entrar-top{background:var(--grafite);border-bottom:var(--filete);padding:26px 16px 16px;text-align:center}
.entrar-lf{display:block;height:34px;width:auto;margin:0 auto 12px;max-width:100%}
.entrar-tit{margin:0;font-size:1.05rem;font-weight:700;color:var(--gelo);line-height:1.25;letter-spacing:-.005em}
.entrar-corpo{background:var(--onix);padding:20px 16px 22px;display:grid;gap:var(--esp-5)}
/* 16px no campo: menos que isso o iPhone dá zoom ao focar. Altura de toque 52px. */
.entrar .campo input{font-size:16px;min-height:52px;padding:12px 13px;border-radius:var(--raio-bt)}
.entrar .campo .r{font-size:10px}
.entrar-erro{
  margin:0;font-size:.84rem;line-height:1.45;color:var(--prata);
  background:var(--alerta-fraco);border:1px solid var(--alerta-borda);border-left:3px solid var(--alerta);
  border-radius:0 var(--raio-md) var(--raio-md) 0;padding:10px 12px;
}
.entrar-erro b{color:var(--alerta)}
.entrar-rodape{display:flex;align-items:center;gap:8px;margin-top:22px;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--prata-fraco)}
.entrar-rodape .avva{display:block;width:78px;height:auto}

/* ================================================================== mobile */
@media (max-width:560px){
  .topo-in{flex-wrap:wrap;gap:8px;padding:9px 12px}
  .marca{order:1;flex:1 1 auto}
  .marca .lf{height:22px}
  .topo-dir{order:2}
  .abas{order:3;width:100%}
  .aba{padding:10px 8px}
  .abas{gap:2px}
  .palco{padding:12px 12px 32px}
  .entrar{justify-content:flex-start;padding-top:max(24px,env(safe-area-inset-top))}
}