/* ==========================================================================
   Boozdiseñas - Panel de Cliente
   Visualizador de Diseños (bloque tipo "visualizador", v1.17.0) — CSS del
   sitio público. Archivo aparte (no promo-galeria.css) porque este bloque
   es interactivo del lado del visitante y tiene su propio JS (ver
   BPC_CPT::enqueue_visualizador_assets() / assets/js/visualizador.js),
   mismo criterio que noticias-carrusel.css/testimonios-carrusel.css.
   Mismo acento #6366F1 que 'contacto'/'servicios' — misma familia visual
   "limpio y moderno" que el resto de bloques nuevos de v1.17.0.
   ========================================================================== */
.bpc-visualizador-seccion .bpc-icon { width: 18px; height: 18px; flex-shrink: 0; }

.bpc-visualizador-seccion {
	--bpc-visualizador-acento: #6366F1;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	font-family: inherit;
	box-sizing: border-box;
}
.bpc-visualizador-seccion *,
.bpc-visualizador-seccion *::before,
.bpc-visualizador-seccion *::after {
	box-sizing: border-box;
}

.bpc-visualizador__header {
	max-width: 640px;
	margin: 0 auto 30px;
	text-align: center;
}
.bpc-visualizador__titulo {
	margin: 0 0 10px;
	font-size: clamp( 1.4rem, 1.1rem + 1.2vw, 2rem );
	font-weight: 800;
	line-height: 1.25;
}
.bpc-visualizador__subtitulo {
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
	color: inherit;
	opacity: 0.7;
}
.bpc-visualizador__vacio {
	text-align: center;
	opacity: 0.6;
	padding: 30px 0;
}

.bpc-visualizador__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 0 24px;
}
.bpc-visualizador__tab {
	padding: 10px 20px;
	border-radius: 999px;
	border: 1px solid rgba( 15, 23, 42, 0.12 );
	background: #fff;
	color: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.bpc-visualizador__tab:hover { transform: translateY( -1px ); border-color: var( --bpc-visualizador-acento ); }
.bpc-visualizador__tab.is-activa {
	background: var( --bpc-visualizador-acento );
	border-color: var( --bpc-visualizador-acento );
	color: #fff;
}

.bpc-visualizador__stage {
	display: grid;
	grid-template-columns: minmax( 0, 1.1fr ) minmax( 0, 0.9fr );
	gap: 28px;
	align-items: start;
}

.bpc-visualizador__lienzo-wrap {
	position: relative;
	width: 100%;
	border-radius: 20px;
	overflow: hidden;
	background: #F2F3F9;
	border: 1px solid rgba( 15, 23, 42, 0.08 );
	box-shadow: 0 1px 2px rgba( 15, 23, 42, 0.04 ), 0 10px 28px rgba( 15, 23, 42, 0.06 );
}
.bpc-visualizador__base,
.bpc-visualizador__canvas {
	display: block;
	width: 100%;
	height: auto;
}
/* assets/js/visualizador.js alterna cuál de las dos se ve con el atributo
   "hidden" (canvas.hidden = .../ baseImgEl.hidden = ...) — sin esto, el
   "display: block" de arriba le gana en especificidad al
   [hidden] { display:none } por defecto del navegador y las dos quedan
   visibles a la vez, una encima de la otra (mismo patrón ya usado en
   panel.css para .bpc-modal-overlay/.bpc-icon-picker__panel; bug real,
   detectado en QA visual antes de entregar). */
.bpc-visualizador__base[hidden],
.bpc-visualizador__canvas[hidden] { display: none; }

.bpc-visualizador__spinner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: rgba( 255, 255, 255, 0.82 );
	font-size: 0.88rem;
	font-weight: 600;
	color: var( --bpc-visualizador-acento );
}
.bpc-visualizador__spinner[hidden] { display: none; }
.bpc-visualizador__spinner::before {
	content: "";
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2.5px solid color-mix( in srgb, var( --bpc-visualizador-acento ) 30%, transparent );
	border-top-color: var( --bpc-visualizador-acento );
	animation: bpc-visualizador-girar 0.8s linear infinite;
}
@keyframes bpc-visualizador-girar { to { transform: rotate( 360deg ); } }

.bpc-visualizador__controles {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.bpc-visualizador__subir {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 22px;
	border-radius: 14px;
	border: 1.5px dashed color-mix( in srgb, var( --bpc-visualizador-acento ) 55%, transparent );
	background: color-mix( in srgb, var( --bpc-visualizador-acento ) 6%, #fff );
	color: var( --bpc-visualizador-acento );
	font-weight: 700;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}
.bpc-visualizador__subir:hover {
	background: color-mix( in srgb, var( --bpc-visualizador-acento ) 12%, #fff );
	border-color: var( --bpc-visualizador-acento );
}
.bpc-visualizador__hint {
	margin: 0;
	font-size: 0.82rem;
	opacity: 0.62;
	line-height: 1.5;
}
.bpc-visualizador__error {
	margin: 0;
	padding: 10px 14px;
	border-radius: 10px;
	background: #FDECEC;
	color: #B4232A;
	font-size: 0.85rem;
	font-weight: 600;
}
.bpc-visualizador__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.bpc-visualizador__acciones[hidden] { display: none; }
.bpc-visualizador__accion {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1px solid rgba( 15, 23, 42, 0.14 );
	background: #fff;
	color: inherit;
	font-size: 0.86rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}
.bpc-visualizador__accion:hover { transform: translateY( -1px ); background: #F5F5FA; }
.bpc-visualizador__accion--primaria {
	background: var( --bpc-visualizador-acento );
	border-color: var( --bpc-visualizador-acento );
	color: #fff;
}
.bpc-visualizador__accion--primaria:hover {
	background: color-mix( in srgb, var( --bpc-visualizador-acento ) 100%, black 12% );
}

@media ( prefers-reduced-motion: reduce ) {
	.bpc-visualizador__tab,
	.bpc-visualizador__subir,
	.bpc-visualizador__accion { transition: none; }
	.bpc-visualizador__spinner::before { animation: none; }
}

@media ( max-width: 760px ) {
	.bpc-visualizador__stage { grid-template-columns: 1fr; }
}