/* Career Summit 2026 — seleção de palestras.
   Tudo com prefixo cs26- e propriedades próprias, para não brigar com o Elementor. */

/* Paleta da B3 — ver manutencao/paleta-b3.md.
   Cor fora dessa lista e defeito, nao escolha de gosto. */
:root {
	--cs26-fundo: #0a0349;   /* Azul Profundo   */
	--cs26-acento: #f5ba94;  /* Coral Suave     */
	--cs26-texto: #ffffff;   /* Branco Base     */
	--cs26-alerta: #ea5744;  /* Terracota Viva  */
	--cs26-ok: #17a048;      /* Verde Vivo      */
	--cs26-borda: rgba(255, 255, 255, .25);
}

/* ---------- checkbox em cada palestra ---------- */

/*
 * A escolha carrega a PRÓPRIA superfície.
 *
 * Os cartões de palestra não têm todos o mesmo fundo: 22 são claros e o da
 * palestra em destaque é azul-escuro. Uma cor de texto só não serve para os
 * dois -- escuro some no destaque, claro some nos outros --, e detectar o fundo
 * não é possível: ele é pintado por pseudo-elemento, e `getComputedStyle` no
 * elemento devolve o fundo claro de um ancestral. Medido em 24/09: o DOM dizia
 * claro, o pixel mostrava escuro.
 *
 * Com fundo próprio, uma cor de texto basta e vale em qualquer cartão -- hoje e
 * no dia em que a B3 inventar um terceiro fundo. De quebra, vira um controle
 * com aparência de controle, em vez de uma caixinha solta.
 */
.cs26-escolha {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 .75rem;
	padding: .45rem .75rem;
	background-color: var(--cs26-texto);  /* Branco Base */
	border: 1px solid rgba(10, 3, 73, .2);
	border-radius: 4px;
}

.cs26-caixa {
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	accent-color: var(--cs26-acento);
	cursor: pointer;
	flex: 0 0 auto;
}

/*
 * DOIS níveis de classe, não um.
 *
 * `.cs26-rotulo` sozinho pesa (0,1,0) e perdia para `.elementor-kit-7 label`,
 * que pesa (0,1,1) e pinta de #0a0349 -- por isso o rótulo saía azul-profundo
 * em vez da cor do plugin. É a mesma armadilha já registrada para `button` e
 * `input`, agora com `label`.
 */
.cs26-escolha .cs26-rotulo {
	font-size: .85rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--cs26-fundo);  /* Azul Profundo, sobre o branco do chip */
	opacity: 1;
	cursor: pointer;
	line-height: 1.2;
}

.cs26-caixa:focus-visible {
	outline: 2px solid var(--cs26-acento);
	outline-offset: 2px;
}

.cs26-marcada {
	box-shadow: inset 0 0 0 2px var(--cs26-acento);
	border-radius: 8px;
}

/* ---------- barra flutuante ---------- */

.cs26-barra {
	position: fixed;
	left: 50%;
	bottom: 1rem;
	transform: translate(-50%, 150%);
	z-index: 9998;
	display: flex;
	align-items: center;
	gap: 1rem;
	max-width: calc(100vw - 2rem);
	padding: .75rem 1rem;
	border: 1px solid var(--cs26-borda);
	border-radius: 999px;
	background: var(--cs26-fundo);
	color: var(--cs26-texto);
	box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
	transition: transform .25s ease;
}

.cs26-barra.cs26-visivel {
	transform: translate(-50%, 0);
}

.cs26-contador {
	font-size: .9rem;
	white-space: nowrap;
}

.cs26-botao {
	padding: .6rem 1.1rem;
	border: 0;
	border-radius: 999px;
	background: var(--cs26-acento);
	color: var(--cs26-fundo);
	font-weight: 700;
	font-size: .9rem;
	cursor: pointer;
	line-height: 1.2;
}

.cs26-botao:disabled {
	opacity: .6;
	cursor: default;
}

/* ---------- modal ---------- */

.cs26-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(0, 0, 0, .65);
}

.cs26-modal.cs26-visivel {
	display: flex;
}

.cs26-caixa-modal {
	position: relative;
	width: 100%;
	max-width: 26rem;
	padding: 1.75rem;
	border: 1px solid var(--cs26-borda);
	border-radius: 14px;
	background: var(--cs26-fundo);
	color: var(--cs26-texto);
}

.cs26-fechar {
	position: absolute;
	top: .5rem;
	right: .75rem;
	border: 0;
	background: transparent;
	color: var(--cs26-texto);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	opacity: .7;
}

.cs26-titulo {
	margin: 0 0 .5rem;
	font-size: 1.25rem;
	color: var(--cs26-texto);
}

.cs26-ajuda {
	margin: 0 0 1.25rem;
	font-size: .85rem;
	opacity: .75;
	line-height: 1.45;
}

.cs26-rotulo-email {
	display: block;
	margin-bottom: .35rem;
	font-size: .85rem;
}

.cs26-email {
	width: 100%;
	padding: .7rem .85rem;
	border: 1px solid var(--cs26-borda);
	border-radius: 8px;
	background: rgba(255, 255, 255, .06);
	color: var(--cs26-texto);
	font-size: 1rem;
}

.cs26-email:focus-visible {
	outline: 2px solid var(--cs26-acento);
	outline-offset: 1px;
}

/* O campo-isca fica fora da tela em vez de display:none -- robô ignora o que
   está escondido, mas preenche o que existe no formulário. */
.cs26-isca {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.cs26-aviso {
	min-height: 1.2rem;
	margin: .75rem 0 0;
	font-size: .85rem;
}

.cs26-erro { color: var(--cs26-alerta); }
.cs26-sucesso { color: var(--cs26-ok); }

.cs26-enviar {
	width: 100%;
	margin-top: 1rem;
	padding: .8rem 1rem;
	font-size: 1rem;
}

@media (max-width: 480px) {
	.cs26-barra {
		flex-direction: column;
		gap: .6rem;
		border-radius: 14px;
		left: 1rem;
		right: 1rem;
		transform: translateY(150%);
		max-width: none;
	}
	.cs26-barra.cs26-visivel { transform: translateY(0); }
	.cs26-botao { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.cs26-barra { transition: none; }
}

/* ------------------------------------------------------------------ *
 *  Reafirmação sobre o tema
 *
 *  O kit do Elementor tem `.elementor-kit-7 button { ... }`, que vence
 *  `.cs26-fechar` por especificidade e impõe fundo, padding e fonte em TODO
 *  botão da página. Não adianta declarar de novo com o mesmo peso: os
 *  seletores abaixo sobem para dois níveis de classe, que ganham de
 *  classe+elemento, e reafirmam propriedade por propriedade.
 * ------------------------------------------------------------------ */

.cs26-barra.cs26-barra {
	border-radius: 12px;
}

.cs26-modal .cs26-fechar {
	position: absolute;
	top: 6px;
	right: 8px;
	width: 24px;
	height: 24px;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	background-color: transparent;
	color: var(--cs26-texto);
	font-family: inherit;
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0;
	text-transform: none;
	opacity: .65;
	cursor: pointer;
}

.cs26-modal .cs26-fechar:hover,
.cs26-modal .cs26-fechar:focus-visible {
	opacity: 1;
	background-color: rgba(255, 255, 255, .12);
}

.cs26-modal .cs26-rotulo-email {
	color: var(--cs26-texto);
	font-size: .85rem;
	opacity: .85;
}

/* O campo de e-mail e o unico que precisa de !important, e vale explicar por que.
   A regra do tema e:

     .elementor-kit-7 input:not([type="button"]):not([type="submit"])

   Cada :not() SOMA a especificidade do que esta dentro dele, entao esses dois
   [type="..."] valem como duas classes: a regra pesa (0,3,1). O seletor parece
   simples e nao e. Subir de classe nao resolveria sem ficar ilegivel. */
.cs26-modal .cs26-email {
	box-sizing: border-box !important;
	width: 100% !important;
	padding: .7rem .85rem !important;
	border: 1px solid var(--cs26-borda) !important;
	border-radius: 6px !important;
	background-color: rgba(255, 255, 255, .08) !important;
	color: var(--cs26-texto) !important;
	font-family: inherit;
	font-size: 1rem !important;
	transition: none;
}

.cs26-modal .cs26-email::placeholder {
	color: rgba(255, 255, 255, .5);
}