/* =================================================================================================
   Som & Debate — Privacidade Foobá e Acessibilidade Foobá com a cara da marca.

   Conceito (do símbolo, um balão de fala com corpo de fita): os botões de acessibilidade e privacidade
   viram uma aba escura presa ao topo do player da rádio, à direita, como a lingueta de uma fita; o aviso
   de privacidade é um balão de fala que sai dessa aba, com as faixas K7 no topo. Nada de cartão
   flutuante (Foobá, Replay, PortalM1) nem de faixa presa ao pé com aba vertical (Caririensi).
   Plano, sem sombra (README do design system): a separação vem da cor de papel.

   O CSS dos plugins entra no rodapé, depois deste: daí o "html body" na frente. Todas as cores passam
   pelos tokens, então o tema escuro e os altos contrastes (contraste.css) valem aqui também.
   ================================================================================================= */

html body :is(.fp, .fp-modal, .fp-fab, .fp-aviso, .fooba-embed, .prv-menu) {
	--fp-cor: var(--laranja-texto);
	--fp-fundo: var(--papel-claro);
	--fp-texto: var(--tinta);
	--fp-suave: var(--tinta-suave);
	--fp-borda: var(--linha);
	font-family: var(--font-sans);
}
html body :is(.fa-widget, .fa-inline) {
	--fa-bg: var(--papel-claro);
	--fa-fg: var(--tinta);
	--fa-borda: var(--linha-forte);
	--fa-destaque: var(--laranja);
	--fa-destaque-fg: var(--on-laranja);
	font-family: var(--font-sans);
}

/* Rótulos e realces sobre a tinta: mostarda no claro. No escuro a tinta vira papel claro (como o player),
   e mostarda sobre papel não tem contraste: lá o rótulo é o próprio papel. */
html { --sd-rotulo: var(--mostarda); }
:root[data-theme="dark"], html[data-fa-tema="escuro"] { --sd-rotulo: var(--papel); }

/* Onde a aba encosta: no topo do player (desktop: 68px + as faixas K7 de 9px; celular: acima do player e das abas). */
html {
	--sd-aba-base: calc(77px + env(safe-area-inset-bottom, 0px));
	--sd-aba-altura: 46px;
	--sd-aba-direita: max(16px, calc((100vw - 1312px) / 2 + 32px));
}
@media (max-width: 760px) {
	html { --sd-aba-base: calc(124px + env(safe-area-inset-bottom, 0px)); --sd-aba-direita: 12px; }
}

/* ---------- Aba no topo do player (acessibilidade + privacidade) ---------- */
html body .fa-widget.fp-pilula,
html.fp-banner-aberto body .fa-widget.fp-pilula,
html body .fp-fab-grupo,
html.fp-banner-aberto body .fp-fab-grupo {
	left: auto; right: var(--sd-aba-direita); bottom: var(--sd-aba-base); transition: none;
}
html body .fa-widget.fp-pilula {
	height: var(--sd-aba-altura); padding: 0 4px; align-items: center; gap: 2px;
	background: var(--tinta); color: var(--papel);
	border: 0; border-radius: var(--raio-l) var(--raio-l) 0 0; box-shadow: none;
}
html body .fa-widget.fp-pilula :is(.fa-toggle, .fp-pilula__priv) {
	width: 44px; height: 38px; border: 0; border-radius: var(--raio-m); background: transparent; color: inherit; box-shadow: none;
}
html body .fa-widget.fp-pilula :is(.fa-toggle, .fp-pilula__priv):hover { background: color-mix(in srgb, var(--papel) 12%, transparent); color: var(--sd-rotulo); }
html body .fa-widget.fp-pilula :is(.fa-toggle, .fp-pilula__priv):focus-visible { outline: 2px solid var(--sd-rotulo); outline-offset: -2px; box-shadow: none; }
html body .fa-widget.fp-pilula :is(.fa-toggle, .fp-pilula__priv) svg { width: 22px; height: 22px; }
html body .fp-pilula__sep { width: 1px; height: 20px; background: currentColor; opacity: .3; }
html body :is(.fp-pilula__x, .fp-fab__x) {
	top: -8px; right: -8px; width: 22px; height: 22px; border: 2px solid var(--tinta); border-radius: 50%;
	background: var(--papel-claro); color: var(--tinta); font: 700 14px/1 var(--font-sans); box-shadow: none; opacity: 1;
}
html body :is(.fp-pilula__x, .fp-fab__x):hover { background: var(--laranja); color: var(--on-laranja); border-color: var(--laranja); }
/* Sem o plugin Acessibilidade, o botão avulso de privacidade ocupa o mesmo lugar, com o mesmo desenho. */
html body .fp-fab { width: 52px; height: var(--sd-aba-altura); border: 0; border-radius: var(--raio-l) var(--raio-l) 0 0; background: var(--tinta); color: var(--papel); box-shadow: none; }
html body .fp-fab:hover { background: var(--tinta); color: var(--sd-rotulo); }

/* Painel da acessibilidade: abre acima da aba, alinhado à direita, com as faixas K7 no topo. */
html body .fa-widget.fp-pilula .fa-painel,
html body .fa-widget .fa-painel {
	left: auto; right: 0; bottom: calc(var(--sd-aba-altura) + 10px);
	width: min(320px, calc(100vw - 24px)); max-height: calc(100dvh - var(--sd-aba-base) - var(--sd-aba-altura) - 40px); overflow-y: auto;
	padding: 26px 20px 20px; border: 1px solid var(--linha-forte); border-radius: var(--raio-l); box-shadow: none;
	background:
		linear-gradient(var(--laranja) 0 4px, var(--vermelho) 4px 8px, var(--mostarda) 8px 12px, transparent 12px) top / 100% 12px no-repeat,
		var(--papel-claro);
}
html body .fa-widget .fa-titulo { margin-bottom: 4px; font: 800 19px/1.15 var(--font-display); color: var(--tinta); }
html body .fa-widget .fa-titulo::before {
	content: "Som & Debate"; display: block; margin-bottom: 6px;
	font: 400 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--laranja-texto);
}
/* Painel aberto vem para a frente do balão de privacidade (o plugin põe o aviso acima da aba). */
html body .fa-widget:has(.fa-painel:not([hidden])) { z-index: 99999; }
/* Com a gaveta do celular aberta, a aba sai da frente. */
body:has(.gaveta:not([hidden])) :is(.fa-widget, .fp-fab-grupo) { display: none !important; }

/* ---------- Controles (painel da aba) ---------- */
html body :is(.fa-widget, .fa-inline) .fa-rotulo { margin: 16px 0 8px; font: 400 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); }
html body :is(.fa-widget, .fa-inline) .fa-btn { min-height: 44px; border: 2px solid var(--linha-forte); border-radius: var(--raio-m); color: var(--tinta); font: 650 15px/20px var(--font-sans); }
html body :is(.fa-widget, .fa-inline) .fa-btn:hover { border-color: var(--tinta); }
html body :is(.fa-widget, .fa-inline) .fa-btn[aria-pressed="true"] { background: var(--laranja); border-color: var(--laranja); color: var(--on-laranja); }
html body :is(.fa-widget, .fa-inline) :is(.fa-btn, .fa-toggle):focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; box-shadow: none; }
/* Letra: A− | 100% | A+ como as teclas de um tape deck, coladas. */
html body :is(.fa-widget, .fa-inline) .fa-fonte { gap: 0; border: 2px solid var(--tinta); border-radius: var(--raio-m); overflow: hidden; }
html body :is(.fa-widget, .fa-inline) .fa-fonte .fa-btn { min-width: 56px; border: 0; border-radius: 0; font: 800 17px/1 var(--font-display); }
html body :is(.fa-widget, .fa-inline) .fa-fonte .fa-btn:hover { background: var(--papel-escuro); }
html body :is(.fa-widget, .fa-inline) .fa-nivel { align-self: stretch; display: flex; align-items: center; justify-content: center; border-inline: 2px solid var(--tinta); background: var(--tinta); color: var(--papel); font: 700 15px/1 var(--font-mono); letter-spacing: .04em; }
html body :is(.fa-widget, .fa-inline) .fa-restaurar { border-color: transparent; color: var(--laranja-texto); text-decoration: underline; text-underline-offset: 4px; font-weight: 600; }
html body :is(.fa-widget, .fa-inline) .fa-atalhos { border-top-color: var(--linha); }
html body :is(.fa-widget, .fa-inline) .fa-atalhos > summary { font: 650 14px/1.3 var(--font-sans); color: var(--tinta); }
html body :is(.fa-widget, .fa-inline) kbd { border-color: var(--linha-forte); color: var(--tinta); font-family: var(--font-mono); }

/* ---------- Aviso de privacidade (1ª camada): balão de fala que sai da aba ---------- */
html body .fp.fp--baixo {
	left: auto; right: var(--sd-aba-direita); bottom: calc(var(--sd-aba-base) + var(--sd-aba-altura) + 26px);
	width: min(600px, calc(100vw - 32px)); max-width: none; margin: 0;
	grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 30px 28px 24px;
	background:
		linear-gradient(var(--laranja) 0 5px, var(--vermelho) 5px 10px, var(--mostarda) 10px 15px, transparent 15px) top / 100% 15px no-repeat,
		var(--tinta);
	color: var(--papel); border: 0; border-radius: 18px; box-shadow: none;
}
/* A ponta do balão aponta para o botão de privacidade da aba. */
html body .fp.fp--baixo::after {
	content: ""; position: absolute; right: 18px; bottom: -22px;
	border-right: 26px solid var(--tinta); border-bottom: 24px solid transparent;
}
html body .fp .fp__titulo { margin: 0 0 8px; font: 800 22px/1.15 var(--font-display); color: var(--papel); }
html body .fp .fp__titulo::before {
	content: "Privacidade · Lado A"; display: block; margin-bottom: 10px;
	font: 400 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sd-rotulo);
}
html body .fp .fp__texto { max-width: 60ch; font: 400 17px/1.5 var(--font-serif); color: var(--papel); opacity: .88; }
html body .fp .fp__links { margin-top: 10px; font: 400 12px/1.4 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; }
html body .fp .fp__links a { color: var(--sd-rotulo); text-underline-offset: 3px; }
html body .fp .fp__acoes { gap: 10px; }
/* Os três botões com o mesmo peso (guia da ANPD): contorno de papel; o realce só ao passar o mouse e no foco. */
html body .fp .fp__btn {
	flex: 1 1 0; min-height: 46px; padding: 0 16px; border: 2px solid var(--papel); border-radius: var(--raio-m);
	background: transparent; color: var(--papel); font: 650 15px/1.2 var(--font-sans); white-space: nowrap; transition: none;
}
html body .fp .fp__btn:hover { background: var(--laranja); border-color: var(--laranja); color: var(--on-laranja); }
html body .fp .fp__btn:focus-visible { outline: 2px solid var(--sd-rotulo); outline-offset: 3px; }

/* ---------- Preferências (2ª camada) ---------- */
html body .fp-modal { background: color-mix(in srgb, var(--tinta) 62%, transparent); }
html body .fp-modal__caixa { overflow: hidden; background: var(--papel-claro); border-radius: var(--raio-l); box-shadow: none; }
html body .fp-modal__topo {
	position: relative; padding: 22px 24px 26px; border-bottom: 0; background: var(--tinta); color: var(--papel);
}
html body .fp-modal__topo::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px;
	background: linear-gradient(var(--laranja) 0 4px, var(--vermelho) 4px 8px, var(--mostarda) 8px 12px);
}
html body .fp-modal__topo h2 { font: 800 21px/1.15 var(--font-display); color: var(--papel); }
html body .fp-modal__topo h2::before {
	content: "Privacidade · Lado B"; display: block; margin-bottom: 8px;
	font: 400 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sd-rotulo);
}
html body .fp-modal__x { color: var(--papel); border-radius: var(--raio-m); }
html body .fp-modal__x:hover { background: color-mix(in srgb, var(--papel) 14%, transparent); }
html body .fp-modal__x:focus-visible { outline: 2px solid var(--sd-rotulo); outline-offset: 2px; }
html body .fp-modal__corpo { padding: 18px 24px; }
html body :is(.fp-modal__intro, .fp-modal__enc, .fp-cat__desc) { font: 400 16px/1.5 var(--font-serif); color: var(--tinta-suave); }
html body .fp-modal__gpc { background: var(--papel-escuro); color: var(--tinta); border-radius: var(--raio-m); font-family: var(--font-sans); }
html body .fp-cat { padding: 16px 0; border-bottom-color: var(--linha); }
html body .fp-cat__topo h3 { font: 800 16px/1.2 var(--font-display); text-transform: uppercase; color: var(--tinta); }
html body .fp-cat__det { font-family: var(--font-sans); }
html body .fp-cat__det summary { color: var(--laranja-texto); }
html body .fp-cat__det li { background: var(--papel); border-radius: var(--raio-m); color: var(--tinta); }
html body .fp-sw__t { background: var(--linha-forte); }
html body .fp-sw input:checked + .fp-sw__t { background: var(--laranja); }
html body .fp-sw input:focus-visible + .fp-sw__t { outline: 2px solid var(--foco); }
html body .fp-sw__r { font: 400 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); }
html body .fp-modal__acoes { gap: 10px; padding: 16px 24px; background: var(--papel-escuro); border-top: 0; }
html body .fp-modal .fp__btn {
	min-height: 46px; border: 2px solid var(--tinta); border-radius: var(--raio-m);
	background: transparent; color: var(--tinta); font: 650 15px/1.2 var(--font-sans); transition: none;
}
html body .fp-modal .fp__btn:hover { background: var(--laranja); border-color: var(--laranja); color: var(--on-laranja); }
html body .fp-modal .fp__btn:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }

/* ---------- Recado rápido, conteúdo de terceiros bloqueado e botão do menu ---------- */
html body .fp-aviso { bottom: calc(var(--sd-aba-base) + var(--sd-aba-altura) + 12px); background: var(--tinta); color: var(--papel); border-radius: var(--raio-pilula); font: 700 13px/1.2 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
html body .fooba-embed { border: 1px dashed var(--linha-forte); border-radius: var(--raio-l); background: var(--papel-escuro); }
html body .fooba-embed__in p { font: 400 16px/1.5 var(--font-serif); color: var(--tinta-suave); }
html body .fooba-embed__btn { border-color: var(--laranja); border-radius: var(--raio-m); background: var(--laranja); color: var(--on-laranja); font: 650 15px/20px var(--font-sans); }
html body .fooba-embed__btn:hover { border-color: var(--mostarda); background: var(--mostarda); color: var(--on-mostarda); }
html body .fooba-embed__link { color: var(--laranja-texto); }
html body .prv-menu__btn { border: 2px solid var(--linha-forte); border-radius: var(--raio-m); font: 650 15px/1.2 var(--font-sans); color: var(--tinta); }
html body .prv-menu__btn:hover { border-color: var(--tinta); }
html body .prv-menu__btn svg { color: var(--laranja-texto); }

@media (max-width: 760px) {
	html body .fp.fp--baixo { right: 12px; width: calc(100vw - 24px); gap: 14px; padding: 26px 18px 18px; }
	html body .fp .fp__titulo { font-size: 19px; }
	html body .fp .fp__texto { font-size: 15px; line-height: 1.45; }
	html body .fp .fp__acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
	html body .fp .fp__btn { min-height: 44px; padding: 0 10px; font-size: 14px; white-space: normal; }
	html body .fp .fp__btn[data-a="aceitar"] { grid-column: 1 / -1; }
	html body .fp-modal__corpo, html body .fp-modal__acoes { padding-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) {
	html body :is(.fp, .fp-aviso, .fp-sw__t, .fp-sw__t::after, .fa-widget, .fa-btn) { animation: none !important; transition: none !important; }
}
@media print {
	html body :is(.fp, .fa-widget, .fp-fab-grupo, .fp-modal) { display: none !important; }
}