/**
 * Escalação Tática — painel do front-end.
 */

.et-painel-app {
	--et-ui-borda: #e3e6ec;
	--et-ui-borda-fraca: #eef1f6;
	--et-ui-texto: #2b303a;
	--et-ui-suave: #6b7280;
	--et-ui-primaria: #c1121f;

	/*
	 * ─────────────────────────────────────────────────────────────────────
	 * A ESCADA DO ESPAÇO — seis degraus, e nenhum número solto.
	 *
	 * "Tá tudo bagunçado, sem espaçamento, sem alinhamento." A causa é
	 * simples e é minha: cada bloco desta tela nasceu numa conversa
	 * diferente, e cada um escolheu o próprio respiro — 18px aqui, 22 ali,
	 * 2 no título, 8 na lista. Vinte medidas quase iguais não formam ritmo
	 * nenhum; formam ruído.
	 *
	 * Daqui para a frente o espaço entre as coisas sai desta escada. Ela é
	 * curta de propósito: com seis degraus não há como escolher "quase o
	 * mesmo", que é o que faz uma tela parecer torta sem que se saiba
	 * apontar onde.
	 * ─────────────────────────────────────────────────────────────────────
	 */
	--et-r1: 6px;
	--et-r2: 10px;
	--et-r3: 16px;
	--et-r4: 24px;
	--et-r5: 32px;

	/* A medida do texto corrido: linha longa demais faz perder a próxima. */
	--et-medida: 74ch;

	/*
	 * O conteúdo vive em uma coluna de 920px encostada à esquerda; o que
	 * sobra da área de 1280 fica de margem, em branco, à direita.
	 */
	width: 100%;
	max-width: 920px;
	/*
	 * O respiro de cima é do painel, não da página: conforme o tema, o
	 * conteúdo nasce colado no cabeçalho e o primeiro botão fica na beirada.
	 */
	margin: 1.5em 0 1em;
	padding: 0 4px;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--et-ui-texto);
	font-size: 16px;
	line-height: 1.45;
	box-sizing: border-box;
}

/*
 * Dentro da área de 1280×720 o painel encosta na borda esquerda. Quem
 * mede o respiro que o tema dá — e o desconta — é o palco.js: em CSS
 * não há como saber onde o elemento caiu para puxá-lo até ali sem
 * arriscar cortar o conteúdo.
 */

.et-painel-app *,
.et-painel-app *::before,
.et-painel-app *::after {
	box-sizing: border-box;
}

/* Topo */

.et-painel-topo {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding-bottom: 14px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--et-ui-borda);
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * O TÍTULO DA TELA, MENOR.
 *
 * "Diminui o texto lá em cima."
 *
 * Vinte e oito era o tamanho de um título de página, e esta linha não é um
 * título de página: é o nome da tela em que ele já está. No celular ela dividia
 * a fila com o selo do time e o botão de criar, e os três brigavam pela largura
 * — "Capa do pré-jogo" empurrava o selo para a linha de baixo.
 * ───────────────────────────────────────────────────────────────────────────── */
.et-painel-topo h1 {
	flex: 1 1 auto;
	margin: 0;
	font-size: 22px;
	font-weight: 800;
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * O "+ CRIAR NOVO" É O MENOR BOTÃO DA TELA.
 *
 * "Diminui o botão criar novo."
 *
 * Ele tinha o tamanho de todos os outros — 44px de alvo e letra de 17 —, e no
 * celular isso o punha do tamanho do TÍTULO da tela, ao lado dele. Um atalho
 * para uma tela vazia competindo com o nome do lugar onde a pessoa está.
 *
 * `min-height` também, e não só `height`: a regra geral do `.et-botao` planta um
 * piso de 44px, e um `height` menor sozinho não vence um piso — foi por isso que
 * a primeira diminuição não apareceu na tela dele.
 *
 * Os botões de FORMULÁRIO continuam grandes de propósito: "Salvar", "Baixar a
 * capa", "Sim, excluir" são o fim do trabalho, e alvo pequeno ali é onde o erro
 * custa caro.
 * ───────────────────────────────────────────────────────────────────────────── */
/*
 * O `:not(.et-voltar-site)` guarda o cabeçalho da HOME, onde o único botão da
 * linha é o "← Site do arquivo". Ele não é uma ação de criar nada: é a saída, e
 * tem o tamanho e o lugar de uma saída.
 */
.et-painel-topo > .et-botao:not(.et-voltar-site) {
	min-height: 36px;
	height: 36px;
	padding: 0 16px;
	border-radius: 8px;
	font-size: 15px;
	white-space: nowrap;
}

/* Na home não há título: o selo do time fica sozinho, à direita. */
/* O caminho de volta fica ao lado dos Ajustes, antes do selo do time. */
.et-voltar-site {
	margin-right: auto;
	white-space: nowrap;
}

@media (max-width: 480px) {
	.et-voltar-site {
		font-size: 14px;
		padding: 0 12px;
	}
}

.et-painel-topo--home {
	min-height: 34px;
	justify-content: flex-end;
}

/* O time administrado é sempre o último item da linha. */
.et-painel-topo__time {
	order: 99;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 4px 14px 4px 4px;
	border-radius: 999px;
	background: var(--et-ui-primaria);
	color: #fff;

	/* "Diminui o botão lá em cima também": 16 → 13, e o escudo junto. */
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

.et-painel-topo__time img {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: contain;
	background: #fff;
	display: block;
}

/* Sem escudo o selo não precisa do encaixe redondo. */
.et-painel-topo__time:not(:has(img)) {
	padding: 4px 14px;
}

.et-voltar {
	/*
	 * O link de voltar tinha 20px de altura — a altura da letra. No dedo isso
	 * é um alvo que se erra. A área cresce sem o texto crescer.
	 */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--et-ui-suave);
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
}

.et-voltar:hover {
	color: var(--et-ui-primaria);
}

/* Menu */

.et-grupo {
	margin-bottom: 26px;
}

.et-grupo__titulo {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--et-ui-suave);
}

.et-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 12px;
}

.et-card-menu {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 14px 16px;
	border: 1px solid var(--et-ui-borda);
	border-radius: 10px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.12s, transform 0.12s;
}

.et-card-menu:hover {
	border-color: var(--et-ui-primaria);
	transform: translateY(-1px);
}

.et-card-menu strong {
	font-size: 15px;
}

.et-card-menu small {
	color: var(--et-ui-suave);
	font-size: 12.5px;
}

/* ---------------------------------------------------------------
   Seções da home: cinco botões grandes preenchendo a área
   --------------------------------------------------------------- */

.et-secoes {
	display: grid;
	/*
	 * `minmax(0, 1fr)` e não `1fr`: item de grid tem piso de min-content, e o
	 * texto mais comprido de uma seção fazia as três colunas somarem mais que
	 * a tela — 17px de rolagem no tablet. O piso zero deixa a coluna encolher.
	 */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 14px;
	min-height: 540px;
	/* Vira régua para o tamanho da letra logo abaixo. */
	container-type: inline-size;
}

/* Jogos é o que mais se usa: ocupa a coluna inteira. */
.et-secao:first-child {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.et-secao {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	padding: 24px 28px;
	border: 1px solid var(--et-ui-borda);
	border-radius: 16px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: border-color 0.12s, background 0.12s, transform 0.12s;
}

.et-secao:hover {
	border-color: var(--et-ui-primaria);
	background: #fffafa;
	transform: translateY(-2px);
}

.et-secao strong {
	/*
	 * O tamanho segue a largura da grade, não um número fixo. Com 34px fixos,
	 * "Campeonatos" media 254px numa coluna de 238 — e vazava por cima da
	 * seção vizinha já no desktop, não só no tablet. O `break-word` é o chão:
	 * mesmo que um rótulo novo seja maior que qualquer palavra de hoje, ele
	 * quebra em vez de furar a caixa.
	 */
	font-size: clamp(20px, 3cqw, 34px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	overflow-wrap: break-word;
}

/*
 * UM TAMANHO DE LETRA SÓ, EM TODOS OS CARTÕES.
 *
 * O primeiro cartão do arquivo tinha letra maior, e o da live, menor: a home
 * mostrava três tamanhos de título, um embaixo do outro, sem que a diferença
 * quisesse dizer nada. O que distingue os cartões é a ALTURA e o lugar —
 * "Jogos" continua ocupando a coluna inteira —, não o corpo da fonte.
 */

.et-secao small {
	color: var(--et-ui-suave);
	font-size: 15px;
}

/* ---------------------------------------------------------------
   A LIVE SÃO ATALHOS, E ATALHO NÃO PRECISA DE MEIA TELA.

   O bloco de baixo é o arquivo: uma estante que se percorre com os olhos,
   onde o cartão grande de Jogos serve de âncora. O de cima é outra coisa —
   três atalhos para quem entrou com a transmissão para começar. Herdando a
   mesma régua, "Criar jogo" virava um retângulo de meia tela com duas
   palavras dentro, e empurrava Notícias e Banners para o rodapé da dobra.
   --------------------------------------------------------------- */

.et-secoes--live {
	min-height: 0;
	grid-auto-rows: auto;
	margin-bottom: 26px;
}

/*
 * O primeiro cartão da live é um cartão como os outros — e a LETRA é a mesma
 * do bloco de baixo.
 *
 * Tinha ficado menor, e o resultado era uma home com dois tamanhos de título:
 * "Notícias" pequeno e "Jogadores" grande, um embaixo do outro, sem que a
 * diferença quisesse dizer nada. O que separa os dois blocos é a ALTURA do
 * cartão, não o tamanho da fonte.
 */
.et-secoes--live .et-secao:first-child {
	grid-column: auto;
	grid-row: auto;
}

/* Sem o palco (celular), os botões param de brigar pela altura. */
@media (max-width: 699px) {
	.et-secoes {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
		min-height: 0;
	}

	.et-secao:first-child {
		grid-column: auto;
		grid-row: auto;
	}

	.et-secao strong {
		font-size: 24px;
	}
}

/* Duas ações na mesma linha da lista: editar e abrir. */
.et-linha__acoes {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-left: auto;
	flex: 0 0 auto;
}

/*
 * As duas classes juntas: `.et-linha__acao` é declarada mais abaixo neste
 * arquivo, com o mesmo peso, e empatado quem manda é a última. As duas ações
 * saíam da mesma cor e liam-se como uma palavra só: "Editar Abrir".
 */
.et-linha__acao.et-linha__acao--leve {
	color: var(--et-ui-suave);
	font-weight: 600;
}

/* ---------------------------------------------------------------
   AS MARCAS: ÍDOLO E FALECIDO

   Um "sim ou não" é uma caixa para marcar, com o rótulo ao lado —
   e não um rótulo em cima de um campo. Na lista, a mesma marca vira
   um selo pequeno junto do nome, para se conferir sem abrir.
   --------------------------------------------------------------- */

/*
 * `flex-direction: row` NÃO É DETALHE AQUI.
 *
 * O `.et-campo` empilha em coluna — e, numa coluna, `align-items: center`
 * centraliza na HORIZONTAL. As duas marcas apareciam no meio do formulário,
 * fora do prumo de todos os outros rótulos, como se fossem de outra tela.
 */
/*
 * As duas classes juntas, e não só a modificadora: `.et-campo` é declarada mais
 * abaixo neste mesmo arquivo, com o mesmo peso — e, empatado, quem manda é a
 * última. A coluna dela voltava a valer, e numa coluna `align-items: center`
 * centraliza na HORIZONTAL: as marcas iam parar no meio do formulário, fora do
 * prumo de todos os outros rótulos.
 */
.et-campo.et-campo--marca {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	align-self: start;
}

.et-marca {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

.et-marca input[type="checkbox"] {
	width: 20px;
	height: 20px;
	accent-color: var(--et-ui-primaria);
	flex: 0 0 auto;
}

/* Nome e marcas na MESMA linha: em coluna, o selo esticava de ponta a ponta. */
.et-linha__titulo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	min-width: 0;
}

.et-marca-selo {
	display: inline-block;
	flex: 0 0 auto;
	padding: 1px 8px;
	border: 1px solid var(--et-ui-borda);
	border-radius: 999px;
	background: #f4f5f7;
	color: var(--et-ui-suave);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: middle;
}

.et-marca-selo--idolo {
	border-color: #f0c36d;
	background: #fff7e6;
	color: #8a5b00;
}

/* Aviso de nome repetido ou parecido, no cadastro. */

.et-parecido {
	margin: 6px 0 0;
	padding: 8px 12px;
	border-radius: 8px;
	background: #fff7e6;
	border: 1px solid #f0c36d;
	color: #6b4e00;
	font-size: 13px;
	line-height: 1.4;
}

.et-parecido--igual {
	background: #fdecec;
	border-color: #f0a3a3;
	color: #8a2020;
	font-weight: 600;
}

.et-parecido a {
	color: inherit;
	font-weight: 700;
}

@media (pointer: coarse) {

	/*
	 * O link do aviso leva a um cadastro que já existe — é o caminho para não
	 * criar o repetido, e é o que se quer que a pessoa clique. Com a altura da
	 * linha de texto, ele é o alvo mais difícil da tela justamente na hora em
	 * que ela mais precisa acertar.
	 */
	.et-parecido a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0 4px;
	}
}

.et-parecido[hidden] {
	display: none;
}

/* ---------------------------------------------------------------
   Filtros das listagens
   --------------------------------------------------------------- */

.et-filtros {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 16px;
}

.et-filtros__campo {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid #c9cdd6;
	border-radius: 10px;
	background: #fff;
	font: inherit;
	font-size: 16px;
	color: inherit;
}

.et-filtros__campo:focus {
	outline: 2px solid var(--et-ui-primaria);
	outline-offset: -1px;
}

.et-letras,
.et-posicoes {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * O ALFABETO INTEIRO EM UMA LINHA SÓ.
 *
 * "Diminui o espaço entre as letras pra elas continuarem na mesma linha."
 *
 * Com 5px de vão e quadradinhos de 34, o "Tudo" mais vinte e seis letras
 * pediam 1042px numa coluna de 880 — e o Z caía sozinho numa segunda linha,
 * que é o que ele estava vendo. Os números daqui são a conta que cabe: 26 de
 * largura, 3 de vão, e sobra folga para a letra que ainda não existe no
 * elenco dele.
 *
 * As posições ficam com o vão de sempre: são sete ou oito, e nunca dobraram.
 * ─────────────────────────────────────────────────────────────────────────────
 */
.et-letras {
	gap: 3px;
}

/* Quadradinhos com a inicial. */
.et-letra {
	min-width: 26px;
	height: 32px;
	padding: 0 5px;
	border: 1px solid var(--et-ui-borda);
	border-radius: 8px;
	background: #fff;
	color: var(--et-ui-texto);
	font: inherit;
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	cursor: pointer;
}

.et-chip {
	height: 34px;
	padding: 0 14px;
	border: 1px solid var(--et-ui-borda);
	border-radius: 999px;
	background: #fff;
	color: var(--et-ui-suave);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.et-letra:hover,
.et-chip:hover {
	border-color: var(--et-ui-primaria);
	color: var(--et-ui-primaria);
}

.et-letra.is-ativa,
.et-chip.is-ativa {
	background: var(--et-ui-primaria);
	border-color: var(--et-ui-primaria);
	color: #fff;
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * O SELO `.et-linha__placar` MORREU AQUI.
 *
 * "Após o jogo acontecer tinha que mudar aqui o placar no título do jogo."
 *
 * Ele era uma etiqueta vermelha ao lado do nome do jogo, e resolvia metade do
 * problema: o NOME continuava sendo o de antes do apito, e o resultado ficava
 * num enfeite que só a lista do painel tinha. Agora o título do jogo é
 * "Náutico 1x0 Botafogo-SP" — no acervo, na busca do site e na lista —, e a
 * etiqueta virava o mesmo número duas vezes na mesma linha.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* Listagens */

/* O flex das linhas venceria o [hidden] do filtro. */
.et-linha[hidden],
.et-vazio[hidden] {
	display: none;
}

/*
 * O CORTE ENTRE O ELENCO E QUEM SAIU.
 *
 * Uma régua com o rótulo em cima dela, e não um título solto: o que separa
 * dois grupos numa lista precisa parecer uma divisa. O espaço em cima é maior
 * do que o de baixo de propósito — assim o rótulo pertence à lista que vem
 * DEPOIS dele, e não ao último nome de quem ficou.
 */
.et-lista-corte {
	margin: 26px 0 4px;
	padding-top: 14px;
	border-top: 1px solid var(--et-ui-borda, #e2e6ec);
	color: var(--et-ui-suave, #5b6472);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.et-lista-corte[hidden] {
	display: none;
}

/* Quem saiu continua legível, e um pouco mais apagado do que o elenco. */
.et-linha--fora .et-linha__img,
.et-linha--fora .et-linha__titulo {
	opacity: .78;
}

/* Linha do acervo que não é minha: existe, mas não se edita. */
.et-linha--acervo {
	background: #fbfcfd;
	border-style: dashed;
}

.et-linha--acervo .et-linha__acao {
	color: var(--et-ui-suave);
	font-weight: 600;
}

/* A troca do time do site: uma porta discreta, e só para quem administra. */
.et-linha__acao--fraca {
	color: var(--et-ui-suave, #5b6472);
	font-weight: 600;
}

.et-linha__acao--fraca:hover {
	color: var(--et-ui-primaria, #c1121f);
}

.et-selo-meu {
	flex: 0 0 auto;
	padding: 6px 14px;
	border-radius: 999px;
	background: #eef7ee;
	color: #1e7a37;
	font-size: 13px;
	font-weight: 800;
	white-space: nowrap;
}

.et-linha .et-botao--leve {
	flex: 0 0 auto;
	padding: 8px 16px;
	font-size: 14px;
	white-space: nowrap;
}

.et-lista-cards {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/*
 * AS LINHAS DA LISTA RESPIRAM.
 *
 * A `.et-lista` não tinha espaçamento nenhum: os cartões ficavam encostados, e
 * o que separava um jogo do outro era a linha de 1px da borda. Numa lista de
 * quarenta jogos, isso vira uma parede — e o dedo, no celular, não sabe onde
 * termina um alvo e começa o outro.
 */
.et-lista {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.et-linha {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	border: 1px solid var(--et-ui-borda);
	border-radius: 10px;
	background: #fff;
	color: inherit;
	text-decoration: none;
}

a.et-linha:hover {
	border-color: var(--et-ui-primaria);
}

.et-linha__img {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 8px;
	overflow: hidden;
	background: #eef0f4;
	display: flex;
	align-items: center;
	justify-content: center;
}

.et-linha__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.et-linha__nome {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	font-weight: 600;
}

.et-linha__nome small {
	font-weight: 400;
	color: var(--et-ui-suave);
	font-size: 12.5px;
}

.et-linha__acao {
	color: var(--et-ui-primaria);
	font-size: 13px;
	font-weight: 700;
}

.et-linha__botoes {
	display: flex;
	/*
	 * Três botões numa linha de jogo (Pré-jogo, Pós-jogo, Editar) não cabem
	 * num celular de 320px. Sem quebrar, o terceiro sai pela direita e leva a
	 * página junto.
	 */
	flex-wrap: wrap;
	gap: 8px;
	flex: 0 0 auto;
}

.et-vazio {
	padding: 24px;
	text-align: center;
	color: var(--et-ui-suave);
	border: 1px dashed var(--et-ui-borda);
	border-radius: 10px;
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * O QUE VEM DEPOIS DE UMA LISTA, E NÃO É A LISTA.
 *
 * "Separa as projeções do filtro de pesquisa."
 *
 * O formulário de criar projeção tem a mesma moldura branca dos cartões da
 * lista, e vinha logo abaixo do último com o mesmo vão de 10px que separa um
 * cartão do outro. Na tela ele virava o terceiro item da lista — e, com campos
 * chamados "Nome", "Campeonato" e "Temporada", parecia um filtro de busca das
 * projeções de cima.
 *
 * O vão entre COISAS DIFERENTES tem de ser maior do que o vão entre itens da
 * mesma coisa. O fio por cima é o que diz, sem palavra nenhuma, que a lista
 * acabou ali.
 * ─────────────────────────────────────────────────────────────────────────────
 */
.et-apartado {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--et-ui-borda);
}

/*
 * O TÍTULO DO FORMULÁRIO. Ele atravessa a grade inteira pela regra de baixo
 * (`.et-form > h2`), então aqui só se cuida do tamanho: menor que o título da
 * tela, maior que um rótulo de campo — é um bloco dentro da página, e não outra
 * página.
 */
.et-form__titulo {
	margin: 0;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.2;
}

/* Formulários */

.et-form {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	/*
	 * O TOPO É A LINHA DE BASE dos campos: com o alinhamento esticado, um
	 * campo com dica embaixo esticava o vizinho sem dica, e dois campos da
	 * mesma linha ficavam com alturas diferentes pelo mesmo motivo.
	 */
	align-items: start;
	gap: var(--et-r3, 16px);
	padding: var(--et-r4, 24px);
	border: 1px solid var(--et-ui-borda);
	border-radius: 12px;
	background: #fff;
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * TÍTULO E EXPLICAÇÃO ATRAVESSAM O FORMULÁRIO INTEIRO.
 *
 * O formulário é uma grade de colunas para os CAMPOS. Um título ou um parágrafo
 * solto dentro dela virava mais uma coluna: o título na primeira, os campos na
 * segunda, a explicação na terceira — três blocos lado a lado que deviam estar
 * um embaixo do outro. É a causa da maior parte da bagunça das telas com
 * formulário, e não dava para ver lendo o HTML: só montado.
 * ─────────────────────────────────────────────────────────────────────────────
 */
.et-form > h2,
.et-form > h3,
.et-form > h4,
.et-form > p,
.et-form > hr,
.et-form > ul,
.et-form > ol,
.et-form > table,
.et-form > .et-dica,
.et-form > .et-aviso,
.et-form > .et-marca,
.et-form > .et-form__acoes,
.et-form > .et-linha-campos,
.et-form > .et-importar__bloco,
.et-form > details,
.et-form > fieldset {
	grid-column: 1 / -1;
}

.et-form--wizard {
	display: block;
}

.et-campo {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.et-campo__rotulo {
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--et-ui-suave);
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * O RÓTULO DE DUAS LINHAS NÃO PODE DESALINHAR A LINHA INTEIRA.
 *
 * "Nome curto (aparece no card da transmissão)" ocupa duas linhas; os vizinhos,
 * uma. O campo dele nascia um degrau abaixo dos outros dois, e a linha do
 * formulário ficava com três alturas diferentes — o tipo de coisa que a gente
 * não sabe apontar, mas vê como bagunça.
 *
 * Reservar a altura de duas linhas para todo rótulo da grade custa um respiro a
 * mais e paga com uma régua: todos os campos de uma linha começam juntos.
 * ─────────────────────────────────────────────────────────────────────────────
 */
.et-form:not(.et-form--wizard) > .et-campo > .et-campo__rotulo {
	display: flex;
	align-items: flex-end;
	min-height: 2.6em;
}

.et-painel-app input[type="text"],
.et-painel-app input[type="number"],
.et-painel-app input[type="datetime-local"],
.et-painel-app input[type="file"],
/* Senha, e-mail e busca não estavam nesta lista: o campo mais importante da
   tela de entrar era o único sem a moldura dos outros. */
.et-painel-app input[type="password"],
.et-painel-app input[type="email"],
.et-painel-app input[type="search"],
.et-painel-app input[type="url"],
.et-painel-app select,
/* O texto da notícia escrita no painel: sem isto ele era o único campo da
   tela sem moldura, com a fonte do navegador. */
.et-painel-app textarea {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #c9cdd6;
	border-radius: 8px;
	background: #fff;
	font: inherit;
	color: inherit;
}

.et-painel-app input[type="color"] {
	width: 56px;
	height: 38px;
	padding: 2px;
	border: 1px solid #c9cdd6;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
}

.et-campo__imagem {
	display: flex;
	align-items: center;
	gap: 10px;
}

.et-campo__remover {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	font-size: 12.5px;
	color: var(--et-ui-suave);
}

.et-campo__imagem img {
	width: 46px;
	height: 46px;
	object-fit: cover;
	border-radius: 8px;
}

.et-form__acoes {
	grid-column: 1 / -1;
	display: flex;
	/*
	 * Sem quebra, dois botões largos ("Salvar" + "Testar conexão") empurram a
	 * página inteira para o lado no celular: 99px de rolagem horizontal num
	 * aparelho de 320. Quebrar é o certo em qualquer largura.
	 */
	flex-wrap: wrap;
	gap: 10px;
	padding-top: 6px;
}

.et-botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44px é o alvo de toque confortável; no desktop o padding já dá mais. */
	min-height: 44px;
	max-width: 100%;
	padding: 13px 26px;
	border: 0;
	border-radius: 10px;
	background: var(--et-ui-primaria);
	color: #fff;
	font: inherit;
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.et-botao:hover {
	filter: brightness(0.94);
	color: #fff;
}

/*
 * A COR DO TEXTO DO BOTÃO, com peso suficiente para ganhar do tema.
 *
 * `.et-botao` é uma classe (0,1,0). O tema do acervo pinta os links com algo
 * como `.entry-content a { color: vinho }` (0,2,0) — e ganha. Resultado: o
 * "+ Criar novo" ficou vinho sobre vinho, ilegível, e só nas páginas do tema
 * do acervo, que é por onde o painel passou a ser aberto.
 *
 * `.et-painel-app a.et-botao` é (0,2,1) e resolve sem `!important` — que
 * ganharia de tudo, inclusive de quem tiver um bom motivo para intervir.
 */
.et-painel-app a.et-botao,
.et-painel-app button.et-botao {
	color: #fff;
}

.et-painel-app a.et-botao--leve,
.et-painel-app button.et-botao--leve {
	color: var(--et-ui-texto);
}

.et-painel-app a.et-botao--leve:hover,
.et-painel-app button.et-botao--leve:hover {
	color: var(--et-ui-primaria);
}

.et-painel-app a.et-botao--perigo,
.et-painel-app button.et-botao--perigo {
	color: #a32020;
}

.et-painel-app a.et-botao--perigo:hover,
.et-painel-app button.et-botao--perigo:hover {
	color: #fff;
}

.et-botao--leve {
	background: #fff;
	border: 1px solid #c9cdd6;
	color: var(--et-ui-texto);
}

.et-botao--leve:hover {
	border-color: var(--et-ui-primaria);
	color: var(--et-ui-primaria);
}

/*
 * Excluir
 *
 * O botão que abre a confirmação é vazado, não sólido: sólido ele competiria
 * com o "Salvar" logo acima, e o olho escolhe pelo peso antes de ler.
 */
.et-botao--perigo {
	background: #fff;
	border: 1px solid #d98b8b;
	color: #a32020;
}

.et-botao--perigo:hover {
	background: #a32020;
	border-color: #a32020;
	color: #fff;
}

.et-excluir {
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid var(--et-ui-borda);
}

.et-excluir__caixa {
	border: 1px solid #e6b9b9;
	border-left: 4px solid #a32020;
	border-radius: 6px;
	background: #fdf6f6;
	padding: 14px 16px;
}

.et-excluir__titulo {
	margin: 0 0 8px;
	font-size: 17px;
}

.et-excluir__uso,
.et-excluir__nota {
	margin: 0 0 8px;
	font-size: 14px;
	color: var(--et-ui-suave);
}

.et-excluir__uso--atencao {
	color: #a32020;
}

.et-excluir__form {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 12px;
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * A CAIXINHA DE RENOMEAR
 *
 * Mesma forma da de excluir — ela nasce no mesmo lugar, logo abaixo do cartão,
 * e as duas precisam ser lidas como "isto pertence à linha de cima". O que muda
 * é a cor: excluir é vermelho porque apaga; renomear é neutro porque não perde
 * nada. Pintar as duas de vermelho ensinaria o dedo a ignorar o vermelho.
 * ─────────────────────────────────────────────────────────────────────────────
 */
.et-renomear__caixa {
	border: 1px solid var(--et-ui-borda);
	border-left: 4px solid var(--et-ui-suave);
	border-radius: 6px;
	background: #fbfcfd;
	padding: 14px 16px;
}

/*
 * O CAMPO E OS BOTÕES NA MESMA LINHA, enquanto couberem.
 *
 * `flex-wrap` porque no celular o campo sozinho já toma a largura toda: sem
 * quebra, "Salvar o nome" ficaria espremido em duas letras por linha. E o campo
 * cresce (`flex: 1 1 220px`) porque nome de projeção é frase, e não sigla.
 */
.et-renomear__forma {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: flex-end;
}

.et-renomear__campo {
	flex: 1 1 220px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.et-renomear__campo input {
	width: 100%;
}

.et-renomear__acoes {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

/* Passo a passo */

.et-passos {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.et-passo {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.et-passo__n {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--et-ui-primaria);
	color: #fff;
	font-weight: 800;
	font-size: 14px;
}

.et-passo__corpo {
	flex: 1 1 auto;
	min-width: 0;
}

.et-passo__corpo h3 {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 700;
}

.et-passo__corpo select,
.et-passo__corpo input {
	max-width: 380px;
}

.et-opcoes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.et-opcao {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 8px 16px;
	border: 1px solid #c9cdd6;
	border-radius: 999px;
	cursor: pointer;
	font-weight: 600;
}

.et-opcao:has(input:checked) {
	border-color: var(--et-ui-primaria);
	background: #fdf2f3;
	color: var(--et-ui-primaria);
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * A EXPLICAÇÃO TEM MEDIDA — e não a largura da tela.
 *
 * Num monitor largo, estas frases esticavam até 900px. A cada quebra o olho
 * precisa achar o começo da linha seguinte, e numa linha dessas ele erra: lê a
 * mesma frase duas vezes ou pula uma. É por isso que jornal tem coluna.
 * ─────────────────────────────────────────────────────────────────────────────
 */
.et-dica {
	color: var(--et-ui-suave);
	font-size: 13px;
	line-height: 1.5;
	max-width: var(--et-medida, 74ch);
	margin: var(--et-r1, 6px) 0 0;
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * A LINHA DE CAMPOS ALINHA PELO PÉ.
 *
 * Esticados, um campo com dica embaixo puxava a altura do vizinho, e um botão
 * ao lado de dois campos virava um bloco alto do tamanho dos dois. Alinhados
 * pelo pé, todos os campos de uma linha terminam na mesma altura — que é como
 * se lê uma linha de formulário.
 * ─────────────────────────────────────────────────────────────────────────────
 */
.et-linha-campos {
	display: flex;
	align-items: flex-end;
	gap: var(--et-r2, 10px) var(--et-r3, 16px);
	margin-top: var(--et-r3, 16px);
	flex-wrap: wrap;
}

.et-linha-campos .et-campo {
	flex: 1 1 150px;
	max-width: 200px;
}

/* Avisos */

.et-aviso {
	padding: 12px 16px;
	border-radius: 10px;
	margin-bottom: 18px;
	font-weight: 600;
}

.et-aviso--ok {
	background: #eef7ee;
	color: #1e7a37;
}

.et-aviso--erro {
	background: #fdecec;
	color: #b32d2e;
}

.et-aviso--info {
	background: #eef4fd;
	color: #1d4ed8;
}

/* Aviso fora do painel (sem login, sem permissão) */

.et-front-aviso {
	max-width: 640px;
	margin: 2em auto;
	padding: 16px 18px;
	background: #fff7e6;
	border: 1px solid #f0c36d;
	border-radius: 10px;
	color: #6b4e00;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------------------------------------------------------------
   Teste de conexão com a API
   --------------------------------------------------------------- */

/*
 * Quando o card não mostra a tabela, o que resolve é ver a resposta
 * crua: código HTTP, mensagem e quantos campeonatos vieram. Por isso
 * este bloco é seco, quase um recibo.
 */
.et-teste-api {
	margin-top: 22px;
	padding: 16px 18px;
	border: 1px solid #e3e7ee;
	border-radius: 10px;
	background: #f8fafc;
}

.et-teste-api .et-grupo__titulo {
	margin-top: 0;
}

.et-teste-api__lista {
	margin: 10px 0 0;
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 16px;
	row-gap: 8px;
	align-items: baseline;
}

.et-teste-api__lista dt {
	margin: 0;
	color: #6b7280;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

.et-teste-api__lista dd {
	margin: 0;
	min-width: 0;
	font-weight: 700;
	word-break: break-word;
}

.et-teste-api__lista dd small {
	display: block;
	color: #6b7280;
	font-weight: 600;
}

.et-teste-api code {
	font-size: 13px;
	font-weight: 600;
	color: #3b414b;
	background: #eef1f5;
	padding: 2px 6px;
	border-radius: 5px;
}

.et-teste-api__camp {
	margin: 18px 0 8px;
	font-size: 15px;
	font-weight: 800;
	color: #21252c;
}

.et-teste-api__camp code {
	margin-left: 8px;
	font-weight: 600;
}

.et-teste-api__tabela {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	table-layout: fixed;
}

.et-teste-api__tabela th,
.et-teste-api__tabela td {
	padding: 6px 8px;
	border-bottom: 1px solid #e6eaf0;
	text-align: left;
	vertical-align: top;
	word-break: break-word;
}

.et-teste-api__tabela th {
	width: 158px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #3b414b;
}

.et-teste-api__tabela td:nth-child( 2 ) {
	width: 52px;
	font-variant-numeric: tabular-nums;
}

.et-teste-api__tabela td:nth-child( 3 ) {
	width: 78px;
	font-variant-numeric: tabular-nums;
}

/* Verde para o que respondeu; vermelho para o que veio vazio. */
.et-teste-api__tabela .is-ok th {
	color: #1f7a45;
}

.et-teste-api__tabela .is-falha th {
	color: var(--et-primaria, #c1121f);
}

/* Campos empilhados no formulário de ajustes precisam de respiro. */
.et-form--wizard .et-campo + .et-campo {
	margin-top: 16px;
}

/* ---------------------------------------------------------------
   CELULAR
   ---------------------------------------------------------------

   Um bloco só, no fim, para o que muda por causa do DEDO e da LARGURA —
   e não por gosto. Cada regra aqui nasceu de uma medição em tela de 320,
   390, 430 e 844 de largura (painel_movel.py), não de palpite.

   Duas coisas mandam:

   1. ALVO DE TOQUE. Abaixo de 44px o dedo erra. Chip de 34px e link de
      20px são confortáveis no mouse e ruins no polegar.

   2. FONTE DE 16px NOS CAMPOS. O Safari do iPhone dá zoom sozinho ao
      focar um campo com fonte menor que 16px — e o zoom não volta.
      Quem vê isso conclui, com razão, que "a tela não encaixa".
   --------------------------------------------------------------- */

@media (max-width: 699px) {

	.et-painel-app {
		padding: 0;
	}

	/* No celular a fila é a mais disputada: o título e o selo encolhem mais. */
	.et-painel-topo h1 {
		font-size: 19px;
	}

	.et-painel-topo__time {
		font-size: 12px;
		padding: 3px 11px 3px 3px;
	}

	.et-painel-topo__time img {
		width: 20px;
		height: 20px;
	}

	/*
	 * O BOTÃO DO TOPO TAMBÉM ENCOLHE — e só o do topo.
	 *
	 * "Diminui o botão lá em cima também."
	 *
	 * O "+ Criar novo" ocupava metade da largura do celular ao lado de um
	 * título grande. Os botões de FORMULÁRIO continuam do tamanho que estão:
	 * "Salvar" e "Baixar a capa" são o fim do trabalho, e alvo de dedo pequeno
	 * ali é onde o erro custa caro.
	 */
	/*
	 * ─────────────────────────────────────────────────────────────────────
	 * NO CELULAR ELE DESCE E OCUPA A LINHA INTEIRA.
	 *
	 * "Coloca o botão criar novo ocupando toda a linha de baixo. Sempre, em
	 *  todas as páginas que tiverem um botão de criar novo."
	 *
	 * Encolher resolveu o tamanho e não resolveu a FILA: quatro peças
	 * disputando 390px continuavam empurrando o ☰ para uma segunda linha
	 * sozinho, e o botão ficava espremido entre o título e o selo do time.
	 *
	 * Descendo, cada linha tem um assunto: em cima, onde estou (voltar, nome
	 * da tela, time, menu); embaixo, a única ação da tela. E aí ele pode ser
	 * grande de novo — 40px de alvo na largura inteira, que é o formato mais
	 * fácil de acertar com o polegar.
	 *
	 * `order: 101` põe ele depois do menu (100) e do selo (99): sem isso ele
	 * abriria uma linha ANTES deles, e os dois é que desceriam.
	 * ─────────────────────────────────────────────────────────────────────
	 */
	.et-painel-topo > .et-botao:not(.et-voltar-site) {
		order: 101;
		flex: 1 0 100%;
		width: 100%;
		max-width: none;
		min-height: 40px;
		height: 40px;
		padding: 0 16px;
		font-size: 15px;
	}

	/*
	 * Botão ocupa a linha. Dois botões lado a lado em 320px sobra um deles
	 * pela metade — e o segundo costuma ser o que importa ("Testar conexão",
	 * "Sim, excluir").
	 */
	.et-form__acoes .et-botao,
	.et-excluir__form .et-botao {
		flex: 1 1 100%;
	}

	/* A tabela de posições do formulário não pode esticar a página. */
	.et-form {
		grid-template-columns: 1fr;
	}

	/*
	 * A linha de jogo tem nome + botões. Em 320px os três botões não cabem ao
	 * lado do nome: a faixa deles desce para a própria linha e ocupa a
	 * largura toda, em vez de empurrar a página para fora.
	 */
	.et-linha {
		flex-wrap: wrap;
	}

	.et-linha__botoes {
		flex: 1 1 100%;
		min-width: 0;
	}

	.et-linha--jogo .et-linha__botoes .et-botao {
		flex: 1 1 auto;
	}
}

/* ---------------------------------------------------------------
   DEDO
   ---------------------------------------------------------------

   Estas não são regras de LARGURA, são regras de PONTEIRO — e é por isso
   que não moram no bloco de cima. Celular deitado tem 844px de largura e
   continua sendo dedo; tablet tem 768 e é dedo. Amarrar tamanho de alvo à
   largura da tela deixava os dois de fora, e foi exatamente o que a
   medição mostrou.
   --------------------------------------------------------------- */

@media (pointer: coarse) {

	/* Filtros: quadradinho e chip viram alvo de dedo. */
	.et-letra {
		min-width: 40px;
		height: 40px;
	}

	.et-chip {
		height: 40px;
		padding: 0 16px;
		font-size: 14px;
	}

	/*
	 * Campos: 16px é o piso que evita o zoom automático do Safari no iPhone
	 * — ele amplia sozinho ao focar um campo menor que isso, e não volta.
	 * 44px de altura é o alvo. Vale inclusive para os campos que o navegador
	 * desenha sozinho (select, date, color).
	 */
	.et-painel-app input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
	.et-painel-app select,
	.et-painel-app textarea {
		min-height: 44px;
		font-size: 16px;
		max-width: 100%;
	}
}

@media (pointer: coarse) {

	/*
	 * No rádio quem recebe o toque é o RÓTULO, não o bolinha de 13px que o
	 * navegador desenha. Dar altura ao rótulo é o que transforma "Mandante"
	 * e "Visitante" em alvos que o polegar acerta.
	 */
	.et-opcao {
		min-height: 44px;
		padding: 0 4px;
	}
}

/* ── A live de notícias, escolhida de dentro do painel ─────────────────── */

.et-noticias-arranjos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.et-noticias-arranjo {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border: 1px solid var(--et-ui-borda);
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	min-width: 0;
}

/*
 * O rótulo inteiro acende, e não só a bolinha. Num painel operado com a live
 * no ar, o que responde a pergunta "qual está valendo?" é a cor do bloco —
 * uma bolinha de 13px não responde de relance.
 */
.et-noticias-arranjo:has(input:checked) {
	border-color: var(--et-primaria, #c1121f);
	box-shadow: inset 0 0 0 1px var(--et-primaria, #c1121f);
}

.et-noticias-arranjo__n {
	font-size: 18px;
	font-weight: 800;
	line-height: 1;
}

.et-noticias-arranjo__forma {
	font-size: 12.5px;
	color: var(--et-ui-suave);
	white-space: nowrap;
}

/*
 * A mesma lista de escolher serve para as notícias e para o elenco vindo do
 * arquivo. Um desenho só, para as duas não divergirem com o tempo.
 */
.et-escolha,
/* -----------------------------------------------------------------------------
   ESCREVER UMA NOTÍCIA NO PAINEL

   Fechado, é uma linha; aberto, é um formulário. A moldura existe para separar
   "escrever" de "escolher o que vai ao ar" — são dois trabalhos na mesma tela,
   e sem a divisão o botão de publicar fica ao lado do de salvar a escolha.
   ----------------------------------------------------------------------------- */

.et-noticia-nova {
	margin: 0 0 18px;
	border: 1px solid #d7dbe3;
	border-radius: 12px;
	background: #fff;
}

.et-noticia-nova__abrir {
	padding: 12px 14px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

/* A setinha do <details> como o resto do painel a desenharia. */
.et-noticia-nova__abrir::-webkit-details-marker {
	display: none;
}

.et-noticia-nova__abrir::before {
	content: "+";
	display: inline-block;
	width: 1.1em;
	font-weight: 700;
	color: var(--et-ui-suave);
}

.et-noticia-nova[open] .et-noticia-nova__abrir::before {
	content: "−";
}

/*
 * O RESPIRO DENTRO DA CAIXA.
 *
 * O formulário começava colado na barra de "Escrever uma notícia agora": o
 * rótulo "Título" nascia encostado nela, e o campo parecia parte do cabeçalho.
 * O recuo lateral também aumentou, para o conteúdo ficar visivelmente DENTRO
 * da caixa, e não do tamanho dela.
 */
.et-noticia-nova .et-form {
	padding: 18px 18px 18px;
	margin-top: 4px;
	border-top: 1px solid var(--et-ui-borda, #d7dbe3);
}

.et-noticia-nova .et-campo:first-of-type {
	margin-top: 2px;
}

.et-noticia-nova textarea {
	min-height: 140px;
	resize: vertical;
}

.et-noticias-escolha {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

.et-escolha__item,
.et-noticias-item {
	display: grid;
	/* Caixa, miniatura, texto — e o texto é quem encolhe. */
	grid-template-columns: auto auto minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	padding: 6px 10px;
	border: 1px solid var(--et-ui-borda);
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	min-width: 0;
}

.et-noticias-item--no-ar,
.et-noticias-item:has(input:checked) {
	border-color: var(--et-primaria, #c1121f);
	background: color-mix(in srgb, var(--et-primaria, #c1121f) 6%, #fff);
}

/*
 * Desmarcar tem que APAGAR o destaque na hora. A classe vem do servidor e
 * marca o que estava no ar quando a tela abriu; sem esta regra ela continuaria
 * acesa depois de desmarcar, e a tela mentiria sobre o que vai ao ar.
 */
.et-noticias-item--no-ar:not(:has(input:checked)) {
	border-color: var(--et-ui-borda);
	background: #fff;
}

.et-escolha__foto,
.et-noticias-item__foto {
	display: block;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	overflow: hidden;
	background: #eceef2;
	flex: 0 0 auto;
}

.et-escolha__foto img,
.et-noticias-item__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.et-escolha__texto,
.et-noticias-item__texto {
	display: block;
	min-width: 0;
}

.et-escolha__texto strong,
.et-noticias-item__texto strong {
	display: block;
	font-size: 14px;
	line-height: 1.25;
	/* Duas linhas bastam para reconhecer a matéria; mais vira parágrafo. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.et-escolha__texto small,
.et-noticias-item__texto small {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--et-ui-suave);
}

@media (pointer: coarse) {

	/* O alvo do dedo é a linha inteira, não a caixinha de 13px. */
	.et-escolha__item,
	.et-noticias-item,
	.et-noticias-arranjo {
		min-height: 56px;
	}
}

/* ── O atalho para o palco ─────────────────────────────────────────────── */

.et-palco-atalho {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	padding: 12px 14px;
	border: 1px solid var(--et-ui-borda);
	border-radius: 12px;
	background: #fff;
}

.et-palco-atalho .et-dica {
	/*
	 * A dica encolhe; o botão, não. Sem este par, num celular de 320px a frase
	 * empurra o botão para fora da borda direita.
	 */
	flex: 1 1 220px;
	min-width: 0;
	margin: 0;
}

.et-palco-atalho__criar {
	margin: 0;
	/*
	 * Encolhe junto com a tela. Fixo, "Criar a página de notícias" passava da
	 * borda direita num celular de 320px e levava a página junto.
	 */
	flex: 1 1 auto;
	min-width: 0;
}

.et-palco-atalho .et-botao {
	max-width: 100%;
	white-space: normal;
	text-align: center;
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * O BOTÃO DE ENTRAR NO AR OCUPA A LINHA INTEIRA.
 *
 * "Aumenta esse botão de entrar na página de notícias, deixa ele ocupando 100%
 *  da largura."
 *
 * Ele é a porta do que vai ao ar, e era um retângulo de meia linha com uma
 * legenda cinza ao lado ocupando a outra metade. A legenda saiu com as
 * explicações; o botão fica com a linha toda, que é o formato mais fácil de
 * acertar com o polegar segundos antes de entrar na transmissão.
 *
 * Vale para os dois programas — notícias e projeção —, que compartilham este
 * bloco.
 * ───────────────────────────────────────────────────────────────────────────── */
.et-palco-atalho__ir,
.et-palco-atalho__criar,
.et-palco-atalho__criar .et-botao {
	flex: 1 0 100%;
	width: 100%;
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * A LISTA E A CRIAÇÃO DIVIDEM A LINHA DE BAIXO.
 *
 * "Um de ir pra projeção, um de ver todas as projeções e um de criar uma
 *  projeção nova."
 *
 * `flex: 1 1 0` nos dois: partem de largura zero e dividem a linha em partes
 * iguais, em vez de cada um herdar a largura do próprio texto — "Todas as
 * projeções (1)" é bem mais curto que "Criar uma projeção", e com `auto` a
 * linha sairia torta.
 *
 * Abaixo de 380px eles empilham: dois alvos de 90px lado a lado é onde o dedo
 * erra de porta.
 * ───────────────────────────────────────────────────────────────────────────── */
.et-palco-atalho__mais {
	display: flex;
	flex: 1 0 100%;
	flex-wrap: wrap;
	gap: 10px;
}

.et-palco-atalho__mais .et-botao {
	flex: 1 1 140px;
	gap: 8px;
	min-height: 40px;
	padding: 8px 14px;
	font-size: 15px;
}

.et-palco-atalho code {
	padding: 1px 5px;
	border-radius: 5px;
	background: #eceef2;
	font-size: 0.92em;
	/* Endereço longo quebra em vez de esticar a caixa. */
	overflow-wrap: anywhere;
}

/* ── O nome como link ──────────────────────────────────────────────────── */

/*
 * A linha deixou de ser um `<a>` — link dentro de link o navegador desmonta.
 * Quem abre o cadastro agora é o nome, e ele ocupa o vão inteiro da linha
 * justamente para continuar sendo um alvo grande, no mouse e no dedo.
 */
.et-linha__nome--abre {
	color: inherit;
	text-decoration: none;
	align-self: stretch;
	justify-content: center;
	min-height: 34px;
}

.et-linha__nome--abre:hover,
.et-linha__nome--abre:focus-visible {
	color: var(--et-ui-primaria);
}

a.et-linha__acao {
	text-decoration: none;
}

@media (pointer: coarse) {

	/*
	 * "Editar" virou link de verdade, e link de verdade precisa de alvo de
	 * dedo. Dezenove pixels de altura é o que a palavra ocupa sozinha — e o
	 * dedo erra.
	 */
	a.et-linha__acao {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0 4px;
	}
}

@media (pointer: coarse) {

	.et-linha__nome--abre {
		min-height: 44px;
	}
}

/* Quem já está no elenco fica visível e fora do alcance. */
.et-escolha__item--ja {
	opacity: 0.55;
	cursor: default;
}

/* ── Os títulos dos blocos da home ─────────────────────────────────────── */

.et-secoes__titulo {
	margin: 18px 0 8px;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--et-ui-suave);
}

.et-secoes__titulo:first-of-type {
	margin-top: 6px;
}

/*
 * Link dentro de uma dica também é alvo de dedo. Eles ficavam com 15px de
 * altura — um terço do mínimo — e são justamente os que levam aos Ajustes,
 * onde se resolve o que a dica está explicando.
 */
.et-painel-app .et-dica a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
}

/* ---------------------------------------------------------------
   O MENU DA CONTA, NO TOPO

   Um `<details>`: abre no clique e no teclado sem script. Fechado é
   `display: none` de verdade — o navegador esconde o conteúdo com
   `content-visibility`, que não pinta mas ainda MEDE, e o menu
   continuaria ocupando um retângulo fora da tela.
   --------------------------------------------------------------- */

.et-menu {
	position: relative;
	order: 100;
	flex: 0 0 auto;
}

.et-menu__botao {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--et-ui-borda);
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	list-style: none;
}

.et-menu__botao::-webkit-details-marker,
.et-menu__botao::marker {
	display: none;
	content: "";
}

.et-menu[open] .et-menu__botao,
.et-menu__botao:hover {
	border-color: var(--et-ui-primaria);
}

/* Os três traços. */
.et-menu__risco,
.et-menu__risco::before,
.et-menu__risco::after {
	display: block;
	width: 18px;
	height: 2px;
	background: var(--et-ui-texto, #16181d);
	border-radius: 2px;
}

.et-menu__risco {
	position: relative;
}

.et-menu__risco::before,
.et-menu__risco::after {
	content: "";
	position: absolute;
	left: 0;
}

.et-menu__risco::before { top: -6px; }
.et-menu__risco::after  { top: 6px; }

.et-menu:not([open]) .et-menu__caixa {
	display: none;
}

.et-menu__caixa {
	position: absolute;
	right: 0;
	top: calc(100% + 10px);
	z-index: 60;
	min-width: 220px;
	padding: 8px;
	border: 1px solid var(--et-ui-borda);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 16px 36px rgba(16, 24, 40, 0.16);
}

.et-menu__quem {
	margin: 4px 10px 8px;
	line-height: 1.3;
}

.et-menu__quem strong {
	display: block;
	font-size: 15px;
}

.et-menu__quem small {
	color: var(--et-ui-suave);
	font-size: 13px;
}

.et-menu__caixa a {
	display: flex;
	align-items: center;
	min-height: 40px;
	padding: 0 10px;
	border-radius: 9px;
	color: inherit;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.et-menu__caixa a:hover {
	background: #f4f5f7;
	color: var(--et-ui-primaria);
}

/* No celular o menu não pode passar da borda da tela. */
@media (max-width: 420px) {
	.et-menu__caixa {
		right: -6px;
		min-width: 200px;
	}
}

/* ---------------------------------------------------------------
   ENTRAR E CRIAR CONTA

   A página onde se digita senha é a última que pode parecer de outro
   site: mesma tipografia, mesmas cores e mesmo botão do painel. A caixa
   é estreita de propósito — formulário largo em tela grande faz o olho
   percorrer meio metro entre o rótulo e o campo.
   --------------------------------------------------------------- */

.et-conta {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 6vh 16px 40px;
}

.et-conta__caixa {
	width: 100%;
	max-width: 420px;
	padding: 26px 24px 28px;
	border: 1px solid var(--et-ui-borda);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 18px 40px rgba(16, 24, 40, 0.06);
}

.et-conta__titulo {
	margin: 0 0 4px;
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.et-conta__linha {
	margin: 0 0 18px;
	color: var(--et-ui-suave);
	font-size: 14.5px;
}

/*
 * Dentro da caixa da conta o formulário não desenha caixa nenhuma: uma moldura
 * dentro da outra é o desenho de quem colou dois componentes sem olhar.
 */
.et-conta .et-form {
	display: block;
	padding: 0;
	border: 0;
	background: none;
}

.et-conta .et-campo {
	margin-bottom: 14px;
}

.et-conta .et-form__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
}

/*
 * A tela de editar a conta tem mais campos que a de entrar, e cabe um pouco
 * mais larga — mas não a largura da página: formulário largo faz o olho
 * percorrer meio metro entre o rótulo e o campo.
 */
.et-conta__caixa--larga {
	max-width: 520px;
}

.et-conta__foto {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--et-ui-borda);
}

.et-conta__foto-atual img {
	display: block;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	background: #eef0f4;
}

.et-conta__foto-campo {
	flex: 1 1 0;
	min-width: 0;
}

.et-conta__lembrar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: -4px 0 14px;
	font-size: 14.5px;
	color: var(--et-ui-suave);
}

/*
 * Alvo de dedo nas duas saídas da tela de entrar: o botão e o link de criar
 * conta. Um alvo de 16px é o que faz a pessoa tocar três vezes até acertar.
 */
.et-conta .et-botao {
	min-height: 44px;
}

.et-conta__rodape a,
.et-conta__linha a {
	display: inline-block;
	min-height: 40px;
	line-height: 40px;
}

.et-conta__rodape {
	margin: 18px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--et-ui-borda);
	color: var(--et-ui-suave);
	font-size: 14px;
}

/* Quem está usando, no pé do painel. */
.et-conta-rodape {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 30px;
	padding-top: 16px;
	border-top: 1px solid var(--et-ui-borda);
	color: var(--et-ui-suave);
	font-size: 14px;
}

.et-conta-rodape__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
}

/*
 * Alvo de dedo, e não de mouse: um link de 20px de altura no celular é o que
 * faz a pessoa errar "Sair" e acertar o que estiver ao lado.
 */
.et-conta-rodape__acoes a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 8px;
}

/* Os convites, na tela de contas. */
.et-conta-cartao {
	margin: 0 0 16px;
	padding: 18px 20px;
	border: 1px solid var(--et-ui-borda);
	border-radius: 16px;
	background: #fff;
}

.et-conta-cartao h2 {
	margin: 0 0 4px;
	font-size: 20px;
}

.et-conta-codigo {
	margin: 10px 0 6px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 0.14em;
	word-break: break-all;
}

/*
 * O RÓTULO QUE SÓ O LEITOR DE TELA VÊ.
 *
 * Nas telas do plugin o CSS do tema é tirado da fila — e com ele foi embora a
 * `.screen-reader-text` do WordPress. O rótulo do campo do convite, que devia
 * ser invisível, aparecia escrito na tela.
 */
.et-painel-app .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
	border: 0;
}

/*
 * O link e o botão de copiar andam juntos: separá-los faria o botão parecer
 * de outra coisa. No celular o campo ocupa a linha inteira e o botão desce.
 */
.et-conta-copiar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}

.et-conta-copiar .et-botao {
	flex: 0 0 auto;
	min-height: 40px;
}

/* Copiado: o verde dura dois segundos e some sozinho. */
.et-botao--copiado {
	border-color: #12783e;
	color: #12783e;
}

.et-conta-link {
	flex: 1 1 240px;
	min-width: 0;
	padding: 9px 12px;
	border: 1px solid var(--et-ui-borda);
	border-radius: 10px;
	background: #f7f8fa;
	font-size: 13.5px;
	color: var(--et-ui-suave);
}

/* =============================================================================
   O CAMPINHO EDITÁVEL DO JOGO DO ARQUIVO

   Onze vagas por cima de um gramado. Cada vaga é um botão de verdade — não um
   `div` com clique — porque quem navega por teclado precisa chegar nelas, e
   porque tocar duas vagas para trocar é a mesma coisa que ativar dois botões.
   ============================================================================= */

.et-escalacao-arquivo select {
	margin-bottom: 10px;
}

.et-campinho-editor__campo {
	position: relative;
	width: 100%;
	/* A proporção de um campo visto de cima; sem ela as vagas em % dançam. */
	aspect-ratio: 68 / 105;
	max-height: 62vh;
	margin-inline: auto;
	border-radius: 14px;
	overflow: hidden;
	background: #2f7d43;
	touch-action: manipulation;
}

.et-campinho-editor__campo svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/*
 * A VAGA É CENTRADA NO PONTO, e não pendurada por ele.
 *
 * As coordenadas do esquema dizem onde o jogador ESTÁ. Sem a translação, o
 * ponto viraria o canto superior esquerdo do retrato e o time inteiro
 * apareceria deslocado para baixo e para a direita.
 */
.et-vaga {
	position: absolute;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	width: 62px;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	font: inherit;
	font-size: 11px;
	line-height: 1.2;
	cursor: grab;
}

.et-vaga__foto {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.35);
	border: 2px solid rgba(255, 255, 255, 0.85);
}

.et-vaga__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.et-vaga__pos {
	font-size: 11px;
	font-weight: 700;
}

.et-vaga__nome {
	max-width: 62px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 700;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Vaga vazia: tracejada, para se ver que ali cabe alguém. */
.et-vaga--vazia .et-vaga__foto {
	border-style: dashed;
	border-color: rgba(255, 255, 255, 0.55);
}

/*
 * O ESCOLHIDO PRECISA SALTAR AOS OLHOS.
 *
 * Tocar num jogador e não ver nada mudar é a diferença entre "está esperando
 * o segundo toque" e "não funcionou". O anel branco é o que diz qual foi.
 */
.et-vaga--escolhida .et-vaga__foto {
	border-color: #fff;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.45);
}

.et-campinho-editor__fora {
	margin-top: 12px;
}

.et-campinho-editor__banco {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 6px;
}

.et-fora {
	padding: 7px 12px;
	border: 1px solid var(--et-borda, #d3d8e2);
	border-radius: 999px;
	background: #fff;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: grab;
}

.et-fora.et-vaga--escolhida {
	border-color: var(--et-clube, #c1121f);
	box-shadow: 0 0 0 3px rgba(193, 18, 31, 0.18);
}

/* =============================================================================
   QUEM TEM ACESSO — a lista de contas

   Duas coisas que só aparecem quando a lista tem gente de verdade: as fichas
   ficavam encostadas umas nas outras, e o seletor de função ocupava a largura
   inteira, do tamanho de um botão principal. "Operador de live" virava a coisa
   mais chamativa da tela — mais que o nome da pessoa, que é o assunto ali.
   ============================================================================= */

.et-lista--contas {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/*
 * O SELETOR VOLTA A SER DO TAMANHO DO QUE ESCREVE.
 *
 * A regra geral do painel dá `width: 100%` a todo campo — certo num
 * formulário empilhado, errado numa linha onde ele é um detalhe ao lado do
 * nome. `width: auto` devolve a ele a largura do texto.
 */
.et-lista--contas .et-linha__acao select {
	width: auto;
	max-width: 100%;
	padding: 5px 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--et-ui-primaria);
}

/* Numa lista de contas não há foto: o nome pode começar na borda. */
.et-lista--contas .et-linha {
	padding: 12px 14px;
}

/* =============================================================================
   A LINHA DAS MARCAS, E AS TEMPORADAS NO FIM

   As caixinhas de marcar são respostas de uma palavra: numa grade de três
   colunas, cada uma ocupava uma célula do tamanho de um campo de texto e as
   três se espalhavam por fileiras diferentes, entre nome e cidade. Juntas
   numa linha só, elas se leem como o que são — uma lista curta de sim ou não.
   ============================================================================= */

.et-form__marcas {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/*
	 * O vão largo é o que separa "Aposentado" de "Falecido" quando as duas
	 * caixas ficam lado a lado: com o vão do resto da grade, o rótulo de uma
	 * quase encosta na caixa da outra e dá para marcar a errada.
	 */
	gap: 10px 28px;
	padding: 12px 14px;
	border: 1px solid var(--et-ui-borda);
	border-radius: 10px;
	background: var(--et-ui-papel, #f7f8fa);
}

.et-form__marcas .et-campo {
	flex: 0 0 auto;
}

/*
 * A LISTA DE TEMPORADAS OCUPA A LINHA INTEIRA.
 *
 * Ela é alta — oitenta anos de Náutico —, e numa célula de um terço da grade
 * abria um buraco do lado, com dois campos curtos boiando ao lado de uma
 * lista de dez linhas.
 */
.et-form__temporadas {
	grid-column: 1 / -1;
}

.et-form select[multiple] {
	max-height: 190px;
}

/* =============================================================================
   A PROJEÇÃO, NO PAINEL

   A mesma forma da tela do ar — casa à esquerda, fora à direita, o mais
   provável em cima —, só que cada janela aqui é editável e recebe jogos
   arrastados.

   -----------------------------------------------------------------------------
   O QUE ESTAVA ERRADO ANTES

   Esta grade era filha de `.et-form`, que é uma GRADE DE COLUNAS DE 240px feita
   para fichas de dez campos curtos. A grade da projeção virava um item dentro
   de outra grade e era espremida numa coluna de 240px: as seis janelas
   apareciam empilhadas de lado, com o campo da meta pulando para fora do
   cartão e um cartão por cima do outro.

   Agora o formulário é `--wizard` (um bloco), e a grade tem a largura da tela.
   Dentro do cartão, cada coisa ganhou a sua linha: título e percentual, barra,
   a conta em palavras, o campo da meta, os jogos, e a ação. Nada mais divide
   linha com nada — que era a outra metade da bagunça.
   ============================================================================= */

.et-proj-abas {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 12px;
}

.et-proj-aba {
	padding: 6px 12px;
	border: 1px solid var(--et-ui-borda, #d7dbe3);
	border-radius: 999px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
}

.et-proj-aba.is-ativa {
	border-color: var(--et-ui-marca, #b3122a);
	background: var(--et-ui-marca, #b3122a);
	color: #fff;
}

.et-proj-cabeca {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 0 0 14px;
}

.et-proj-cabeca__nome {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
}

.et-proj-cabeca__conta {
	margin: 0;
	font-size: 13.5px;
	color: var(--et-ui-suave, #5b6472);
}

.et-proj-cabeca__no-ar {
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(18, 120, 62, 0.12);
	color: #12783e;
	font-size: 12px;
	font-weight: 700;
}

/* O formulário da projeção não tem moldura própria: a moldura são os cartões. */
.et-proj-form {
	padding: 0;
	border: 0;
	background: none;
}

/*
 * UMA GRADE DE DUAS COLUNAS, e no celular uma coluna só.
 *
 * A grade é uma só para que os dois cartões de uma linha DIVIDAM A LINHA: numa
 * grade, os itens de uma mesma linha têm a mesma altura, e "Medianos" da
 * esquerda fica na altura de "Medianos" da direita mesmo que um tenha cinco
 * jogos e o outro nenhum. Com uma coluna de cada lado, cada uma empilhava por
 * conta própria e as linhas desandavam.
 */
.et-proj-grade {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 0 0 16px;
}

@media (min-width: 720px) {
	.et-proj-grade {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 14px 16px;
	}
}

.et-proj-coluna__titulo {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--et-ui-suave, #5b6472);
}

/*
 * No celular não há coluna: o título dela seria um rótulo solto sem nada
 * embaixo. Quem diz o mando ali é a linha dentro de cada cartão.
 */
@media (max-width: 719px) {
	.et-proj-coluna__titulo {
		display: none;
	}
}

@media (min-width: 720px) {
	.et-proj-cel__mando {
		display: none;
	}
}

.et-proj-cel__mando {
	color: var(--et-ui-suave, #5b6472);
	font-weight: 700;
}

/* -----------------------------------------------------------------------------
   A JANELA
   ----------------------------------------------------------------------------- */

.et-proj-cel {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	padding: 14px;
	border: 1px solid var(--et-ui-borda, #d7dbe3);
	border-radius: 12px;
	background: #fff;
}

.et-proj-cel--feita {
	border-color: rgba(18, 120, 62, 0.4);
	background: rgba(18, 120, 62, 0.05);
}

.et-proj-cel__topo {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.et-proj-cel__nome {
	font-size: 16px;
	font-weight: 800;
}

.et-proj-cel__pct {
	font-size: 13px;
	font-weight: 700;
	color: var(--et-ui-suave, #5b6472);
	font-variant-numeric: tabular-nums;
}

.et-proj-cel__barra {
	height: 8px;
	border-radius: 999px;
	background: #eef0f4;
	overflow: hidden;
}

.et-proj-cel__barra span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--et-ui-marca, #b3122a);
}

.et-proj-cel--feita .et-proj-cel__barra span {
	background: #12783e;
}

.et-proj-cel__conta {
	margin: 0;
	font-size: 13px;
	color: var(--et-ui-suave, #5b6472);
}

.et-proj-cel__conta strong {
	color: var(--et-ui-tinta, #1d2330);
}

.et-proj-cel__aviso {
	margin: 0;
	font-size: 12px;
	color: #b3122a;
}

/*
 * O CAMPO DA META NA SUA PRÓPRIA LINHA.
 *
 * Ele estava na mesma linha do título, e o título é a única coisa da janela
 * que não tem largura previsível: "Mais prováveis" quebrava em duas linhas e
 * empurrava o campo para fora do cartão. Sozinho, com o rótulo em cima, ele
 * não briga com ninguém por espaço.
 */
.et-proj-cel__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 10px;
	border: 1px solid var(--et-ui-borda, #d7dbe3);
	border-radius: 10px;
	background: #fbfcfd;
}

.et-proj-cel__meta > span {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--et-ui-suave, #5b6472);
}

.et-painel-app .et-proj-cel__meta input[type="number"] {
	width: 84px;
	flex: 0 0 auto;
	padding: 7px 8px;
	border: 1px solid #c9cdd6;
	border-radius: 8px;
	background: #fff;
	font: inherit;
	font-weight: 700;
	text-align: center;
}

.et-proj-cel__ajuste {
	margin: 0;
	font-size: 12px;
	color: #8a5a00;
}

/* -----------------------------------------------------------------------------
   OS JOGOS DA JANELA
   ----------------------------------------------------------------------------- */

.et-proj-cel__jogos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.et-proj-jg {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 6px;
	border-radius: 8px;
	font-size: 13.5px;
	background: transparent;
}

.et-proj-jg:hover {
	background: #f6f7f9;
}

/*
 * A ALÇA.
 *
 * Larga o bastante para o dedo (28px), discreta o bastante para não competir
 * com o nome do adversário. Ela é o ÚNICO lugar por onde se arrasta: o resto
 * da linha é um link para o jogo, e arrastar um link o navegador entende como
 * copiar o endereço.
 */
.et-proj-jg__alca {
	flex: 0 0 auto;
	width: 22px;
	height: 28px;
	padding: 0;
	border: 0;
	background: none;
	color: #aab1bd;
	cursor: grab;
	font-size: 14px;
	line-height: 1;
	touch-action: manipulation;
}

.et-proj-jg__alca:hover {
	color: var(--et-ui-marca, #b3122a);
}

.et-proj-jg.is-pegando {
	background: rgba(179, 18, 42, 0.08);
	outline: 1px dashed var(--et-ui-marca, #b3122a);
}

.et-proj-jg.is-pegando .et-proj-jg__alca {
	color: var(--et-ui-marca, #b3122a);
	cursor: grabbing;
}

/* Com um jogo na mão, as janelas se oferecem. */
.et-proj-grade--movendo .et-proj-cel {
	border-style: dashed;
}

.et-proj-grade--movendo .et-proj-cel.is-alvo {
	border-style: solid;
	border-color: var(--et-ui-marca, #b3122a);
	box-shadow: 0 0 0 3px rgba(179, 18, 42, 0.12);
}

.et-proj-jg__quem {
	display: flex;
	align-items: center;
	gap: 7px;
	flex: 1 1 auto;
	min-width: 0;
	color: inherit;
	text-decoration: none;
	font-weight: 600;
}

.et-proj-jg__nome {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.et-proj-jg__quem:hover {
	color: var(--et-ui-marca, #b3122a);
}

/* O escudo, do mesmo tamanho da linha — e nunca cortado. */
.et-proj-escudo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

.et-proj-escudo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.et-proj-escudo--vazio {
	border-radius: 50%;
	background: #f0f2f6;
	border: 1px solid var(--et-ui-borda, #d7dbe3);
	color: var(--et-ui-suave, #5b6472);
	font-size: 9px;
	font-weight: 700;
}

.et-proj-jg__quando {
	flex: 0 0 auto;
	color: var(--et-ui-suave, #5b6472);
	font-variant-numeric: tabular-nums;
}

.et-proj-jg__pts {
	/*
	 * LARGURA FIXA, e não mínima: com "min-width" o distintivo de 3 e o de 1
	 * saem com larguras diferentes, e a coluna do placar ao lado dança de
	 * linha para linha.
	 */
	flex: 0 0 auto;
	width: 2.1em;
	padding: 1px 0;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	text-align: center;
	color: #fff;
}

.et-proj-jg__pts--v { background: #12783e; }
.et-proj-jg__pts--e { background: #e0a800; color: #3d2f00; }
.et-proj-jg__pts--d { background: #c1121f; }

/* Jogo que ainda não aconteceu não tem pontos — só guarda o lugar deles. */
.et-proj-jg__pts--vazio {
	background: transparent;
}

/*
 * O x FICA NO FIM DA LINHA, E SÓ ACORDA NO TOQUE.
 *
 * Doze jogos com doze xis vermelhos acesos transformam a janela num campo
 * minado. Ele fica apagado até o dedo (ou o mouse) chegar na linha, e no
 * celular — onde não há "passar por cima" — fica sempre visível, porém pálido.
 */
/*
 * ─────────────────────────────────────────────────────────────────────────────
 * A CAIXA DE MARCAR PARA TIRAR — no lugar onde o x ficava.
 *
 * A coluna é a mesma de antes, e por um motivo: um alvo que dança de linha para
 * linha é um alvo que se clica por engano. O que mudou não é o lugar, é para
 * onde o clique vai — e agora ele não vai a lugar nenhum sozinho: marcar não
 * grava nada. Só o botão "Tirar da janela os marcados" grava.
 * ─────────────────────────────────────────────────────────────────────────────
 */
.et-proj-jg__tirar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex: 0 0 auto;
	cursor: pointer;
	border-radius: 6px;
}

.et-proj-jg__tirar:hover {
	background: #fdeaea;
}

.et-proj-jg__tirar input {
	width: 17px;
	height: 17px;
	margin: 0;
	cursor: pointer;
	accent-color: var(--et-ui-acento, #b8102a);
}

/*
 * O BOTÃO DE TIRAR É DISCRETO — e o de adicionar, não.
 *
 * Numa janela onde se adiciona todo dia e se tira de vez em quando, os dois com
 * o mesmo peso viram dois botões iguais e um clique errado. Este fica pequeno,
 * à direita, com a cor de aviso só na borda.
 */
.et-proj-cel__tirar {
	margin: var(--et-r1, 6px) 0 0 auto;
	display: block;
	padding: 5px 12px;
	font-size: 13px;
	color: #8a1020;
	border-color: #f0cfd4;
}

.et-proj-cel__tirar:hover {
	background: #fdeaea;
	border-color: #e0a6ae;
}

/* O rótulo que só o leitor de tela lê. */
.et-vis-oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@media (hover: none) {
	.et-proj-jg__tirar {
		opacity: .55;
	}
}

.et-proj-cel__vazio {
	padding: 4px 6px;
	color: var(--et-ui-suave, #5b6472);
	font-style: italic;
	font-size: 13px;
}

/* A ação da janela, sozinha na última linha para não ser clicada por engano. */
.et-proj-cel__criar {
	align-self: flex-start;
	padding: 7px 12px;
	border: 1px dashed #c2c8d2;
	border-radius: 999px;
	color: var(--et-ui-marca, #b3122a);
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
}

.et-proj-cel__criar:hover {
	border-style: solid;
	border-color: var(--et-ui-marca, #b3122a);
}

/*
 * A explicação do arrastar mora num cartão como todo o resto da tela. Solta,
 * ela era o único texto da página encostado na borda da janela — e parecia
 * ter escapado de algum lugar.
 */
.et-proj-dica-mover {
	margin: 0 0 18px;
	padding: 10px 14px;
	border: 1px solid var(--et-ui-borda, #d7dbe3);
	border-radius: 10px;
	background: #fff;
}

.et-proj-redistribuir {
	margin: 18px 0 0;
	padding: 14px;
	border: 1px solid var(--et-ui-borda, #d7dbe3);
	border-radius: 12px;
	background: #fff;
}

.et-proj-redistribuir h3 {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 800;
}

/* Cartão dentro de cartão é moldura dentro de moldura: o de dentro perde a sua. */
.et-proj-redistribuir .et-form {
	padding: 0;
	border: 0;
	background: none;
}

.et-proj-outra {
	margin: 18px 0 0;
	border: 1px solid var(--et-ui-borda, #d7dbe3);
	border-radius: 12px;
	background: #fff;
}

.et-proj-outra > summary {
	padding: var(--et-r2, 10px) var(--et-r3, 16px);
	font-weight: 700;
	cursor: pointer;
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * O CONTEÚDO DA GAVETA TAMBÉM TEM MARGEM.
 *
 * Só o resumo tinha respiro: aberta, a gaveta jogava listas e explicações
 * coladas na borda do cartão — o "217" encostado na moldura, o texto começando
 * na linha do risco. Uma caixa cujo conteúdo toca a parede parece caixa
 * quebrada, e era boa parte do ar de bagunça destas telas.
 *
 * A margem é a mesma do resumo: assim o título fechado e o conteúdo aberto
 * começam na mesma linha vertical.
 * ─────────────────────────────────────────────────────────────────────────────
 */
.et-proj-outra > :not(summary) {
	padding-inline: var(--et-r3, 16px);
}

.et-proj-outra > :last-child {
	padding-bottom: var(--et-r3, 16px);
}

/*
 * O formulário dentro da gaveta usa a mesma margem do resumo — e ela precisa
 * estar escrita aqui: esta regra vence a de cima por vir depois, e sem repetir
 * a margem lateral o formulário voltava a colar na borda.
 */
.et-proj-outra .et-form {
	padding: 0 var(--et-r3, 16px) var(--et-r3, 16px);
	border: 0;
	background: none;
}

/* -----------------------------------------------------------------------------
   A JANELA SEM META, E O QUE TRAZ JOGO
   ----------------------------------------------------------------------------- */

.et-proj-cel--sem-meta {
	background: #fafbfc;
}

.et-proj-cel__conta em {
	font-style: italic;
}

.et-proj-cabeca__tabela {
	padding: 4px 10px;
	border: 1px solid var(--et-ui-borda, #d7dbe3);
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--et-ui-suave, #5b6472);
}

/*
 * As duas ações da janela, uma embaixo da outra: criar um jogo novo e trazer um
 * que já existe. Lado a lado, num cartão de meia tela, o seletor de jogos
 * ficaria com 120px — e nele o nome do adversário não caberia.
 */
.et-proj-cel__acoes {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 2px;
	padding-top: 10px;
	border-top: 1px dashed var(--et-ui-borda, #d7dbe3);
}

/*
 * O BOTÃO NÃO DISPUTA ESPAÇO COM O NOME DO JOGO.
 *
 * O seletor é quem estica — nome de adversário é texto longo; o botão fica no
 * tamanho da palavra, encostado nele, para que escolher e trazer sejam um gesto
 * só e não duas partes distantes da tela.
 */
.et-painel-app .et-proj-cel__trazer-ok {
	flex: 0 0 auto;
	padding: 7px 12px;
	font-size: 13px;
	white-space: nowrap;
}

/* O seletor ocupa a largura do cartão: nome de adversário é texto longo. */
.et-painel-app .et-proj-cel__trazer select {
	width: 100%;
	min-width: 0;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid #c9cdd6;
	border-radius: 8px;
	background: #fff;
	font: inherit;
	font-size: 14px;
}

/* A importação fica na mesma faixa do atalho do palco: são as duas coisas que
   se faz UMA vez, antes de a projeção existir de verdade. */
.et-proj-importar {
	margin-bottom: 14px;
}

/* =============================================================================
   OS ÍCONES DO PAINEL

   Os mesmos desenhos da tela do ar, na mesma folha de PHP — aqui medidos em
   pixel, porque o painel é uma página comum e não a área de 1280×720.

   Do tamanho da letra ao lado, na cor de quem os contém, e sem receber clique:
   vários moram dentro de botões, e o clique é do botão.
   ============================================================================= */

.et-painel-app .et-ic {
	width: 1.05em;
	height: 1.05em;
	flex: 0 0 auto;
	pointer-events: none;
}

/* Onde o ícone acompanha um texto, os dois viram uma linha só. */
.et-proj-cel__nome,
.et-proj-cel__meta > span,
.et-proj-cel__criar,
.et-proj-cabeca__tabela,
.et-proj-redistribuir h3,
.et-proj-outra > summary,
.et-proj-cel__trazer .et-campo__rotulo {
	display: flex;
	align-items: center;
	gap: 7px;
}

/* Nos botões, o ícone vem antes do texto e não empurra a altura. */
.et-painel-app .et-botao {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/*
 * O TÍTULO DA COLUNA SÓ VIRA LINHA ONDE ELE EXISTE.
 *
 * No celular não há coluna e ele está escondido — e um `display: flex` escrito
 * depois do `display: none` o traria de volta. A regra mora dentro da mesma
 * largura em que o título aparece, e aí não há ordem para acertar.
 */
@media (min-width: 720px) {
	.et-proj-coluna__titulo {
		display: flex;
		align-items: center;
		gap: 7px;
	}
}

/*
 * A ALÇA VIROU DESENHO.
 *
 * Era o caractere braille ⠿ — que existe, mas cada sistema desenha de um
 * jeito, e em alguns nem existe: aparecia um retângulo vazio. O desenho é o
 * mesmo em qualquer máquina.
 */
.et-proj-jg__alca .et-ic {
	width: 16px;
	height: 16px;
}

.et-proj-cel__nome .et-ic {
	color: var(--et-ui-suave, #5b6472);
}

.et-proj-cel--feita .et-proj-cel__nome .et-ic {
	color: #12783e;
}

/*
 * O BLOCO DE IMPORTAR QUANDO NÃO DÁ PARA IMPORTAR.
 *
 * Ele continua na tela, mas não finge ser um botão: sem moldura de clique,
 * mais apagado, e com o motivo escrito ao lado. Um botão que parece clicável e
 * não faz nada é pior do que um aviso.
 */
.et-proj-importar--parado {
	background: #fbfcfd;
}

.et-proj-importar__parado {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border: 1px dashed var(--et-ui-borda, #d7dbe3);
	border-radius: 999px;
	color: var(--et-ui-suave, #5b6472);
	font-weight: 700;
	font-size: 14px;
}

/*
 * O "Excluir" da lista é um caminho, não um gatilho: ele abre a confirmação.
 * Fica em tinta de perigo para não ser confundido com "Editar", e mais leve
 * que ele para não disputar o clique de quem só quer corrigir um nome.
 */
.et-linha__acao--perigo {
	color: #b3122a;
	opacity: 0.85;
}

.et-linha__acao--perigo:hover {
	opacity: 1;
	text-decoration: underline;
}

.et-excluir__so-admin {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--et-ui-borda, #d7dbe3);
}

/* =============================================================================
   ESCOLHER UM JOGO — as três portas da tela de adicionar

   Da tabela do campeonato, dos que já estão cadastrados, ou do zero. As duas
   primeiras são listas de um clique; a terceira é o formulário de sempre, que
   continua embaixo.
   ============================================================================= */

.et-escolher {
	margin: 0 0 18px;
	padding: 14px;
	border: 1px solid var(--et-ui-borda, #d7dbe3);
	border-radius: 12px;
	background: #fff;
}

.et-escolher__titulo {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 800;
}

.et-escolher__titulo--zero {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--et-ui-borda, #d7dbe3);
	color: var(--et-ui-suave, #5b6472);
}

.et-escolher__lista {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/*
 * CADA PARTIDA É UM BOTÃO DE LARGURA INTEIRA, e não um link com um botão ao
 * lado: o alvo do dedo é a linha toda, e não um "criar" de 60px no fim dela.
 */
.et-painel-app .et-escolher__botao {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--et-ui-borda, #d7dbe3);
	border-radius: 10px;
	background: #fff;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.et-painel-app .et-escolher__botao:hover {
	border-color: var(--et-ui-marca, #b3122a);
	background: #fdf6f7;
}

.et-escolher__quem {
	font-weight: 700;
}

.et-escolher__quando {
	flex: 0 0 auto;
	color: var(--et-ui-suave, #5b6472);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.et-escolher__trazer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}

.et-painel-app .et-escolher__trazer select {
	flex: 1 1 240px;
	min-width: 0;
	padding: 8px 10px;
	border: 1px solid #c9cdd6;
	border-radius: 8px;
	background: #fff;
	font: inherit;
	font-size: 13px;
}

/*
 * O TAMANHO DO CADASTRO, embaixo do CAMPO do nome dele: quantos jogos do acervo
 * estão cadastrados nele. É a linha que decide se vale juntar com um repetido,
 * e qual dos dois é o de verdade.
 *
 * O respiro é em cima, e não embaixo: ela agora vem DEPOIS do campo — "coloca
 * essa frase abaixo do campo" — e o que precisa de folga é o encosto dela na
 * caixa de texto.
 */
.et-campo__conta {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 5px 0 0;
	font-size: 12.5px;
	color: var(--et-ui-suave, #5b6472);
}

.et-campo__conta strong {
	color: var(--et-ui-tinta, #1d2330);
}

/* No aviso de repetidos, a conta de cada um vem mais leve que o nome. */
.et-parecido__jogos {
	font-weight: 400;
	opacity: 0.85;
}

/* =============================================================================
   CADASTROS PARECIDOS — a tela onde ele decide o que é o mesmo clube

   Cada grupo é uma caixa; cada linha, um cadastro, com dois controles que não
   podem ser confundidos: um RÁDIO para quem fica (um por grupo) e uma CAIXA
   para quem entra na junção. Ficam à esquerda, na mesma coluna, para que a
   coluna inteira se leia de cima a baixo.
   ============================================================================= */
.et-parecidos__grupo {
	margin: 0 0 14px;
	padding: 12px 14px;
	border: 1px solid var(--et-ui-borda, #d7dbe3);
	border-radius: 12px;
	background: #fff;
}

.et-parecidos__motivo {
	margin: 0 0 8px;
	font-size: 12.5px;
	font-weight: 700;
	text-transform: lowercase;
	color: var(--et-ui-suave, #5b6472);
}

.et-parecidos__linha {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-top: 1px solid #eef0f4;
}

.et-parecidos__linha:first-of-type {
	border-top: 0;
}

.et-parecidos__quem {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex: 0 0 auto;
	font-size: 12px;
	color: var(--et-ui-suave, #5b6472);
	cursor: pointer;
}

/* O que SAI é a ação destrutiva: em tinta de perigo, e nunca em primeiro. */
.et-parecidos__quem--sai {
	color: #b3122a;
}

.et-parecidos__nome {
	display: flex;
	flex-direction: column;
	min-width: 0;
	font-weight: 700;
}

.et-parecidos__nome small {
	font-weight: 400;
	font-size: 12.5px;
	color: var(--et-ui-suave, #5b6472);
}

/* A versão no pé do menu: um dado de conferência, não um enfeite. */
.et-menu__versao {
	margin: 10px 0 0;
	padding-top: 8px;
	border-top: 1px solid var(--et-ui-borda, #d7dbe3);
	font-size: 11.5px;
	color: var(--et-ui-suave, #5b6472);
	font-variant-numeric: tabular-nums;
}

/* De que família é o grupo — o dado que explica um "0 jogos" legítimo. */
.et-parecidos__familia {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 999px;
	background: #eef0f4;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--et-ui-suave, #5b6472);
}

/* =============================================================================
   AS CATEGORIAS DA TELA DE PARECIDOS

   Uma fileira que quebra em linhas quando não cabe — e não uma coluna de seis
   barras. Sem sublinhado: elas são abas, não links no meio de um texto.
   ============================================================================= */
.et-parecidos__tipos {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 14px;
}

.et-painel-app .et-parecidos__tipo {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 13px;
	border: 1px solid var(--et-ui-borda, #d7dbe3);
	border-radius: 999px;
	background: #fff;
	color: var(--et-ui-tinta, #1d2330);
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.et-painel-app .et-parecidos__tipo:hover {
	border-color: var(--et-ui-marca, #b3122a);
	color: var(--et-ui-marca, #b3122a);
}

/* A aba aberta é a única cheia: é ela que diz onde você está. */
.et-painel-app .et-parecidos__tipo.is-ativa {
	border-color: var(--et-ui-marca, #b3122a);
	background: var(--et-ui-marca, #b3122a);
	color: #fff;
}

/* O caminho de volta para a lista de projeções, no alto da tela da projeção. */
/*
 * `.et-proj-todas` SAIU: era o parágrafo de duas linhazinhas com "Todas as
 * projeções" e "Criar uma projeção", em letra de 13 e cinza. Elas viraram
 * botões no bloco do alto — ver `.et-palco-atalho__mais`.
 */

/* O botão "Pôr no ar" vive num formulário dentro da linha da lista. */
.et-linha__forma {
	display: inline;
	margin: 0;
}

.et-painel-app .et-linha__forma button {
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
}

/* =============================================================================
   A CONFERÊNCIA ANTES DE IMPORTAR

   Três blocos: o que entra, o que conflita e o que ainda não aconteceu. O do
   conflito é o único que pede decisão, e por isso é o único com moldura de
   atenção — os outros dois são informação.
   ============================================================================= */
.et-importar__bloco {
	margin: 0 0 var(--et-r3, 16px);
	padding: var(--et-r3, 16px);
	border: 1px solid var(--et-ui-borda, #d7dbe3);
	border-radius: 12px;
	background: #fff;
}

.et-importar__bloco--conflito {
	border-color: #e6b800;
	background: #fffdf4;
}

.et-importar__titulo {
	margin: 0 0 var(--et-r1, 6px);
	font-size: 15px;
	font-weight: 800;
}

.et-importar__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13.5px;
	color: var(--et-ui-suave, #5b6472);
}

.et-importar__conflito {
	padding: 10px 0;
	border-top: 1px solid #eee7cf;
}

.et-importar__conflito:first-of-type {
	border-top: 0;
}

.et-importar__quem {
	margin: 0 0 4px;
	font-weight: 700;
}

.et-importar__quem small {
	display: block;
	font-weight: 400;
	font-size: 12.5px;
	color: #8a6d00;
}

/* Os dois lados da comparação, um ao lado do outro quando cabe. */
.et-importar__lados {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	margin: 0 0 8px;
	font-size: 13px;
	color: var(--et-ui-suave, #5b6472);
}

.et-importar__escolhas {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	font-size: 13.5px;
}

.et-importar__escolhas label {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	cursor: pointer;
}

/* =============================================================================
   O MAPA DE COMPETIÇÕES — a conferência da conta de jogos
   ============================================================================= */
/*
 * O MAPA É UM BLOCO À PARTE, e não o começo da lista de jogos.
 *
 * Encostado nela, o "De onde vêm os 5159 jogos" parecia o primeiro item da
 * lista — e a linha seguinte, um jogo qualquer, parecia fazer parte dele.
 */
.et-mapa {
	/*
	 * AS MEDIDAS DA LISTA MORAM AQUI, e não espalhadas em cada regra: a
	 * coluna da marca e a da conta são as mesmas nos dois blocos da tela, e é
	 * disso que vem o alinhamento entre eles.
	 */
	--et-mapa-marca: 18px;
	--et-mapa-conta: 4.5ch;

	margin: var(--et-r4, 24px) 0;
}

.et-mapa__resumo {
	display: flex;
	flex-wrap: wrap;
	gap: var(--et-r1, 6px) var(--et-r2, 10px);
	margin: var(--et-r2, 10px) 0 var(--et-r4, 24px);
	font-size: 13px;
	color: var(--et-ui-suave, #5b6472);
}

/*
 * O RESUMO EM TRÊS PASTILHAS — as três respostas antes de qualquer lista: o
 * que está resolvido, o que espera um clique, e o que ninguém pode resolver.
 */
.et-mapa__resumo span {
	background: #f4f6f9;
	border-radius: 999px;
	padding: 4px 11px;
	white-space: nowrap;
}

.et-mapa__resumo strong {
	color: var(--et-ui-forte, #1f2733);
	font-variant-numeric: tabular-nums;
}

.et-mapa__resumo--solto {
	background: #fdf5e0 !important;
	color: #8a6d00;
}

.et-mapa__resumo--solto strong {
	color: #8a6d00;
}

.et-mapa__titulo {
	margin: var(--et-r4, 24px) 0 var(--et-r1, 6px);
	font-size: 15px;
	letter-spacing: .01em;
}

.et-mapa__lista {
	list-style: none;
	margin: var(--et-r2, 10px) 0 var(--et-r3, 16px);
	padding: 0;
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--et-ui-borda-fraca, #eef1f6);
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * A LINHA: MARCA · NOME · CONTA — e a barra por baixo de tudo.
 *
 * A conta encostada na borda de uma tela larga fica a um palmo do nome que ela
 * conta, e 217 e 2 ocupam a mesma tinta. A barra clara atrás da linha é a
 * proporção lida de relance, sem gastar altura nenhuma; a conta ganha coluna
 * fixa e algarismo de largura fixa, para as unidades ficarem uma embaixo da
 * outra como numa conta de somar.
 * ─────────────────────────────────────────────────────────────────────────────
 */
.et-mapa__linha {
	display: grid;
	grid-template-columns: var(--et-mapa-marca) minmax(0, 1fr) var(--et-mapa-conta);
	align-items: baseline;
	column-gap: var(--et-r2, 10px);
	row-gap: var(--et-r1, 6px);
	/*
	 * SEM RECUO LATERAL: a lista começa na mesma linha vertical do título e
	 * da explicação. O que recua o nome é a coluna da marca — e ela recua
	 * TODAS as linhas por igual, que é o que faz a coluna existir.
	 */
	padding: var(--et-r2, 10px) 0;
	border-bottom: 1px solid var(--et-ui-borda-fraca, #eef1f6);
}

.et-mapa__lista > .et-mapa__linha:last-child {
	border-bottom: 0;
}

/* A coluna da marca existe em toda linha: é ela que alinha os dois blocos. */
.et-mapa__marca {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-height: 1em;
}

.et-mapa__nome {
	min-width: 0;
	font-weight: 700;
}

.et-mapa__rotulo {
	margin-right: var(--et-r1, 6px);
}

.et-mapa__nome small {
	font-weight: 400;
	color: var(--et-ui-suave, #5b6472);
}

/* O número do cadastro é etiqueta de arquivo, e não parte do nome. */
.et-mapa__num {
	font-variant-numeric: tabular-nums;
	color: #8b93a1;
}

.et-mapa__conta {
	font-variant-numeric: tabular-nums;
	font-size: 16px;
	text-align: right;
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * O TRILHO DA PROPORÇÃO — do mesmo tamanho em todas as linhas.
 *
 * Antes era uma barra sem trilho, presa ao pé da linha, com uma largura
 * diferente a cada linha e a mesma cor da borda: de longe, a lista parecia um
 * texto sublinhado errado, e era esse o ar de bagunça. Com um trilho igual em
 * todas as linhas e a parte pintada por dentro, o começo e o fim de cada barra
 * caem sempre no mesmo lugar — que é o que faz uma coluna de barras virar
 * gráfico.
 *
 * Ele ocupa a coluna do nome (e não a linha inteira) para não passar por baixo
 * da conta: barra que cruza número é barra que parece risco.
 * ─────────────────────────────────────────────────────────────────────────────
 */
.et-mapa__trilho {
	grid-column: 2;
	display: block;
	height: 4px;
	border-radius: 999px;
	background: #eef1f6;
	overflow: hidden;
}

.et-mapa__parte {
	display: block;
	height: 100%;
	/* O piso da proporção é dado em PHP (1%), e não aqui. */
	width: var(--et-parte, 0%);
	border-radius: 999px;
	background: #a9bcd8;
}

/*
 * O que ainda não virou registro fica marcado — é o que pede o clique. A faixa
 * sangra para os lados para parecer uma faixa, e não um retângulo encaixado no
 * texto; o recuo negativo devolve o alinhamento das colunas.
 */
.et-mapa__linha--solta {
	background: #fffdf6;
	box-shadow: inset 3px 0 0 #e0bf58;
	border-radius: 4px;
}

.et-mapa__linha--solta .et-mapa__parte {
	background: #e0bf58;
}

.et-mapa__linha--solta .et-mapa__nome,
.et-mapa__linha--solta .et-mapa__conta {
	color: #8a6d00;
}

/*
 * A MARCA FICA NA FRENTE DO NOME, e o nome inteiro é alvo do clique: numa lista
 * de dezenas de linhas, mirar num quadradinho de 13px é o que faz marcar o
 * campeonato errado.
 */
.et-mapa__nome label {
	cursor: pointer;
	display: block;
}

.et-mapa__linha input[type="checkbox"] {
	width: 17px;
	height: 17px;
	margin: 0;
	accent-color: var(--et-ui-acento, #b8102a);
}

.et-mapa__botoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--et-r2, 10px);
	margin: var(--et-r3, 16px) 0 var(--et-r2, 10px);
}

.et-mapa__resto {
	font-style: italic;
}

/* A gaveta do rabo da lista: as dezenas de cadastros com um jogo só. */
.et-mapa__gaveta > summary {
	cursor: pointer;
	padding: 6px 0;
	font-size: 13px;
	color: var(--et-ui-suave, #5b6472);
}

.et-mapa__vazio {
	margin: 16px 0 0;
	padding: 11px 13px;
	border-radius: 8px;
	background: #f4f6f9;
	font-size: 13px;
	line-height: 1.5;
	color: var(--et-ui-suave, #5b6472);
}

.et-mapa__vazio strong {
	color: var(--et-ui-forte, #1f2733);
}

@media (max-width: 640px) {
	/*
	 * NO CELULAR A LINHA APERTA — sem perder as colunas.
	 *
	 * O nome quebra em duas ou três linhas numa tela de 380px, e com o trilho
	 * embaixo a linha passava de noventa pixels: seis campeonatos por tela.
	 * O que se aperta é o respiro, e não a informação.
	 */
	.et-mapa__linha {
		padding: var(--et-r1, 6px) 0;
		row-gap: 4px;
		column-gap: var(--et-r1, 6px);
	}

	.et-mapa__linha--solta {
		padding-inline: var(--et-r1, 6px);
	}

	.et-mapa__nome small {
		display: block;
	}

	.et-mapa__conta {
		font-size: 15px;
	}
}

/* "Trazer todos" é remédio, e não o caminho de todo dia: fica discreto. */
.et-proj-cel__todos {
	display: inline-block;
	margin-top: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--et-ui-acento, #b8102a);
	font-size: 12.5px;
	text-decoration: underline;
	cursor: pointer;
}

/*
 * O FLAGRANTE É UM CAMINHO DE ARQUIVO, e caminho não quebra em espaço.
 *
 * Sem isto, "wp-content/plugins/…/arquivo.php:1234 ← …" estica a gaveta para
 * fora da tela e arrasta a página inteira junto — no celular, a linha que eu
 * mais preciso ler é a que não cabe.
 */
.et-diario__lista li {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* A CAPA: a prova ao lado dos controles, e não escondida atrás de um download. */
.et-thumb {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: flex-start;
	margin: 8px 0 20px;
}

.et-thumb__palco {
	flex: 1 1 460px;
	min-width: 0;
	border: 1px solid var(--et-ui-borda, #e3e6ec);
	border-radius: 10px;
	overflow: hidden;
	background: #0f1216;
}

.et-thumb__tela {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * ARRASTAR A FOTO DENTRO DA PRÓPRIA PRÉVIA.
 *
 * "Esses controles não podem ser melhores não? Tipo arrastar dentro da própria
 *  foto? Usando o movimento de pinça..."
 *
 * `touch-action: none` é o que torna isso possível no celular: sem ela, o
 * navegador entende o primeiro dedo como ROLAGEM da página e o segundo como
 * zoom da tela inteira — os dois gestos que a gente quer usar aqui, roubados
 * antes de o JavaScript ver o primeiro evento.
 *
 * O cursor de mão diz que dá para pegar; é a única pista de que o gesto existe,
 * já que uma capa não parece um controle.
 */
.et-thumb--arrasta .et-thumb__tela {
	touch-action: none;
	cursor: grab;
}

.et-thumb--arrasta .et-thumb__tela:active {
	cursor: grabbing;
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * A PRÉVIA DA FOTO ENVIADA, COM O × NO CANTO.
 *
 * "Pra retirar a foto eu preferia que fosse um x, clicar nele e a foto sumir."
 *
 * O × é um botão de ENVIAR de verdade — um clique já grava a remoção —, e por
 * isso ele precisa parecer clicável e ficar em cima da foto, e não perdido
 * embaixo dela: o alvo mental é a imagem que incomoda.
 *
 * A sombra e a borda clara existem para ele sobreviver a qualquer foto: um ×
 * branco chapado some numa foto clara, e um preto some numa escura.
 */
.et-previa {
	position: relative;
	display: inline-block;
	max-width: 100%;
	margin-bottom: 6px;
	line-height: 0;
}

.et-previa__x {
	position: absolute;
	top: 4px;
	right: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: rgba(187, 0, 0, 0.94);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.et-previa__x:hover,
.et-previa__x:focus-visible {
	background: #8f0000;
}

/*
 * O BOTÃO QUE SÓ EXISTE PARA O "ENTER".
 *
 * Ele é o primeiro `submit` do formulário, e é isso que faz o Enter salvar a
 * capa em vez de acionar o × e apagar a foto. `display: none` não serviria: um
 * botão escondido assim é ignorado pelo navegador na escolha do padrão.
 */
.et-enter {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.et-thumb__lado {
	/*
	 * A COLUNA GANHOU LARGURA — 340px, e não 260.
	 *
	 * Com 260 os rótulos das barras quebravam em três linhas e cada controle
	 * ocupava a altura de dois. A prévia perde uns oitenta pixels e continua
	 * grande o bastante para julgar um enquadramento; os controles, não
	 * cabendo, obrigavam a rolar — e rolando some a prévia.
	 */
	flex: 1 1 340px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * A COLUNA DA CAPA É APERTADA — os dois pedidos puxam para lados contrários.
 *
 * "Aproxima mais os controles" e "sobe o campo de enviar foto" brigam entre si:
 * subindo o envio, é ele que empurra as barras para fora da tela. Quem cede é o
 * envio — é uma coisa que se faz uma vez por jogo, enquanto as barras são
 * mexidas dez vezes seguidas olhando a prévia ao lado.
 *
 * Então aqui o formulário do envio perde o excesso: campos rentes, botão do
 * tamanho do texto, e nada de respiro de página inteira numa coluna de 260px.
 * ─────────────────────────────────────────────────────────────────────────────
 */
.et-thumb__lado .et-form {
	margin-top: 4px;
	padding-top: 10px;
	border-top: 1px solid var(--et-ui-borda, #e3e6ec);
}

.et-thumb__lado .et-campo {
	margin: 0 0 8px;
}

.et-thumb__lado .et-campo__rotulo {
	margin-bottom: 3px;
	font-size: 12px;
}

/*
 * OS CAMPOS OCUPAM A COLUNA INTEIRA.
 *
 * A "Manchete grande" saía com a largura padrão de um campo de ficha — pouco
 * mais da metade da coluna — enquanto o seletor ao lado ia de ponta a ponta.
 * Dois campos irmãos com larguras diferentes é metade da bagunça que ele viu.
 */
.et-thumb__lado .et-campo input[type="text"],
.et-thumb__lado .et-campo input[type="search"],
.et-thumb__lado .et-campo select {
	width: 100%;
	max-width: 100%;
}

.et-thumb__lado .et-dica {
	margin: 0 0 8px;
	font-size: 12px;
	line-height: 1.4;
}

/*
 * O botão do envio não é o assunto da tela: quem é o assunto é "Baixar a capa".
 * Um botão de largura inteira ao lado do outro faz os dois parecerem iguais.
 */
.et-thumb__lado .et-form > .et-botao {
	align-self: flex-start;
	padding: 7px 14px;
	font-size: 13px;
}

.et-thumb__lado .et-form {
	display: flex;
	flex-direction: column;

	/*
	 * `align-items: start` VEIO DA GRADE, e numa coluna quer dizer outra coisa.
	 *
	 * `.et-form` é uma grade, e ali o `start` alinha os campos pelo TOPO. Esta
	 * coluna troca a grade por flex sem trocar o alinhamento — e em flex-column
	 * o eixo cruzado é o horizontal: cada campo passou a ter a largura do que
	 * tem dentro. A grade de fotos esticava; a "Manchete grande" saía com dois
	 * terços da coluna, ao lado de um seletor de ponta a ponta.
	 */
	align-items: stretch;
}

/*
 * A FONTE DOS JOGOS — campeonato e temporada, no alto e fechada.
 *
 * Fechada ela responde sozinha "de onde vêm os jogos que aparecem aqui?"; quem
 * precisa trocar abre. O nome do campeonato é o que se lê; o resto é legenda.
 */
.et-proj-fonte {
	margin: 0 0 14px;
}

.et-proj-fonte > summary small {
	font-weight: 400;
	color: var(--et-ui-suave, #5b6472);
}

.et-proj-fonte > summary strong {
	font-weight: 800;
}

/*
 * O AVISO DA GRAVAÇÃO AUTOMÁTICA — discreto, e com hora.
 *
 * "Salvo" sem hora não dá para conferir; e um aviso grande a cada tecla vira
 * ruído numa tela em que se digitam seis números seguidos.
 */
.et-proj-auto {
	margin: 0 0 10px;
	font-size: 12.5px;
	color: var(--et-ui-suave, #5b6472);
}

.et-proj-auto--ruim {
	color: #b8102a;
	font-weight: 700;
}

/*
 * O SELO DA AGENDA.
 *
 * Azul, e não vermelho: não é erro nem pendência — é um jogo marcado. Ele fica
 * fora do retrospecto e da busca até ter placar, e o selo é o que explica por
 * que ele não aparece nas contas do site.
 */
.et-selo-agenda {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 7px;
	border-radius: 999px;
	background: #e7effb;
	color: #14498f;
	font-size: 11px;
	font-weight: 700;
	vertical-align: 2px;
}


/* =============================================================================
   AS COLUNAS DA JANELA, O + E A JANELINHA DOS JOGOS

   "Se for 3, um em cima do outro. Se for 4, 2 de cada lado. Se for 5, 3 de um
   lado e 2 do outro. Se for 6, 3 de cada lado."

   Quem divide é o PHP: aqui só se põe as colunas lado a lado. `column-count`
   pareceria mais curto e estaria errado — o navegador divide por ALTURA, e um
   nome comprido que quebra em duas linhas tira um jogo da coluna cheia.
   ============================================================================= */

.et-proj-cel__colunas {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4px 14px;
	/*
	 * `stretch`, e não `start`: as duas colunas ficam com a mesma altura, e o +
	 * de cada uma é empurrado para o pé (ver `margin-top: auto` abaixo). Com 5
	 * jogos — 3 de um lado e 2 do outro — um + ficava uma linha acima do outro.
	 */
	align-items: stretch;
}

/*
 * MIN-WIDTH ZERO — sem isto as colunas ESTOURAM o cartão.
 *
 * Um item de grade tem largura mínima automática: ele se recusa a ficar menor
 * do que o conteúdo. Como cada jogo é alça + escudo + nome + placar + pontos +
 * caixa, duas colunas somavam mais do que o cartão e o nome do adversário saía
 * cortado pela borda direita. Zerando a mínima, a coluna encolhe e o nome
 * corta com reticências, que é o que se quer.
 */
.et-proj-cel__colunas > .et-proj-cel__jogos {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.et-proj-cel__colunas .et-proj-jg {
	min-width: 0;
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * EM DUAS COLUNAS, O JOGO OCUPA DUAS LINHAS.
 *
 * Numa coluna de ~195px, a linha do jogo é alça + escudo + nome + placar +
 * pontos + caixa de marcar. Tudo menos o nome tem largura fixa, então o nome
 * ficava com uns 60px e virava "Novorizontino" → "N…". Um nome que não se lê
 * não identifica jogo nenhum, e a coluna deixa de ter serventia.
 *
 * Quebrando em duas linhas, o nome fica com a largura inteira da coluna e o
 * placar desce para a linha de baixo, encostado à direita.
 * ─────────────────────────────────────────────────────────────────────────────
 */
.et-proj-cel__colunas[data-colunas="2"] .et-proj-jg {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	grid-template-areas:
		"alca quem   quem quem"
		".    quando pts  tirar";
	align-items: center;
	gap: 1px 6px;
	padding: 5px 6px;
}

.et-proj-cel__colunas[data-colunas="2"] .et-proj-jg__alca   { grid-area: alca; }
.et-proj-cel__colunas[data-colunas="2"] .et-proj-jg__quem   { grid-area: quem; }
.et-proj-cel__colunas[data-colunas="2"] .et-proj-jg__quando { grid-area: quando; justify-self: start; }
.et-proj-cel__colunas[data-colunas="2"] .et-proj-jg__pts    { grid-area: pts; }
.et-proj-cel__colunas[data-colunas="2"] .et-proj-jg__tirar  { grid-area: tirar; }

.et-proj-cel__colunas .et-proj-jg__nome {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* O + desce para o pé da coluna, mesmo quando ela tem um jogo a menos. */
.et-proj-cel__colunas .et-proj-cel__mais-linha {
	margin-top: auto;
}

.et-proj-cel__colunas[data-colunas="2"] {
	grid-template-columns: 1fr 1fr;
}

/* Num telefone estreito, duas colunas de nome de clube não cabem: volta a uma. */
@media (max-width: 430px) {
	.et-proj-cel__colunas[data-colunas="2"] {
		grid-template-columns: 1fr;
	}
}

.et-proj-cel__mais-linha {
	list-style: none;
	margin-top: 2px;
	padding: 0;
	border: 0;
}

/* O + é grande porque é alvo de dedo, e discreto porque não é o assunto. */
.et-painel-app .et-proj-cel__mais {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	border: 1px dashed #c9cdd6;
	border-radius: 8px;
	background: #fbfcfd;
	color: var(--et-ui-suave, #5b6472);
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: border-color .12s, color .12s, background .12s;
}

.et-painel-app .et-proj-cel__mais:hover {
	border-color: var(--et-ui-acento, #b8102a);
	background: #fff;
	color: var(--et-ui-acento, #b8102a);
}

/* ─────────────────────────────────────────────────────────────────────────────
   A JANELINHA — aberta pela caixa de marcar, sem uma linha de JavaScript.

   A caixa é irmã anterior da janela, e o `~` é o que liga uma à outra. Por isso
   ela mora no topo da célula: um seletor de irmão só enxerga para a frente.
   ───────────────────────────────────────────────────────────────────────────── */

/*
 * A CHAVE NÃO OCUPA ESPAÇO — nem com `hidden` no HTML.
 *
 * O `hidden` vale como `display: none` só até alguma regra dar `display` ao
 * elemento, e o painel dá: `.et-painel-app input { display: block }`. A caixa
 * reaparecia com 13px de largura e escapava da borda do cartão — o teste de
 * transbordo pegou os seis.
 */
.et-painel-app .et-quad-chave,
.et-quad-chave {
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	appearance: none;
	-webkit-appearance: none;
	pointer-events: none;
}

.et-quad-janela {
	display: none;
}

.et-quad-chave:checked ~ .et-quad-janela {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.et-quad-janela__fundo {
	position: absolute;
	inset: 0;
	background: rgba(12, 16, 24, .55);
	cursor: pointer;
}

.et-quad-janela__caixa {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(520px, 100%);
	max-height: min(560px, 86vh);
	overflow: hidden;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 18px 50px rgba(12, 16, 24, .3);
}

.et-quad-janela__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 16px;
	border-bottom: 1px solid #e6e9ef;
	font-size: 15px;
}

.et-painel-app .et-quad-janela__fechar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	border-radius: 8px;
	color: var(--et-ui-suave, #5b6472);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.et-painel-app .et-quad-janela__fechar:hover {
	background: #f1f3f6;
	color: #14181f;
}

/* A lista rola dentro da janela: é ela que cresce, e não a página atrás. */
.et-quad-janela__lista {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 8px;
	-webkit-overflow-scrolling: touch;
}

.et-quad-janela__grupo {
	margin: 10px 8px 4px;
	color: var(--et-ui-suave, #5b6472);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* Cada jogo é um botão de envio: escolher já é adicionar. */
.et-painel-app .et-quad-janela__jogo {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 14px;
	line-height: 1.35;
	text-align: left;
	cursor: pointer;
}

.et-painel-app .et-quad-janela__jogo:hover {
	background: #f6f7f9;
}

.et-painel-app .et-quad-janela__jogo small {
	color: var(--et-ui-suave, #5b6472);
}

.et-quad-janela__sobra {
	margin: 0;
	padding: 10px 16px 14px;
	border-top: 1px solid #e6e9ef;
	color: var(--et-ui-suave, #5b6472);
	font-size: 12.5px;
	line-height: 1.45;
}

/* =============================================================================
   OS PONTOS LIVRES — o bolo, e os botões que o gastam

   "Quando uma meta for concluída, pega os pontos que sobrarem e deixa visível
   o quanto pode ser distribuído."
   ============================================================================= */

.et-proj-bolo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0 0 14px;
	padding: 11px 14px;
	border: 1px solid #f0d48a;
	border-left: 4px solid #e0a800;
	border-radius: 10px;
	background: #fffdf3;
	font-size: 13.5px;
	line-height: 1.45;
}

.et-proj-bolo strong {
	font-size: 16px;
}

/* A instrução vem depois, e mais leve: o número é a notícia. */
.et-proj-bolo span {
	flex: 1 1 100%;
	color: var(--et-ui-suave, #5b6472);
	font-size: 12.5px;
}

/* O botão que gasta o bolo mora na janela que precisa. */
.et-painel-app .et-proj-cel__aliviar {
	width: 100%;
	margin-top: 8px;
	border-color: #e0a800;
	color: #7a5c00;
	background: #fffdf3;
	font-size: 13px;
}

.et-painel-app .et-proj-cel__aliviar:hover {
	border-color: #c79400;
	background: #fff8e0;
}

/* Devolver é desfazer: discreto, e sem cara de botão principal. */
.et-painel-app .et-proj-cel__devolver {
	display: block;
	width: 100%;
	min-height: 34px;
	margin-top: 6px;
	padding: 6px 10px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--et-ui-suave, #5b6472);
	font: inherit;
	font-size: 12.5px;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.et-painel-app .et-proj-cel__devolver:hover {
	color: #14181f;
	background: #f6f7f9;
}

/* =============================================================================
   A TELA DE JOGOS — os dois filtros e as quatro ações

   "Mostra todos os jogos da temporada com um seletor de temporada e campeonato.
   Deixa só os jogos e o editar, excluir, pré-jogo e pós-jogo."
   ============================================================================= */

.et-jogos-filtro {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px 14px;
	margin-bottom: 16px;
}

.et-jogos-filtro .et-campo {
	flex: 1 1 190px;
	min-width: 0;
	margin: 0;
}

/* O caminho da importação sai da frente da lista, mas continua à mão. */
.et-jogos-filtro__trazer {
	flex: 0 0 auto;
	margin-bottom: 10px;
	color: var(--et-ui-suave, #5b6472);
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.et-jogos-filtro__trazer:hover {
	color: var(--et-ui-acento, #b8102a);
}

/*
 * O + DIZ QUE O PAINEL AINDA NÃO EXISTE.
 *
 * Os dois botões aparecem em todo jogo — o da véspera, que é o que se vai
 * transmitir, é justamente o que ainda não tem painel nenhum. O sinal separa
 * "abrir o que existe" de "criar agora", antes do clique.
 */
.et-linha__acao--novo {
	color: var(--et-ui-suave, #5b6472);
}

.et-linha__acao--novo:hover {
	color: var(--et-ui-acento, #b8102a);
}

@media (max-width: 560px) {
	.et-jogos-filtro .et-campo {
		flex: 1 1 100%;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MARCAR VÁRIOS JOGOS E FAZER ALGO COM ELES

   "Coloca um jeito de selecionar vários jogos e conseguir fazer algo em massa,
   tipo excluir eles."
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * O RÓTULO QUE SÓ O LEITOR DE TELA LÊ.
 *
 * A caixinha de marcar sozinha não diz nada: quem usa leitor de tela ouve
 * "caixa de seleção" setenta vezes seguidas, sem saber de qual jogo é cada
 * uma. O nome do jogo vai junto, escondido do olho e não do leitor —
 * `display:none` esconderia dos dois.
 */
.et-oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * A CAIXA É GRANDE PORQUE O DEDO É GRANDE.
 *
 * No tamanho de fábrica ela tem 13px num celular, e marcar trinta jogos vira
 * trinta tentativas. A área de toque cresce pelo `padding` do rótulo — e o
 * rótulo inteiro marca, não só o quadradinho.
 */
.et-massa__marca {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	padding: 6px;
	margin: -6px 0 -6px -6px;
	cursor: pointer;
}

.et-massa__marca input {
	width: 20px;
	height: 20px;
	accent-color: var(--et-ui-primaria);
	cursor: pointer;
}

/*
 * A BARRA FICA COLADA NO PÉ DA TELA.
 *
 * Numa temporada de setenta jogos, marcar os últimos e ter de rolar tudo de
 * volta para achar o botão é o que faz a pessoa usar a tela uma vez e desistir.
 */
.et-massa__barra {
	position: sticky;
	bottom: 0;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin-top: 14px;
	padding: 12px 16px;
	border: 1px solid var(--et-ui-borda);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 -6px 18px rgba(15, 18, 22, 0.10);
}

.et-massa__todos {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: 13.5px;
	cursor: pointer;
}

.et-massa__todos input {
	width: 18px;
	height: 18px;
	accent-color: var(--et-ui-primaria);
	cursor: pointer;
}

.et-massa__conta {
	color: var(--et-ui-suave);
	font-size: 13px;
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * OS BOTÕES DA BARRA SÃO MENORES QUE OS DA TELA.
 *
 * "Diminui os botões pra ficar mais bem alinhado e evitar pular as linhas."
 *
 * Eles nasceram com o tamanho de qualquer botão do painel — 44px de alvo, letra
 * de 17 e 26px de folga de cada lado. Numa barra com um seletor e dois botões,
 * isso dava três blocos largos demais para caber lado a lado e curtos demais
 * para encher a linha: cada um caía numa fileira, com uma borda diferente da
 * outra. Ficava parecendo três telas empilhadas.
 *
 * `align-items: stretch` é o que os deixa da MESMA ALTURA quando o texto de um
 * quebra em duas linhas e o do outro não — sem isso, o mais curto flutua
 * centralizado ao lado de um vizinho mais alto.
 * ───────────────────────────────────────────────────────────────────────────── */
.et-massa__acoes {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 8px;
	margin-left: auto;
}

.et-massa__acoes .et-botao {
	/*
	 * `1 1 150px`: os dois partem do mesmo tamanho e dividem a sobra em partes
	 * iguais — é o que os deixa com a MESMA largura, em vez de cada um herdar a
	 * largura do próprio texto. Abaixo de 150px eles empilham em vez de virar
	 * dois alvos estreitos demais para o polegar.
	 */
	flex: 1 1 150px;
	min-height: 38px;
	padding: 7px 12px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.2;
	white-space: normal;
}

.et-massa__campo select {
	max-width: 260px;
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * NO CELULAR O SELETOR TOMA A LINHA, E OS DOIS BOTÕES DIVIDEM A DE BAIXO.
 *
 * O nome do campeonato é longo e não encolhe sem virar reticências; os botões,
 * sim. Uma linha para escolher e uma linha para agir é a única arrumação em que
 * nada fica pela metade em 390px.
 *
 * Esta consulta mora AQUI, e não na de baixo junto com as outras do celular:
 * consulta de mídia não muda a força de um seletor, então `max-width: 260px`
 * logo acima ganharia dela pela ordem no arquivo. Vizinha da regra que ela
 * corrige, a ordem é a certa e a razão fica visível.
 * ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 699px) {
	.et-massa__acoes {
		width: 100%;
		margin-left: 0;
	}

	.et-massa__campo {
		flex: 1 0 100%;
	}

	.et-massa__campo select {
		width: 100%;
		max-width: none;
	}
}

/*
 * ENQUANTO NADA ESTÁ MARCADO, OS BOTÕES DORMEM.
 *
 * Quem liga isso é o JavaScript, e só ele: sem script, os botões ficam vivos e
 * quem enviar sem marcar nada recebe o recado do servidor. Um botão morto que
 * ninguém sabe por que não clica é pior do que um clique que explica.
 */
.et-massa__barra[data-et-massa-vazia] .et-massa__acoes {
	opacity: 0.5;
}

.et-massa__lista {
	margin: 12px 0 4px;
	padding-left: 20px;
	max-height: 260px;
	overflow-y: auto;
	font-size: 13.5px;
	line-height: 1.7;
}

.et-massa__lista small {
	color: var(--et-ui-suave);
	margin-left: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   O ENQUADRAMENTO DA CAPA

   "Cria uma maneira de ajustar a foto no espaço pra evitar que algum elemento
   cubra ela."
   ═══════════════════════════════════════════════════════════════════════════ */

.et-ajuste {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--et-ui-borda);
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * OS CONTROLES ANDAM JUNTOS — o rótulo em cima da barra, e nada entre eles.
 *
 * Cada barra ocupava rótulo + 26px de barra + 20px de margem, e as SEIS não
 * cabiam ao lado da prévia: a última caía fora da tela. Enquadrar é olhar a
 * capa E mexer no controle ao mesmo tempo — rolando a página, some justamente
 * a coisa que se está tentando ajustar.
 *
 * O que aperta é o VÃO entre uma barra e a outra, e não a área de toque do
 * punho: essa continua igual, porque é ela que decide se o dedo acerta.
 * ─────────────────────────────────────────────────────────────────────────────
 */
.et-ajuste__grade {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 14px;

	/*
	 * A LARGURA É DITA, e não herdada.
	 *
	 * A grade é filha de um contêiner em flex-column, onde o esticar depende
	 * do `align-items` que estiver valendo por ali. Ela vinha saindo 80px mais
	 * estreita que o espaço disponível, e no telefone isso era a diferença
	 * entre uma barra confortável e uma barra curta. Dizer a largura custa uma
	 * linha e não depende de mais ninguém.
	 */
	width: 100%;
}

/*
 * EM COLUNA ÚNICA, NADA DE ALTURA RESERVADA.
 *
 * A reserva existe para alinhar duas colunas; com uma só, ela vira um vão morto
 * entre um controle e o outro — e no celular é justamente onde o espaço falta.
 */
@media (max-width: 720px) {
	.et-ajuste__grade {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.et-ajuste__rotulo {
		min-height: 0;
	}

	.et-ajuste__barra {
		margin: 0 0 6px;
	}

	/*
	 * ─────────────────────────────────────────────────────────────────────
	 * NO CELULAR A COLUNA OCUPA A TELA INTEIRA.
	 *
	 * Ela tem base de 340px para caber ao lado da prévia no computador. Num
	 * telefone de 430 a prévia já foi para cima, e a base virou um teto: a
	 * coluna parava em 340, sobrava tela vazia à direita, e a barra herdava
	 * essa largura curta. Alargar a barra não adiantava — quem estava
	 * estreito era a coluna em volta dela.
	 * ─────────────────────────────────────────────────────────────────────
	 */
	.et-thumb__lado,
	.et-thumb__palco {
		flex: 1 1 100%;
	}

	/*
	 * Vinte e quatro de recuo de cada lado, num telefone de 430, é um sexto da
	 * tela gasto em margem — e é ela que faltava na barra. Doze deixa a barra
	 * larga sem encostar na beirada, que é onde o polegar erra o alvo.
	 */
	.et-thumb__lado .et-form {
		padding-left: 12px;
		padding-right: 12px;
	}
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * A BARRA OCUPA A LINHA INTEIRA — em flex, e não em grade.
 *
 * No celular dele ela saía com um terço da largura da coluna: um alvo de 150px
 * para escolher entre cem posições, num controle que se usa arrastando. A
 * grade de duas colunas (`1fr auto`) com o campo mandado atravessar as duas
 * funcionava no computador e não no telefone — e não interessa de quem é a
 * culpa: o que importa é que o resultado não dependa de o navegador entender a
 * mesma sutileza que eu.
 *
 * Em flex a regra é direta: rótulo e número na primeira linha, e o campo com
 * `flex-basis: 100%`, que o obriga a quebrar para a linha de baixo e ocupar
 * tudo. Não há área de grade para o navegador interpretar.
 * ─────────────────────────────────────────────────────────────────────────────
 */
.et-ajuste__barra {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 8px;
	margin: 0 0 2px;
}

/*
 * O RÓTULO TEM ALTURA FIXA — para as duas colunas andarem lado a lado.
 *
 * Um rótulo de uma linha ao lado de outro de duas desalinha as barras, e a
 * grade vira escada. Reservando o espaço de duas linhas, todas as filas ficam
 * na mesma altura, caiba o texto em uma ou em duas.
 */
.et-ajuste__rotulo {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--et-ui-suave);
	line-height: 1.25;

	/*
	 * A ALTURA RESERVADA É SÓ PARA AS DUAS COLUNAS ANDAREM LADO A LADO — um
	 * rótulo de uma linha ao lado de outro de duas vira escada. Em coluna
	 * única, mais abaixo, ela é devolvida: ali só gastaria altura à toa.
	 */
	min-height: 2.4em;
	display: flex;
	align-items: flex-end;
}

.et-ajuste__valor {
	flex: 0 0 auto;
}

/*
 * O NÚMERO FICA À DIREITA DO RÓTULO — na mesma linha, sem gastar altura.
 *
 * Sem ele, a barra no meio do curso não diz nada: "está em algum lugar entre
 * esquerda e direita". Com ele dá para repetir um enquadramento que deu certo
 * em outro jogo.
 */
.et-ajuste__valor {
	font-size: 12px;
	font-weight: 700;
	color: var(--et-ui-primaria);
	font-variant-numeric: tabular-nums;
}

/*
 * A BARRA É GROSSA PORQUE O AJUSTE É FINO.
 *
 * `input[type=range]` de fábrica tem um punho de 12px, e enquadrar uma foto no
 * celular com 12px de alvo é escorregar dez vezes até acertar. O que se ganha
 * em precisão aqui aparece direto na capa — por isso a altura dela não entrou
 * no aperto acima.
 */
.et-ajuste__barra input[type="range"] {
	/*
	 * `flex-basis: 100%` é o que quebra a linha e toma a largura toda. O
	 * `min-width: 0` está aqui porque um item de flex não encolhe abaixo do
	 * tamanho natural dele sem essa licença — e o natural de um `range` é
	 * curto, que era exatamente o defeito.
	 */
	flex: 1 0 100%;
	min-width: 0;
	width: 100%;
	height: 24px;
	margin: 0;
	accent-color: var(--et-ui-primaria);
	cursor: pointer;
}

.et-ajuste .et-dica {
	margin: 0 0 8px;
}

.et-ajuste .et-form__acoes {
	margin-top: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   A CONFERÊNCIA DA API — o que já está cadastrado, por campeonato

   "Puxar todos os jogos do time na API e, caso já exista um cadastrado no
   sistema, o site informar."
   ═══════════════════════════════════════════════════════════════════════════ */

.et-conferir .et-linha__nome {
	gap: 2px;
}

/*
 * A CONTA SECUNDÁRIA É MENOR E MAIS APAGADA.
 *
 * A linha responde à pergunta dele — "já tenho quantos dos quantos" — e essa
 * frase é a que tem de ser lida de relance. O resto (novos, diferentes, os que
 * ainda não aconteceram) é o detalhe de quem for resolver, e disputar o mesmo
 * peso faria as duas se anularem.
 */
.et-conferir__contas {
	font-size: 12px;
	color: var(--et-ui-suave);
}

.et-conferir__contas strong {
	color: var(--et-ui-primaria);
}

.et-conferir__erro {
	color: #a3121f;
}

.et-conferir__fora {
	margin-top: 18px;
	padding: 14px 16px;
	border: 1px solid var(--et-ui-borda);
	border-radius: 10px;
	background: #fff;
}

.et-conferir__lista {
	margin: 8px 0 0;
	padding-left: 20px;
	font-size: 13.5px;
	line-height: 1.7;
	max-height: 220px;
	overflow-y: auto;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * AS FOTOS DAS NOTÍCIAS, PARA ESCOLHER O FUNDO DA CAPA DO NEWS.
 *
 * Fica em grade porque a escolha é uma COMPARAÇÃO: as candidatas precisam estar
 * à vista ao mesmo tempo. Empilhadas, ele rolaria a tela entre uma e outra e
 * escolheria de memória.
 * ───────────────────────────────────────────────────────────────────────────── */
/*
 * ─────────────────────────────────────────────────────────────────────────────
 * A ESCOLHA DA FOTO É UMA GRADE DE CARTÕES — não uma pilha de rádios.
 *
 * "Melhora o layout disso aí também, tá muito bagunçado."
 *
 * Era uma coluna: bolinha em cima, foto larga embaixo, legenda em três linhas,
 * e a próxima foto só depois de tudo isso. Quatro matérias enchiam a coluna
 * inteira e empurravam os campos que importam — manchete, destaque, barras —
 * para fora da tela.
 *
 * Aqui são dois por fileira, com a legenda cortada em duas linhas para que os
 * cartões fiquem do mesmo tamanho. A bolinha sai de cena: quem diz qual está
 * valendo é a moldura vermelha, que se vê de longe e não pede pontaria.
 * ─────────────────────────────────────────────────────────────────────────────
 */
.et-news-fotos {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 8px;
	margin-top: 6px;
}

.et-news-fotos__uma {
	display: block;
	padding: 4px;
	border: 1px solid var(--et-ui-borda, #e3e6ec);
	border-radius: 8px;
	background: #fff;
	font-size: 11px;
	line-height: 1.3;
	color: #555;
}

/*
 * O CARTÃO DEIXOU DE SER CLICÁVEL INTEIRO.
 *
 * Ele era um `<label>` com um rádio só: clicar em qualquer canto escolhia a
 * foto. Com duas vagas, um clique no meio do cartão não tem resposta certa —
 * quem responde são os dois números embaixo dele. Por isso o cartão perdeu o
 * `cursor: pointer` e o realce do rato.
 */

.et-news-fotos__uma img {
	display: block;
	width: 100%;
	height: 62px;
	object-fit: cover;
	border-radius: 5px;
	border: 2px solid transparent;
}

/*
 * A LEGENDA TEM DUAS LINHAS, SEMPRE.
 *
 * Sem o corte, um título curto e um comprido davam cartões de alturas
 * diferentes e a grade ficava serrilhada — parte do "bagunçado".
 */
.et-news-fotos__nome {
	display: -webkit-box;
	overflow: hidden;
	margin-top: 4px;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	min-height: 2.6em;
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * AS DUAS VAGAS DE CADA CARTÃO.
 *
 * "Coloca duas fotos em 16:9 que podem ser selecionadas das fotos das
 *  notícias."
 *
 * O "1" é a moldura de cima e o "2" é a de baixo — os mesmos números que a
 * dica do campo explica. Marcado, o número acende: é assim que se lê a capa
 * inteira de relance, sem abrir a prévia.
 * ─────────────────────────────────────────────────────────────────────────────
 */
.et-news-fotos__vagas {
	display: flex;
	gap: 4px;
	margin-top: 4px;
}

.et-news-vaga {
	flex: 1 1 0;
	cursor: pointer;
}

.et-news-vaga span {
	display: block;
	padding: 3px 0;
	border: 1px solid var(--et-ui-borda, #e3e6ec);
	border-radius: 6px;
	background: #fff;
	color: var(--et-ui-suave, #5b6472);
	font-size: 12px;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
}

.et-news-vaga:hover span {
	border-color: var(--et-ui-primaria, #c1121f);
	color: var(--et-ui-primaria, #c1121f);
}

.et-news-vaga input:checked + span {
	border-color: var(--et-ui-primaria, #c1121f);
	background: var(--et-ui-primaria, #c1121f);
	color: #fff;
}

.et-news-vaga input:focus-visible + span {
	outline: 2px solid var(--et-ui-primaria, #c1121f);
	outline-offset: 1px;
}

/* A escolhida se vê pela moldura, e não pela bolinha. */
.et-news-fotos__uma:has( input:checked ) {
	border-color: var(--et-ui-primaria, #c1121f);
	box-shadow: inset 0 0 0 1px var(--et-ui-primaria, #c1121f);
}

.et-news-fotos__uma:has( input:checked ) img {
	border-color: var(--et-ui-primaria, #c1121f);
}

/*
 * A bolinha continua existindo para o teclado e para o leitor de tela: ela sai
 * do desenho, e não da página. Escondê-la com `display:none` a tiraria também
 * da navegação por Tab.
 */
.et-news-fotos__uma input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.et-news-fotos__uma:focus-within {
	border-color: var(--et-ui-primaria, #c1121f);
	outline: 2px solid var(--et-ui-primaria, #c1121f);
	outline-offset: 1px;
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * O ENVIO DA FOTO DELE.
 *
 * "Coloca na thumb também do news de poder enviar uma foto que quiser."
 *
 * Fica logo abaixo da grade, com a mesma cara de um campo: é a última opção da
 * mesma pergunta — qual foto vai para o fundo.
 * ─────────────────────────────────────────────────────────────────────────────
 */
.et-news-envio {
	display: block;
	margin-top: 8px;
	padding: 8px;
	border: 1px dashed var(--et-ui-borda, #d6d6d6);
	border-radius: 8px;
	background: #fafbfc;
}

.et-news-envio__rotulo {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 700;
	color: var(--et-ui-texto, #222);
}

.et-news-envio input[type="file"] {
	width: 100%;
	font-size: 12px;
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * SALVAR E BAIXAR, LADO A LADO.
 *
 * Eram um botão pequeno à esquerda e uma faixa larga logo abaixo, com um vão
 * entre os dois — pareciam de telas diferentes. São a mesma sequência: salvar
 * o que se mexeu, depois levar a capa embora.
 * ─────────────────────────────────────────────────────────────────────────────
 */
.et-thumb__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--et-ui-borda, #e3e6ec);
}

/*
 * `flex: 1 1 0` E NÃO `1 1 auto`: os dois partem de largura zero e dividem a
 * linha em partes iguais. Com `auto` o botão herdava a largura que ele teria
 * sozinho — a do bloco inteiro — e os dois quebravam em duas fileiras, que era
 * justamente o que se queria consertar.
 */
.et-thumb__acoes > .et-botao {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	justify-content: center;
	padding: 8px 6px;
	font-size: 13px;
	text-align: center;
}

/*
 * AS BARRAS DE ENQUADRAR, UMA POR FILEIRA.
 *
 * A grade de duas colunas é boa numa ficha larga; nesta coluna de 340px ela
 * punha "Foto na horizontal" e "Foto na vertical" em alturas diferentes, com o
 * rótulo de uma quebrando e o da outra não. Em fileiras, todas começam no
 * mesmo lugar.
 */
.et-thumb__lado .et-ajuste__grade {
	grid-template-columns: 1fr;
	gap: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * AS DICAS SAEM DA TELA — mas continuam no HTML.
 *
 * "Tira todas as interrogações com explicações do plugin."
 *
 * Elas moravam atrás de um botãozinho "?" ao lado de cada rótulo, e o botão
 * saiu com o pedido. O texto NÃO saiu: ele é o que o leitor de tela lê, o que
 * se acha procurando no código, e o que volta a aparecer no dia em que ele
 * pedir a orientação de volta. `display: none` esconde de quem olha e mantém
 * para quem procura.
 *
 * E AGORA SAÍRAM TODAS, inclusive as `--sempre`.
 *
 * "Tira todos os textos de explicação também."
 *
 * A exceção que ficou de pé eram as dicas que explicam o que vai acontecer ao
 * salvar. Elas foram o último resto de tela explicada — e num painel que ele
 * usa todo dia, no celular, minutos antes de entrar no ar, cada parágrafo é
 * rolagem entre ele e o botão. A regra perdeu a exceção; o seletor virou uma
 * palavra só.
 * ───────────────────────────────────────────────────────────────────────────── */
.et-dica {
	display: none !important;
}