/**
 * Zenth Toolkit — zenth-panel-switch: mecánica del control segmentado
 * genérico (modo "paneles" y modo "anclas").
 *
 * Solo layout/estructura y reset de botón/enlace. Sin colores de marca ni
 * tipografías: la píldora/pista activa y sus colores los pinta la piel del
 * tema (seeds/style-header.css), anidada bajo la clase de la sección que
 * use este widget. "is-active" es el único gancho que este CSS deja para
 * que esa piel decida qué pintar.
 *
 * Regla de FOUC del modo "paneles" (ver class-zenth-panel-switch.php y
 * assets/js/zenth-panel-switch.js): los paneles NO son hijos de este widget —
 * son elementos hermanos en algún ancestro común ("ámbito"), marcados a
 * mano con "data-panel" (o, al sembrar con Elementor FREE, con la clase
 * "zenth-panel--<clave>" — el JS la promueve a "data-panel" apenas
 * arranca, así que esta hoja solo necesita conocer el atributo). Sin
 * JavaScript, TODOS deben verse (degradación correcta), así que esta hoja
 * NUNCA los oculta por su cuenta. Solo cuando
 * assets/js/zenth-panel-switch.js ya corrió y decidió cuál es el panel activo,
 * marca el ámbito con la clase "zenth-pswitch-ready" y el panel activo con
 * el atributo "data-panel-active": la regla de más abajo entonces oculta
 * el resto. Especificidad alta a propósito (clase + atributo + pseudo-
 * clase con atributo) para ganarle con margen a un ".e-con{display:flex}"
 * u otra regla de layout del propio Elementor sin necesitar "!important"
 * (regla de oro del proyecto).
 */

.zenth-pswitch {
	position: relative;
}

.zenth-pswitch__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

/* Selector de dos clases (0,2,0): le gana por especificidad al reset de
   Hello Elementor sobre "button"/"a" (0,1,1), sin necesitar "!important". */
.zenth-pswitch .zenth-pswitch__tab,
.zenth-pswitch .zenth-pswitch__link {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	margin: 0;
	padding: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
	text-align: center;
	text-decoration: none;
}

.zenth-pswitch .zenth-pswitch__tab:focus-visible,
.zenth-pswitch .zenth-pswitch__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Mecánica de "sin JS, todos los paneles visibles" (ver docblock de
   arriba): a propósito NO está anidada bajo ".zenth-pswitch" — el ámbito
   marcado con "zenth-pswitch-ready" es un ancestro común del widget y de
   los paneles, nunca un descendiente suyo. */
.zenth-pswitch-ready [data-panel]:not( [data-panel-active] ) {
	display: none;
}