/* PeçaPix — encaixe da marca nas telas existentes.
   Carregar depois de pecapix-tokens.css e pecapix-tema-opt-in.css.
   Só vale com <body class="pecapix-ui">. Os arquivos do kit ficam intactos.
   Não redefine estados de números (.disponivel, .reservado, .pago), .erro,
   menu (.menu-links.aberto) nem nada usado pelo JavaScript. */

/* ---------- cabeçalho escuro (painel, admin, tutorial) ---------- */
.pecapix-ui header.topo {
    flex-wrap: wrap; /* em tela estreita, os links descem em vez de espremer a logo */
    gap: 8px 16px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.pecapix-ui header.topo .marca {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 16px;
    min-width: 0;
}

/* Cabeçalho com o menu ☰ (painel): o botão fica sempre no canto direito,
   na mesma linha da logo; quem quebra linha é o nome da empresa. */
.pecapix-ui header.topo:has(> .botao-menu-mobile) {
    flex-wrap: nowrap;
}

.pecapix-ui header.topo:has(> .botao-menu-mobile) .marca {
    flex: 1 1 auto;
}

.pecapix-ui header.topo .botao-menu-mobile {
    flex: none;
    margin-left: auto;
}

/* Nome da empresa logada (ou "Administração") ao lado da logo. */
.pecapix-ui header.topo .pp-marca-rotulo {
    font-size: 15px;
    font-weight: 600;
    color: var(--pp-branco);
    overflow-wrap: anywhere;
}

/* ---------- telas de entrada (login, recuperação, cadastro) ---------- */
.pecapix-ui .tela-login {
    margin-top: 64px;
}

.pecapix-ui .tela-login .marca {
    margin-bottom: 24px;
}

.pecapix-ui .tela-login .marca .pp-logo-login {
    margin-bottom: 0;
}

.pecapix-ui .tela-login .pp-marca-rotulo {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pp-texto-secundario);
}

/* ---------- Termos de Uso ---------- */
.pecapix-ui .pp-logo-termos {
    width: min(100%, 300px);
    margin: 0 0 20px;
}

/* ---------- página inicial (cabeçalho claro e rodapé) ---------- */
.pecapix-ui header.topo .pp-logo-clara {
    width: min(300px, 60vw);
}

.pecapix-ui footer .pp-emblema-rodape {
    width: 56px;
    margin: 0 auto;
}

/* ---------- campos que passavam da largura da tela no celular ---------- */
.pecapix-ui .campo select,
.pecapix-ui .campo textarea {
    max-width: 100%;
}