/*
 * BRACCA Design System — tokens + componentes base.
 * Tudo escopado em .brc-app (ver docs/design-system.md, regra inegociável de encapsulamento).
 */

/*
 * Fontes de marca — par tipográfico do design (Figma "BRACCA"): Lora para
 * títulos (serif) e Inter para texto/UI. Self-hosted (sem dependência de
 * Google Fonts), arquivos variáveis. Carregam em toda superfície headless
 * porque este arquivo é sempre o primeiro CSS injetado (ver class-view.php).
 */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url( "fonts/inter-latin.woff2" ) format( "woff2" );
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url( "fonts/inter-latin-ext.woff2" ) format( "woff2" );
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Lora";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url( "fonts/lora-latin.woff2" ) format( "woff2" );
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Lora";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url( "fonts/lora-latin-ext.woff2" ) format( "woff2" );
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.brc-app {
	/* Cores oficiais (Figma "BRACCA" → seção PLATAFORM, variables) */
	--brc-green: #009444;
	--brc-yellow: #fcb030;
	--brc-blue: #00aeef;
	--brc-navy: #1d3260; /* Brand/Blue/100 */
	--brc-navy-700: #142241; /* Brand/Blue/Active */
	--brc-navy-900: #0d1830;

	/* Funcionais (neutros do Figma) */
	--brc-ink: #191919; /* Neutral/90 */
	--brc-black: #000000;
	--brc-muted: #4d4d4d; /* Neutral/70 */
	--brc-gray: #808080; /* Neutral/50 — placeholders/decoração (não usar p/ texto essencial) */
	--brc-line: #e6e6e6; /* Neutral/10 */
	--brc-surface: #f4f4f4; /* fundo de campos */
	--brc-subtle: #e8ebef; /* Surface/Subtle — fundo de página */
	--brc-bg: #ffffff;
	--brc-danger: #d64545; /* Functional/Error */
	--brc-success: #009444;
	--brc-warn: #8a5a00;

	/* Superfícies semânticas (alertas / pílulas) — tingidas do hue, não cinza */
	--brc-danger-bg: #fdecea;
	--brc-danger-line: #f5c6c0;
	--brc-success-bg: #e7f6ee;
	--brc-success-line: #bfe6cf;
	--brc-warn-bg: #fff6e5;
	--brc-warn-line: #f5dca0;

	/* Raio / sombra */
	--brc-radius: 20px;
	--brc-radius-sm: 10px;
	--brc-radius-xs: 8px;
	--brc-radius-pill: 100px;
	--brc-shadow-1: 0 1px 2px rgba( 20, 34, 65, 0.05 );
	--brc-shadow-2: 0 4px 16px rgba( 20, 34, 65, 0.08 );
	--brc-shadow-pop: 0 12px 28px rgba( 20, 34, 65, 0.12 );

	/* Tipografia — par do design: Lora (títulos) + Inter (texto/UI) */
	--brc-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--brc-font-title: "Lora", Georgia, "Times New Roman", serif;
	--brc-fs-1: 13px;
	--brc-fs-2: 15px;
	--brc-fs-3: 18px;
	--brc-fs-h: 26px;
	--brc-fs-display: clamp( 1.75rem, 1.35rem + 1.6vw, 2rem );

	/* Espaçamento (escala 4px) */
	--brc-sp-1: 4px;
	--brc-sp-2: 8px;
	--brc-sp-3: 12px;
	--brc-sp-4: 16px;
	--brc-sp-5: 24px;
	--brc-sp-6: 32px;
	--brc-sp-7: 48px;

	font-family: var( --brc-font );
	color: var( --brc-ink );
	font-size: var( --brc-fs-2 );
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/* Reset escopado */
.brc-app,
.brc-app *,
.brc-app *::before,
.brc-app *::after {
	box-sizing: border-box;
}
/* [hidden] sempre vence: classes com display próprio (.brc-field, etc.)
   sobrepõem o default do navegador e já causaram bugs de "oculto visível". */
.brc-app [hidden] {
	display: none !important;
}
.brc-app h1,
.brc-app h2,
.brc-app h3,
.brc-app p,
.brc-app label,
.brc-app figure {
	margin: 0;
}

/* Hierarquia tipográfica — títulos em Lora (serif do design) */
.brc-app .brc-display {
	font-family: var( --brc-font-title );
	font-size: var( --brc-fs-display );
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0;
	color: var( --brc-navy );
	text-wrap: balance;
}
.brc-app .brc-h {
	font-family: var( --brc-font-title );
	font-size: var( --brc-fs-h );
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0;
	color: var( --brc-navy );
	text-wrap: balance;
}
.brc-app .brc-sub {
	font-size: var( --brc-fs-3 );
	color: var( --brc-muted );
	line-height: 1.5;
	max-width: 60ch;
	text-wrap: pretty;
}

/* Foco visível — acessibilidade por teclado (nunca remover sem substituto) */
.brc-app :is( a, button, input, select, textarea, [tabindex] ):focus-visible {
	outline: 2px solid var( --brc-blue );
	outline-offset: 2px;
}

/* Tagline de marca — "Ethical · Empowering · Inclusive" (Manual da Marca:
   usar separada do logo, em caixa baixa). Separadores ecoam a tricolor. */
.brc-app .brc-tagline {
	display: inline-flex;
	align-items: center;
	gap: var( --brc-sp-2 );
	font-size: var( --brc-fs-1 );
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var( --brc-muted );
}
.brc-app .brc-tagline__sep {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var( --brc-blue );
	flex: none;
}
.brc-app .brc-tagline__sep:nth-of-type( 1 ) { background: var( --brc-green ); }
.brc-app .brc-tagline__sep:nth-of-type( 2 ) { background: var( --brc-yellow ); }

/* Botão — pílulas do design (primário preto, navy p/ compromisso, ghost outline) */
.brc-app .brc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --brc-sp-3 );
	font: 600 16px / 24px var( --brc-font );
	padding: 14px 24px;
	border: 1px solid transparent;
	border-radius: var( --brc-radius-pill );
	cursor: pointer;
	text-decoration: none;
	color: inherit; /* âncoras não podem cair no azul default do navegador */
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.brc-app .brc-btn--primary {
	background: var( --brc-black, #000000 );
	color: #ffffff;
}
.brc-app .brc-btn--primary:hover {
	background: var( --brc-ink );
}
.brc-app .brc-btn--navy {
	background: var( --brc-navy );
	color: #ffffff;
}
.brc-app .brc-btn--navy:hover {
	background: var( --brc-navy-700 );
}
.brc-app .brc-btn--ghost {
	background: var( --brc-bg );
	color: var( --brc-black, #000000 );
	border-color: var( --brc-black, #000000 );
}
.brc-app .brc-btn--ghost:hover {
	background: var( --brc-surface );
}
.brc-app .brc-btn--block {
	width: 100%;
}
.brc-app .brc-btn svg {
	flex: none;
}

/* Campo */
.brc-app .brc-field {
	display: block;
	margin-bottom: var( --brc-sp-4 );
}
.brc-app .brc-label {
	display: block;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	color: var( --brc-black, #000000 );
	margin-bottom: 8px;
	letter-spacing: 0;
}
.brc-app .brc-input {
	width: 100%;
	padding: 15px 18px;
	font: 500 14px / 18px var( --brc-font );
	color: var( --brc-ink );
	background: var( --brc-surface );
	border: 1px solid transparent;
	border-radius: var( --brc-radius-pill );
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.brc-app .brc-input::placeholder {
	color: var( --brc-gray, #808080 );
}
.brc-app .brc-input:focus {
	border-color: var( --brc-blue );
	box-shadow: 0 0 0 3px rgba( 0, 174, 239, 0.18 );
	background: #ffffff;
}
.brc-app textarea.brc-input {
	border-radius: var( --brc-radius );
	min-height: 120px;
	resize: vertical;
}

/* Checkbox / radio — círculo de 24px (vazio cinza; marcado preto + check branco) */
.brc-app .brc-check {
	display: inline-flex;
	align-items: center;
	gap: var( --brc-sp-3 );
	font-size: var( --brc-fs-2 );
	color: var( --brc-ink );
	cursor: pointer;
}
.brc-app .brc-check input {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	width: 24px;
	height: 24px;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: var( --brc-line );
	cursor: pointer;
	transition: background 0.15s;
	background-repeat: no-repeat;
	background-position: center;
}
.brc-app .brc-check input:checked {
	background-color: var( --brc-black, #000000 );
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E" );
}

/* ===== Avatar (foto de perfil) ===== */
.brc-app .brc-avatar {
	display: inline-block;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
	vertical-align: middle;
	background: var( --brc-surface );
}
.brc-app .brc-avatar--fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var( --brc-navy );
}
.brc-app .brc-avatar--fallback svg { width: 55%; height: 55%; }
.brc-app .brc-avatar--ring { box-shadow: 0 0 0 2px var( --brc-bg ), 0 0 0 3px var( --brc-line ); }

/* ===== Editor de crop da foto de perfil (avatar.js) ===== */
.brc-app .brc-crop__card { width: 520px; }
.brc-app .brc-crop__viewport {
	position: relative;
	width: min( 320px, 78vw );
	height: min( 320px, 78vw );
	margin: 4px auto 18px;
	border-radius: var( --brc-radius-sm, 10px );
	overflow: hidden;
	background: var( --brc-navy-900 );
	cursor: grab;
	touch-action: none; /* pan/pinça são do editor, não da página */
	user-select: none;
}
.brc-app .brc-crop__viewport:active { cursor: grabbing; }
.brc-app .brc-crop__viewport:focus-visible { outline: 2px solid var( --brc-blue ); outline-offset: 3px; }
.brc-app .brc-crop__img {
	position: absolute;
	top: 0;
	left: 0;
	max-width: none;
	will-change: transform;
	pointer-events: none;
}
/* Máscara: escurece o que fica FORA do círculo (o usuário vê o que será cortado). */
.brc-app .brc-crop__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 9999px rgba( 13, 24, 48, 0.55 ), inset 0 0 0 2px rgba( 255, 255, 255, 0.85 );
	pointer-events: none;
}
.brc-app .brc-crop__zoom {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 320px;
	margin: 0 auto 20px;
	color: var( --brc-muted );
}
.brc-app .brc-crop__range {
	flex: 1;
	appearance: none;
	-webkit-appearance: none;
	height: 6px;
	border-radius: 999px;
	background: var( --brc-line );
	outline-offset: 4px;
}
.brc-app .brc-crop__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var( --brc-navy );
	border: 2px solid #ffffff;
	box-shadow: var( --brc-shadow-1 );
	cursor: pointer;
}
.brc-app .brc-crop__range::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var( --brc-navy );
	border: 2px solid #ffffff;
	cursor: pointer;
}
.brc-app .brc-crop__range:disabled::-webkit-slider-thumb { background: var( --brc-gray ); }

/* Bloco do avatar no My Profile */
.brc-app .brc-avatar-block {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	margin: 0 0 8px;
}
.brc-app .brc-avatar-block__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.brc-app .brc-avatar-block__hint { flex-basis: 100%; margin: 0; font-size: 13px; color: var( --brc-gray ); }

/* Logo como link para a home — sem decoração de link */
.brc-app .brc-brand-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: inherit;
}

/* ===== Diálogo de confirmação (dialog.js) — substitui confirm/prompt nativos ===== */
.brc-app .brc-dialog {
	position: fixed;
	inset: 0;
	z-index: 12000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba( 13, 24, 48, 0.45 ); /* navy-900 com véu */
	opacity: 0;
	transition: opacity 0.18s ease;
}
.brc-app .brc-dialog.is-open { opacity: 1; }
.brc-app .brc-dialog__card {
	background: var( --brc-bg );
	border-radius: var( --brc-radius );
	box-shadow: var( --brc-shadow-pop );
	width: 460px;
	max-width: 100%;
	overflow: hidden;
	transform: translateY( 10px ) scale( 0.97 );
	opacity: 0;
	transition: transform 0.18s ease, opacity 0.18s ease;
}
.brc-app .brc-dialog.is-open .brc-dialog__card { transform: none; opacity: 1; }
.brc-app .brc-dialog__bar {
	display: block;
	height: 6px;
	background: linear-gradient( 90deg, var( --brc-green ) 0 33.333%, var( --brc-yellow ) 0 66.666%, var( --brc-blue ) 0 100% );
}
.brc-app .brc-dialog__bar--danger { background: var( --brc-danger ); }
.brc-app .brc-dialog__body { padding: 26px 28px 28px; }
.brc-app .brc-dialog__title {
	margin: 0 0 10px;
	font-family: var( --brc-font-title );
	font-size: 22px;
	font-weight: 600;
	color: var( --brc-navy );
}
.brc-app .brc-dialog__msg {
	margin: 0 0 20px;
	color: var( --brc-muted );
	font-size: 15px;
	line-height: 1.6;
	white-space: pre-line;
}
.brc-app .brc-dialog__wordlab {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var( --brc-ink );
	margin: 0 0 8px;
}
.brc-app .brc-dialog__input {
	width: 100%;
	border: 1px solid transparent;
	background: var( --brc-surface );
	border-radius: var( --brc-radius-pill );
	padding: 12px 18px;
	font: 600 15px / 22px var( --brc-font );
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 20px;
}
.brc-app .brc-dialog__input:focus { outline: 2px solid var( --brc-blue ); outline-offset: -1px; }
.brc-app .brc-dialog__actions {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	flex-wrap: wrap;
}
.brc-app .brc-dialog__actions .brc-btn { padding: 11px 22px; font-size: 15px; }
.brc-app .brc-btn--danger {
	background: var( --brc-danger );
	color: #ffffff;
}
.brc-app .brc-btn--danger:hover { filter: brightness( 0.92 ); }
.brc-app .brc-btn:disabled { opacity: 0.45; cursor: not-allowed; }
@media ( prefers-reduced-motion: reduce ) {
	.brc-app .brc-dialog,
	.brc-app .brc-dialog__card { transition: none; }
}

/* Link de texto — DS oficial ("Text Link"): semibold, sublinha no hover.
   No site o link é preto; na plataforma o papel de "Primary" é do navy.
   Azul/verde/amarelo são ACENTO (barra tricolor, foco, realces) — nunca link. */
.brc-app .brc-link {
	color: var( --brc-navy );
	text-decoration: none;
	font-weight: 600;
	font-size: var( --brc-fs-1 );
}
.brc-app .brc-link:hover {
	text-decoration: underline;
}

/* Alerta */
.brc-app .brc-alert {
	padding: 12px 14px;
	border: 1px solid;
	border-radius: var( --brc-radius-xs );
	font-size: var( --brc-fs-1 );
	margin-bottom: var( --brc-sp-4 );
}
.brc-app .brc-alert--error {
	background: var( --brc-danger-bg );
	border-color: var( --brc-danger-line );
	color: var( --brc-danger );
}
.brc-app .brc-alert--success {
	background: var( --brc-success-bg );
	border-color: var( --brc-success-line );
	color: var( --brc-success );
}
.brc-app .brc-alert--warn {
	background: var( --brc-warn-bg );
	border-color: var( --brc-warn-line );
	color: var( --brc-warn );
}

/* Marca: logotipo oficial (texto embutido na imagem) */
.brc-brand { display: inline-flex; align-items: center; line-height: 1; }
.brc-brand__img { height: 34px; width: auto; display: block; }
.brc-brand-full { height: auto; max-width: 320px; width: 100%; display: block; }

/* Seletor de idioma (EN | PT) — pílula branca com ícone (design: "lang pill") */
.brc-lang {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 16px;
	background: var( --brc-bg, #ffffff );
	border-radius: var( --brc-radius-pill, 100px );
	font-size: 14px;
	font-weight: 500;
	color: var( --brc-black, #000000 );
	box-shadow: var( --brc-shadow-1 );
}
.brc-lang::before {
	content: "";
	width: 16px;
	height: 16px;
	margin-right: 4px;
	flex: none;
	background: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 6 6'/%3E%3Cpath d='m4 14 6-6 2-3'/%3E%3Cpath d='M2 5h12'/%3E%3Cpath d='M7 2h1'/%3E%3Cpath d='m22 22-5-10-5 10'/%3E%3Cpath d='M14 18h6'/%3E%3C/svg%3E" ) center / contain no-repeat;
}
.brc-lang__opt {
	padding: 2px 4px;
	border-radius: var( --brc-radius-xs, 8px );
	color: inherit;
	opacity: .45;
	text-decoration: none;
}
.brc-lang__opt.is-active { opacity: 1; font-weight: 600; }
.brc-lang__opt:hover { opacity: 1; }

/* Card — branco, radius 20, sem borda (contraste de superfície é a elevação) */
.brc-app .brc-card {
	background: var( --brc-bg );
	border: 0;
	border-radius: var( --brc-radius );
	box-shadow: var( --brc-shadow-1 );
}

/* Variante com a barra tricolor de 10px no topo (assinatura de marca).
   O padding do card deve prever os 10px da barra (absoluta p/ encostar nas bordas). */
.brc-app .brc-card--bar {
	position: relative;
	overflow: hidden;
}
.brc-app .brc-card--bar::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 10px;
	background: linear-gradient(
		90deg,
		var( --brc-green ) 0 33.333%,
		var( --brc-yellow ) 33.333% 66.666%,
		var( --brc-blue ) 66.666% 100%
	);
}
/* Card que é link: nunca sublinhar o conteúdo */
.brc-app a.brc-card { text-decoration: none; color: inherit; }
.brc-app a.brc-card :is( h1, h2, h3, h4, p, span ) { text-decoration: none; }

/* ===== Feedback de navegação (loading global) — ver assets/ui-loading.js ===== */

/* Barra de progresso fina no topo: feedback imediato de qualquer navegação. */
.brc-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 100%;
	transform: scaleX( 0 );
	transform-origin: 0 0;
	z-index: 100000;
	background: linear-gradient( 90deg, #009444, #00aeef, #fcb030 );
	box-shadow: 0 0 10px rgba( 0, 174, 239, 0.7 ), 0 0 4px rgba( 0, 174, 239, 0.5 );
	opacity: 0;
	pointer-events: none;
	transition: transform 0.18s ease, opacity 0.25s ease;
}
.brc-progress.is-active { opacity: 1; }
body.brc-navigating { cursor: progress; }

/* Spinner no controle acionado. */
@keyframes brc-spin { to { transform: rotate( 360deg ); } }
.is-loading { pointer-events: none; }

/* Botões: troca o rótulo por um spinner (sem alterar a largura). */
.brc-btn.is-loading { position: relative; color: transparent !important; }
.brc-btn.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border-radius: 50%;
	border: 2px solid rgba( 20, 34, 65, 0.45 );
	border-top-color: transparent;
	animation: brc-spin 0.6s linear infinite;
}
.brc-btn--primary.is-loading::after {
	border-color: rgba( 255, 255, 255, 0.75 );
	border-top-color: transparent;
}

/* Cards (links grandes): esmaece + spinner no canto. */
a.is-loading:not( .brc-btn ) { opacity: 0.7; }
.brc-card.is-loading { position: relative; }
.brc-card.is-loading::after {
	content: "";
	position: absolute;
	top: 10px;
	right: 10px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid rgba( 20, 34, 65, 0.5 );
	border-top-color: transparent;
	animation: brc-spin 0.6s linear infinite;
}

@media ( prefers-reduced-motion: reduce ) {
	.brc-progress { transition: opacity 0.25s ease; }
	.brc-btn.is-loading::after, .brc-card.is-loading::after { animation-duration: 1.2s; }
}