/* =========================================================
   BLOQUE 5 FUTSAL KIT LAB — kit-lab.css
   Fases 2-7 (parte 1)/10: estructura visual base, motor de equipación,
   editor de colores/patrones, panel de Detalles (escudo/patrocinador/
   nombre/dorsal), Stage premium (spotlight, líneas de luz, HUD,
   reflejo, profundidad/tilt, modo 3D/2D/Previa — Fase 6) y navegación
   real por pasos (panel muestra una sección a la vez + Atrás/Siguiente
   — Fase 7, parte 1).

   Namespace propio (--kl-*), aislado de las custom properties del resto
   del tema (--b5-*): el Kit Lab es una experiencia visual distinta al
   resto del sitio (software deportivo premium, no "una página más de
   WordPress"), así que no hereda ni sobrescribe los tokens globales.
   Reutiliza sí las tipografías ya cargadas (Oswald/Inter) por coherencia
   de marca y para no pedir fuentes nuevas.
   ========================================================= */

/* El Kit Lab es una aplicación a pantalla completa: el scroll vive
   SIEMPRE dentro de sus paneles (.b5-kl-panel / .b5-kl-steps), nunca en
   el documento. Hasta ahora solo .b5-kitlab bloqueaba el desbordamiento,
   así que cualquier cosa inyectada por wp_body_open()/wp_footer() (o el
   desfase entre 100dvh y el 100% del html mientras el navegador móvil
   anima su barra de direcciones) hacía que la página entera se pudiera
   arrastrar arriba y abajo. Se bloquea en la raíz. */
.b5-kitlab-html,
.b5-kitlab-html body {
	height: 100%;
	overflow: hidden;
}

.b5-kitlab {
	--kl-black: #04060A;
	--kl-navy: #0A0F1A;
	--kl-navy-2: #0E1524;
	--kl-blue: #1475E1;
	--kl-blue-deep: #0E519C;
	--kl-cyan: #2DD9F0;
	--kl-cyan-soft: rgba(45, 217, 240, 0.16);
	--kl-white: #F4F7FB;
	--kl-text-secondary: #A9B4C4;
	--kl-text-muted: #6C7789;
	--kl-border: rgba(255, 255, 255, 0.08);
	--kl-border-strong: rgba(255, 255, 255, 0.14);
	--kl-glass: rgba(14, 20, 33, 0.6);
	--kl-glass-strong: rgba(10, 15, 26, 0.82);

	--kl-radius-sm: 8px;
	--kl-radius-md: 12px;
	--kl-radius-lg: 18px;

	--kl-shadow-float: 0 20px 48px rgba(0, 0, 0, 0.45);
	--kl-shadow-glow-cyan: 0 0 0 1px rgba(45, 217, 240, 0.25), 0 0 32px rgba(45, 217, 240, 0.18);

	/* Fase 6: color reactivo del Stage. kl_syncColors() lo actualiza a
	   partir de KL_STATE.colores.principal en cada cambio de color o de
	   plantilla — el cian es solo el valor de fábrica antes de que JS
	   calcule el primero real. Todo lo que "reacciona al color principal"
	   (spotlight, halo, líneas de luz, reflejo) lee esta única variable,
	   así que no hay que tocar más de un sitio si cambia el criterio. */
	--kl-stage-glow: var(--kl-cyan);

	--kl-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--kl-duration: 0.2s;
	/* Fase 6: duración algo mayor, solo para transiciones de composición
	   del Stage (tilt, entrada, cambio de modo) — los cambios de color/
	   patrón del rig (Fase 3/4) siguen usando --kl-duration, más ágil,
	   para no sentirse lentos al pintar 16 piezas. */
	--kl-duration-stage: 0.5s;

	--kl-header-height: 68px;
	--kl-sidebar-width: 96px;
	--kl-panel-width: 320px;

	height: 100%;
	display: flex;
	flex-direction: column;
	background: radial-gradient(120% 140% at 50% -10%, var(--kl-navy-2) 0%, var(--kl-black) 62%);
	color: var(--kl-white);
	font-family: var(--b5-font-texto, 'Inter', sans-serif);
	overflow: hidden;
}

.b5-kitlab-body {
	margin: 0;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	/* Evita el "rebote" de la página al llegar al final de un panel
	   interno (iOS/Android), que se percibe como que la app se mueve. */
	overscroll-behavior: none;
}

.b5-kitlab *,
.b5-kitlab *::before,
.b5-kitlab *::after {
	box-sizing: border-box;
}

.b5-kitlab button {
	font-family: inherit;
	cursor: pointer;
}

/* -----------------------------------------------------------
   HEADER
   ----------------------------------------------------------- */
.b5-kl-header {
	flex: 0 0 auto;
	height: var(--kl-header-height);
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 0 24px;
	background: var(--kl-glass-strong);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--kl-border);
	position: relative;
	z-index: 20;
}

.b5-kl-header__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: inherit;
	flex: 0 0 auto;
}

.b5-kl-header__logo {
	display: block;
	filter: drop-shadow(0 0 10px rgba(45, 217, 240, 0.25));
}

.b5-kl-header__title {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.b5-kl-header__eyebrow {
	font-family: var(--b5-font-titulares, 'Oswald', sans-serif);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	color: var(--kl-cyan);
	text-transform: uppercase;
}

.b5-kl-header__name {
	font-family: var(--b5-font-titulares, 'Oswald', sans-serif);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--kl-white);
	text-transform: uppercase;
}

.b5-kl-header__status {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--kl-border);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--kl-text-secondary);
	text-transform: uppercase;
	flex: 0 0 auto;
}

.b5-kl-status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--kl-cyan);
	box-shadow: 0 0 10px var(--kl-cyan);
}

.b5-kl-header__view {
	margin-left: auto;
	display: flex;
	gap: 4px;
	padding: 4px;
	border-radius: var(--kl-radius-sm);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--kl-border);
	flex: 0 0 auto;
}

.b5-kl-view-btn {
	appearance: none;
	border: none;
	background: transparent;
	color: var(--kl-text-secondary);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 7px 14px;
	border-radius: calc(var(--kl-radius-sm) - 2px);
	transition: background var(--kl-duration) var(--kl-ease), color var(--kl-duration) var(--kl-ease);
}

.b5-kl-view-btn:hover {
	color: var(--kl-white);
}

.b5-kl-view-btn.is-active {
	background: var(--kl-cyan-soft);
	color: var(--kl-cyan);
}

/* El cambio de color de .is-active NO sirve como foco: marca qué vista
   está puesta, no dónde está el teclado. Mismo anillo que
   .b5-kl-history-btn para no inventar un segundo lenguaje de foco. */
.b5-kl-view-btn:focus-visible {
	outline: 2px solid var(--kl-cyan);
	outline-offset: 2px;
}

/* -----------------------------------------------------------
   HISTORIAL + FEEDBACK (Fase 7, parte 2)
   Deshacer/Rehacer reutilizan el mismo lenguaje visual del grupo
   de vistas del header (píldora de cristal + botón plano), en vez
   de introducir un tercer estilo de control. Los avisos (toasts)
   son la única capa flotante nueva de la interfaz.
   ----------------------------------------------------------- */
.b5-kl-header__history {
	display: flex;
	gap: 4px;
	padding: 4px;
	border-radius: var(--kl-radius-sm);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--kl-border);
	flex: 0 0 auto;
}

.b5-kl-history-btn {
	appearance: none;
	border: none;
	background: transparent;
	color: var(--kl-text-secondary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: calc(var(--kl-radius-sm) - 2px);
	transition: background var(--kl-duration) var(--kl-ease), color var(--kl-duration) var(--kl-ease), opacity var(--kl-duration) var(--kl-ease);
}

.b5-kl-history-btn svg {
	width: 18px;
	height: 18px;
	display: block;
}

.b5-kl-history-btn:hover:not(:disabled) {
	color: var(--kl-white);
	background: rgba(255, 255, 255, 0.06);
}

.b5-kl-history-btn:focus-visible {
	outline: 2px solid var(--kl-cyan);
	outline-offset: 2px;
}

/* Extremos del historial: el botón sigue ahí (la interfaz no salta de
   tamaño) pero queda claramente inoperante. */
.b5-kl-history-btn:disabled {
	opacity: 0.32;
	cursor: not-allowed;
}

/* Indicador de cambios sin guardar: la misma píldora "Borrador" de la
   Fase 2 cambia de tono en cuanto hay un cambio real en el diseño. */
.b5-kl-header__status.is-dirty {
	border-color: rgba(226, 166, 60, 0.45);
	color: var(--kl-white);
}

.b5-kl-header__status.is-dirty .b5-kl-status-dot {
	background: #E2A63C;
	box-shadow: 0 0 10px #E2A63C;
	animation: b5-kl-dot-pulse 1.8s var(--kl-ease) infinite;
}

@keyframes b5-kl-dot-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.45; }
}

/* Avisos. pointer-events:none en el contenedor para que nunca bloqueen
   un clic sobre el Stage o el panel que haya debajo. */
.b5-kl-toasts {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 60;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: min(92vw, 420px);
	pointer-events: none;
}

.b5-kl-toast {
	margin: 0;
	max-width: 100%;
	padding: 10px 16px;
	border-radius: 999px;
	background: var(--kl-glass-strong);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid var(--kl-border-strong);
	box-shadow: var(--kl-shadow-float);
	color: var(--kl-white);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
	text-align: center;
	overflow-wrap: anywhere;
	animation: b5-kl-toast-in 0.22s var(--kl-ease) both;
}

/* La duración de salida está duplicada en kit-lab.js (KL_TOAST_OUT_MS):
   si cambia aquí, hay que cambiarla allí. */
.b5-kl-toast.is-leaving {
	animation: b5-kl-toast-out 0.22s var(--kl-ease) both;
}

@keyframes b5-kl-toast-in {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

@keyframes b5-kl-toast-out {
	from { opacity: 1; transform: none; }
	to { opacity: 0; transform: translateY(6px); }
}

@media (max-width: 900px) {
	.b5-kl-toasts {
		bottom: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.b5-kl-toast,
	.b5-kl-toast.is-leaving {
		animation: none;
	}

	.b5-kl-header__status.is-dirty .b5-kl-status-dot {
		animation: none;
	}
}

.b5-kl-header__user {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 0 0 auto;
}

.b5-kl-header__user-avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--kl-blue), var(--kl-cyan));
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--b5-font-titulares, 'Oswald', sans-serif);
	font-size: 13px;
	font-weight: 600;
	color: var(--kl-black);
}

.b5-kl-header__user-name {
	font-size: 13px;
	color: var(--kl-text-secondary);
}

.b5-kl-header__user-login {
	font-size: 13px;
	font-weight: 600;
	color: var(--kl-cyan);
	text-decoration: none;
}

.b5-kl-header__exit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--kl-border);
	color: var(--kl-text-secondary);
	text-decoration: none;
	transition: border-color var(--kl-duration) var(--kl-ease), color var(--kl-duration) var(--kl-ease);
}

.b5-kl-header__exit:hover {
	color: var(--kl-white);
	border-color: var(--kl-border-strong);
}

/* -----------------------------------------------------------
   BODY (sidebar + stage + panel)
   ----------------------------------------------------------- */
.b5-kl-body {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: var(--kl-sidebar-width) 1fr var(--kl-panel-width);
	min-height: 0;
}

/* -----------------------------------------------------------
   SIDEBAR — pasos
   ----------------------------------------------------------- */
.b5-kl-steps {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	padding: 20px 12px;
	background: var(--kl-glass);
	border-right: 1px solid var(--kl-border);
	overflow-y: auto;
	/* Con overflow-y:auto, el eje horizontal en "visible" se comporta
	   como "auto": una etiqueta que no cupiera (ver .b5-kl-step__label)
	   sacaba una barra de desplazamiento lateral en esta columna. Aquí
	   nunca hay nada que mostrar de lado, así que se descarta el eje X;
	   el ajuste real del texto se hace en la propia etiqueta. */
	overflow-x: hidden;
}

.b5-kl-step {
	appearance: none;
	border: 1px solid transparent;
	background: transparent;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 14px 6px;
	border-radius: var(--kl-radius-md);
	color: var(--kl-text-muted);
	/* Sin esto, el ancho mínimo de contenido de la etiqueta (una sola
	   palabra larga) empuja el botón más allá de la columna. No se fija
	   width:100% a propósito: el contenedor ya usa align-items:stretch y
	   en <=600px estos botones pasan a fila con flex:1 1 auto. */
	min-width: 0;
	transition: background var(--kl-duration) var(--kl-ease), color var(--kl-duration) var(--kl-ease), border-color var(--kl-duration) var(--kl-ease);
}

.b5-kl-step:hover {
	color: var(--kl-text-secondary);
	background: rgba(255, 255, 255, 0.03);
}

.b5-kl-step__num {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid var(--kl-border-strong);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--b5-font-titulares, 'Oswald', sans-serif);
	font-size: 12px;
	font-weight: 600;
	transition: border-color var(--kl-duration) var(--kl-ease), background var(--kl-duration) var(--kl-ease), color var(--kl-duration) var(--kl-ease);
}

.b5-kl-step__label {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.2;
	/* "PREVISUALIZACIÓN" es una única palabra más ancha que los 72px
	   útiles del sidebar (96px - 2x12px de padding): sin permitir el
	   corte, desbordaba la columna. */
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
	hyphens: auto;
}

.b5-kl-step.is-active {
	color: var(--kl-white);
	background: rgba(45, 217, 240, 0.08);
	border-color: rgba(45, 217, 240, 0.2);
}

.b5-kl-step.is-active .b5-kl-step__num {
	border-color: var(--kl-cyan);
	background: var(--kl-cyan);
	color: var(--kl-black);
	box-shadow: 0 0 14px rgba(45, 217, 240, 0.5);
}

.b5-kl-step--save {
	margin-top: auto;
}

.b5-kl-step--save .b5-kl-step__num {
	border-color: rgba(255, 255, 255, 0.18);
}

/* -----------------------------------------------------------
   STAGE central
   ----------------------------------------------------------- */
.b5-kl-stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	/* Fase 6: perspectiva propia del Stage, para que el tilt del kit
	   (más abajo) tenga profundidad real en vez de solo escalar/sesgar.
	   El valor es generoso a propósito (poca distorsión, mucha sensación
	   de espacio) — ver ".b5-kl-kit" para el uso. */
	perspective: 1400px;
	background:
		radial-gradient(60% 50% at 50% 38%, color-mix(in srgb, var(--kl-stage-glow) 22%, transparent) 0%, transparent 70%),
		var(--kl-black);
	transition: background var(--kl-duration-stage) var(--kl-ease);
}

.b5-kl-stage__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	background-size: 42px 42px;
	-webkit-mask-image: radial-gradient(65% 65% at 50% 45%, #000 0%, transparent 75%);
	mask-image: radial-gradient(65% 65% at 50% 45%, #000 0%, transparent 75%);
	transition: opacity var(--kl-duration-stage) var(--kl-ease);
}

/* -----------------------------------------------------------
   SPOTLIGHT — Fase 6.
   Un único cono de luz cenital, discreto: refuerza la sensación de
   "laboratorio" sin competir con la equipación (punto 11 del documento
   maestro). Un solo elemento, sin filtros pesados. */
.b5-kl-stage__spotlight {
	position: absolute;
	top: -8%;
	left: 50%;
	width: 70%;
	height: 85%;
	transform: translateX(-50%);
	background: conic-gradient(
		from 180deg at 50% 0%,
		transparent 0deg,
		color-mix(in srgb, var(--kl-stage-glow) 10%, transparent) 78deg,
		color-mix(in srgb, var(--kl-stage-glow) 14%, transparent) 90deg,
		color-mix(in srgb, var(--kl-stage-glow) 10%, transparent) 102deg,
		transparent 180deg
	);
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
	mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
	opacity: 0.7;
	pointer-events: none;
	transition: opacity var(--kl-duration-stage) var(--kl-ease);
}

/* -----------------------------------------------------------
   LÍNEAS DE LUZ — Fase 6.
   Dos trazos finos, estáticos (sin animación continua: coste cero en
   cada frame), que insinúan movimiento/velocidad sin ser partículas. */
.b5-kl-stage__lines {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.5;
	background-image:
		linear-gradient(78deg, transparent 42%, color-mix(in srgb, var(--kl-stage-glow) 45%, transparent) 50%, transparent 58%),
		linear-gradient(70deg, transparent 66%, color-mix(in srgb, var(--kl-stage-glow) 30%, transparent) 71%, transparent 76%);
	background-repeat: no-repeat;
	background-size: 200% 200%;
	background-position: -10% 0%;
	-webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 78%);
	mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 78%);
}

.b5-kl-stage__platform {
	position: absolute;
	bottom: 12%;
	width: min(56%, 460px);
	aspect-ratio: 3 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.b5-kl-stage__halo {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--kl-stage-glow) 22%, transparent) 0%, transparent 70%);
	filter: blur(2px);
	transition: background var(--kl-duration-stage) var(--kl-ease);
}

.b5-kl-stage__halo::after {
	content: "";
	position: absolute;
	inset: 30% 10%;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--kl-stage-glow) 25%, transparent);
	transition: border-color var(--kl-duration-stage) var(--kl-ease);
}

/* Reflejo — Fase 6. En vez de duplicar el rig SVG entero (coste de
   render doble por un efecto puramente decorativo), se sugiere el
   reflejo con una elipse difusa bajo la plataforma, teñida del color
   principal actual. Sutil a propósito (punto 10: "el cian es acento,
   no debe estar en todo"). */
.b5-kl-stage__platform::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -6px;
	width: 78%;
	height: 22px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.55) 0%, transparent 75%);
}

/* .b5-kl-stage__placeholder* de la Fase 2 se retiró: el markup que lo
   usaba fue sustituido por el rig real (.b5-kl-kit) en la Fase 3, así
   que esas reglas quedarían muertas — se eliminan en vez de dejarlas
   sin usar. */

/* -----------------------------------------------------------
   HUD DECORATIVO — Fase 6.
   Lecturas discretas de esquina (plantilla activa, patrón, vista) +
   un par de "corner brackets" tipo visor. Texto real (kl_syncHud lo
   rellena desde KL_STATE, ver kit-lab.js) para que sea información de
   verdad y no relleno — pero de bajo contraste y tamaño pequeño para
   que nunca compita con la equipación. */
.b5-kl-stage__hud {
	position: absolute;
	inset: 20px;
	pointer-events: none;
	opacity: 0.85;
	transition: opacity var(--kl-duration-stage) var(--kl-ease);
}

.b5-kl-hud-corner {
	position: absolute;
	width: 18px;
	height: 18px;
	border: 1px solid color-mix(in srgb, var(--kl-stage-glow) 45%, transparent);
	opacity: 0.55;
}

.b5-kl-hud-corner--tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.b5-kl-hud-corner--tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.b5-kl-hud-corner--bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.b5-kl-hud-corner--br { bottom: 0; right: 0; border-left: none; border-top: none; }

.b5-kl-hud-readout {
	position: absolute;
	top: 0;
	left: 28px;
	font-family: var(--b5-font-titulares, 'Oswald', sans-serif);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--kl-text-secondary);
	line-height: 1.6;
}

.b5-kl-hud-readout__value {
	color: var(--kl-white);
}

.b5-kl-hud-readout--coords {
	top: auto;
	bottom: 0;
	right: 28px;
	left: auto;
	text-align: right;
}

/* -----------------------------------------------------------
   MODO DE VISTA (3D / 2D / PREVIA) — Fase 6.
   Interruptor discreto flotante sobre el Stage. Es un modo de
   RENDER del propio Stage (profundidad/decoración), no debe
   confundirse con el selector Frontal/Trasera/Lateral del header
   (Fase 3), que sigue decidiendo qué zonas del rig se muestran; ambos
   conviven sin pisarse — ver kl_syncModo() en kit-lab.js. */
.b5-kl-stage__modes {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 5;
	display: flex;
	gap: 2px;
	padding: 3px;
	border-radius: var(--kl-radius-sm);
	background: var(--kl-glass);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--kl-border);
}

.b5-kl-mode-btn {
	appearance: none;
	border: none;
	background: transparent;
	color: var(--kl-text-muted);
	font-family: var(--b5-font-titulares, 'Oswald', sans-serif);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 5px 9px;
	border-radius: calc(var(--kl-radius-sm) - 2px);
	transition: color var(--kl-duration) var(--kl-ease), background var(--kl-duration) var(--kl-ease);
}

.b5-kl-mode-btn:hover {
	color: var(--kl-white);
}

.b5-kl-mode-btn.is-active {
	color: var(--kl-black);
	background: var(--kl-stage-glow);
}

/* -----------------------------------------------------------
   KIT RIG — motor de equipación (Fase 3)
   El SVG se construye una sola vez en la plantilla; todo lo que cambia
   (colores, patrón, vista) se aplica vía atributos/estilos desde
   kit-lab.js, nunca reconstruyendo este bloque de CSS ni el marcado.
   ----------------------------------------------------------- */
.b5-kl-kit {
	position: relative;
	z-index: 1;
	width: min(46%, 320px);
	filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.55)) drop-shadow(0 2px 10px color-mix(in srgb, var(--kl-stage-glow) 20%, transparent));
	transform-style: preserve-3d;
	/* Fase 6: --kl-tilt-x/--kl-tilt-y los actualiza kit-lab.js (rAF,
	   solo en modo "3d" y solo con puntero fino — ver kl_bindTilt) al
	   mover el puntero sobre el Stage. Sin JS o con el puntero fuera,
	   ambas quedan a 0deg y el kit se ve exactamente igual que antes de
	   la Fase 6. */
	--kl-tilt-x: 0deg;
	--kl-tilt-y: 0deg;
	transform: perspective(1400px) rotateX(var(--kl-tilt-x)) rotateY(var(--kl-tilt-y));
	transition: transform var(--kl-duration-stage) var(--kl-ease), filter var(--kl-duration-stage) var(--kl-ease);
	animation: kl-kit-enter 0.7s var(--kl-ease) both;
}

/* Entrada suave al cargar/cambiar de plantilla — una sola vez, sin
   coste continuo (animation-fill-mode "both" + sin "infinite"). */
@keyframes kl-kit-enter {
	from {
		opacity: 0;
		transform: perspective(1400px) translateY(18px) scale(0.96);
	}
	to {
		opacity: 1;
		transform: perspective(1400px) rotateX(var(--kl-tilt-x)) rotateY(var(--kl-tilt-y)) translateY(0) scale(1);
	}
}

.b5-kl-kit:hover {
	filter: drop-shadow(0 28px 46px rgba(0, 0, 0, 0.6)) drop-shadow(0 2px 14px color-mix(in srgb, var(--kl-stage-glow) 32%, transparent));
}

.b5-kl-kit__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* Fase 12 — VISUALIZADOR 3D REAL. Mismo hueco central que ".b5-kl-kit"
   (ver el bloque MODO DE VISTA más abajo para el show/hide por
   data-b5-kl-modo), pero SIN el tilt de perspectiva CSS: el <canvas>
   de Three.js que kit-lab-3d.js inserta aquí dentro ya trae su propia
   cámara orbitable (arrastrar para girar), así que aplicar también el
   tilt del Stage duplicaría/pelearía con esa rotación real. */
.b5-kl-kit3d {
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Opacidad, no "display:none": kit-lab-3d.js necesita que este
	   contenedor tenga tamaño real desde el primer instante (para
	   dimensionar el renderer/la cámara) aunque todavía no toque
	   enseñarse — ver kl_ensure3D/kl_refresh3D, que lo montan ya en el
	   primer render de la página porque "3d" es el modo de fábrica. */
	opacity: 0;
	pointer-events: none;
	touch-action: none;
	cursor: grab;
	transition: opacity var(--kl-duration-stage) var(--kl-ease);
}

.b5-kl-kit3d:active {
	cursor: grabbing;
}

.b5-kl-kit3d canvas {
	display: block;
	width: 100%;
	height: 100%;
}

#b5-kl-kit-rig-inner {
	transition: transform var(--kl-duration) var(--kl-ease);
	transform-origin: 50% 12%;
}

/* Sensación de tejido/material (Fase 6): un velo diagonal de brillo
   muy sutil recortado a la silueta del torso — no un filtro por
   pieza (coste), un único overlay reutilizando el clip-path que ya
   existía desde la Fase 3. */
/* Fase 12: el velo deja de ser exclusivo del torso. Las tres prendas
   comparten opacidad, mezcla y pointer-events para que el reflejo de
   estudio sea coherente en todo el kit; cada rect se recorta a su
   propio clip, así que ninguno puede salirse de su silueta. */
#kl-sheen,
#kl-sheen-shorts,
#kl-sheen-socks {
	opacity: 0.16;
	mix-blend-mode: screen;
	pointer-events: none;
}

/* Fase 15 — MAQUETA FOTOGRÁFICA. #kl-photo-highlight-* es el brillo de
   estudio "de verdad" (mapa raster con mancha de luz desplazada + veta
   rota por ruido, ver el rig SVG): sustituye visualmente a la sensación
   plana de #kl-sheen sin quitarlo (#kl-sheen se queda de base, muy
   tenue, por si el navegador no compone bien el <use>+mix-blend-mode).
   Mismo criterio que #kl-sheen: se apaga en modo 2D, nunca en 3D/previa. */
#kl-photo-highlight-shirt,
#kl-photo-highlight-shorts,
#kl-photo-highlight-socks {
	opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
	.b5-kl-kit {
		animation: none;
	}
}

/* Piezas base: color de partida neutro hasta que kit-lab.js aplique el
   color real de la plantilla (evita un parpadeo a "sin relleno"). */
#shirt-torso,
#shirt-sleeve-left,
#shirt-sleeve-right,
#shirt-cuff-left,
#shirt-cuff-right,
#shirt-hem-trim,
#shirt-yoke,
#shorts-waistband,
#shorts-leg-left,
#shorts-leg-right,
#shorts-stripe-left,
#shorts-stripe-right,
#sock-left,
#sock-right,
#sock-band-left,
#sock-band-right {
	fill: var(--kl-navy-2);
	transition: fill var(--kl-duration) var(--kl-ease);
}

#shirt-collar-trim {
	stroke: var(--kl-cyan);
}

#shirt-yoke {
	display: none;
}

#kl-overlay-stripes,
#kl-overlay-hoops {
	opacity: 0.85;
}

/* VISTA — data-b5-kl-view en el contenedor .b5-kitlab decide qué piezas
   se muestran y cómo se escorza el rig. La geometría no se reconstruye:
   solo se oculta/transforma lo que ya existe. */
.b5-kitlab[data-b5-kl-view="trasera"] #shirt-yoke {
	display: block;
}

.b5-kitlab[data-b5-kl-view="lateral"] #shirt-sleeve-right,
.b5-kitlab[data-b5-kl-view="lateral"] #shorts-leg-right,
.b5-kitlab[data-b5-kl-view="lateral"] #shorts-stripe-right,
.b5-kitlab[data-b5-kl-view="lateral"] #sock-right,
.b5-kitlab[data-b5-kl-view="lateral"] #sock-band-right {
	display: none;
}

.b5-kitlab[data-b5-kl-view="lateral"] #b5-kl-kit-rig-inner {
	transform: translateX(8%) scaleX(0.66) skewY(-5deg);
}

/* -----------------------------------------------------------
   MODO DE VISTA DEL STAGE (3D / 2D / PREVIA) — Fase 6.
   "3d" es el estado de fábrica (mismas reglas ya definidas arriba, sin
   nada que desactivar). "2d" apaga la profundidad para una edición
   plana y precisa; "previa" apaga la decoración para enseñar el
   resultado limpio, sin tocar la iluminación de base. Ninguno de los
   dos modos reconstruye nada: solo ocultan/journalizan lo que ya
   existe, igual que el resto del Stage. */
/* Fase 12 — el modo "3d" real sustituye al SVG plano por el <canvas>
   de Three.js (kit-lab-3d.js pone "is-ready" en el contenedor en
   cuanto WebGL arranca y hay una primera textura pintada — antes de
   eso seguimos enseñando el SVG, para no dejar un hueco vacío
   mientras carga el motor). "2d" y "previa" no tocan esto: siguen
   siendo el SVG de siempre, sin ningún cambio de comportamiento. */
.b5-kitlab[data-b5-kl-modo="3d"] .b5-kl-kit3d.is-ready {
	opacity: 1;
	pointer-events: auto;
}

.b5-kitlab[data-b5-kl-modo="3d"] .b5-kl-kit3d.is-ready ~ .b5-kl-kit {
	opacity: 0;
	pointer-events: none;
}

.b5-kitlab[data-b5-kl-modo="2d"] .b5-kl-kit {
	--kl-tilt-x: 0deg;
	--kl-tilt-y: 0deg;
	transform: none;
}

.b5-kitlab[data-b5-kl-modo="2d"] .b5-kl-stage__spotlight,
.b5-kitlab[data-b5-kl-modo="2d"] .b5-kl-stage__lines,
.b5-kitlab[data-b5-kl-modo="2d"] #kl-sheen,
.b5-kitlab[data-b5-kl-modo="2d"] #kl-sheen-shorts,
.b5-kitlab[data-b5-kl-modo="2d"] #kl-sheen-socks,
.b5-kitlab[data-b5-kl-modo="2d"] #kl-photo-highlight-shirt,
.b5-kitlab[data-b5-kl-modo="2d"] #kl-photo-highlight-shorts,
.b5-kitlab[data-b5-kl-modo="2d"] #kl-photo-highlight-socks {
	opacity: 0;
}

.b5-kitlab[data-b5-kl-modo="previa"] .b5-kl-stage__grid,
.b5-kitlab[data-b5-kl-modo="previa"] .b5-kl-stage__hud,
.b5-kitlab[data-b5-kl-modo="previa"] .b5-kl-stage__lines {
	opacity: 0;
}

/* El puntero fino (mouse) es el único que dispara el tilt (ver
   kl_bindTilt): en touch no hay "hover" que mantener, así que no se
   pierde nada apagándolo también por CSS como red de seguridad. */
@media (hover: none) and (pointer: coarse) {
	.b5-kl-kit {
		transform: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.b5-kl-kit {
		transition: none;
	}
}

/* -----------------------------------------------------------
   DETALLES EN EL RIG — escudo, patrocinador, nombre, dorsal (Fase 5)
   Los cuatro nodos (#kl-crest, #kl-sponsor, #kl-back-name,
   #kl-back-number) ya existen siempre en el SVG (ver STAGE CENTRAL en
   template-kit-lab.php); kit-lab.js solo cambia su "display"/atributos.
   Aquí solo se define su aspecto y el de la interacción de arrastre.
   ----------------------------------------------------------- */
.b5-kl-detail-img {
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.b5-kl-detail-text {
	font-family: var(--b5-font-titulares, 'Oswald', sans-serif);
	font-weight: 600;
	fill: var(--kl-detail-color, var(--kl-white));
	paint-order: stroke;
	stroke: rgba(4, 6, 10, 0.35);
	stroke-width: 0.6px;
	letter-spacing: 0.02em;
}

.b5-kl-detail-text--name {
	font-size: 11px;
	text-transform: uppercase;
}

.b5-kl-detail-text--number {
	font-size: 34px;
}

/* Elementos arrastrables (escudo/patrocinador): cursor de agarre y un
   leve resalte mientras se arrastran, para que quede claro que están
   respondiendo al gesto — sin competir visualmente con la equipación. */
.b5-kl-draggable {
	cursor: grab;
	touch-action: none;
}

.b5-kl-draggable.is-dragging {
	cursor: grabbing;
	filter: drop-shadow(0 0 0 2px rgba(45, 217, 240, 0.6)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}

/* -----------------------------------------------------------
   TARJETAS DE PLANTILLA (panel derecho)
   ----------------------------------------------------------- */
.b5-kl-templates {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}

.b5-kl-template-card {
	appearance: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px;
	border-radius: var(--kl-radius-sm);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--kl-border);
	text-align: left;
	transition: border-color var(--kl-duration) var(--kl-ease), background var(--kl-duration) var(--kl-ease);
}

.b5-kl-template-card:hover {
	border-color: var(--kl-border-strong);
	background: rgba(255, 255, 255, 0.05);
}

.b5-kl-template-card.is-active {
	border-color: var(--kl-cyan);
	background: var(--kl-cyan-soft);
	box-shadow: var(--kl-shadow-glow-cyan);
}

.b5-kl-template-card__swatch {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	border-radius: calc(var(--kl-radius-sm) - 2px);
	border: 1px solid var(--kl-border);
}

.b5-kl-template-card__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--kl-text-secondary);
}

.b5-kl-template-card.is-active .b5-kl-template-card__label {
	color: var(--kl-white);
}

.b5-kl-panel__hint {
	margin: -4px 0 0;
	font-size: 11px;
	color: var(--kl-text-muted);
	line-height: 1.4;
}

.b5-kl-panel__title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.b5-kl-panel__badge {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--kl-cyan);
	background: var(--kl-cyan-soft);
	border: 1px solid rgba(45, 217, 240, 0.3);
	border-radius: 999px;
	padding: 3px 9px;
}

/* -----------------------------------------------------------
   EDITOR DE COLORES (Fase 4)
   Roles de color (dinámicos, uno por clave de KL_STATE.colores) +
   presets + selector nativo + campo HEX. El rol "seleccionado" decide
   sobre qué color actúan los presets/selector/HEX de debajo — mismo
   principio de "un solo editor activo" que usa Colores en apps premium
   de diseño, en vez de un picker independiente por rol.
   ----------------------------------------------------------- */
.b5-kl-color-roles {
	display: flex;
	gap: 8px;
}

.b5-kl-color-role {
	appearance: none;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	padding: 10px 6px;
	border-radius: var(--kl-radius-sm);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--kl-border);
	transition: border-color var(--kl-duration) var(--kl-ease), background var(--kl-duration) var(--kl-ease);
}

.b5-kl-color-role:hover {
	border-color: var(--kl-border-strong);
	background: rgba(255, 255, 255, 0.05);
}

.b5-kl-color-role.is-selected {
	border-color: var(--kl-cyan);
	background: var(--kl-cyan-soft);
	box-shadow: var(--kl-shadow-glow-cyan);
}

.b5-kl-color-role__swatch {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--chip, var(--kl-navy));
	border: 2px solid rgba(255, 255, 255, 0.14);
	box-shadow: var(--kl-shadow-float);
}

.b5-kl-color-role__label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--kl-text-muted);
}

.b5-kl-color-role.is-selected .b5-kl-color-role__label {
	color: var(--kl-white);
}

.b5-kl-color-editor {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.b5-kl-color-presets {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 8px;
}

.b5-kl-preset-swatch {
	appearance: none;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--preset);
	border: 2px solid rgba(255, 255, 255, 0.1);
	transition: border-color var(--kl-duration) var(--kl-ease), transform var(--kl-duration) var(--kl-ease);
}

.b5-kl-preset-swatch:hover {
	border-color: rgba(255, 255, 255, 0.35);
	transform: scale(1.08);
}

.b5-kl-preset-swatch.is-active {
	border-color: var(--kl-cyan);
	box-shadow: 0 0 0 2px var(--kl-black), 0 0 0 3px var(--kl-cyan);
}

.b5-kl-color-custom {
	display: flex;
	align-items: center;
	gap: 10px;
}

.b5-kl-color-picker {
	position: relative;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: conic-gradient(#ff005c, #ffbe0b, #2dd9f0, #7c3aed, #ff005c);
	border: 2px solid var(--kl-border-strong);
	cursor: pointer;
	transition: border-color var(--kl-duration) var(--kl-ease);
}

.b5-kl-color-picker:hover {
	border-color: var(--kl-white);
}

.b5-kl-color-picker__icon {
	position: relative;
	width: 16px;
	height: 16px;
	color: var(--kl-white);
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
	pointer-events: none;
}

#b5-kl-color-picker {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	border: none;
	padding: 0;
}

.b5-kl-hex-input {
	flex: 1 1 auto;
	height: 40px;
	padding: 0 12px;
	border-radius: var(--kl-radius-sm);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--kl-border);
	color: var(--kl-white);
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: border-color var(--kl-duration) var(--kl-ease), background var(--kl-duration) var(--kl-ease);
}

.b5-kl-hex-input::placeholder {
	color: var(--kl-text-muted);
	text-transform: none;
}

.b5-kl-hex-input:hover {
	border-color: var(--kl-border-strong);
}

.b5-kl-hex-input:focus {
	outline: none;
	border-color: var(--kl-cyan);
	background: rgba(45, 217, 240, 0.06);
}

/* border-color + fondo solos no llegan a WCAG 2.4.7/1.4.11 y desaparecen
   con colores forzados: el anillo se devuelve en :focus-visible. */
.b5-kl-hex-input:focus-visible {
	outline: 2px solid var(--kl-cyan);
	outline-offset: 2px;
}

/* -----------------------------------------------------------
   SELECTOR VISUAL DE PATRONES (Fase 4)
   Igual criterio que las tarjetas de plantilla: miniatura primero,
   nunca un botón solo de texto — el usuario ve lo que va a aplicar.
   ----------------------------------------------------------- */
.b5-kl-patterns {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}

.b5-kl-pattern-card {
	appearance: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 6px;
	border-radius: var(--kl-radius-sm);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--kl-border);
	transition: border-color var(--kl-duration) var(--kl-ease), background var(--kl-duration) var(--kl-ease);
}

.b5-kl-pattern-card:hover {
	border-color: var(--kl-border-strong);
	background: rgba(255, 255, 255, 0.05);
}

.b5-kl-pattern-card.is-active {
	border-color: var(--kl-cyan);
	background: var(--kl-cyan-soft);
	box-shadow: var(--kl-shadow-glow-cyan);
}

.b5-kl-pattern-card__swatch {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	border-radius: calc(var(--kl-radius-sm) - 2px);
	border: 1px solid var(--kl-border);
	background-repeat: repeat;
}

.b5-kl-pattern-card__label {
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--kl-text-secondary);
	text-align: center;
}

.b5-kl-pattern-card.is-active .b5-kl-pattern-card__label {
	color: var(--kl-white);
}

/* -----------------------------------------------------------
   PANEL — DETALLES: escudo, patrocinador, nombre, dorsal (Fase 5)
   Un único patrón visual ("grupo" con etiqueta + control) para las
   cuatro sub-secciones, mismo criterio de no duplicar lenguaje visual
   ya usado en Colores/Patrones.
   ----------------------------------------------------------- */
.b5-kl-detail-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.b5-kl-detail-group__label {
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--kl-text-secondary);
}

.b5-kl-detail-upload {
	display: flex;
}

/* Estado "ya hay imagen": miniatura + acciones (kl_renderMediaDetail) */
.b5-kl-detail-media {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px;
	border-radius: var(--kl-radius-sm);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--kl-border);
}

.b5-kl-detail-media__thumb {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	object-fit: contain;
	border-radius: calc(var(--kl-radius-sm) - 2px);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--kl-border);
	padding: 4px;
}

.b5-kl-detail-media__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	flex: 1 1 auto;
}

.b5-kl-detail-btn {
	appearance: none;
	flex: 0 0 auto;
	padding: 7px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--kl-border-strong);
	color: var(--kl-white);
	font-family: 'Inter', sans-serif;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
	transition: border-color var(--kl-duration) var(--kl-ease), background var(--kl-duration) var(--kl-ease);
}

.b5-kl-detail-btn:hover {
	border-color: var(--kl-cyan);
	background: var(--kl-cyan-soft);
}

.b5-kl-detail-btn--primary {
	width: 100%;
	justify-content: center;
	background: var(--kl-cyan-soft);
	border-color: rgba(45, 217, 240, 0.4);
	color: var(--kl-cyan);
}

.b5-kl-detail-btn--primary:hover {
	background: rgba(45, 217, 240, 0.24);
}

.b5-kl-detail-btn--ghost {
	background: transparent;
	color: var(--kl-text-secondary);
}

.b5-kl-detail-locked {
	margin: 0;
	font-size: 11px;
	line-height: 1.5;
	color: var(--kl-text-muted);
}

.b5-kl-detail-locked a {
	color: var(--kl-cyan);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Campos de texto (nombre/dorsal) — mismo lenguaje visual que el
   campo HEX de Colores (Fase 4), sin mayúsculas forzadas por CSS: la
   normalización a mayúsculas la hace kl_normalizeNombre en JS, para
   que el propio valor del campo (no solo su apariencia) quede en
   mayúsculas. */
.b5-kl-text-input {
	width: 100%;
	height: 40px;
	padding: 0 12px;
	border-radius: var(--kl-radius-sm);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--kl-border);
	color: var(--kl-white);
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	transition: border-color var(--kl-duration) var(--kl-ease), background var(--kl-duration) var(--kl-ease);
}

.b5-kl-text-input::placeholder {
	color: var(--kl-text-muted);
	font-weight: 500;
}

.b5-kl-text-input:hover {
	border-color: var(--kl-border-strong);
}

.b5-kl-text-input:focus {
	outline: none;
	border-color: var(--kl-cyan);
	background: rgba(45, 217, 240, 0.06);
}

.b5-kl-text-input:focus-visible {
	outline: 2px solid var(--kl-cyan);
	outline-offset: 2px;
}

.b5-kl-text-input--dorsal {
	width: 88px;
}

/* -----------------------------------------------------------
   PANEL derecho
   ----------------------------------------------------------- */
.b5-kl-panel {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 22px 20px 28px;
	background: var(--kl-glass);
	border-left: 1px solid var(--kl-border);
	overflow-y: auto;
}

.b5-kl-panel__section {
	display: flex;
	flex-direction: column;
	gap: 12px;
	animation: kl-panel-section-enter 0.25s var(--kl-ease) both;
}

/* Fase 7, parte 1: cada paso del sidebar muestra solo su(s) sección(es)
   (ver KL_STEP_SECTIONS/kl_syncStep en kit-lab.js), que las oculta con
   el atributo "hidden" nativo — el selector de atributo pesa más que
   ".b5-kl-panel__section" a secas, así que gana sin necesitar
   "!important". Sin JS (por ejemplo, una plantilla de página en caché
   sin actualizar) ninguna sección tendría el atributo "hidden" en el
   HTML impreso por PHP, así que las 5 seguirían viendo como en la Fase
   2-6 — degradación limpia, no una pantalla rota. */
.b5-kl-panel__section[hidden] {
	display: none;
}

@keyframes kl-panel-section-enter {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.b5-kl-panel__section {
		animation: none;
	}
}

/* -----------------------------------------------------------
   PANEL — navegación Atrás/Siguiente (Fase 7, parte 1)
   Barra fija al final del panel (mismo lenguaje de botón que
   "Detalles", Fase 5 — .b5-kl-detail-btn*), siempre visible con
   independencia de qué sección esté activa.
   ----------------------------------------------------------- */
.b5-kl-panel__nav {
	display: flex;
	gap: 10px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--kl-border);
	flex: 0 0 auto;
}

.b5-kl-panel__nav .b5-kl-detail-btn {
	flex: 1 1 0;
	justify-content: center;
	text-align: center;
}

.b5-kl-panel__nav .b5-kl-detail-btn:disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.b5-kl-panel__section--save .b5-kl-detail-btn--primary:disabled {
	opacity: 0.5;
	cursor: default;
}

.b5-kl-panel__title {
	margin: 0;
	font-family: var(--b5-font-titulares, 'Oswald', sans-serif);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kl-text-secondary);
}

.b5-kl-panel__preview-box {
	aspect-ratio: 4 / 3;
	border-radius: var(--kl-radius-md);
	background: rgba(255, 255, 255, 0.03);
	border: 1px dashed var(--kl-border-strong);
}

/* -----------------------------------------------------------
   PANEL — sección "Guardar" (Fase 8)
   Reutiliza el lenguaje de botón de "Detalles"
   (.b5-kl-detail-btn*) y los mismos separadores que el resto
   del panel: aquí solo se define la retícula propia de la
   sección (acciones en fila fluida y lista de equipaciones).
   ----------------------------------------------------------- */
.b5-kl-save-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.b5-kl-save-actions .b5-kl-detail-btn {
	flex: 1 1 130px;
	justify-content: center;
	text-align: center;
}

.b5-kl-save-group {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--kl-border);
}

.b5-kl-designs {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}

.b5-kl-design {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border: 1px solid var(--kl-border);
	border-radius: var(--kl-radius-md);
	background: rgba(255, 255, 255, 0.03);
}

.b5-kl-design.is-active {
	border-color: var(--kl-border-strong);
	background: rgba(255, 255, 255, 0.06);
}

/* min-width: 0 para que un título largo se pueda partir en vez de
   desbordar la fila (flex no lo permite por defecto). */
.b5-kl-design__info {
	flex: 1 1 auto;
	min-width: 0;
}

.b5-kl-design__title {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.b5-kl-design__meta {
	margin: 2px 0 0;
	font-size: 10px;
	letter-spacing: 0.02em;
	color: var(--kl-text-secondary);
}

.b5-kl-design__actions {
	display: flex;
	flex: 0 0 auto;
	gap: 6px;
}

.b5-kl-save-empty {
	margin: 0;
	font-size: 11px;
	line-height: 1.5;
	color: var(--kl-text-secondary);
}

.b5-kl-panel__section--save .b5-kl-detail-btn[aria-busy="true"] {
	opacity: 0.6;
	cursor: progress;
}

/* En pantallas estrechas la fila del diseño se parte: nombre arriba,
   acciones debajo a lo ancho, para que "Cargar"/"Eliminar" no queden
   en dos columnas de 30px. */
@media (max-width: 480px) {
	.b5-kl-design {
		flex-wrap: wrap;
	}

	.b5-kl-design__actions {
		flex: 1 1 100%;
	}

	.b5-kl-design__actions .b5-kl-detail-btn {
		flex: 1 1 0;
		justify-content: center;
	}
}

/* -----------------------------------------------------------
   RESPONSIVE
   Objetivo (ver documento maestro, punto 13): 360 a 1920px.
   Estrategia móvil real, no un encogido de escritorio: el sidebar de
   pasos pasa a barra horizontal superior y el panel derecho pasa a
   franja inferior deslizable, dejando el Stage como protagonista.
   ----------------------------------------------------------- */
@media (max-width: 1024px) {
	.b5-kitlab {
		--kl-panel-width: 260px;
		--kl-sidebar-width: 84px;
	}
}

@media (max-width: 900px) {
	.b5-kl-body {
		grid-template-columns: var(--kl-sidebar-width) 1fr;
		grid-template-rows: 1fr auto;
	}

	/*
	 * Fase 7, parte 1: hasta la Fase 6 el panel mostraba las 5 secciones
	 * a la vez, así que en móvil pasaban a una franja horizontal
	 * deslizable (flex-row + overflow-x) para poder llegar a todas. El
	 * panel ya solo muestra la sección del paso activo (kl_syncStep), así
	 * que ese deslizamiento horizontal ya no tiene qué mostrar de sobra
	 * — se vuelve a una columna normal (sección activa + Atrás/Siguiente
	 * apilados), navegable con los pasos de arriba o con esos dos
	 * botones, no arrastrando el panel.
	 */
	.b5-kl-panel {
		grid-column: 1 / -1;
		grid-row: 2;
		border-left: none;
		border-top: 1px solid var(--kl-border);
		max-height: 42vh;
	}
}

@media (max-width: 768px) {
	.b5-kl-header {
		padding: 0 14px;
		gap: 12px;
	}

	.b5-kl-header__view {
		margin-left: 0;
		order: 3;
	}

	.b5-kl-header__status {
		display: none;
	}

	.b5-kl-header__user-name {
		display: none;
	}
}

@media (max-width: 600px) {
	.b5-kl-body {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr auto;
	}

	.b5-kl-steps {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 10px 12px;
		border-right: none;
		border-bottom: 1px solid var(--kl-border);
		overflow-x: auto;
	}

	.b5-kl-step {
		flex: 1 1 auto;
		flex-direction: row;
		padding: 8px 10px;
	}

	.b5-kl-step__label {
		display: none;
	}

	.b5-kl-step--save {
		margin-top: 0;
	}

	.b5-kl-header__brand .b5-kl-header__title {
		display: none;
	}
}

/* Fase 6: el HUD decorativo y el interruptor de modo son enteramente
   prescindibles en pantallas pequeñas — dejan más Stage para la
   equipación, que es la protagonista (punto 9 del documento maestro).
   Se ocultan, nunca se encogen hasta ser ilegibles. */
@media (max-width: 600px) {
	.b5-kl-hud-readout {
		display: none;
	}

	.b5-kl-stage__modes {
		top: 10px;
		right: 10px;
	}

	.b5-kl-mode-btn {
		padding: 4px 7px;
		font-size: 9px;
	}
}