/* Canal Cero · components.css — estados globales de interacción.
   Los colores y el hover de los botones de Divi viven en sus Presets (Divi → Presets
   de Botón: primario, secundario, claro, agregar). Aquí solo va lo que un Preset no
   puede expresar: transición, foco de teclado y estado presionado. */

:root {
	--cc-duracion: 200ms;
	--cc-curva: cubic-bezier(0.2, 0, 0, 1);
	--cc-foco-ancho: 2px;
	--cc-foco-separacion: 3px;
}

/* Foco visible solo con teclado, en todo el sitio. Mostaza de texto = contraste AA
   sobre fondo, superficie y superficie alternativa. :is() (no :where()) para ganarle
   al reset de Divi ":focus { outline: 0 }" sin !important. */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--cc-foco-ancho) solid var(--cc-acento-texto);
	outline-offset: var(--cc-foco-separacion);
}

/* Botones de Divi: la transición del hover la define el Preset (Divi, 300ms).
   Aquí solo el "presionado", con transform para no mover el layout. */
.et_pb_button:active {
	transform: translateY(1px);
}

/* Sobre fondos oscuros o fotos, el foco pasa a claro. */
.cc-sobre-oscuro :focus-visible {
	outline-color: var(--cc-superficie);
}

/* Movimiento reducido. El selector largo iguala +1 la especificidad del CSS de
   Presets de Divi ("body #page-container .et_pb_section .preset--…") sin !important. */
@media (prefers-reduced-motion: reduce) {
	a,
	html body #page-container .et_pb_section .et_pb_button {
		transition: none;
	}

	.et_pb_button:active {
		transform: none;
	}
}

/* Foco sobre fondos oscuros (barra superior, header, pie, secciones noche): el verde
   de texto no se distingue del fondo; ahí el contorno va en salvia. */
:is(.ishiku-topbar, .et-l--header, .et-l--footer, .cc-sobre-oscuro) :is(a, button, [tabindex]):focus-visible {
	outline-color: var(--cc-salvia);
}

/* "Compra tu entrada" (barra superior, módulo Code del header): texto crema sobre
   #7fa42f daba 2,6:1. Con el acento de texto #557320 llega a 5,7:1 (WCAG 1.4.3). */
.ishiku-topbar a.ishiku-ticket {
	background-color: var(--cc-acento-texto);
}

.ishiku-topbar a.ishiku-ticket:hover {
	background-color: var(--cc-bosque);
}