/**
 * Estilos dos 4 widgets do módulo Caixa (docs/especificacao-caixa.md §5),
 * portados de referencia/caixa/widgets-caixa.html. Classes prefixadas
 * "dnp-caixa-" (convenção do plugin — ver assets/css/dnp-resultado.css),
 * diferente dos nomes de classe do protótipo (que são só para o documento
 * de referência visual, não para produção).
 */

.dnp-caixa-w-hoje,
.dnp-caixa-w-concursos,
.dnp-caixa-w-resultado,
.dnp-caixa-w-indice {
	--dnp-caixa-verde-escuro: #013d1e;
	--dnp-caixa-verde-medio: #00622f;
	--dnp-caixa-verde-texto: #0b5e2e;
	--dnp-caixa-verde-claro-bg: #eaf4ee;
	--dnp-caixa-verde-claro-borda: #bfe3cc;
	--dnp-caixa-cinza-borda: #e3e9e6;
	--dnp-caixa-cinza-texto: #5b6b62;
	--dnp-caixa-azul-pill: #0b5ed7;
	box-sizing: border-box;
}

.dnp-caixa-w-hoje *,
.dnp-caixa-w-concursos *,
.dnp-caixa-w-resultado *,
.dnp-caixa-w-indice * {
	box-sizing: border-box;
}

.dnp-caixa-aviso {
	color: #7a1f1f;
}

/* ============ Widget A — [dnp_caixa_hoje] / [dnp_caixa_cards] ============ */

.dnp-caixa-w-hoje {
	background: #f7faf8;
	border: 1px solid var(--dnp-caixa-verde-claro-borda);
	border-radius: 16px;
	padding: 28px 24px;
	margin-bottom: 30px;
}
.dnp-caixa-w-hoje.dnp-caixa-compacto {
	background: #fff;
	border-radius: 12px;
}
.dnp-caixa-w-hoje h3 {
	text-align: center;
	font-size: 22px;
	color: #22302a;
	margin: 0 0 8px;
}
.dnp-caixa-w-hoje.dnp-caixa-compacto h3 {
	font-size: 18px;
}
.dnp-caixa-sub {
	text-align: center;
	font-size: 13px;
	color: var(--dnp-caixa-cinza-texto);
	max-width: 520px;
	margin: 0 auto 20px;
}
.dnp-caixa-sub strong {
	color: #22302a;
}
.dnp-caixa-divisor {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 20px;
}
.dnp-caixa-divisor .dnp-caixa-linha {
	width: 60px;
	height: 1px;
	background: var(--dnp-caixa-cinza-borda);
}
.dnp-caixa-divisor .dnp-caixa-marca {
	width: 8px;
	height: 8px;
	background: var(--dnp-caixa-verde-medio);
	transform: rotate(45deg);
	border-radius: 2px;
	flex-shrink: 0;
}
.dnp-caixa-grid-jogos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
.dnp-caixa-grid-jogos.dnp-caixa-duas-colunas {
	grid-template-columns: repeat(2, 1fr);
	max-width: 500px;
	margin: 0 auto;
}
.dnp-caixa-card-jogo {
	display: block;
	background: #fff;
	border-radius: 10px;
	padding: 18px 12px;
	text-align: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
	text-decoration: none;
	color: inherit;
}
.dnp-caixa-card-jogo .dnp-caixa-nome {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 8px;
}
.dnp-caixa-logo-lockup {
	height: 20px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}
.dnp-caixa-card-jogo .dnp-caixa-valor {
	font-weight: bold;
	color: #22302a;
	font-size: 14px;
	margin-bottom: 4px;
}
.dnp-caixa-card-jogo .dnp-caixa-meta {
	font-size: 11px;
	color: var(--dnp-caixa-cinza-texto);
}

/* ============ Widget B — [dnp_caixa_concursos] ============ */

.dnp-caixa-w-concursos {
	background: #fff;
	border: 1px solid var(--dnp-caixa-cinza-borda);
	border-radius: 10px;
	padding: 20px;
	max-width: 620px;
	margin: 0 auto 20px; /* dnp-caixa-align-center é o default do shortcode (atributo align=) */
}
.dnp-caixa-w-concursos h4 {
	text-align: center;
	font-size: 14px;
	margin: 0 0 14px;
}
.dnp-caixa-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}
.dnp-caixa-pill {
	font: inherit;
	border: 1px solid var(--dnp-caixa-cinza-borda);
	border-radius: 20px;
	padding: 8px 16px;
	text-align: center;
	font-size: 12px;
	cursor: pointer;
	min-width: 100px;
	background: #fff;
	color: var(--dnp-caixa-verde-texto);
	position: relative;
}
.dnp-caixa-pill strong {
	display: block;
	font-size: 13px;
}
.dnp-caixa-pill:hover:not(.dnp-caixa-ativo) {
	background: var(--dnp-caixa-verde-escuro);
	border-color: var(--dnp-caixa-verde-escuro);
	color: #fff;
}
.dnp-caixa-pill.dnp-caixa-ativo {
	background: var(--dnp-caixa-verde-medio); /* mais claro que o hover (--dnp-caixa-verde-escuro) */
	border-color: var(--dnp-caixa-verde-medio);
	color: #fff;
}
.dnp-caixa-pill.dnp-caixa-parcial::after {
	content: "•";
	color: #c98a00;
	font-size: 18px;
	position: absolute;
	top: -2px;
	right: 6px;
}
.dnp-caixa-pill:focus-visible,
.dnp-caixa-card-indice:focus-visible,
.dnp-caixa-card-jogo:focus-visible,
.dnp-caixa-seta:focus-visible,
.dnp-caixa-btn-atualizar:focus-visible {
	outline: 2px solid var(--dnp-caixa-azul-pill);
	outline-offset: 2px;
}

/* ============ Widget C — [dnp_caixa_resultado] ============ */

.dnp-caixa-w-resultado {
	max-width: 620px;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
	background: #fff;
	margin: 0 auto; /* dnp-caixa-align-center é o default do shortcode (atributo align=) */
}
/* align= compartilhado por [dnp_caixa_resultado] e [dnp_caixa_concursos] */
.dnp-caixa-w-resultado.dnp-caixa-align-left,
.dnp-caixa-w-concursos.dnp-caixa-align-left { margin-left: 0; margin-right: auto; }
.dnp-caixa-w-resultado.dnp-caixa-align-center,
.dnp-caixa-w-concursos.dnp-caixa-align-center { margin-left: auto; margin-right: auto; }
.dnp-caixa-w-resultado.dnp-caixa-align-right,
.dnp-caixa-w-concursos.dnp-caixa-align-right { margin-left: auto; margin-right: 0; }
.dnp-caixa-header {
	background: linear-gradient(135deg, var(--dnp-caixa-verde-medio), var(--dnp-caixa-verde-escuro));
	color: #fff;
	padding: 18px 24px;
	position: relative;
	text-align: center;
}
.dnp-caixa-seta {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .15);
	border: none;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	cursor: pointer;
}
.dnp-caixa-seta.dnp-caixa-esq { left: 16px; }
.dnp-caixa-seta.dnp-caixa-dir { right: 16px; }
.dnp-caixa-seta.dnp-caixa-oculta { visibility: hidden; }
.dnp-caixa-header h5 { margin: 0; font-size: 18px; }
/* Após cada troca de concurso via seta ‹›/pill (dnp-caixa.js), o foco é
   movido pro <h5> do header via tabindex="-1" só pra acessibilidade (leitor
   de tela anunciar a troca) — nunca é alcançável via Tab, então o anel de
   foco padrão do tema aqui não serve a navegação real por teclado, só polui
   visualmente o header verde. Sobrescreve o box-shadow que o tema aplica em
   [tabindex="-1"]:focus (--nv-secondary-accent) sem afetar foco de setas,
   pills ou qualquer outro controle de fato navegável por teclado. */
.dnp-caixa-header h5[tabindex="-1"]:focus {
	outline: 0;
	box-shadow: none;
}
.dnp-caixa-dia-semana { font-size: 12px; font-weight: bold; margin-top: 4px; opacity: .9; }

.dnp-caixa-corpo { padding: 22px 24px; }

.dnp-caixa-dezenas {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}
.dnp-caixa-dezena {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--dnp-caixa-verde-claro-bg);
	border: 2px solid var(--dnp-caixa-verde-claro-borda);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	color: var(--dnp-caixa-verde-texto);
	font-size: 14px;
}
.dnp-caixa-dezena.dnp-caixa-bilhete {
	width: auto;
	min-width: 70px;
	border-radius: 8px;
	padding: 0 8px;
	font-size: 12px;
}

.dnp-caixa-faixas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 10px;
	margin-bottom: 14px;
}
.dnp-caixa-faixa-box {
	border: 1px solid var(--dnp-caixa-cinza-borda);
	border-radius: 8px;
	padding: 10px 8px;
	text-align: center;
}
.dnp-caixa-faixa-box .dnp-caixa-rotulo { font-weight: bold; font-size: 12px; margin-bottom: 4px; }
.dnp-caixa-faixa-box .dnp-caixa-valor { font-size: 11px; color: #22302a; }
.dnp-caixa-faixa-box.dnp-caixa-apurando .dnp-caixa-valor { color: #c98a00; font-style: italic; }
.dnp-caixa-faixa-box.dnp-caixa-permanente .dnp-caixa-valor { color: #6b6b6b; font-style: italic; }

.dnp-caixa-box-info {
	border: 1px solid var(--dnp-caixa-cinza-borda);
	border-radius: 8px;
	padding: 10px 14px;
	text-align: center;
	margin-bottom: 12px;
	font-size: 12px;
}
.dnp-caixa-box-info .dnp-caixa-rotulo { font-weight: bold; margin-bottom: 4px; }
.dnp-caixa-box-info.dnp-caixa-extra {
	border-color: var(--dnp-caixa-verde-claro-borda);
	background: var(--dnp-caixa-verde-claro-bg);
	color: var(--dnp-caixa-verde-texto);
	margin-bottom: 14px;
}
.dnp-caixa-box-info.dnp-caixa-lista-ganhadores { text-align: left; }
.dnp-caixa-box-info.dnp-caixa-lista-ganhadores .dnp-caixa-rotulo { text-align: center; }
.dnp-caixa-box-info.dnp-caixa-lista-ganhadores ul { margin: 0; padding-left: 18px; }

.dnp-caixa-box-proximo {
	background: var(--dnp-caixa-verde-claro-bg);
	border-radius: 8px;
	padding: 14px;
	text-align: center;
	margin-bottom: 12px;
}
.dnp-caixa-box-proximo .dnp-caixa-rotulo {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--dnp-caixa-verde-texto);
	font-weight: bold;
}
.dnp-caixa-box-proximo .dnp-caixa-valor {
	font-size: 26px;
	font-weight: bold;
	color: var(--dnp-caixa-verde-texto);
	margin: 4px 0;
}
.dnp-caixa-box-proximo .dnp-caixa-data { font-size: 11px; color: var(--dnp-caixa-verde-texto); }

.dnp-caixa-paragrafo-nota {
	border: 1px solid var(--dnp-caixa-cinza-borda);
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 11px;
	color: #43524a;
	text-align: center;
	margin-bottom: 10px;
}

.dnp-caixa-btn-atualizar {
	display: block;
	width: 100%;
	background: var(--dnp-caixa-verde-escuro);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 12px;
	font-size: 13px;
	font-weight: bold;
	cursor: pointer;
	margin-top: 4px;
}

/* Link "Compartilhar" (.dnp-zap-link, DNP_Shortcode_Compartilhar::render_zap())
   — centralizado no corpo do card, mesmo padrão flex+justify-content de
   .dnp-caixa-dezenas acima, independente do align= do shortcode. */
.dnp-caixa-zap-wrap {
	display: flex;
	justify-content: center;
	margin-top: 14px;
}

.dnp-caixa-nota-estado {
	display: inline-block;
	font-size: 11px;
	font-weight: bold;
	padding: 3px 10px;
	border-radius: 20px;
	margin-bottom: 10px;
}
.dnp-caixa-nota-estado.dnp-caixa-ok { background: #e3f4e9; color: #1c7a45; }
.dnp-caixa-nota-estado.dnp-caixa-espera { background: #fdf1d6; color: #ad7c00; }
.dnp-caixa-nota-estado.dnp-caixa-permanente { background: #ececec; color: #5b5b5b; }

/* ============ Widget D — [dnp_caixa_indice] ============ */

.dnp-caixa-indice-titulo {
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	color: var(--dnp-caixa-verde-texto);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-bottom: 28px;
}
.dnp-caixa-indice-titulo .dnp-caixa-linha {
	flex: 1;
	max-width: 200px;
	height: 1px;
	background: var(--dnp-caixa-cinza-borda);
}
.dnp-caixa-w-indice {
	margin-bottom: 30px;
}
.dnp-caixa-grid-indice {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
	max-width: none;
	width: 100%;
}
.dnp-caixa-card-indice {
	display: block;
	background: #fff;
	border: 1px solid var(--dnp-caixa-cinza-borda);
	border-radius: 10px;
	padding: 20px 16px;
	text-align: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .03);
	text-decoration: none;
	color: inherit;
}
.dnp-caixa-logo-nome {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
	min-height: 22px;
}
.dnp-caixa-logo-nome img { height: 22px; width: auto; max-width: 100%; object-fit: contain; }
.dnp-caixa-card-indice .dnp-caixa-titulo { font-weight: bold; color: #22302a; font-size: 14px; margin-bottom: 6px; }
.dnp-caixa-card-indice .dnp-caixa-subtitulo { font-size: 12px; color: var(--dnp-caixa-cinza-texto); line-height: 1.4; }

@media (max-width: 960px) {
	.dnp-caixa-grid-indice {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 640px) {
	.dnp-caixa-grid-jogos,
	.dnp-caixa-grid-indice {
		grid-template-columns: repeat(2, 1fr);
	}
	.dnp-caixa-grid-jogos.dnp-caixa-duas-colunas {
		grid-template-columns: 1fr;
		max-width: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dnp-caixa-w-hoje *,
	.dnp-caixa-w-concursos *,
	.dnp-caixa-w-resultado *,
	.dnp-caixa-w-indice * {
		transition: none !important;
		animation: none !important;
	}
}