/* Carregar depois do CSS existente e de pecapix-tokens.css.
   Ativar somente na página revisada: <body class="pecapix-ui">.
   Painel e admin compartilham o estilo original: validar ambos. */
body.pecapix-ui {
  --papel: var(--pp-fundo);
  --tinta: var(--pp-marinho);
  --verde: var(--pp-acao);
  --verde-escuro: var(--pp-marinho-fundo);
  --linha: var(--pp-linha);
  --branco: var(--pp-branco);
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--pp-fonte);
}
.pecapix-ui .pp-logo { display:block; max-width:100%; height:auto; }
.pecapix-ui .pp-logo-clara { width:min(100%, 420px); }
.pecapix-ui .pp-logo-escura { width:min(100%, 310px); }
.pecapix-ui .pp-logo-login { width:100%; max-width:300px; margin:0 auto 24px; }
.pecapix-ui .pp-icone { width:auto; height:40px; vertical-align:middle; }
.pecapix-ui .numero { font-family:var(--pp-fonte-numeros); font-variant-numeric:tabular-nums; }
.pecapix-ui .subtitulo,
.pecapix-ui .vazio,
.pecapix-ui .cartao-campanha .preco-cartao,
.pecapix-ui .cartao-campanha .mini .rotulo-mini,
.pecapix-ui .cartao > details summary { color:var(--pp-texto-secundario); }
.pecapix-ui th { color:var(--pp-texto-secundario); background:var(--pp-fundo); }
.pecapix-ui .botao:hover { background:var(--pp-acao-hover); }
.pecapix-ui :is(a,button,input,select,textarea,summary):focus-visible {
  outline:3px solid var(--pp-azul); outline-offset:3px;
}
.pecapix-ui header.topo :is(a,button):focus-visible {
  outline-color:var(--pp-branco);
}
.pecapix-ui header.topo .pp-logo-escura { max-width:min(310px,65vw); }
/* Não redefinir .pago, .reservado, .disponivel, .erro ou variáveis de estado.
   Não alterar regras de menu .aberto, grade, dados, formulários ou JavaScript. */