/*
 * El perfil es el lienzo (fase 4: BLD-01 + BLD-06).
 *
 * El problema que arregla: en móvil, la vista previa era el ÚLTIMO elemento
 * del DOM — debajo de los ocho pasos del formulario. Se editaba a ciegas y se
 * confirmaba después, bajando dos mil líneas de pantalla.
 *
 * Depende de ppsa-builder-refresh (carga después de todo el CSS del editor y
 * gana por orden de cascada, sin !important). Tokens de ppsa-tokens.css con
 * reserva por si no llegaran.
 */

/* ── Móvil y tablet: la previa arriba, pegada, compacta ─────────────────── */

@media (max-width: 1099px) {
	.ppsa-builder-layout {
		display: flex;
		flex-direction: column;
	}

	/* order:-1 la sube sin tocar una línea del DOM del builder. */
	.ppsa-builder-preview-col {
		order: -1;
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 0px);
		z-index: var(--ppsa-z-sticky, 20);
		max-height: none;
		background: var(--ppsa-bg, #f4f5f3);
		padding-bottom: var(--ppsa-sp-2, 0.5rem);
		box-shadow: 0 10px 18px -14px rgba(10, 12, 10, 0.35);
	}

	/* Compacta: se ve el teléfono, no se come la pantalla. */
	.ppsa-builder-preview-col .ppsa-preview-panel {
		max-height: none;
		overflow: hidden;
		border-radius: 0 0 var(--ppsa-r-lg, 16px) var(--ppsa-r-lg, 16px);
	}

	.ppsa-builder-preview-col .ppsa-preview-frame,
	.ppsa-builder-preview-col .ppsa-preview-frame[data-ppsa-preview-mode="iframe"] .ppsa-preview-iframe,
	.ppsa-builder-preview-col .ppsa-preview-frame[data-ppsa-preview-mode="live"] .ppsa-live-preview,
	.ppsa-builder-preview-col .ppsa-live-preview {
		min-height: 0;
		height: 38vh;
		max-height: 38vh;
	}

	.ppsa-builder-preview-col .ppsa-live-preview,
	.ppsa-builder-preview-col .ppsa-preview-frame[data-ppsa-preview-mode="live"] .ppsa-live-preview {
		overflow: auto;
	}

	/* Lo secundario del panel de previa no cabe en la franja pegada:
	   acciones, avisos y pies se esconden mientras está en modo compacto. */
	.ppsa-builder-preview-col .ppsa-preview-actions,
	.ppsa-builder-preview-col .ppsa-preview-secondary-actions,
	.ppsa-builder-preview-col .ppsa-preview-cache-actions,
	.ppsa-builder-preview-col .ppsa-preview-hint,
	.ppsa-builder-preview-col .ppsa-builder-autosave-hint {
		display: none;
	}

	/* Plegada del todo: sólo la barrita con el botón para reabrirla.
	   display:none y no height:0 — las reglas de tamaño con
	   [data-ppsa-preview-mode] son más específicas y ganarían la altura. */
	.ppsa-builder-preview-col[data-ppsa-canvas="min"] .ppsa-preview-frame {
		display: none;
	}

	.ppsa-builder-preview-col[data-ppsa-canvas="min"] {
		box-shadow: none;
	}
}

/* ── Botón plegar/desplegar que inyecta ppsa-builder-pro.js ─────────────── */

.ppsa-canvas-toggle {
	display: none;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--ppsa-line, #e3e6e2);
	border-radius: var(--ppsa-r-pill, 999px);
	background: var(--ppsa-surface, #fff);
	color: var(--ppsa-ink-2, #565c56);
	font-size: var(--ppsa-fs-xs, 0.75rem);
	font-weight: 650;
	padding: 5px 12px;
	min-height: 32px;
	cursor: pointer;
}

.ppsa-canvas-toggle:focus-visible {
	outline: 2px solid var(--ppsa-info, #2551e8);
	outline-offset: 2px;
}

.ppsa-canvas-toggle .ppsa-canvas-toggle__chev {
	transition: transform var(--ppsa-dur-fast, 0.16s) ease;
}

.ppsa-builder-preview-col[data-ppsa-canvas="min"] .ppsa-canvas-toggle .ppsa-canvas-toggle__chev {
	transform: rotate(180deg);
}

@media (max-width: 1099px) {
	.ppsa-canvas-toggle {
		display: inline-flex;
	}
}

/* ── Escritorio: el lienzo gana peso (BLD-01) ───────────────────────────── */

@media (min-width: 1100px) {
	/* Antes 1.65fr | 1.05fr: el formulario mandaba. Ahora casi a la par,
	   con la previa más ancha de mínimo — el resultado es el protagonista. */
	.ppsa-builder-layout {
		grid-template-columns: minmax(0, 1.3fr) minmax(460px, 1.2fr);
	}
}

@media (min-width: 1280px) {
	.ppsa-builder-layout {
		grid-template-columns: minmax(0, 1.35fr) minmax(520px, 1.25fr);
	}
}

@media (min-width: 1480px) {
	.ppsa-builder-layout {
		grid-template-columns: minmax(0, 1.25fr) minmax(560px, 1.3fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ppsa-canvas-toggle .ppsa-canvas-toggle__chev {
		transition: none;
	}
}