/*
 * Calendário. Tokens em assets/tokens.css. Nenhum hexadecimal novo aqui:
 * toda cor vem de var(--...). Se faltar um token, o componente não deve
 * inventar cor, e sim relatar a falta.
 *
 * O breakpoint 700px abaixo repete o valor do token --quebra-calendario.
 * CSS não permite var() dentro de condição de @media, então o número
 * fica hardcoded aqui; mudou o token, muda aqui também.
 */

/* ---------------------------------------------------------------------
 * Utilitário: texto só para leitor de tela.
 * ------------------------------------------------------------------ */

.jv-calendario__so-leitor {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------
 * Contêiner e cabeçalho.
 * ------------------------------------------------------------------ */

.jv-calendario,
.jv-calendario-ano {
	font-family: var(--fonte-interface);
	color: var(--cor-tinta);
}

.jv-calendario__cabecalho,
.jv-calendario-ano__cabecalho {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--esp-3);
	margin-bottom: var(--esp-4);
}

.jv-calendario__titulo,
.jv-calendario-ano__titulo {
	margin: 0;
	font-family: var(--fonte-titulo);
	font-weight: var(--peso-titulo);
	font-size: var(--corpo-2xl);
	line-height: var(--entrelinha-apertada);
}

.jv-calendario__controles {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--esp-3);
}

.jv-calendario__navegacao {
	display: flex;
	align-items: center;
	gap: var(--esp-2);
}

.jv-calendario__restricao {
	flex-basis: 100%;
	margin: 0;
	font-size: var(--corpo-xs);
	color: var(--cor-tinta-fraca);
}

/* ---------------------------------------------------------------------
 * Botões de navegação e ação. Alvo de toque 44x44 onde cabe.
 * ------------------------------------------------------------------ */

.jv-calendario__botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--alvo-minimo);
	min-height: var(--alvo-minimo);
	padding: var(--esp-2) var(--esp-3);
	border: 1px solid var(--cor-linha);
	border-radius: var(--raio-pequeno);
	background: var(--cor-branco);
	color: var(--cor-tinta);
	font-family: var(--fonte-interface);
	font-size: var(--corpo-sm);
	font-weight: var(--peso-destaque);
	text-decoration: none;
	line-height: 1;
	cursor: pointer;
}

.jv-calendario__botao:hover {
	border-color: var(--cor-tinta-apagada);
}

.jv-calendario__botao--desativado {
	color: var(--cor-tinta-apagada);
	background: var(--cor-papel);
	cursor: not-allowed;
}

/* ---------------------------------------------------------------------
 * Foco visível, WCAG 2.4.11. Vale para todo elemento interativo do
 * componente: botão, link de navegação, pastilha, resumo do <details>.
 * ------------------------------------------------------------------ */

.jv-calendario a:focus,
.jv-calendario button:focus,
.jv-calendario summary:focus,
.jv-calendario-ano a:focus {
	outline: var(--foco-espessura) solid var(--foco-cor);
	outline-offset: var(--foco-afastamento);
}

/* ---------------------------------------------------------------------
 * Tabela: a grade do mês.
 * ------------------------------------------------------------------ */

.jv-calendario__tabela-wrap {
	overflow-x: auto;
}

.jv-calendario__tabela {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	background: var(--cor-branco);
}

.jv-calendario__tabela th,
.jv-calendario__tabela td {
	border: 1px solid var(--cor-linha);
	vertical-align: top;
}

.jv-calendario__tabela th {
	padding: var(--esp-2);
	font-family: var(--fonte-interface);
	font-weight: var(--peso-destaque);
	font-size: var(--corpo-xs);
	text-align: center;
	background: var(--cor-papel);
}

.jv-calendario__tabela th abbr {
	text-decoration: none;
}

.jv-calendario__dia {
	height: 6.5rem;
	padding: var(--esp-1) var(--esp-2);
}

.jv-calendario__numero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.75rem;
	min-height: 1.75rem;
	font-variant-numeric: tabular-nums;
	font-size: var(--corpo-sm);
}

.jv-calendario__dia--fora {
	color: var(--cor-tinta-apagada);
	background: var(--cor-papel);
}

.jv-calendario__dia--fora .jv-calendario__numero {
	color: var(--cor-tinta-apagada);
}

/* Hoje: círculo cheio em ocre, número em branco. */
.jv-calendario__dia--hoje .jv-calendario__numero {
	border-radius: 50%;
	background: var(--cor-ocre);
	color: var(--cor-branco);
	font-weight: var(--peso-destaque);
}

.jv-calendario__eventos {
	list-style: none;
	margin: var(--esp-1) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.jv-calendario__mais {
	font-size: var(--corpo-xs);
	color: var(--cor-tinta-fraca);
	padding: 1px var(--esp-1);
}

/* ---------------------------------------------------------------------
 * Pastilha de evento. A borda é obrigatória: o preenchimento claro
 * sozinho mede 1.25:1 contra a célula branca e some. A borda já foi
 * medida para passar em 3:1.
 * ------------------------------------------------------------------ */

.jv-calendario__pastilha {
	display: flex;
	align-items: center;
	gap: 4px;
	min-height: 24px;
	padding: 1px var(--esp-1);
	border: 1px solid transparent;
	border-radius: var(--raio-pequeno);
	font-size: var(--corpo-xs);
	line-height: 1.3;
	text-decoration: none;
	overflow: hidden;
}

a.jv-calendario__pastilha:hover {
	filter: brightness(0.97);
}

.jv-calendario__marca {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 2px;
}

.jv-calendario__pastilha-texto {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.jv-calendario__pastilha--etapa {
	background: var(--cor-sit-etapa-fundo);
	color: var(--cor-sit-etapa-texto);
	border-color: var(--cor-sit-etapa-borda);
}
.jv-calendario__pastilha--etapa .jv-calendario__marca {
	background: var(--cor-sit-etapa-marca);
}

.jv-calendario__pastilha--inscricao-aberta {
	background: var(--cor-sit-inscricao-aberta-fundo);
	color: var(--cor-sit-inscricao-aberta-texto);
	border-color: var(--cor-sit-inscricao-aberta-borda);
	border-style: dashed;
}
.jv-calendario__pastilha--inscricao-aberta .jv-calendario__marca {
	background: var(--cor-sit-inscricao-aberta-marca);
}

.jv-calendario__pastilha--realizado {
	background: var(--cor-sit-realizado-fundo);
	color: var(--cor-sit-realizado-texto);
	border-color: var(--cor-sit-realizado-borda);
}
.jv-calendario__pastilha--realizado .jv-calendario__marca {
	background: var(--cor-sit-realizado-marca);
}
.jv-calendario__pastilha--realizado .jv-calendario__pastilha-texto {
	text-decoration: line-through;
}

.jv-calendario__pastilha--regional {
	background: var(--cor-sit-regional-fundo);
	color: var(--cor-sit-regional-texto);
	border-color: var(--cor-sit-regional-borda);
}
.jv-calendario__pastilha--regional .jv-calendario__marca {
	background: var(--cor-sit-regional-marca);
}

/* ---------------------------------------------------------------------
 * Legenda.
 * ------------------------------------------------------------------ */

.jv-calendario__legenda {
	display: flex;
	flex-wrap: wrap;
	gap: var(--esp-4);
	list-style: none;
	margin: var(--esp-4) 0 0;
	padding: 0;
	font-size: var(--corpo-xs);
	color: var(--cor-tinta-fraca);
}

.jv-calendario__legenda li {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.jv-calendario__legenda .jv-calendario__marca {
	width: 10px;
	height: 10px;
	border-radius: 2px;
}

/* Por classe, não por posição: a legenda é montada a partir da mesma lista
   que desenha as pastilhas, e um dia a ordem dela pode mudar. */

.jv-calendario__marca--etapa {
	background: var(--cor-sit-etapa-marca);
}
.jv-calendario__marca--inscricao-aberta {
	background: var(--cor-sit-inscricao-aberta-marca);
}
.jv-calendario__marca--realizado {
	background: var(--cor-sit-realizado-marca);
}
.jv-calendario__marca--regional {
	background: var(--cor-sit-regional-marca);
}

/* ---------------------------------------------------------------------
 * Alternativa em lista: <details> nativo, funciona sem JavaScript em
 * qualquer largura.
 * ------------------------------------------------------------------ */

.jv-calendario__alternativa {
	margin-top: var(--esp-4);
	border-top: 1px solid var(--cor-linha);
	padding-top: var(--esp-3);
}

.jv-calendario__alternativa-resumo {
	cursor: pointer;
	font-weight: var(--peso-destaque);
	font-size: var(--corpo-sm);
	min-height: var(--alvo-minimo);
	display: inline-flex;
	align-items: center;
}

.jv-calendario__lista {
	margin-top: var(--esp-3);
}

.jv-calendario__lista-semana {
	margin-bottom: var(--esp-4);
}

.jv-calendario__lista-semana-titulo {
	margin: 0 0 var(--esp-2);
	font-family: var(--fonte-interface);
	font-size: var(--corpo-sm);
	font-weight: var(--peso-destaque);
	color: var(--cor-tinta-fraca);
}

.jv-calendario__lista-dias {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--esp-3);
}

.jv-calendario__lista-dia {
	border: 1px solid var(--cor-linha);
	border-radius: var(--raio-pequeno);
	padding: var(--esp-2) var(--esp-3);
	background: var(--cor-branco);
}

.jv-calendario__lista-dia-data {
	display: block;
	margin-bottom: var(--esp-1);
	font-weight: var(--peso-destaque);
	font-variant-numeric: tabular-nums;
}

.jv-calendario__lista-eventos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--esp-1);
}

.jv-calendario__lista-eventos .jv-calendario__pastilha {
	white-space: normal;
}

.jv-calendario__lista-eventos .jv-calendario__pastilha-texto {
	white-space: normal;
}

.jv-calendario__lista-vazia {
	color: var(--cor-tinta-fraca);
}

/* ---------------------------------------------------------------------
 * Visão anual: doze miniaturas.
 * ------------------------------------------------------------------ */

.jv-calendario-ano__grade {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: var(--esp-5);
}

.jv-calendario-ano__mes {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.jv-calendario-ano__mes caption {
	text-align: left;
	font-weight: var(--peso-destaque);
	font-size: var(--corpo-sm);
	margin-bottom: var(--esp-1);
}

.jv-calendario-ano__mes th {
	font-size: var(--corpo-xs);
	color: var(--cor-tinta-fraca);
	font-weight: var(--peso-texto);
	text-align: center;
	padding: 2px;
}

.jv-calendario-ano__mes th abbr {
	text-decoration: none;
}

.jv-calendario-ano__dia {
	text-align: center;
	padding: 1px;
}

.jv-calendario-ano__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	min-width: 24px;
	min-height: 24px;
	padding-bottom: 5px;
	margin: 0 auto;
	border-radius: 50%;
	color: var(--cor-tinta);
	text-decoration: none;
	font-size: var(--corpo-xs);
	font-variant-numeric: tabular-nums;
}

.jv-calendario-ano__link:hover {
	background: var(--cor-papel);
}

/* Dia com evento ganha um ponto embaixo do número, como nos calendários de
   celular. Um sublinhado interno não serve: recortado pelo border-radius do
   link, ele vira uma lua crescente.

   O ponto não é o único sinal. O texto só para leitor de tela dentro do
   link já diz "Tem evento", que é o que cumpre a WCAG 1.4.1. */
.jv-calendario-ano__dia--tem-evento .jv-calendario-ano__link {
	font-weight: var(--peso-destaque);
}

.jv-calendario-ano__dia--tem-evento .jv-calendario-ano__link::after {
	content: '';
	position: absolute;
	bottom: 1px;
	left: 50%;
	width: 4px;
	height: 4px;
	margin-left: -2px;
	border-radius: 50%;
	background: var(--cor-serra);
}

/* ---------------------------------------------------------------------
 * Responsivo: abaixo de 700px (--quebra-calendario) a grade vira a lista
 * automaticamente. O <details> some, o conteúdo dele fica sempre visível
 * e sem o resumo, que perde sentido quando não há mais o que alternar.
 * ------------------------------------------------------------------ */

@media (max-width: 699.98px) {
	.jv-calendario__tabela-wrap {
		display: none;
	}

	.jv-calendario__alternativa {
		border-top: 0;
		padding-top: 0;
		margin-top: 0;
	}

	.jv-calendario__alternativa-resumo {
		display: none;
	}

	/* A lista fica visível porque o <details> nasce com `open` e
	   calendario.js não o fecha nesta largura. */
}

/* ---------------------------------------------------------------------
 * prefers-reduced-motion: o componente não anima nada (a navegação troca
 * de mês por link, recarregando a página), então não há o que desligar.
 * A regra global já está em tokens.css.
 * ------------------------------------------------------------------ */