/*
 * 4ED Core — componentes comuns (0.2.0).
 *
 * Carregado só quando um plugin declara a dependência 'foured-core'. Usa apenas as variáveis --4ed-*,
 * então o mesmo componente funciona no modo claro, no escuro e dentro de uma seção .foured-escuro.
 *
 * Força dos seletores: uma classe só (.foured-ui-*). O CSS de cada plugin, com escopo próprio, ajusta
 * por cima quando precisar, sem !important.
 */

/* ------------------------------------------------------------------ Botões
 * .foured-ui-botao                principal (CTA): preto no claro, branco no escuro; nunca a cor da área
 * .foured-ui-botao--contorno      secundário
 * .foured-ui-botao--link          ação discreta, com cara de link
 * .foured-ui-botao--grande        mais alto, para o CTA do topo
 * .foured-ui-botao--bloco         ocupa a largura toda (ex.: no celular)
 * Desativado: atributo disabled (em <button>) ou aria-disabled="true" (em <a>).
 */
.foured-ui-botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	min-height: 48px; /* alvo confortável para o dedo */
	padding: 10px 28px;
	border: 2px solid var(--4ed-botao-fundo);
	border-radius: var(--4ed-raio-pilula);
	background: var(--4ed-botao-fundo);
	color: var(--4ed-botao-texto);
	font-family: var(--4ed-fonte);
	font-size: 1rem;
	font-weight: var(--4ed-peso-forte);
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Hover: o botão clareia um pouco em direção ao fundo (no claro, preto → cinza-escuro; no escuro, o contrário). */
.foured-ui-botao:hover {
	background: color-mix(in srgb, var(--4ed-botao-fundo) 82%, var(--4ed-fundo));
	border-color: color-mix(in srgb, var(--4ed-botao-fundo) 82%, var(--4ed-fundo));
	color: var(--4ed-botao-texto);
}

/* Foco do teclado: contorno visível em todos os componentes (nunca removido). */
.foured-ui-botao:focus-visible,
.foured-ui-chip:focus-visible,
.foured-ui-janela__fechar:focus-visible {
	outline: 3px solid var(--4ed-foco);
	outline-offset: 2px;
}

.foured-ui-botao--contorno {
	background: transparent;
	border-color: var(--4ed-borda-forte);
	color: var(--4ed-texto);
}

.foured-ui-botao--contorno:hover {
	background: var(--4ed-superficie);
	border-color: var(--4ed-borda-forte);
	color: var(--4ed-texto);
}

.foured-ui-botao--link {
	min-height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--4ed-link);
	font-weight: var(--4ed-peso-medio);
	text-decoration: underline;
	text-underline-offset: .2em;
}

.foured-ui-botao--link:hover {
	background: none;
	color: var(--4ed-link);
	text-decoration-thickness: 2px;
}

.foured-ui-botao--grande {
	min-height: 56px;
	padding: 0 40px;
	font-size: 1.125rem;
}

.foured-ui-botao--bloco {
	display: flex;
	width: 100%;
}

.foured-ui-botao:disabled,
.foured-ui-botao[aria-disabled="true"] {
	background: var(--4ed-superficie);
	border-color: var(--4ed-borda);
	color: var(--4ed-texto-suave);
	cursor: not-allowed;
	pointer-events: none;
}

.foured-ui-botao .foured-ui-icone {
	font-size: 1.15em;
}

/* ------------------------------------------------------------------ Chips
 * Filtros e escolhas (local, período, modalidade). Selecionado: .is-ativo ou aria-pressed="true".
 */
.foured-ui-chip {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	padding: 10px 16px;
	border: 1px solid var(--4ed-borda);
	border-radius: var(--4ed-raio-pilula);
	background: var(--4ed-fundo);
	color: var(--4ed-texto);
	font-family: var(--4ed-fonte);
	font-size: .9375rem;
	font-weight: var(--4ed-peso-medio);
	line-height: 1.2;
	cursor: pointer;
}

.foured-ui-chip:hover {
	background: var(--4ed-superficie);
	border-color: var(--4ed-borda-forte);
	color: var(--4ed-texto);
}

.foured-ui-chip.is-ativo,
.foured-ui-chip[aria-pressed="true"] {
	background: var(--4ed-botao-fundo);
	border-color: var(--4ed-botao-fundo);
	color: var(--4ed-botao-texto);
}

/* Chip só informativo (não clicável), ex.: "Online ao vivo" no card. */
span.foured-ui-chip,
div.foured-ui-chip {
	cursor: default;
	padding: 5px 11px;
	font-size: .8125rem;
	background: var(--4ed-superficie);
	border-color: transparent;
}

span.foured-ui-chip:hover,
div.foured-ui-chip:hover {
	border-color: transparent;
}

/* ------------------------------------------------------------------ Selos de estado
 * Gerados por FourED_Componentes::estado(): sempre ícone + texto.
 * .foured-ui-estado--sucesso | --aviso | --erro | --neutro, e --pilula para o fundo colorido.
 */
.foured-ui-estado {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--4ed-fonte);
	font-size: .875rem;
	font-weight: var(--4ed-peso-forte);
	line-height: 1.3;
}

.foured-ui-estado .foured-ui-icone {
	flex-shrink: 0;
	font-size: 1.2em;
}

.foured-ui-estado--sucesso { color: var(--4ed-sucesso); }
.foured-ui-estado--aviso   { color: var(--4ed-aviso); }
.foured-ui-estado--erro    { color: var(--4ed-erro); }
.foured-ui-estado--neutro  { color: var(--4ed-texto-2); }

.foured-ui-estado--pilula {
	padding: 4px 11px 4px 9px;
	border-radius: var(--4ed-raio-pilula);
	font-size: .8125rem;
}

.foured-ui-estado--pilula.foured-ui-estado--sucesso { background: var(--4ed-sucesso-fundo); }
.foured-ui-estado--pilula.foured-ui-estado--aviso   { background: var(--4ed-aviso-fundo); }
.foured-ui-estado--pilula.foured-ui-estado--erro    { background: var(--4ed-erro-fundo); }
.foured-ui-estado--pilula.foured-ui-estado--neutro  { background: var(--4ed-superficie); }

/* ------------------------------------------------------------------ Cartão */
.foured-ui-cartao {
	padding: 24px;
	border: 1px solid var(--4ed-borda);
	border-radius: var(--4ed-raio);
	background: var(--4ed-fundo);
	color: var(--4ed-texto);
}

.foured-ui-cartao--superficie {
	border-color: transparent;
	background: var(--4ed-superficie);
}

.foured-ui-cartao--sombra {
	box-shadow: var(--4ed-sombra-cartao);
}

/* ------------------------------------------------------------------ Ícones */
.foured-ui-icone {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -.125em;
}

/* ------------------------------------------------------------------ Janela padronizada
 * <dialog> gerado por FourED_Componentes::janela_inicio() / janela_fim().
 * Desktop: janela no centro. Celular (até 860px, o mesmo corte do Turmas): painel que sobe de baixo.
 * Fecha pelo ícone no topo, por Esc e clicando fora (script do Core).
 */
.foured-ui-janela {
	width: calc(100% - 32px);
	max-width: 560px;
	max-height: min(85vh, 760px);
	padding: 0;
	border: 0;
	border-radius: var(--4ed-raio);
	background: var(--4ed-fundo);
	color: var(--4ed-texto);
	font-family: var(--4ed-fonte);
	box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}

.foured-ui-janela::backdrop {
	background: rgba(0, 0, 0, .45);
}

/* A página atrás não rola enquanto a janela está aberta. */
html:has(.foured-ui-janela[open]) {
	overflow: hidden;
}

.foured-ui-janela__corpo {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-height: inherit;
	padding: 24px 28px 28px;
	box-sizing: border-box;
}

.foured-ui-janela__topo {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.foured-ui-janela__topo form {
	margin: 0;
}

.foured-ui-janela__rotulo {
	margin: 0 0 4px;
	color: var(--4ed-texto-suave);
}

.foured-ui-janela__titulo {
	margin: 0;
	color: var(--4ed-texto);
	font-family: var(--4ed-fonte);
	font-size: var(--4ed-tam-titulo-4);
	line-height: var(--4ed-altura-titulo-4);
	font-weight: var(--4ed-peso-forte);
}

.foured-ui-janela__fechar {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--4ed-borda);
	border-radius: 50%;
	background: var(--4ed-fundo);
	color: var(--4ed-texto);
	font-size: 20px;
	cursor: pointer;
}

.foured-ui-janela__fechar:hover {
	background: var(--4ed-superficie);
	color: var(--4ed-texto);
}

/* O conteúdo rola dentro da janela; o topo com o fechar fica sempre visível. */
.foured-ui-janela__conteudo {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	color: var(--4ed-texto-2);
	font-size: var(--4ed-tam-corpo);
	line-height: var(--4ed-altura-corpo);
}

.foured-ui-janela__puxador {
	display: none;
}

/* Entrada: leve, só ao abrir. */
.foured-ui-janela[open] {
	animation: foured-ui-janela-entra .18s ease-out;
}

@keyframes foured-ui-janela-entra {
	from { opacity: 0; transform: translateY(8px) scale(.98); }
	to   { opacity: 1; transform: none; }
}

@media (max-width: 860px) {
	.foured-ui-janela {
		width: 100%;
		max-width: none;
		max-height: 88vh;
		margin: auto 0 0;
		border-radius: 18px 18px 0 0;
	}

	.foured-ui-janela__corpo {
		max-height: 88vh;
		padding: 10px 20px calc(20px + env(safe-area-inset-bottom, 0px));
	}

	/* Puxador: só indica que é um painel; fechar continua pelo ícone. */
	.foured-ui-janela__puxador {
		display: block;
		width: 36px;
		height: 4px;
		margin: 0 auto 4px;
		border-radius: 2px;
		background: var(--4ed-borda);
	}

	.foured-ui-janela[open] {
		animation-name: foured-ui-janela-sobe;
		animation-duration: .22s;
	}

	@keyframes foured-ui-janela-sobe {
		from { transform: translateY(40px); opacity: .6; }
		to   { transform: none; opacity: 1; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.foured-ui-botao { transition: none; }
	.foured-ui-janela[open] { animation: none; }
}