/* =====================================================================
   TELA DE LOGIN DO PAINEL
   Fica num arquivo separado de propósito: painel.css é gerado a partir do
   painel canônico por build_plugin.py, e esta tela só existe na versão
   WordPress. Separando, nada aqui some numa regeração.

   Tudo abaixo depende das variáveis (--surface, --ink, --accent...) e dos
   componentes (.btn, .field, .brand-plate) definidos em painel.css, que
   também é carregado nesta tela. É isso que faz o login ter a mesma cara
   do painel sem repetir estilo.
===================================================================== */
/* O fundo da PÁGINA acompanha o tema, não só o bloco do login. Os tons
   aparecem em hexadecimal porque as variáveis (--page) vivem dentro de
   .pcti-app e o <body> está fora dela — são os mesmos dois tons do painel. */
body.pcti-login-ativa{background:#eef1f7;}
:root[data-theme="dark"] body.pcti-login-ativa{background:#060910;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body.pcti-login-ativa{background:#060910;}
}
/* A página não rola atrás da tela de login — quem rola, se precisar, é a
   própria tela. Sem isto sobrava um pedaço do tema para rolar embaixo. */
body.pcti-login-ativa{overflow:hidden;}

/* A tela de login COBRE a janela.
   Pintar o fundo do <body> não bastava: o tema do site costuma ter um
   container de conteúdo com fundo branco próprio, mais cabeçalho e rodapé,
   e era esse container que aparecia como uma faixa clara embaixo do login.
   Cobrindo a janela, o resultado não depende de como o tema monta a página.
   O topo desconta a barra do WordPress quando ela existe (usuário logado
   sem permissão), para não escondê-la. */
.pcti-app.pcti-login{
  position:fixed;
  top:var(--wp-admin--admin-bar--height, 0px);
  left:0; right:0; bottom:0;
  z-index:9990;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  display:flex; justify-content:center;
  padding:28px 16px;
  background:var(--page); color:var(--ink);
  font-family:var(--font-body);
}
.pcti-login .login-caixa{
  margin:auto;
  width:100%; max-width:380px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-pop);
  padding:26px 26px 22px;
  display:flex; flex-direction:column; gap:14px;
}
.pcti-login .brand-plate{margin-bottom:2px;}
.pcti-login h1{
  font-family:var(--font-head); font-size:21px; font-weight:600;
  margin:0; color:var(--ink); line-height:1.2;
}
.pcti-login .login-sub{margin:-10px 0 0; font-size:12.5px; color:var(--muted); line-height:1.45;}
.pcti-login form{display:flex; flex-direction:column; gap:13px;}
.pcti-login .login-lembrar{
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; color:var(--ink-2); cursor:pointer;
}
.pcti-login .login-lembrar input{width:auto; margin:0;}
.pcti-login .login-btn{justify-content:center; width:100%; padding:10px 14px; font-size:14px; text-decoration:none;}
.pcti-login .login-rodape{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  flex-wrap:wrap; font-size:12px;
  border-top:1px solid var(--line); padding-top:12px; margin-top:2px;
}
.pcti-login .login-rodape a{color:var(--accent); text-decoration:none;}
.pcti-login .login-rodape a:hover{text-decoration:underline;}
.pcti-login .login-rodape span{color:var(--muted);}

/* aviso de senha errada / conta sem permissão */
.pcti-login .login-aviso{
  display:flex; gap:8px; align-items:flex-start;
  font-size:12.5px; line-height:1.45;
  padding:10px 12px; border-radius:var(--radius-sm);
  background:var(--crit-soft); color:var(--critical);
  border:1px solid color-mix(in srgb, var(--critical) 32%, transparent);
}
.pcti-login .login-aviso svg{width:15px; height:15px; flex:none; margin-top:1px;}

/* ---- botão "Sair" no rodapé do menu do painel ---- */
.pcti-app .rail-foot .pcti-sair{
  display:flex; align-items:center; justify-content:center; gap:7px;
  text-decoration:none; width:100%;
}
.pcti-app .rail-foot .pcti-sair svg{width:14px; height:14px; flex:none;}
.pcti-app .rail-off .rail-foot .pcti-sair span{display:none;}
.pcti-app .rail-off .rail-foot .pcti-sair{padding:7px 0;}

@media (max-width: 860px){
  .pcti-app.pcti-login{padding:28px 12px;}
  .pcti-login .login-caixa{padding:20px 18px 18px;}
  /* no celular o menu é uma barra no topo e o rodapé fica escondido:
     o Sair precisa de um lugar próprio, junto do cabeçalho */
  .pcti-app .rail-foot{display:flex !important;}
  .pcti-app .rail-foot .status-chip{display:none;}
  .pcti-app .rail-foot{position:absolute; top:10px; right:12px; width:auto; margin:0;}
  .pcti-app .rail-foot .pcti-sair{width:auto; padding:5px 9px;}
}

/* no relatório impresso o botão de sair não faz sentido */
@media print{
  .pcti-app .rail-foot, .pcti-app .pcti-sair{display:none !important;}
}