/*
 * O portal com a paleta e a fonte do Pontex, para os dois combinarem (pedido
 * do dono, 05/11/2026). Nenhuma cor nasce aqui: todas vêm das variáveis de
 * static/pontex/css/pontex-tema.css, carregado antes deste arquivo, e é lá que
 * se muda a paleta dos dois de uma vez. A fonte Montserrat também vem de lá.
 *
 * Os temas que o administrador escolhe (data-theme no <html>) continuam
 * valendo: tudo o que é superfície fica atrás de html:not([data-theme]).
 *
 * Mesma técnica dos temas do tailwind.input.css: a troca é por cima dos
 * utilitários compilados, nunca no tailwind.config, porque redefinir a paleta
 * lá mudaria o claro e o escuro de uma vez.
 */

/* A marca. Temas com marca própria têm especificidade maior e continuam. */
:root { --brand: var(--px-laranja-texto); }

/* A Montserrat é larga: o tracking negativo da Inter a deixaria apertada. */
h1, h2 { letter-spacing: -0.01em; }

/* A Montserrat é mais larga que a Inter: texto longo sem espaço (e-mail) não
   pode vazar do cartão, nem o nome ao lado pode achatar o avatar. */
main { overflow-wrap: break-word; }
main .grid > * { min-width: 0; }
.rounded-full.btn-brand { flex-shrink: 0; }

/* ---------- botões da marca: laranja com a tinta escura, como no Pontex ---------- */
html:not([data-theme]) :is(.btn-brand, .chip-filtro[aria-pressed="true"]),
html:not([data-theme]) .chip-filtro[aria-pressed="true"]:hover {
    background: var(--px-gradiente);
    color: var(--px-tinta);
}
html:not([data-theme]) .btn-brand { font-weight: 600; }

/* ---------- textos: os neutros do Pontex, nos dois temas ---------- */
html:not([data-theme]) .text-slate-400 { color: var(--px-texto-apagado); }
html:not([data-theme]) .text-slate-500 { color: var(--px-texto-suave); }
html:not([data-theme]) .text-slate-600 { color: var(--px-texto); }
html:not([data-theme]) :is(.text-slate-700, .text-slate-800) { color: var(--px-texto-forte); }
html:not([data-theme]) .text-slate-900 { color: var(--px-titulo); }
/* O texto sem cor própria é o texto corrido do ponto, mais suave que o forte. */
html:not([data-theme]) body.text-slate-800,
html.dark:not([data-theme]) body.dark\:text-slate-100 { color: var(--px-texto); }

/* ---------- tema claro: os neutros do Pontex ---------- */
html:not(.dark):not([data-theme]) body.bg-slate-50 { background-color: var(--px-fundo); }
html:not(.dark):not([data-theme]) .bg-slate-50 { background-color: var(--px-fundo-suave); }
html:not(.dark):not([data-theme]) .bg-slate-100 { background-color: var(--px-chip); }
html:not(.dark):not([data-theme]) :is(.hover\:bg-slate-50, .hover\:bg-slate-100):hover { background-color: var(--px-fundo-suave); }
html:not(.dark):not([data-theme]) :is(.border-slate-100, .border-slate-200) { border-color: var(--px-borda); }
html:not(.dark):not([data-theme]) .border-slate-300 { border-color: var(--px-borda-campo); }
html:not(.dark):not([data-theme]) :is(.divide-slate-100, .divide-slate-200) > :not([hidden]) ~ :not([hidden]) { border-color: var(--px-borda); }

/* ---------- tema escuro: o escuro do Pontex no lugar do slate ---------- */
html.dark:not([data-theme]) .dark\:bg-slate-950 { background-color: var(--px-fundo); }
html.dark:not([data-theme]) .dark\:bg-slate-900 { background-color: var(--px-fundo-suave); }
html.dark:not([data-theme]) .dark\:bg-slate-900\/90 { background-color: var(--px-fundo-suave); }
html.dark:not([data-theme]) :is(.dark\:bg-slate-800, .dark\:bg-slate-800\/50, .dark\:bg-slate-800\/60) { background-color: var(--px-neutro-fundo); }
html.dark:not([data-theme]) :is(.dark\:hover\:bg-slate-800, .dark\:hover\:bg-slate-700):hover { background-color: var(--px-neutro-fundo); }
html.dark:not([data-theme]) :is(.dark\:border-slate-800, .dark\:divide-slate-800 > * + *) { border-color: var(--px-borda); }
html.dark:not([data-theme]) :is(.dark\:border-slate-700, .dark\:border-slate-600) { border-color: var(--px-borda-campo); }
html.dark:not([data-theme]) .dark\:text-slate-400 { color: var(--px-texto-suave); }
html.dark:not([data-theme]) .dark\:text-slate-300 { color: var(--px-texto); }
html.dark:not([data-theme]) :is(.dark\:text-slate-200, .dark\:text-slate-100) { color: var(--px-texto-forte); }

/* ---------- moldura escura: menu lateral e barra de cima, nos dois temas ----------
 * O seletor repete .portal-moldura para vencer os mapeamentos acima. Os painéis
 * que abrem da barra (.absolute.bg-white: busca, tema, sino, conta) seguem o
 * tema da página, e por isso ficam de fora das trocas de cor. */
html:not([data-theme]) .portal-moldura.portal-moldura {
    background-color: var(--px-moldura);
    border-color: var(--px-moldura-borda);
    color: var(--px-menu-texto);
    backdrop-filter: none;
}
html:not([data-theme]) .portal-moldura :is(.border-slate-200, .dark\:border-slate-800):not(.absolute.bg-white, .absolute.bg-white *) { border-color: var(--px-moldura-borda); }
html:not([data-theme]) .portal-moldura :is(.text-slate-400, .text-slate-500, .text-slate-600, .text-slate-900, .dark\:text-slate-300, .dark\:text-slate-400, .dark\:text-white):not(.absolute.bg-white *) { color: var(--px-menu-texto); }
html:not([data-theme]) .portal-moldura .text-slate-400:not(.absolute.bg-white *) { color: var(--px-menu-icone); }
html:not([data-theme]) .portal-moldura :is(.hover\:bg-slate-100, .dark\:hover\:bg-slate-800):hover:not(.absolute.bg-white *) { background-color: var(--px-moldura-hover); }
html:not([data-theme]) .portal-moldura :is(.hover\:text-slate-700, .dark\:hover\:text-white):hover:not(.absolute.bg-white *) { color: #fff; }
html:not([data-theme]) .portal-moldura .nav-active {
    background: var(--px-menu-ativo-fundo);
    box-shadow: inset 3px 0 0 var(--px-laranja);
    color: var(--px-menu-ativo);
}
html:not([data-theme]) .portal-moldura input.bg-slate-100 { background-color: var(--px-moldura-hover); color: #fff; }
html:not([data-theme]) .portal-moldura input.bg-slate-100::placeholder { color: var(--px-menu-icone); }
html:not(.dark):not([data-theme]) .portal-moldura .absolute.bg-white { color: var(--px-texto-forte); }

/* ---------- login do portal: o painel no escuro da marca ---------- */
html:not([data-theme]) .portal-painel-marca.btn-brand { background: var(--px-moldura); color: #fff; font-weight: inherit; }
html:not([data-theme]) .portal-painel-marca .bg-white\/10 { background-color: var(--px-laranja); opacity: 0.16; }