/*
 * Academia PBX — o visual da loja por cima do Frappe Learning.
 *
 * Carregada na academia (/lms) e nas páginas web pelo `visual.injetar_tema`
 * (after_request), e no desk pelo `app_include_css` do hooks.py.
 *
 * Cores e letras de www.pedrobritoxavier.pt (variáveis --pbx-* do tema da loja):
 *   preto #151515 · dourado #C9A227 · dourado ao passar #B8931F · dourado escuro #A6841E
 *   dourado sobre preto #E3C25C · creme #F7F5EF · texto suave #5A6472 · linha #DFE3E8
 *   Playfair Display (500) nos títulos, Inter no texto.
 *
 * ⚠️ O LMS pinta-se com as variáveis do frappe-ui (--surface-*, --ink-*, --outline-*).
 * Mudá-las aqui muda a cor em todo o lado sem depender das classes do build. Só no modo
 * claro: o escuro fica o do Frappe.
 *
 * ⚠️ O dourado não leva texto branco: o contraste fica em ~2,3:1. A loja escreve a
 * preto sobre o dourado, e aqui também — por isso o botão principal é pintado pela
 * classe, e não pelas variáveis --surface-gray-10/9/8, que o frappe-ui usa com
 * `text-ink-base` (branco) e que também pintam avatares, pontos e tooltips.
 */

:root {
	--pbx-preto: #151515;
	--pbx-dourado: #c9a227;
	--pbx-dourado-hover: #b8931f;
	--pbx-dourado-escuro: #a6841e;
	--pbx-dourado-claro: #e3c25c;
	--pbx-dourado-tenue: rgba(201, 162, 39, 0.16);
	--pbx-creme: #f7f5ef;
	--pbx-texto-suave: #5a6472;
	--pbx-linha: #dfe3e8;
	--pbx-titulos: 'Playfair Display', Georgia, serif;
	--pbx-texto: Inter, InterVar, system-ui, sans-serif;
}

/* ── Paleta (modo claro) ──────────────────────────────────────────────────────── */
:root:not([data-theme='dark']) {
	/* Texto: o preto da loja e os cinzentos dela */
	--ink-gray-9: #151515;
	--ink-gray-8: #262829;
	--ink-gray-7: #3d434b;
	--ink-gray-6: #5a6472;
	--ink-gray-5: #7a838e;
	--ink-gray-4: #9ca3ab;

	/* Superfícies com o creme da loja, em vez do cinzento frio do Frappe */
	--surface-gray-1: #faf9f5;
	--surface-gray-2: #f3f0e6;
	--surface-gray-3: #ebe6d6;
	--surface-gray-4: #ded7c2;
	--surface-sidebar: #f7f5ef;

	/* Contornos: a linha da loja */
	--outline-gray-1: #ebedf0;
	--outline-gray-2: #dfe3e8;
	--outline-gray-3: #cdd2d9;

	/* Progresso e «concluído»: o dourado em vez do verde */
	--surface-green-3: #c9a227;

	/* Os avisos azuis do LMS (instruções do quiz, notas) em dourado tênue */
	--surface-blue-1: #fbf7ea;
	--surface-blue-2: #f6edcf;
	--ink-blue-6: #8a6e17;
	--ink-blue-7: #6f5812;
	--ink-blue-link: #8a6e17;
}

/* ── Letras ───────────────────────────────────────────────────────────────────── */
html,
body,
button,
input,
textarea,
select {
	font-family: var(--pbx-texto);
}

h1,
h2,
h3,
.ce-header,
.text-4xl-semibold,
.text-3xl-semibold,
.text-2xl-semibold {
	font-family: var(--pbx-titulos);
	font-weight: 500 !important;
	letter-spacing: -0.01em;
	color: var(--ink-gray-9);
}

/* Títulos dentro das aulas */
.ce-header {
	margin-top: 1.6em;
}
h2.ce-header {
	font-size: 1.6rem;
}
h3.ce-header {
	font-size: 1.3rem;
}

/* ── Barra lateral ────────────────────────────────────────────────────────────── */
/* O item activo leva a linha dourada da loja, à esquerda.
 * ⚠️ No lms 2.62 o activo é um `button` com `bg-surface-elevation-3 shadow-sm`; a
 * `.router-link-active.bg-surface-gray-2` da Verbal Point já não existe. */
button.h-7.bg-surface-elevation-3.shadow-sm {
	box-shadow: inset 3px 0 0 var(--pbx-dourado);
}

/* ── Capa dos cursos sem imagem ───────────────────────────────────────────────── */
/* O LMS pinta-a com um gradiente inline `black → var(--<cor>-400)` (o `card_gradient`
 * do curso, vermelho por omissão). Apanha-se pelo atributo: a capa com imagem leva
 * `url(...)` e não é tocada. */
[style*='linear-gradient(to top right, black'] {
	background-image: linear-gradient(to top right, #151515 35%, #c9a227) !important;
}

/* ── Botão principal: dourado, texto a preto, cantos quase rectos — como na loja ── */
button.bg-surface-gray-10,
a.bg-surface-gray-10 {
	background-color: var(--pbx-dourado) !important;
	color: var(--pbx-preto) !important;
	border-radius: 2px !important;
	font-weight: 600;
	letter-spacing: 0.01em;
}
button.bg-surface-gray-10:hover,
a.bg-surface-gray-10:hover {
	background-color: var(--pbx-dourado-hover) !important;
}
button.bg-surface-gray-10:active,
a.bg-surface-gray-10:active {
	background-color: var(--pbx-dourado-escuro) !important;
}
button.bg-surface-gray-10 svg,
a.bg-surface-gray-10 svg {
	color: var(--pbx-preto);
}

/* ── Conteúdo das aulas (Editor.js) ───────────────────────────────────────────── */
.ce-paragraph,
.cdx-list__item,
.ce-block {
	line-height: 1.7;
}
.ce-paragraph a,
.cdx-list__item a {
	color: #8a6e17;
	text-decoration-color: var(--pbx-dourado);
}

.tc-table {
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid var(--pbx-linha) !important;
}
.tc-row:first-child,
.tc-table--heading .tc-row:first-child {
	background: var(--pbx-creme);
	font-weight: 600;
	color: var(--pbx-preto);
}

video,
audio {
	accent-color: var(--pbx-dourado);
}

/* O leitor de vídeo (Plyr): barra e botão de play a dourado */
.plyr {
	--plyr-color-main: var(--pbx-dourado);
}

/* ── Página de entrada (/login) e páginas web do Frappe ───────────────────────── */
.page-card-head h4,
.for-login .page-card-head h4 {
	font-family: var(--pbx-titulos);
	font-weight: 500;
	color: var(--pbx-preto);
}
.btn-primary,
.btn-primary:focus {
	background-color: var(--pbx-dourado) !important;
	border-color: var(--pbx-dourado) !important;
	color: var(--pbx-preto) !important;
	border-radius: 2px;
}
.btn-primary:hover {
	background-color: var(--pbx-dourado-hover) !important;
	border-color: var(--pbx-dourado-hover) !important;
	color: var(--pbx-preto) !important;
}
body[data-path='login'],
body[data-path='login'] .page-content-wrapper,
body[data-path='update-password'],
body[data-path='update-password'] .page-content-wrapper {
	background: var(--pbx-creme) !important;
}
body[data-path='login'] .page-card-head h4,
body[data-path='update-password'] .page-card-head h4 {
	font-size: 1.6rem;
}
/* O «Continuar» é `.btn-default.btn-login`, não `.btn-primary`: pinta-se à parte. */
body[data-path='login'] .btn-login,
body[data-path='login'] .btn-primary,
body[data-path='update-password'] .btn-primary {
	background-color: var(--pbx-dourado) !important;
	border-color: var(--pbx-dourado) !important;
	color: var(--pbx-preto) !important;
	border-radius: 2px !important;
	font-weight: 600;
	height: 38px;
}
body[data-path='login'] .btn-login:hover,
body[data-path='update-password'] .btn-primary:hover {
	background-color: var(--pbx-dourado-hover) !important;
	border-color: var(--pbx-dourado-hover) !important;
}
body[data-path='login'] .btn-default:not(.btn-login) {
	border-radius: 2px !important;
}
/* O cartão da entrada com a linha dourada por cima, como as faixas da loja */
body[data-path='login'] div:has(> .page-card-head),
body[data-path='login'] div:has(> form.form-signin):not(:has(div > form.form-signin)) {
	border-top: 3px solid var(--pbx-dourado);
	border-radius: 4px;
}