/**
 * Pro Profile SaaS — rediseño del editor sobre tokens (0.99.682)
 *
 * ============================================================
 * POR QUÉ EXISTE ESTA HOJA
 * ------------------------------------------------------------
 * `public-builder.css` son 138 KB con 319 colores escritos a mano
 * y CERO uso del sistema de tokens. El editor —la pantalla donde
 * el miembro pasa más tiempo— se quedó fuera del lenguaje visual
 * del resto del portal, y se nota: cada zona parece de una época
 * distinta.
 *
 * Reescribir esos 138 KB no es abordable sin poder probarlos. En
 * su lugar, esta hoja carga DESPUÉS y repinta el chrome sobre
 * `--ppsa-ui-*`. Gana por orden de cascada, no por `!important`,
 * salvo en los tres puntos marcados donde el original ya usaba
 * `!important` o una especificidad muy alta.
 *
 * Revertir = quitar una línea del enqueue.
 *
 * QUÉ SE ARREGLA, EN CONCRETO
 * ------------------------------------------------------------
 * 1. El indicador de plegado era el carácter «▼»/«▲». Un glifo de
 *    texto no se puede animar, se ve distinto en cada sistema y
 *    delata la edad de la interfaz. Se sustituye por un chevron
 *    dibujado que gira.
 * 2. El «lomo» de los bloques era una línea dura de 3 px pegada al
 *    borde. Ahora es un raíl redondeado que se lee como jerarquía
 *    y solo se enciende en la sección activa.
 * 3. Las secciones no tenían sangrado: el título quedaba pegado al
 *    borde izquierdo y no se distinguía el anidamiento.
 * 4. Los pasos numerados no tenían jerarquía tipográfica clara.
 * ============================================================
 */

/* ------------------------------------------------------------
   1. Lienzo
   ------------------------------------------------------------ */
.ppsa-builder {
	--ppsa-bd-rail: 3px;
	--ppsa-bd-indent: 0.85rem;
	color: var(--ppsa-ui-ink, #0f172a);
}

.ppsa-builder .ppsa-muted,
.ppsa-builder .ppsa-builder-microhint {
	color: var(--ppsa-ui-ink-muted, #64748b);
}

/* ------------------------------------------------------------
   2. Secciones numeradas (los pasos del flujo)
   ------------------------------------------------------------ */
.ppsa-builder details.ppsa-builder-surface {
	background: var(--ppsa-ui-surface, #fff);
	border: 1px solid var(--ppsa-ui-line, #e2e8f0);
	border-radius: var(--ppsa-ui-r-lg, 16px);
	box-shadow: var(--ppsa-ui-e1, 0 1px 2px rgba(15, 23, 42, 0.05));
	transition: border-color var(--ppsa-ui-dur-2, 0.22s) var(--ppsa-ui-ease, ease),
		box-shadow var(--ppsa-ui-dur-2, 0.22s) var(--ppsa-ui-ease, ease);
}

.ppsa-builder details.ppsa-builder-surface[open] {
	border-color: var(--ppsa-ui-line-strong, #cbd5e1);
	box-shadow: var(--ppsa-ui-e2, 0 4px 12px rgba(15, 23, 42, 0.07));
}

/* Cabecera de sección: respira y se separa del contenido. */
.ppsa-builder .ppsa-builder-card__summary {
	/*
	 * `relative` es obligatorio: el chevron va posicionado en absoluto y el
	 * original solo lo declaraba en los `.ppsa-builder-foldable`. Sin esto,
	 * en las secciones que no son plegables el chevron se anclaría al primer
	 * ancestro posicionado y aparecería en otro sitio de la pantalla.
	 */
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.15rem 1.6rem 0.35rem 0;
	font-size: 1.02rem;
	font-weight: 650;
	letter-spacing: -0.015em;
	color: var(--ppsa-ui-ink, #0f172a);
	cursor: pointer;
	user-select: none;
	transition: color var(--ppsa-ui-dur-1, 0.14s) var(--ppsa-ui-ease, ease);
}

.ppsa-builder .ppsa-builder-card__summary:hover {
	color: var(--ppsa-ui-accent, #2563eb);
}

/* ------------------------------------------------------------
   3. Chevron
   ------------------------------------------------------------
   Sustituye al «▼»/«▲». Se dibuja con dos bordes y gira al abrir,
   así que la transición se ve. El original usaba `content` en el
   mismo pseudo-elemento: hay que vaciarlo o quedarían los dos.
   ------------------------------------------------------------ */
.ppsa-builder details.ppsa-builder-foldable > .ppsa-builder-card__summary::after,
.ppsa-builder details.ppsa-builder-surface > .ppsa-builder-card__summary::after,
.ppsa-builder details.ppsa-builder-foldable[open] > .ppsa-builder-card__summary::after {
	content: '';
	position: absolute;
	right: 0.15rem;
	top: 50%;
	width: 0.46rem;
	height: 0.46rem;
	margin-top: -0.3rem;
	border-right: 2px solid var(--ppsa-ui-ink-faint, #94a3b8);
	border-bottom: 2px solid var(--ppsa-ui-ink-faint, #94a3b8);
	border-radius: 1px;
	transform: rotate(45deg);
	transform-origin: center;
	opacity: 1;
	font-size: 0;
	transition: transform var(--ppsa-ui-dur-2, 0.22s) var(--ppsa-ui-ease, ease),
		border-color var(--ppsa-ui-dur-1, 0.14s) var(--ppsa-ui-ease, ease);
}

.ppsa-builder details[open] > .ppsa-builder-card__summary::after {
	transform: rotate(-135deg);
	margin-top: -0.08rem;
}

.ppsa-builder .ppsa-builder-card__summary:hover::after {
	border-right-color: var(--ppsa-ui-accent, #2563eb);
	border-bottom-color: var(--ppsa-ui-accent, #2563eb);
}

/* ------------------------------------------------------------
   4. El «lomo» de la sección
   ------------------------------------------------------------
   IMPORTANTE: la hoja original YA pinta un acento aquí — un
   ::before de 5 px con degradado indigo→cian dentro del summary
   de las secciones abiertas. Y en builder.php un mismo elemento
   lleva a la vez `ppsa-builder-card`, `ppsa-builder-surface` y
   `ppsa-builder-foldable`, así que añadir un raíl propio habría
   pintado DOS acentos sobre el mismo bloque.
   Se mejora el que ya existe en lugar de duplicarlo: proporción
   más contenida, esquinas completas y colores del sistema.
   ------------------------------------------------------------ */
.ppsa-builder details.ppsa-builder-surface:not(.ppsa-builder-templates)[open]
	> summary.ppsa-builder-card__summary::before {
	width: 4px;
	height: 1.05rem;
	min-height: 1.05rem;
	margin-right: 0;
	border-radius: 999px;
	background: linear-gradient(
		180deg,
		var(--ppsa-ui-accent, #2563eb),
		var(--ppsa-ui-violet, #7c3aed)
	);
}

/*
 * Sangrado del cuerpo: PENDIENTE, y a propósito.
 *
 * La idea era indentar el contenido de cada sección para que el
 * anidamiento se lea de un vistazo. Pero el <details> no tiene
 * elemento envoltorio: el contenido cuelga suelto del propio
 * details (<p>, <div>, <details> anidados…). Indentarlo obligaría
 * a tocar el padding de cada hijo o a compensar el summary con
 * márgenes negativos, y cualquiera de las dos cosas puede
 * desalinear el editor entero de formas que aquí no se pueden
 * comprobar.
 *
 * Se deja fuera hasta poder verlo en pantalla. La jerarquía ya
 * mejora con el acento del título y el chevron.
 */

/* ------------------------------------------------------------
   5. Tarjetas de bloque
   ------------------------------------------------------------ */
.ppsa-builder .ppsa-blocks-list .ppsa-builder-block {
	background: var(--ppsa-ui-surface, #fff);
	border: 1px solid var(--ppsa-ui-line, #e2e8f0);
	border-radius: var(--ppsa-ui-r-md, 12px);
	box-shadow: var(--ppsa-ui-e1, 0 1px 2px rgba(15, 23, 42, 0.05));
	transition: border-color var(--ppsa-ui-dur-1, 0.14s) var(--ppsa-ui-ease, ease),
		box-shadow var(--ppsa-ui-dur-1, 0.14s) var(--ppsa-ui-ease, ease),
		transform var(--ppsa-ui-dur-1, 0.14s) var(--ppsa-ui-ease, ease);
}

.ppsa-builder .ppsa-blocks-list .ppsa-builder-block:hover {
	border-color: var(--ppsa-ui-line-strong, #cbd5e1);
	box-shadow: var(--ppsa-ui-e2, 0 4px 12px rgba(15, 23, 42, 0.07));
}

.ppsa-builder .ppsa-blocks-list .ppsa-builder-block:focus-within {
	border-color: var(--ppsa-ui-accent-line, #bfdbfe);
	box-shadow: var(--ppsa-ui-e2, 0 4px 12px rgba(15, 23, 42, 0.07)),
		var(--ppsa-ui-focus, 0 0 0 3px rgba(37, 99, 235, 0.28));
}

/* Bloque que se está arrastrando: se despega del resto. */
.ppsa-builder .ppsa-builder-block.is-dragging {
	box-shadow: var(--ppsa-ui-e4, 0 24px 56px rgba(15, 23, 42, 0.16));
	transform: scale(1.01);
	opacity: 0.97;
}

.ppsa-builder .ppsa-builder-block h3,
.ppsa-builder .ppsa-builder-block h4 {
	color: var(--ppsa-ui-ink, #0f172a);
	letter-spacing: -0.01em;
}

/*
 * Los bloques heredados de plantilla NO viven aquí: se pintan en el
 * modal de contenido de agencia con la clase `.ppsa-am-cta-placement--tpl`.
 * Su estilo está en portal-refresh.css, junto al resto de ese diálogo.
 */

/* ------------------------------------------------------------
   6. Controles
   ------------------------------------------------------------ */
.ppsa-builder .ppsa-field-label {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.79rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ppsa-ui-ink-soft, #334155);
}

.ppsa-builder input[type='text'],
.ppsa-builder input[type='url'],
.ppsa-builder input[type='email'],
.ppsa-builder input[type='tel'],
.ppsa-builder input[type='number'],
.ppsa-builder input[type='search'],
.ppsa-builder select,
.ppsa-builder textarea {
	background: var(--ppsa-ui-surface-2, #f8fafc);
	border: 1px solid var(--ppsa-ui-line-strong, #cbd5e1);
	border-radius: var(--ppsa-ui-r-sm, 10px);
	color: var(--ppsa-ui-ink, #0f172a);
	font-family: inherit;
	transition: border-color var(--ppsa-ui-dur-1, 0.14s) var(--ppsa-ui-ease, ease),
		box-shadow var(--ppsa-ui-dur-1, 0.14s) var(--ppsa-ui-ease, ease),
		background var(--ppsa-ui-dur-1, 0.14s) var(--ppsa-ui-ease, ease);
}

.ppsa-builder input:focus,
.ppsa-builder select:focus,
.ppsa-builder textarea:focus {
	outline: none;
	background: var(--ppsa-ui-surface, #fff);
	border-color: var(--ppsa-ui-accent, #2563eb);
	box-shadow: var(--ppsa-ui-focus, 0 0 0 3px rgba(37, 99, 235, 0.28));
}

/* El selector de color nativo, con la misma caja que el resto. */
.ppsa-builder input[type='color'] {
	width: 2.4rem;
	height: 2.2rem;
	padding: 2px;
	border: 1px solid var(--ppsa-ui-line-strong, #cbd5e1);
	border-radius: var(--ppsa-ui-r-sm, 10px);
	background: var(--ppsa-ui-surface, #fff);
	cursor: pointer;
}

.ppsa-builder input[type='color']:focus-visible {
	outline: none;
	border-color: var(--ppsa-ui-accent, #2563eb);
	box-shadow: var(--ppsa-ui-focus, 0 0 0 3px rgba(37, 99, 235, 0.28));
}

/* ------------------------------------------------------------
   7. Barra superior y guardado
   ------------------------------------------------------------ */
.ppsa-builder .ppsa-builder-topbar,
.ppsa-builder .ppsa-builder-toolbar {
	background: color-mix(in srgb, var(--ppsa-ui-surface, #fff) 92%, transparent);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	backdrop-filter: saturate(180%) blur(12px);
	border: 1px solid var(--ppsa-ui-line, #e2e8f0);
	border-radius: var(--ppsa-ui-r-lg, 16px);
	box-shadow: var(--ppsa-ui-e2, 0 4px 12px rgba(15, 23, 42, 0.07));
}

/* ------------------------------------------------------------
   8. Vista previa
   ------------------------------------------------------------ */
.ppsa-builder .ppsa-builder-preview-col {
	border-radius: var(--ppsa-ui-r-lg, 16px);
}

.ppsa-builder .ppsa-live-preview {
	border-radius: var(--ppsa-ui-r-lg, 16px);
	box-shadow: var(--ppsa-ui-e3, 0 12px 28px rgba(15, 23, 42, 0.1));
}

/* ------------------------------------------------------------
   9. Raíl de secciones
   ------------------------------------------------------------ */
.ppsa-builder-section-rail__label {
	background: var(--ppsa-ui-surface, #fff);
	border: 1px solid var(--ppsa-ui-line, #e2e8f0);
	border-radius: var(--ppsa-ui-r-md, 12px);
	box-shadow: var(--ppsa-ui-e2, 0 4px 12px rgba(15, 23, 42, 0.07));
	color: var(--ppsa-ui-ink-soft, #334155);
}

.ppsa-builder-section-rail__label-pref {
	color: var(--ppsa-ui-ink-faint, #94a3b8);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.ppsa-builder-section-rail__label-name {
	color: var(--ppsa-ui-ink, #0f172a);
	font-weight: 650;
}

.ppsa-builder-section-rail__menu {
	background: var(--ppsa-ui-surface, #fff);
	border: 1px solid var(--ppsa-ui-line, #e2e8f0);
	border-radius: var(--ppsa-ui-r-md, 12px);
	box-shadow: var(--ppsa-ui-e3, 0 12px 28px rgba(15, 23, 42, 0.1));
}

.ppsa-builder-section-rail__menu-item {
	border-radius: var(--ppsa-ui-r-sm, 10px);
	color: var(--ppsa-ui-ink-soft, #334155);
	font-weight: 550;
	transition: background var(--ppsa-ui-dur-1, 0.14s) var(--ppsa-ui-ease, ease),
		color var(--ppsa-ui-dur-1, 0.14s) var(--ppsa-ui-ease, ease);
}

.ppsa-builder-section-rail__menu-item:hover,
.ppsa-builder-section-rail__menu-item:focus-visible {
	background: var(--ppsa-ui-surface-3, #f1f5f9);
	color: var(--ppsa-ui-ink, #0f172a);
}

.ppsa-builder-section-rail__menu-item.is-active {
	background: var(--ppsa-ui-accent-soft, #eff6ff);
	color: var(--ppsa-ui-accent-hover, #1d4ed8);
	font-weight: 650;
}

/* ------------------------------------------------------------
   10. Foco visible en todo el editor
   ------------------------------------------------------------ */
.ppsa-builder :is(button, a, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--ppsa-ui-accent, #2563eb);
	outline-offset: 2px;
	border-radius: var(--ppsa-ui-r-xs, 6px);
}

@media (prefers-reduced-motion: reduce) {
	.ppsa-builder details.ppsa-builder-surface,
	.ppsa-builder .ppsa-builder-card,
	.ppsa-builder .ppsa-builder-block,
	.ppsa-builder .ppsa-builder-card__summary::after,
	.ppsa-builder input,
	.ppsa-builder select,
	.ppsa-builder textarea {
		transition: none;
	}
	.ppsa-builder .ppsa-builder-block.is-dragging {
		transform: none;
	}
}