/* ==========================================================================
   Ellos — orelha de atalhos

   Duas peças fixas na borda: a lingueta lateral e o leque do canto. O HTML
   vem do PHP, ao contrário da cortina: aqui o conteúdo é real — links que
   precisam existir e ser indexados mesmo se o script não rodar. Sem o JS a
   lingueta não abre, mas o leque continua clicável e nada some da página.

   Prefixo ec-, tokens do DS. Nenhuma cor escrita à mão.
   ========================================================================== */

.ec-orelha-raiz {
	font-family: var(--ec-font-body);
}

/* --------------------------------------------------------------------------
   Véu

   Compartilhado pelas duas peças. Escurecer é uma cor com opacidade e não
   custa nada; desfocar usa backdrop-filter, que obriga o navegador a
   recompor a página a cada quadro. Por isso são atributos separados: quem
   configurou "escurecer" não paga o preço do desfoque.
   -------------------------------------------------------------------------- */

.ec-orelha-veu {
	position: fixed;
	inset: 0;
	z-index: 8990;
	--veu-cor: transparent;
	background: var(--veu-cor);
	opacity: 0;
	pointer-events: none;
	transition: opacity 260ms var(--ec-ease, ease);
}

.ec-orelha-veu[data-aberto="1"] { opacity: 1; pointer-events: auto; }

.ec-orelha-veu[data-escuro="leve"]  { --veu-cor: rgba(2, 17, 60, .28); }
.ec-orelha-veu[data-escuro="forte"] { --veu-cor: rgba(2, 17, 60, .52); }

.ec-orelha-veu[data-desfoque="leve"] {
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.ec-orelha-veu[data-desfoque="forte"] {
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* --------------------------------------------------------------------------
   Lingueta
   -------------------------------------------------------------------------- */

.ec-orelha {
	position: fixed;
	z-index: 9000;
	display: flex;

	/* A gaveta é quem manda na altura, e a lingueta se centraliza nela.

	   Crescer só para baixo, como antes, empurrava o fim da lista para
	   fora da janela — e com `position: fixed` isso não vira rolagem, vira
	   conteúdo inalcançável. Centralizada, a caixa cresce para os dois
	   lados e cabe o dobro antes de esbarrar em qualquer borda.

	   A altura configurada passa a ser o centro da peça, não o topo: daí o
	   translateY de -50%. O deslocamento extra é o empurrão que o script dá
	   quando, ainda assim, a caixa encostaria numa borda. */
	align-items: center;
	transform: translate(0, calc(-50% + var(--ec-orelha-nudge, 0px)));
}

/* Quem fica colado na borda depende do modo de abertura, e a diferença entre
   os dois é só a direção do flex.

     dentro   a lingueta fica na borda e a gaveta cresce para o miolo da tela
     empurra  a gaveta é que ocupa a borda, e a lingueta entra junto com ela

   As quatro combinações caem em duas direções, porque lado e modo se anulam:
   orelha à direita abrindo para dentro e orelha à esquerda empurrando têm a
   gaveta do mesmo lado da lingueta, e por isso compartilham tudo daqui para
   baixo — direção, raio e junção. */
.ec-orelha[data-lado="direita"]  { right: 0; }
.ec-orelha[data-lado="esquerda"] { left: 0; }

/* Gaveta à esquerda da lingueta */
.ec-orelha[data-lado="direita"][data-abertura="dentro"],
.ec-orelha[data-lado="esquerda"][data-abertura="empurra"] { flex-direction: row-reverse; }

/* Gaveta à direita da lingueta */
.ec-orelha[data-lado="direita"][data-abertura="empurra"],
.ec-orelha[data-lado="esquerda"][data-abertura="dentro"] { flex-direction: row; }

.ec-orelha__lingueta {
	appearance: none;
	border: 0;
	cursor: pointer;
	font: inherit;

	/* Acima da gaveta no modo dentro, onde ela desliza por baixo da
	   lingueta e a sobreposição apaga o vinco entre as duas. */
	position: relative;
	z-index: 2;

	/* Altura do próprio conteúdo, centrada na caixa.

	   A margem vertical entra na altura da linha do flex, e é ela que faz a
	   gaveta sobrar 24px para cada lado mesmo com um botão só — a gaveta
	   estica até a linha, a lingueta não. Sem essa folga, com um item a
	   caixa ficava exatamente da altura da lingueta e a curva de 20px do
	   canto caía dentro da faixa dela, abrindo o fundo entre as duas.

	   24, um pouco acima do raio: a curva termina antes de a lingueta
	   começar. */
	align-self: center;
	margin-block: 24px;
	color: var(--ec-white, #fff);
	background: var(--ec-grad-brand, #3360E1);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ec-sp-2, .5rem);
	padding: var(--ec-sp-4, 1rem) var(--ec-sp-2, .5rem);
	box-shadow: var(--ec-shadow-card, 0 22px 45px -20px rgba(1, 25, 80, .55));
	transition: filter var(--ec-dur, 220ms) var(--ec-ease, ease);
}

/* No modo empurra a lingueta encosta na gaveta em vez de subir por cima
   dela. A sombra própria denunciaria isso: ela cairia sobre o branco e
   desenharia a borda de uma peça solta bem no ponto em que as duas
   deveriam parecer uma só. Com a gaveta aberta, quem faz sombra é a
   caixa. */
.ec-orelha[data-abertura="empurra"] .ec-orelha__gaveta[data-aberto="1"] + .ec-orelha__lingueta,
.ec-orelha[data-abertura="empurra"] .ec-orelha__lingueta:has( + .ec-orelha__gaveta[data-aberto="1"] ) {
	box-shadow: none;
}

/* O canto arredondado da lingueta é sempre o que aponta para o miolo da
   tela, e por isso depende só do lado — não do modo de abertura.

   No modo empurra a lingueta não toca mais a borda, mas arredondar os
   quatro cantos ali foi um erro: ela virava um selo solto ao lado de uma
   caixa, em vez de uma aba saindo dela. O lado que encosta na gaveta fica
   reto para as duas peças lerem como uma coisa só. */
.ec-orelha[data-lado="direita"] .ec-orelha__lingueta  { border-radius: var(--ec-r-md, 14px) 0 0 var(--ec-r-md, 14px); }
.ec-orelha[data-lado="esquerda"] .ec-orelha__lingueta { border-radius: 0 var(--ec-r-md, 14px) var(--ec-r-md, 14px) 0; }

.ec-orelha__lingueta:hover { filter: brightness(1.08); }

.ec-orelha__lingueta:focus-visible {
	outline: 3px solid var(--ec-blue-400, #65B3FD);
	outline-offset: 3px;
}

.ec-orelha__lingueta svg { font-size: 1.25rem; }

.ec-orelha__rotulo {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-size: var(--ec-fs-sm, .875rem);
	font-weight: 600;
	letter-spacing: .04em;
}

.ec-orelha[data-lado="esquerda"] .ec-orelha__rotulo {
	writing-mode: vertical-lr;
	transform: rotate(180deg);
}

.ec-orelha__pino {
	position: absolute;
	top: -6px;
	inset-inline-end: -6px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: var(--ec-r-pill, 999px);
	background: var(--ec-red-500, #D42F2E);
	color: #fff;
	font-size: .7rem;
	font-weight: 700;
	display: grid;
	place-items: center;
	box-shadow: 0 0 0 2px var(--ec-white, #fff);
}

/* --------------------------------------------------------------------------
   Recolhimento

   Duas peças no mesmo lado disputam a mesma faixa da borda: o leque aberto
   ocupa quase a altura da janela, e o painel cobre a lateral inteira. Em vez
   de espremer as duas — o que não cabe a partir de quatro ou cinco botões —
   a que não foi acionada sai pela borda e volta ao fechar. Nada some sem que
   alguém tenha aberto algo.
   -------------------------------------------------------------------------- */

.ec-orelha,
.ec-leque,
.ec-leque__fab {
	transition: transform 260ms var(--ec-ease, ease), opacity 200ms var(--ec-ease, ease);
}

[data-recolhida="1"] { opacity: 0; pointer-events: none; }

.ec-leque[data-recolhida="1"][data-lado="direita"],
.ec-leque__fab[data-recolhida="1"][data-lado="direita"] { transform: translateX(120%); }

.ec-leque[data-recolhida="1"][data-lado="esquerda"],
.ec-leque__fab[data-recolhida="1"][data-lado="esquerda"] { transform: translateX(-120%); }

/* A orelha carrega o translateY da centralização, e ele precisa sobreviver
   ao recolhimento — um transform sobrescreve o outro por inteiro. */
.ec-orelha[data-recolhida="1"][data-lado="direita"]  { transform: translate(120%, calc(-50% + var(--ec-orelha-nudge, 0px))); }
.ec-orelha[data-recolhida="1"][data-lado="esquerda"] { transform: translate(-120%, calc(-50% + var(--ec-orelha-nudge, 0px))); }

/* --------------------------------------------------------------------------
   Itens, comuns ao painel e à gaveta
   -------------------------------------------------------------------------- */

/* A lista rola por dentro quando a caixa chega ao teto de altura. Esta é a
   rolagem que resolve lista longa: a que vaza de um elemento fixo não vira
   barra nenhuma, só some da tela.

   `overscroll-behavior: contain` impede que, ao chegar ao fim da lista, o
   gesto continue e leve a página junto — no celular é o que faz o site
   pular atrás de um painel aberto. */
.ec-orelha-lista {
	padding: var(--ec-sp-4, 1rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	flex: 1;
}

.ec-orelha-grupo {
	margin: var(--ec-sp-4, 1rem) 0 var(--ec-sp-2, .5rem);
	padding-inline: var(--ec-sp-2, .5rem);
	font-size: var(--ec-fs-xs, .75rem);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ec-ink-400, #5B6579);
}

.ec-orelha-grupo:first-child { margin-top: 0; }

.ec-orelha-item {
	display: flex;
	align-items: center;
	gap: var(--ec-sp-3, .75rem);
	padding: var(--ec-sp-3, .75rem);
	border-radius: var(--ec-r-md, 14px);
	text-decoration: none;
	color: var(--ec-ink-900, #1D283B);
	transition: background var(--ec-dur, 220ms) var(--ec-ease, ease);
}

.ec-orelha-item:hover { background: var(--ec-blue-050, #F3F5FE); }

.ec-orelha-item:focus-visible {
	outline: 3px solid var(--ec-blue-400, #65B3FD);
	outline-offset: -1px;
}

.ec-orelha-item__ico {
	width: 38px;
	height: 38px;
	border-radius: var(--ec-r-md, 14px);
	flex: none;
	display: grid;
	place-items: center;
	font-size: 1.15rem;
	background: var(--ec-blue-100, #E9ECFD);
	color: var(--ec-blue-700, #3360E1);
}

.ec-orelha-item--acao .ec-orelha-item__ico   { background: var(--ec-green-500, #21C55D); color: #fff; }
.ec-orelha-item--alerta .ec-orelha-item__ico { background: var(--ec-red-500, #D42F2E); color: #fff; }

.ec-orelha-item__txt { min-width: 0; flex: 1; }

.ec-orelha-item__txt b {
	display: block;
	font-size: var(--ec-fs-sm, .875rem);
	font-weight: 600;
	line-height: 1.35;
}

.ec-orelha-item__txt span {
	display: block;
	font-size: var(--ec-fs-xs, .75rem);
	color: var(--ec-ink-400, #5B6579);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ec-orelha-item__seta { color: var(--ec-ink-400, #5B6579); font-size: .9rem; opacity: .55; }

/* --------------------------------------------------------------------------
   Painel deslizante
   -------------------------------------------------------------------------- */

.ec-orelha-painel {
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: 9010;
	width: min(360px, 88vw);
	background: var(--ec-white, #fff);
	box-shadow: var(--ec-shadow-card, 0 22px 45px -20px rgba(1, 25, 80, .55));
	display: flex;
	flex-direction: column;
	transition: transform 320ms var(--ec-ease, ease);
	visibility: hidden;
}

.ec-orelha-painel[data-lado="direita"]  { right: 0; transform: translateX(100%); }
.ec-orelha-painel[data-lado="esquerda"] { left: 0; transform: translateX(-100%); }

.ec-orelha-painel[data-aberto="1"] { transform: translateX(0); visibility: visible; }

.ec-orelha-painel__topo {
	background: var(--ec-grad-brand, #3360E1);
	color: var(--ec-white, #fff);
	padding: var(--ec-sp-5, 1.5rem);
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--ec-sp-3, .75rem);
}

.ec-orelha-painel__topo h2 { margin: 0 0 2px; font-size: 1.1rem; letter-spacing: -.01em; }
.ec-orelha-painel__topo p  { margin: 0; font-size: var(--ec-fs-sm, .875rem); color: rgba(255, 255, 255, .8); }

.ec-orelha-fechar {
	appearance: none;
	border: 0;
	background: rgba(255, 255, 255, .16);
	color: #fff;
	width: 32px;
	height: 32px;
	border-radius: var(--ec-r-pill, 999px);
	cursor: pointer;
	display: grid;
	place-items: center;
	flex: none;
}

.ec-orelha-fechar:hover { background: rgba(255, 255, 255, .28); }

.ec-orelha-fechar:focus-visible {
	outline: 3px solid var(--ec-blue-400, #65B3FD);
	outline-offset: 2px;
}

.ec-orelha-painel__pe {
	padding: var(--ec-sp-4, 1rem) var(--ec-sp-5, 1.5rem);
	border-top: 1px solid rgba(1, 63, 182, .10);
	font-size: var(--ec-fs-xs, .75rem);
	color: var(--ec-ink-400, #5B6579);
}

/* No celular a lateral vira folha de baixo: 360px de painel numa tela de
   375px é a página inteira coberta, e o gesto de vir de baixo é o que o
   sistema já ensinou. */
@media (max-width: 640px) {

	.ec-orelha-painel,
	.ec-orelha-painel[data-lado] {
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		width: auto;
		max-height: 82vh;
		border-radius: var(--ec-r-xl, 28px) var(--ec-r-xl, 28px) 0 0;
		transform: translateY(100%);
	}

	.ec-orelha-painel[data-aberto="1"] { transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   Gaveta
   -------------------------------------------------------------------------- */

.ec-orelha__gaveta {
	background: var(--ec-white, #fff);
	box-shadow: var(--ec-shadow-card, 0 22px 45px -20px rgba(1, 25, 80, .55));
	overflow: hidden;
	width: 0;
	opacity: 0;

	/* Nunca menor que a lingueta: com um botão só, a caixa acompanha a
	   altura dela em vez de virar um retângulo baixo ao lado de uma faixa
	   comprida. */
	align-self: stretch;
	transition: width 300ms var(--ec-ease, ease),
		opacity 200ms var(--ec-ease, ease),
		margin 300ms var(--ec-ease, ease);
}

/* Com a lingueta centrada, os cantos do lado dela deixaram de ser um
   problema: a curva acontece nos 20px do alto e do fundo da caixa, e a
   lingueta está no meio, longe dos dois. O canto reto que existia ali
   servia para não abrir vão junto da junção — e essa junção mudou de
   lugar.

   Modo dentro: a gaveta é um cartão solto com a lingueta saindo do lado.
   Arredonda tudo. */
.ec-orelha[data-abertura="dentro"] .ec-orelha__gaveta { border-radius: var(--ec-r-lg, 20px); }

/* Modo empurra: só o lado que encosta na borda da tela fica reto —
   arredondar contra a borda faz a caixa parecer solta no meio do nada. */
.ec-orelha[data-lado="direita"][data-abertura="empurra"] .ec-orelha__gaveta  { border-radius: var(--ec-r-lg, 20px) 0 0 var(--ec-r-lg, 20px); }
.ec-orelha[data-lado="esquerda"][data-abertura="empurra"] .ec-orelha__gaveta { border-radius: 0 var(--ec-r-lg, 20px) var(--ec-r-lg, 20px) 0; }

.ec-orelha__gaveta[data-aberto="1"] { width: min(280px, 80vw); opacity: 1; }

/* A sobreposição existe só no modo dentro. Ali a lingueta está na borda e a
   gaveta sai de baixo dela: os 14px dão a continuidade de uma peça saindo
   da outra.

   No modo empurra as duas apenas encostam. A lingueta é um marcador preso
   na lateral da caixa, não uma aba por cima dela — e sobrepor faz a sombra
   da lingueta cair no branco, que é o que denuncia a diferença.

   São 22px, e não 14: com um botão só a gaveta fica da altura da lingueta,
   e aí a curva de 20px do canto cai exatamente na faixa que a lingueta
   ocupa. Sobreposição menor que o raio deixaria o fundo aparecer ali.

   A margem entra só com a gaveta aberta: fixa, deixaria uma faixa branca à
   mostra com a gaveta fechada, porque o padding não colapsa junto com a
   largura. */
.ec-orelha[data-lado="direita"][data-abertura="dentro"] .ec-orelha__gaveta[data-aberto="1"] { margin-right: -22px; }
.ec-orelha[data-lado="esquerda"][data-abertura="dentro"] .ec-orelha__gaveta[data-aberto="1"] { margin-left: -22px; }

.ec-orelha__gaveta-int {
	width: min(280px, 80vw);
	height: 100%;
	padding: var(--ec-sp-3, .75rem);

	/* Com um item só, a gaveta esticou até a altura da lingueta e o
	   conteúdo ficaria pendurado no topo. Centralizado, as duas peças
	   ficam visualmente na mesma linha. */
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* O recuo compensa a margem negativa: sem ele o conteúdo escorregaria para
   baixo da lingueta. Só no modo dentro, que é onde a margem existe. */
.ec-orelha[data-lado="direita"][data-abertura="dentro"] .ec-orelha__gaveta-int  { padding-right: calc(var(--ec-sp-3, .75rem) + 22px); }
.ec-orelha[data-lado="esquerda"][data-abertura="dentro"] .ec-orelha__gaveta-int { padding-left: calc(var(--ec-sp-3, .75rem) + 22px); }

/* Teto de altura: passando disso a lista rola por dentro da gaveta, que é
   rolagem que existe e funciona — ao contrário do que vaza de um elemento
   fixo, que simplesmente não pode ser alcançado. */
/* Teto da gaveta. Como a caixa é centrada na altura escolhida, 76vh cabe
   inteiro com folga nas duas pontas; passando disso, a lista rola. */
.ec-orelha__gaveta .ec-orelha-lista { padding: 0; max-height: 76vh; }
.ec-orelha__gaveta .ec-orelha-item { padding: var(--ec-sp-2, .5rem) var(--ec-sp-3, .75rem); }
.ec-orelha__gaveta .ec-orelha-item__ico { width: 34px; height: 34px; font-size: 1.05rem; }

/* --------------------------------------------------------------------------
   Leque
   -------------------------------------------------------------------------- */

.ec-leque {
	position: fixed;
	z-index: 9010;
	/* A base é uma variável porque o JavaScript a empurra para cima quando
	   o selo do reCAPTCHA está no mesmo canto. O valor inicial vem do PHP,
	   no atributo style do wrapper. */
	bottom: calc(var(--ec-leque-base, 24px) + 72px);
	display: flex;
	flex-direction: column-reverse;
	gap: var(--ec-sp-3, .75rem);
	align-items: flex-end;
	pointer-events: none;
}

.ec-leque[data-lado="direita"]  { right: var(--ec-sp-5, 1.5rem); }
.ec-leque[data-lado="esquerda"] { left: var(--ec-sp-5, 1.5rem); align-items: flex-start; }

.ec-leque__it {
	display: flex;
	align-items: center;
	gap: var(--ec-sp-3, .75rem);
	text-decoration: none;
	opacity: 0;
	transform: translateY(14px) scale(.88);
	pointer-events: none;
	transition: opacity 180ms var(--ec-ease, ease), transform 240ms var(--ec-ease, ease);
}

.ec-leque[data-lado="esquerda"] .ec-leque__it { flex-direction: row-reverse; }

.ec-leque[data-aberto="1"] .ec-leque__it { opacity: 1; transform: none; pointer-events: auto; }

.ec-leque__nome {
	background: var(--ec-white, #fff);
	color: var(--ec-ink-900, #1D283B);
	padding: var(--ec-sp-2, .5rem) var(--ec-sp-3, .75rem);
	border-radius: var(--ec-r-pill, 999px);
	font-size: var(--ec-fs-sm, .875rem);
	font-weight: 600;
	white-space: nowrap;
	box-shadow: var(--ec-shadow-soft, 0 18px 40px -18px rgba(1, 25, 80, .45));
}

.ec-leque__bolha {
	width: 46px;
	height: 46px;
	border-radius: var(--ec-r-pill, 999px);
	flex: none;
	display: grid;
	place-items: center;
	font-size: 1.25rem;
	color: #fff;
	background: var(--ec-blue-700, #3360E1);
	box-shadow: var(--ec-shadow-card, 0 22px 45px -20px rgba(1, 25, 80, .55));
}

.ec-leque__it--acao .ec-leque__bolha   { background: var(--ec-green-500, #21C55D); }
.ec-leque__it--alerta .ec-leque__bolha { background: var(--ec-red-500, #D42F2E); }

.ec-leque__it:focus-visible .ec-leque__bolha {
	outline: 3px solid var(--ec-blue-400, #65B3FD);
	outline-offset: 3px;
}

.ec-leque__fab {
	position: fixed;
	z-index: 9020;
	bottom: var(--ec-leque-base, 24px);
	width: 58px;
	height: 58px;
	border: 0;
	cursor: pointer;
	border-radius: var(--ec-r-pill, 999px);
	background: var(--ec-grad-brand, #3360E1);
	color: #fff;
	display: grid;
	place-items: center;
	font-size: 1.5rem;
	box-shadow: var(--ec-shadow-card, 0 22px 45px -20px rgba(1, 25, 80, .55));
}

.ec-leque__fab[data-lado="direita"]  { right: var(--ec-sp-5, 1.5rem); }
.ec-leque__fab[data-lado="esquerda"] { left: var(--ec-sp-5, 1.5rem); }

.ec-leque__fab:focus-visible {
	outline: 3px solid var(--ec-blue-400, #65B3FD);
	outline-offset: 3px;
}

/* Os dois ícones ocupam a mesma célula do grid e se revezam. O de fechar
   entra girando um oitavo de volta, que é o que dá a sensação de o botão
   ter virado — sem depender de o ícone escolhido ser um `+`. */
.ec-leque__fab-ico {
	grid-area: 1 / 1;
	display: grid;
	place-items: center;
	transition: opacity 180ms var(--ec-ease, ease), transform 260ms var(--ec-ease, ease);
}

.ec-leque__fab-ico--fechar { opacity: 0; transform: rotate(-45deg); }

.ec-leque__fab[data-aberto="1"] .ec-leque__fab-ico {
	opacity: 0;
	transform: rotate(45deg);
}

.ec-leque__fab[data-aberto="1"] .ec-leque__fab-ico--fechar {
	opacity: 1;
	transform: rotate(0);
}

/* --------------------------------------------------------------------------
   Movimento reduzido
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.ec-orelha,
	.ec-orelha-painel,
	.ec-orelha__gaveta,
	.ec-orelha-veu,
	.ec-leque,
	.ec-leque__it,
	.ec-leque__fab,
	.ec-leque__fab-ico { transition: none; }
}