/**
 * Pro Profile SaaS — los bloques del editor (0.99.745)
 *
 * ============================================================
 * QUÉ ES ESTO
 * ------------------------------------------------------------
 * El bloque es la pieza que más se repite en el editor: un perfil
 * cargado tiene quince o veinte, todos con el mismo gris y la misma
 * caja. Encontrar uno se hacía LEYENDO, no mirando.
 *
 * Esta hoja aplica cuatro cambios acordados sobre esos bloques y
 * uno sobre los botones:
 *
 *   K1  Borde vivo   — una barra de color en el canto del bloque
 *                      abierto o enfocado. Dice DÓNDE ESTÁS sin
 *                      mover nada de sitio.
 *   K3  Acordeón     — ya existía y está bien hecho en
 *                      `public-builder.css` (grid-template-rows
 *                      0fr→1fr, 0.28 s, con reduced-motion). Aquí
 *                      solo se le quitan los grises escritos a mano
 *                      para que use los tokens como el resto.
 *   K4  Capas        — los bloques entran escalonados y con sombra:
 *                      tarjetas apiladas, no filas de formulario.
 *   K5  Color por tipo — el canto lleva el color de su FAMILIA, no
 *                      un color por tipo. Con veinte tipos, veinte
 *                      colores sería ruido; cuatro familias sí se
 *                      aprenden. Enganchan en `data-block-type`, que
 *                      el editor ya escribía.
 *   T4  Botón que se levanta — se despega con sombra al acercarse.
 *
 * ============================================================
 * CÓMO GANA
 * ------------------------------------------------------------
 * Carga DESPUÉS de `builder-pro.css` (que a su vez cuelga de
 * `builder-refresh.css`) y gana por ORDEN DE CASCADA, no con
 * `!important`. Misma técnica que las dos hojas anteriores.
 *
 * K1 y K5 comparten la variable `--ppsa-blk-color`: K5 decide el color
 * según la familia del bloque y K1 lo pinta en el canto izquierdo.
 *
 * En 0.99.745 el canto era un `::before` absoluto. Se cambió a
 * `border-left` en 0.99.748 porque el borde respeta por sí solo el
 * `border-radius` de la tarjeta — con el pseudo-elemento había que
 * recortarlo a mano para que no asomara por las esquinas, y por eso
 * acabó tan encogido y translúcido que no se veía.
 */

/* ── Tokens locales ──────────────────────────────────────────
 * Se declaran con reserva por si `design-system.css` no llegara:
 * esta hoja tiene que ser legible aunque cargue sola.
 */
.ppsa-builder {
	--ppsa-blk-dur: var(--ppsa-ui-dur-1, 0.18s);
	--ppsa-blk-ease: var(--ppsa-ui-ease, cubic-bezier(0.16, 1, 0.3, 1));
	--ppsa-blk-line: var(--ppsa-ui-line, #e2e8f0);

	/* Las cuatro familias de K5. */
	--ppsa-blk-accion: #0f766e;      /* contacto y acción directa */
	--ppsa-blk-contenido: #7c3aed;   /* lo que se lee o se mira */
	--ppsa-blk-negocio: #b45309;     /* servicios, precios, prueba social */
	--ppsa-blk-estructura: #94a3b8;  /* separadores y huecos */

	/* Color por defecto: el bloque que no reconocemos no miente. */
	--ppsa-blk-color: var(--ppsa-blk-estructura);
}

/* ============================================================
 * K5 · Color por familia
 * ============================================================
 * Solo se asigna la variable. Quien la pinta es K1, más abajo.
 */

/* Contacto y acción directa: lo que produce un clic hacia fuera. */
.ppsa-builder .ppsa-builder-block[data-block-type="button"],
.ppsa-builder .ppsa-builder-block[data-block-type="whatsapp"],
.ppsa-builder .ppsa-builder-block[data-block-type="phone"],
.ppsa-builder .ppsa-builder-block[data-block-type="sms"],
.ppsa-builder .ppsa-builder-block[data-block-type="email"],
.ppsa-builder .ppsa-builder-block[data-block-type="smart_link"],
.ppsa-builder .ppsa-builder-block[data-block-type="share"],
.ppsa-builder .ppsa-builder-block[data-block-type="vcard"],
.ppsa-builder .ppsa-builder-block[data-block-type="contact_form"],
.ppsa-builder .ppsa-builder-block[data-block-type="download"] {
	--ppsa-blk-color: var(--ppsa-blk-accion);
}

/* Contenido: lo que el visitante lee o mira. */
.ppsa-builder .ppsa-builder-block[data-block-type="text"],
.ppsa-builder .ppsa-builder-block[data-block-type="description"],
.ppsa-builder .ppsa-builder-block[data-block-type="header"],
.ppsa-builder .ppsa-builder-block[data-block-type="emoji"],
.ppsa-builder .ppsa-builder-block[data-block-type="gallery"] {
	--ppsa-blk-color: var(--ppsa-blk-contenido);
}

/* Negocio: lo que vende o lo que respalda. */
.ppsa-builder .ppsa-builder-block[data-block-type="service"],
.ppsa-builder .ppsa-builder-block[data-block-type="services_list"],
.ppsa-builder .ppsa-builder-block[data-block-type="highlights"],
.ppsa-builder .ppsa-builder-block[data-block-type="review"],
.ppsa-builder .ppsa-builder-block[data-block-type="item"] {
	--ppsa-blk-color: var(--ppsa-blk-negocio);
}

/* Estructura: no dice nada, ordena. Se queda en el gris por defecto. */
.ppsa-builder .ppsa-builder-block[data-block-type="divider"],
.ppsa-builder .ppsa-builder-block[data-block-type="spacer"],
.ppsa-builder .ppsa-builder-block[data-block-type="group"] {
	--ppsa-blk-color: var(--ppsa-blk-estructura);
}

/* ============================================================
 * K1 · Borde vivo
 * ============================================================
 * Barra en el canto izquierdo. Existe siempre — así el color de
 * familia (K5) se ve de un vistazo en la lista entera — pero está
 * a media altura y traslúcida hasta que el bloque se abre o recibe
 * el foco, y entonces se ensancha.
 */
/*
 * CORREGIDO EN 0.99.748. La primera versión de esta barra era
 * INVISIBLE en reposo: 3 px al 40 % de opacidad, recortada al 45 % de
 * su altura y separada 0.75rem del borde de arriba y de abajo. Sumado
 * a que la sombra de K4 se puso en 0.04 —MÁS FLOJA que el 0.05 que ya
 * traía `builder-refresh.css`— el resultado fue que el listado quedó
 * exactamente igual que antes. La función estaba bien conectada; lo
 * que fallaba eran los números.
 *
 * Ahora el color va en `border-left` y no en un pseudo-elemento. El
 * borde respeta solo el `border-radius` de la tarjeta, así que no hay
 * que inventar radios ni recortar nada para que no asome por las
 * esquinas redondeadas. Y sobre todo: SE VE SIN TOCAR NADA, que es el
 * punto entero de colorear por familia.
 */
.ppsa-builder .ppsa-blocks-list .ppsa-builder-block {
	position: relative;
	border-left-width: 4px;
	border-left-style: solid;
	border-left-color: var(--ppsa-blk-color);
	/* Baño del color de familia sobre la superficie: el bloque entero
	   se lee como suyo, no solo su canto. Al 6 % el texto conserva todo
	   su contraste. */
	background-image: linear-gradient(
		to right,
		color-mix(in srgb, var(--ppsa-blk-color) 6%, transparent),
		transparent 40%
	);
}

.ppsa-builder .ppsa-blocks-list .ppsa-builder-block:hover {
	border-left-color: var(--ppsa-blk-color);
	background-image: linear-gradient(
		to right,
		color-mix(in srgb, var(--ppsa-blk-color) 11%, transparent),
		transparent 45%
	);
}

/*
 * El bloque abierto se despega y su canto se lee más ancho: dónde estás
 * se ve desde el otro extremo de una lista de veinte.
 *
 * ESTE ERA EL «SALTITO» (corregido en 0.99.764).
 *
 * Hasta ahora esta regla subía `border-left-width` de 4 px a 6 px. El
 * grosor de un borde ES CAJA: al abrir un bloque, sus 2 px extra
 * empujaban TODO el contenido interior a la derecha en el mismo
 * fotograma del clic. El botón que acababas de pulsar se movía bajo el
 * dedo. Por eso pasaba «al picar en un botón O en un bloque»: no era de
 * los botones, era del contenedor que los dos comparten.
 *
 * En 0.99.761 quité un `translateY(-1px)` del hover creyendo que era
 * eso, y antes en 0.99.764 toqué los tres botones de la cabecera —que
 * ni siquiera tenían la clase que yo creía—. El movimiento nunca estuvo
 * en el hover ni en los botones: estaba aquí, en el estado abierto.
 *
 * El canto ancho se conserva, pero pintado con una sombra interior en
 * lugar de con borde (más abajo, junto a la elevación). Una sombra no
 * ocupa caja: se ve idéntico y no mueve un solo píxel.
 */
.ppsa-builder .ppsa-blocks-list .ppsa-builder-block.is-open {
	border-color: color-mix(in srgb, var(--ppsa-blk-color) 45%, transparent);
	border-left-color: var(--ppsa-blk-color);
	background-image: linear-gradient(
		to right,
		color-mix(in srgb, var(--ppsa-blk-color) 14%, transparent),
		transparent 50%
	);
}

/*
 * Los bloques a los que les falta información ya se marcan aparte
 * con `--pending`. Ese aviso manda sobre el color de familia: es
 * más urgente saber que algo está incompleto que de qué tipo es.
 */
.ppsa-builder .ppsa-blocks-list .ppsa-builder-block--pending {
	--ppsa-blk-color: #dc2626;
}

/* ============================================================
 * K4 · Capas con sombra
 * ============================================================
 * Entrada escalonada. El escalonado se hace con `nth-child` y no
 * con JS: el editor repinta la lista entera al reordenar, y una
 * clase puesta a mano se perdería en cada repintado.
 *
 * Solo los seis primeros llevan retraso. A partir de ahí el retraso
 * acumulado sería más largo que la paciencia de nadie, y todos
 * entran juntos.
 */
/*
 * CORREGIDO EN 0.99.748. Antes: `0 1px 2px rgba(15,23,42,0.04)`. Es
 * MÁS FLOJA que el `0.05` que `builder-refresh.css` ya aplicaba desde
 * la 0.99.682, así que «capas con sombra» dejaba los bloques más
 * planos de lo que estaban. Sombra de verdad, en dos capas: una corta
 * que asienta la tarjeta y otra larga que la separa del fondo.
 */
.ppsa-builder .ppsa-blocks-list .ppsa-builder-block {
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.06),
		0 4px 10px -4px rgba(15, 23, 42, 0.14);
	transition:
		box-shadow var(--ppsa-blk-dur) var(--ppsa-blk-ease),
		border-color var(--ppsa-blk-dur) var(--ppsa-blk-ease),
		background-image var(--ppsa-blk-dur) var(--ppsa-blk-ease),
		transform var(--ppsa-blk-dur) var(--ppsa-blk-ease);
}

/*
 * CORREGIDO EN 0.99.750 — la entrada, SOLO la primera vez.
 *
 * Antes la animación colgaba de `.ppsa-builder-block` a secas. El
 * editor REPINTA la lista entera muchas veces —al copiar, al borrar,
 * al reordenar, al escribir en un campo que toca el árbol— y una
 * animación CSS vuelve a empezar cada vez que el elemento se reinserta
 * en el DOM. Resultado: los bloques se deslizaban 10 px hacia arriba
 * cada vez que tocabas algo. Eso es el «se recorre tantito» que se
 * reportó.
 *
 * El atributo lo pone `renderBlocksEditor()` a partir del segundo
 * repintado: la primera pintada entra con su animación, y de ahí en
 * adelante la lista se queda quieta.
 */
.ppsa-builder .ppsa-blocks-list:not([data-ppsa-painted]) .ppsa-builder-block {
	animation: ppsa-blk-in 0.34s var(--ppsa-blk-ease) both;
}

/*
 * CORREGIDO EN 0.99.761 — el bloque ya NO se mueve al pasar el cursor.
 *
 * En 0.99.749 se añadió `transform: translateY(-1px)` aquí. Sobre el papel
 * es un detalle; en la práctica es el «juego» que se reportó: apuntar con
 * el ratón para hacer clic activa el `:hover`, así que CADA clic sobre un
 * bloque lo levantaba un píxel justo antes de pulsarlo. Con veinte bloques
 * en lista, y con el ratón cruzando por encima de otros para llegar, la
 * lista entera parece temblar.
 *
 * La sombra ya comunica el hover de sobra. Un movimiento no hace falta
 * para eso, y aquí estorbaba más de lo que aportaba.
 */
.ppsa-builder .ppsa-blocks-list .ppsa-builder-block:hover {
	box-shadow:
		0 2px 4px rgba(15, 23, 42, 0.07),
		0 10px 22px -8px rgba(15, 23, 42, 0.24);
}

/*
 * La elevación del bloque abierto, y con ella el canto ancho.
 *
 * La primera sombra es `inset`: 2 px de color pegados por dentro al
 * borde izquierdo. Sumados a los 4 px del borde real dan los mismos 6 px
 * de antes, pero una sombra NO ocupa caja, así que nada se desplaza al
 * abrir. Es el reemplazo del `border-left-width: 6px` que causaba el
 * salto (ver la nota del estado `.is-open` más arriba).
 *
 * Van en la misma declaración porque `box-shadow` no se acumula entre
 * reglas: la última gana entera. Separarlas perdería la elevación.
 */
.ppsa-builder .ppsa-blocks-list .ppsa-builder-block.is-open {
	box-shadow:
		inset 2px 0 0 0 var(--ppsa-blk-color),
		0 2px 6px rgba(15, 23, 42, 0.08),
		0 16px 34px -14px rgba(15, 23, 42, 0.32);
}

@keyframes ppsa-blk-in {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.995);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.ppsa-builder .ppsa-blocks-list:not([data-ppsa-painted]) .ppsa-builder-block:nth-child(1) { animation-delay: 0.02s; }
.ppsa-builder .ppsa-blocks-list:not([data-ppsa-painted]) .ppsa-builder-block:nth-child(2) { animation-delay: 0.06s; }
.ppsa-builder .ppsa-blocks-list:not([data-ppsa-painted]) .ppsa-builder-block:nth-child(3) { animation-delay: 0.1s; }
.ppsa-builder .ppsa-blocks-list:not([data-ppsa-painted]) .ppsa-builder-block:nth-child(4) { animation-delay: 0.14s; }
.ppsa-builder .ppsa-blocks-list:not([data-ppsa-painted]) .ppsa-builder-block:nth-child(5) { animation-delay: 0.18s; }
.ppsa-builder .ppsa-blocks-list:not([data-ppsa-painted]) .ppsa-builder-block:nth-child(6) { animation-delay: 0.22s; }

/*
 * El bloque que se arrastra NO entra ni se escalona: durante el
 * arrastre el editor lo mueve de sitio en el DOM, y la animación
 * volvería a dispararse en cada salto.
 */
.ppsa-builder .ppsa-blocks-list .ppsa-builder-block.is-dragging {
	animation: none;
}

/* ============================================================
 * La cabecera del bloque: que el título quepa (0.99.750)
 * ============================================================
 * En la fila del bloque conviven cinco cosas: el asa de arrastre,
 * los botones Mover/Copiar/Eliminar, el título, el tipo («BOTÓN») y
 * el aviso de lo que falta («SIN DESTINO»). De las cinco, CUATRO
 * eran `flex: 0 0 auto` — no encogen nunca — y la única elástica
 * era justo el título, con `flex: 1` y base 0.
 *
 * O sea: el título se quedaba con las sobras. En el panel del
 * editor, que es estrecho, las sobras eran dos o tres píxeles, así
 * que el nombre del bloque —lo ÚNICO que sirve para distinguir un
 * botón de otro— quedaba reducido a una raya.
 *
 * Ahora la fila puede partirse en dos líneas. Mientras haya sitio
 * todo sigue en una; cuando no lo hay, el título baja a su propia
 * línea con el ancho entero en vez de exprimirse. Se gana alto solo
 * en los casos en que antes no se leía nada.
 */
.ppsa-builder .ppsa-builder-block__row--head {
	flex-wrap: wrap;
	row-gap: 0.4rem;
}

/*
 * CORREGIDO EN 0.99.752 — el título SIEMPRE en su propia línea.
 *
 * En 0.99.750 la cabecera pedía 13rem de base y solo bajaba de línea
 * cuando no cabían. Ese umbral resultó ser el origen del «jueguito»:
 * al abrir un bloque aparece la barra de desplazamiento del panel, el
 * panel se estrecha ~15 px, la cabecera cruza el umbral y salta a la
 * otra línea; al cerrar, la barra desaparece y vuelve. Cada clic movía
 * la fila arriba y abajo.
 *
 * Con `flex-basis: 100%` la cabecera ocupa su renglón SIEMPRE. Es
 * determinista: no depende del ancho, así que no hay nada que pueda
 * cruzarse en un sentido y en otro. Y de paso el título siempre tiene
 * la fila entera, que era el objetivo original.
 */
.ppsa-builder .ppsa-builder-block__head {
	flex: 1 1 100%;
	flex-wrap: wrap;
	row-gap: 0.3rem;
}

/*
 * El tipo y el aviso también ceden ahora. Antes eran rígidos y
 * empujaban al título aunque el texto fuese largo; con un tope y
 * puntos suspensivos se recortan ellos, que es lo correcto: perder
 * media palabra de «SIN DESTINO» estorba mucho menos que perder el
 * nombre del bloque.
 */
.ppsa-builder .ppsa-builder-block__kind,
.ppsa-builder .ppsa-builder-block__pending-badge {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 8rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ============================================================
 * K3 · Acordeón — solo afinado
 * ============================================================
 * La mecánica ya existe y funciona. Lo único que se cambia es el
 * gris escrito a mano (`#e2e8f0`), que no seguía al resto del
 * editor cuando cambiaban los tokens.
 */
.ppsa-builder .ppsa-builder-block.is-open .ppsa-builder-block__drawer {
	border-top-color: var(--ppsa-blk-line);
}

/*
 * 0.99.752 — el despliegue, más perceptible.
 *
 * El acordeón corría a 0.28 s el alto y 0.22 s el sangrado. El sangrado
 * es el movimiento LATERAL: al abrirse, el contenido entra desde la
 * izquierda 1,25rem. A 0.22 s el gesto se consumía antes de que el ojo
 * llegara a verlo, y el cajón parecía aparecer de golpe.
 *
 * Se sube el alto a 0.42 s y el lateral a 0.38 s. Sigue por debajo del
 * medio segundo —a partir de ahí una interfaz se siente lenta, no
 * elegante— pero ya da tiempo a leer el movimiento. El lateral va algo
 * por detrás del alto a propósito: primero se abre el hueco, después
 * entra el contenido. Los dos a la vez se leen como un solo empujón.
 */
.ppsa-builder .ppsa-builder-block__drawer {
	transition:
		grid-template-rows 0.42s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.3s ease,
		padding 0.38s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
	.ppsa-builder .ppsa-builder-block__drawer {
		transition: none;
	}
}

.ppsa-builder .ppsa-builder-block__footer {
	border-top-color: var(--ppsa-blk-line);
}

/* La flecha toma el color de la familia al abrir: cierra el círculo. */
.ppsa-builder .ppsa-builder-block.is-open .ppsa-builder-block__chev {
	color: var(--ppsa-blk-color);
}

/* ============================================================
 * Logros: que dejen de verse como un chorizo (0.99.752)
 * ============================================================
 * Cada logro tenía sus cuatro campos —Icono, Número, Sufijo y
 * Etiqueta— en UNA sola fila de cuatro columnas. Existía un plan
 * B para pantallas estrechas… pero colgado de
 * `@media (max-width: 700px)`, que mide el VIEWPORT.
 *
 * Y el problema no es el viewport: es el panel del editor, que en
 * una pantalla de 1400 px mide unos 400. La media query no llegaba
 * a dispararse nunca en escritorio, así que las cuatro columnas se
 * apretaban en 400 px: el sufijo se cortaba a media palabra y la
 * etiqueta —el texto más largo de los cuatro— se quedaba sin sitio.
 *
 * Ahora el reparto es fijo y no depende de ningún ancho: icono,
 * número y sufijo arriba (los tres son cortos y se leen juntos), y
 * la etiqueta abajo con la fila entera, que es lo que necesita.
 */
.ppsa-builder .ppsa-hl-item__fields {
	grid-template-columns: 4.25rem minmax(0, 1fr) minmax(0, 5.5rem);
	grid-template-areas:
		"emoji value suffix"
		"label label  label";
	row-gap: 0.55rem;
	align-items: end;
}

.ppsa-builder .ppsa-hl-field {
	/* Sin esto un `input` con placeholder largo se niega a encoger y
	   revienta la rejilla por la derecha. */
	min-width: 0;
}

.ppsa-builder .ppsa-hl-field--emoji { grid-area: emoji; }
.ppsa-builder .ppsa-hl-item__fields > .ppsa-hl-field:nth-child(2) { grid-area: value; }
.ppsa-builder .ppsa-hl-item__fields > .ppsa-hl-field:nth-child(3) { grid-area: suffix; }
.ppsa-builder .ppsa-hl-field--label { grid-area: label; }

/* ============================================================
 * T4 · El botón que se levanta
 * ============================================================
 * Se despega con sombra al acercar el ratón y se vuelve a apoyar
 * al pulsarlo. Elegido sobre el destello y el degradado porque es
 * el único que aguanta un panel con quince botones sin cansar.
 *
 * `:active` devuelve el botón a su sitio: sin eso, el clic no tiene
 * respuesta física y la pulsación se siente muerta.
 */
.ppsa-builder .ppsa-btn-pro,
.ppsa-builder button.ppsa-builder-block__action {
	transition:
		transform var(--ppsa-blk-dur) var(--ppsa-blk-ease),
		box-shadow var(--ppsa-blk-dur) var(--ppsa-blk-ease),
		border-color var(--ppsa-blk-dur) var(--ppsa-blk-ease),
		background-color var(--ppsa-blk-dur) var(--ppsa-blk-ease);
}

/*
 * El levantamiento de 2 px al pasar el cursor (efecto T4).
 *
 * Se conserva en los botones grandes y sueltos («Añadir bloque»,
 * «Regenerar estilo»): están aislados, no se cruzan al apuntar y el
 * movimiento se lee como respuesta, no como temblor.
 */
.ppsa-builder .ppsa-btn-pro:hover:not([disabled]):not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px -8px rgba(15, 23, 42, 0.35);
}

.ppsa-builder .ppsa-btn-pro:active:not([disabled]):not(:disabled) {
	transform: translateY(0);
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
}

/*
 * `Mover`, `Copiar` y `Eliminar`: sin movimiento, ni al pasar ni al
 * pulsar. Hoy no heredan ningún `transform` (no llevan `.ppsa-btn-pro`),
 * así que esto es un seguro: viven pegados unos a otros en la cabecera y
 * son justo donde se hace clic, de modo que cualquier levantamiento que
 * se les añadiera mañana volvería a temblar bajo el dedo. Cambian de
 * fondo y de borde, que comunica igual sin mover nada.
 */
.ppsa-builder button.ppsa-builder-block__action,
.ppsa-builder button.ppsa-builder-block__action:hover,
.ppsa-builder button.ppsa-builder-block__action:active {
	transform: none;
}

.ppsa-builder button.ppsa-builder-block__action:hover:not([disabled]):not(:disabled) {
	background-color: var(--ppsa-ui-surface-3, #f1f5f9);
	border-color: var(--ppsa-ui-line-strong, #cbd5e1);
}

/* El botón apagado no se levanta: prometería algo que no hará. */
.ppsa-builder .ppsa-btn-pro[disabled],
.ppsa-builder .ppsa-btn-pro:disabled {
	transform: none;
	box-shadow: none;
}

/* ============================================================
 * Las pestañas de Descripción, con transición (0.99.752)
 * ============================================================
 * Contenido / Diseño modal / Botón cambiaban de golpe: el panel
 * viejo desaparecía y el nuevo aparecía en el mismo fotograma, sin
 * nada que dijera de dónde venía.
 *
 * No hace falta JavaScript. Los paneles se ocultan con `[hidden]`,
 * que es `display: none`, y pasar de `display: none` a visible
 * REINICIA las animaciones CSS. Basta con animar el panel que no
 * está oculto: al cambiar de pestaña, el que entra se anima solo.
 */
.ppsa-builder .ppsa-desc-edit-panel:not([hidden]) {
	animation: ppsa-desc-pane-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ppsa-desc-pane-in {
	from {
		opacity: 0;
		transform: translateX(10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* La pastilla blanca de la pestaña activa también se desliza en vez
   de saltar de una a otra. */
.ppsa-builder .ppsa-desc-edit-tabs__btn {
	transition:
		background-color 0.22s var(--ppsa-blk-ease),
		color 0.22s var(--ppsa-blk-ease),
		box-shadow 0.22s var(--ppsa-blk-ease);
}

/* ============================================================
 * La guía del producto, fuera del paso (0.99.752)
 * ============================================================
 * El botón flotante «Guía del producto» vive en
 * `position: fixed; left: 16px; bottom: 16px` con z-index 100260 —
 * exactamente el mismo rincón donde está el riel de secciones
 * (↑ ☰ ↓). Se montaba encima y tapaba el menú.
 *
 * Se oculta SOLO en el editor: esta hoja únicamente se encola
 * cuando está activo el JS del editor, así que en el panel de socio
 * y en el resto del portal la guía sigue estando. Si se quisiera
 * quitar de todas partes habría que apagarla en
 * `PPSA_AI_Guide::enqueue_assets()`, no aquí.
 */
body:has(#ppsa-builder-root) .ppsa-member-guide__toggle {
	display: none;
}

/* ============================================================
 * El panel de la IA: mesa de trabajo (0.99.753)
 * ============================================================
 * Boceto 01 de la propuesta. Antes era una columna donde el
 * cuadro de texto, los cuatro desplegables opcionales y el botón
 * pesaban lo mismo — y el alcance del generador (las nueve cosas
 * que decide) iba en la letra pequeña, separado por comas, donde
 * no lo leía nadie. Como no se sabía cuánto abarca, la gente
 * describía de menos y el resultado salía genérico.
 *
 * Dos columnas: el encargo a la izquierda, lo que la IA va a
 * decidir a la derecha. La lista es un HECHO, no un indicador de
 * progreso: son las nueve cosas que el generador toca siempre.
 *
 * Solo cambia el reparto visual. Ni un id ni un campo se han
 * movido de sitio dentro del encargo, así que el JS que ya
 * existía sigue funcionando sin tocarlo.
 */
.ppsa-builder .ppsa-ai-build__bench {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
	gap: 1.1rem;
	align-items: start;
}

/*
 * A partir de aquí las dos columnas no caben sin estrangular el
 * cuadro de texto, así que la lista se va debajo. Es una consulta
 * de CONTENEDOR y no de viewport a propósito: el panel vive dentro
 * del editor, que en una pantalla ancha sigue siendo estrecho — el
 * mismo error que tenían los logros hasta 0.99.752.
 */
@container (max-width: 40rem) {
	.ppsa-builder .ppsa-ai-build__bench {
		grid-template-columns: minmax(0, 1fr);
	}
}

.ppsa-builder .ppsa-ai-build__panel-inner {
	container-type: inline-size;
}

/* Respaldo para navegadores sin consultas de contenedor: por
   viewport, que es mejor que nada. */
@supports not (container-type: inline-size) {
	@media (max-width: 900px) {
		.ppsa-builder .ppsa-ai-build__bench {
			grid-template-columns: minmax(0, 1fr);
		}
	}
}

.ppsa-builder .ppsa-ai-build__brief {
	min-width: 0;
}

.ppsa-builder .ppsa-ai-build__scope {
	min-width: 0;
	padding: 0.85rem 0.9rem;
	border: 1px solid var(--ppsa-ui-line, #e2e8f0);
	border-radius: var(--ppsa-ui-r-md, 12px);
	background: var(--ppsa-ui-surface-2, #f8fafc);
}

.ppsa-builder .ppsa-ai-build__scope-title {
	margin: 0 0 0.6rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ppsa-ui-ink-mute, #64748b);
}

.ppsa-builder .ppsa-ai-build__scope-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.38rem;
}

.ppsa-builder .ppsa-ai-build__scope-list li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.79rem;
	line-height: 1.3;
	color: var(--ppsa-ui-ink, #0f172a);
}

/* La marca se dibuja con dos bordes girados: una palomita de
   verdad, sin traer un icono ni una fuente para nueve renglones. */
.ppsa-builder .ppsa-ai-build__scope-tick {
	flex: 0 0 auto;
	width: 0.95rem;
	height: 0.95rem;
	border-radius: 4px;
	background: var(--ppsa-ui-accent, #2563eb);
	position: relative;
}

.ppsa-builder .ppsa-ai-build__scope-tick::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0.24rem;
	height: 0.46rem;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: translateY(-1px) rotate(45deg);
}

.ppsa-builder .ppsa-ai-build__scope-foot {
	margin: 0.7rem 0 0;
	padding-top: 0.6rem;
	border-top: 1px dashed var(--ppsa-ui-line, #e2e8f0);
	font-size: 0.72rem;
	line-height: 1.4;
	color: var(--ppsa-ui-ink-mute, #64748b);
}

/* ============================================================
 * El selector de separadores (0.99.754)
 * ============================================================
 * Tres problemas que iban juntos:
 *
 *   1. Las muestras se pintaban con el color del perfil. Sobre
 *      casillas blancas y con una paleta clara, no se veían — y
 *      las ocho nuevas son las que menos tinta ponen, así que
 *      desaparecían. Se pasan a negro fijo en el JS: aquí se
 *      elige una FORMA, y el color se elige dos campos más abajo.
 *   2. Las casillas miden 2,25rem de alto. A ese tamaño una onda
 *      o unos puntos que se apagan son indistinguibles de una
 *      línea. Ahora al pasar el cursor la casilla se agranda y
 *      se pone por encima de las demás, para poder mirarla.
 *   3. La selección se marcaba con `--ppsa-primary`, que es el
 *      color del PERFIL. Con un perfil de marca clara el borde
 *      de «seleccionado» quedaba invisible. Pasa al azul del
 *      editor, que no depende de lo que haya elegido el socio.
 */
/*
 * CORREGIDO EN 0.99.761 — sin ampliar, porque el cajón recorta.
 *
 * En 0.99.754 la casilla crecía con `transform: scale(1.35)` al pasar el
 * cursor. El problema: este selector vive DENTRO del cajón del bloque, y
 * ese cajón lleva `overflow: hidden` — lo necesita para animar su
 * apertura con `grid-template-rows: 0fr → 1fr`. Una casilla ampliada se
 * sale de sus límites y el cajón la recorta: por eso la FILA DE ARRIBA
 * desaparecía justo al ponerle el cursor encima.
 *
 * `z-index` no rescata nada de esto: el recorte de un contenedor no se
 * esquiva apilando por encima.
 *
 * Se quita la ampliación y se hacen las casillas MÁS GRANDES de partida.
 * Se ven mejor las dieciocho todo el tiempo, sin depender del cursor —
 * que además no existe en el móvil.
 */
.ppsa-builder .ppsa-divider-style-tile {
	position: relative;
	min-height: 3.25rem;
	padding: 0.5rem 0.55rem;
	transition:
		box-shadow 0.16s var(--ppsa-blk-ease),
		border-color 0.16s var(--ppsa-blk-ease),
		background-color 0.16s var(--ppsa-blk-ease);
}

/* Más ancho para la muestra: onda, zigzag y puntos repiten su dibujo cada
   12–40 px, y en 3rem no se llegaba a ver un ciclo entero. */
.ppsa-builder .ppsa-divider-style-tile__preview {
	max-width: none;
	min-height: 1.5rem;
}

/*
 * Todas las muestras, igual de negras.
 *
 * El JS ya les pasa el mismo negro, pero tres estilos se veían más claros
 * que el resto por su propia definición: «fina y corta» baja la opacidad,
 * «halo» difumina con `drop-shadow` y «puntos que se apagan» desvanece con
 * una máscara. En el perfil eso es justo su gracia; en una rejilla donde
 * se compara FORMA, hace pensar que unos están apagados.
 */
.ppsa-builder .ppsa-divider-style-tile__preview .ppsa-divider {
	opacity: 1;
	filter: none;
}

.ppsa-builder .ppsa-divider-style-tile__preview .ppsa-divider--fade_dots {
	-webkit-mask-image: none;
	mask-image: none;
}

.ppsa-builder .ppsa-divider-style-tile:hover,
.ppsa-builder .ppsa-divider-style-tile:focus-visible {
	background: #fff;
	border-color: var(--ppsa-ui-accent, #2563eb);
	box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.28);
}

.ppsa-builder .ppsa-divider-style-tile.is-selected {
	border-color: var(--ppsa-ui-accent, #2563eb);
	background: var(--ppsa-ui-accent-soft, #eff6ff);
	box-shadow: 0 0 0 2px var(--ppsa-ui-accent, #2563eb);
}

@media (prefers-reduced-motion: reduce) {
	.ppsa-builder .ppsa-divider-style-tile,
	.ppsa-builder .ppsa-divider-style-tile:hover,
	.ppsa-builder .ppsa-divider-style-tile.is-selected:hover {
		transform: none;
		transition: none;
	}
}

/* ============================================================
 * La numeración de los pasos (0.99.756)
 * ============================================================
 * Los números están escritos a mano en el PHP: 1, 2, 3, 4, 5, 6,
 * 7, 8. Eso funciona si se ven los ocho — y no se ven casi nunca.
 *
 * El modo Sencillo esconde los pasos 1, 3, 6 y 7. El modo
 * plantilla esconde otros distintos. Y «Mi estilo», que solo
 * existe en individual, se cuela entre el 4 y el 5 con una
 * estrella en lugar de número. La cuenta que ve un socio en
 * individual + Sencillo era:
 *
 *     2 · 4 · ★ · 5 · 8
 *
 * Que no es una numeración: es una lista de supervivientes.
 *
 * Se numera con un contador de CSS. La regla del contador es
 * justo la que hace falta: un elemento en `display: none` NO
 * incrementa, así que la cuenta sale sobre lo que de verdad se
 * ve, sea cual sea el modo, sin que el PHP tenga que saber qué
 * está escondido.
 *
 * El número escrito a mano se tapa con `visibility` en vez de
 * quitarlo: así la pastilla conserva su tamaño y su alineación,
 * y si esta hoja no cargara se seguiría viendo el número viejo
 * en lugar de una pastilla vacía.
 */
.ppsa-builder {
	counter-reset: ppsa-step;
}

.ppsa-builder .ppsa-builder-step {
	counter-increment: ppsa-step;
}

.ppsa-builder .ppsa-builder-step__num {
	visibility: hidden;
	position: relative;
}

.ppsa-builder .ppsa-builder-step__num::before {
	content: counter(ppsa-step);
	visibility: visible;
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-variant-numeric: tabular-nums;
}

/* ============================================================
 * La cartera de entrada, en dos columnas (0.99.763)
 * ============================================================
 * Cada tarjeta apilaba OCHO pares de etiqueta y campo, todos a
 * ancho completo, uno debajo de otro. Con tres tarjetas eso son
 * veinticuatro filas seguidas: el «chorizo» que se reportó, en
 * individual y en agencia.
 *
 * No hace falta tocar el marcado. En esa lista cada etiqueta va
 * SEGUIDA de su campo, así que una rejilla de dos columnas los
 * empareja sola por orden de flujo: la etiqueta cae a la
 * izquierda y su control a la derecha. Se pasa de veinticuatro
 * filas a ocho, y de paso se lee como un formulario y no como una
 * lista.
 *
 * Lo que no es un par —el encabezado con su casilla, la nota y el
 * botón de destacar— ocupa la fila entera.
 */
/* Sin esto la consulta de contenedor de más abajo no mide nada. */
.ppsa-builder #ppsa-b-wallet-editor {
	container-type: inline-size;
}

.ppsa-builder [data-ppsa-wallet-row] {
	display: grid;
	grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
	column-gap: 0.7rem;
	row-gap: 0.4rem;
	align-items: center;
}

.ppsa-builder [data-ppsa-wallet-row] > .ppsa-check-label,
.ppsa-builder [data-ppsa-wallet-row] > .ppsa-muted,
.ppsa-builder [data-ppsa-wallet-row] > .ppsa-wallet-primary {
	grid-column: 1 / -1;
}

/* La etiqueta pega con su campo: alineada a la derecha, sin el margen
   inferior que tenía cuando vivía encima. */
.ppsa-builder [data-ppsa-wallet-row] > .ppsa-field-label {
	margin: 0;
	text-align: right;
	line-height: 1.25;
}

.ppsa-builder [data-ppsa-wallet-row] > .ppsa-input,
.ppsa-builder [data-ppsa-wallet-row] > select,
.ppsa-builder [data-ppsa-wallet-row] > span {
	min-width: 0;
}

/* El botón de destacar no necesita el ancho completo: queda mejor
   alineado con los campos, a la derecha. */
.ppsa-builder [data-ppsa-wallet-row] > .ppsa-wallet-primary {
	justify-self: start;
	margin-top: 0.15rem;
}

/*
 * En un panel estrecho ocho rem de etiqueta dejan al campo sin sitio, así
 * que se vuelve a una columna. Consulta de CONTENEDOR, no de viewport:
 * este editor vive en un panel angosto dentro de una pantalla ancha — es
 * el mismo error que tenían los logros hasta 0.99.752.
 */
@container (max-width: 26rem) {
	.ppsa-builder [data-ppsa-wallet-row] {
		grid-template-columns: minmax(0, 1fr);
	}
	.ppsa-builder [data-ppsa-wallet-row] > .ppsa-field-label {
		text-align: left;
		margin-top: 0.25rem;
	}
}

/* ============================================================
 * Sin movimiento
 * ============================================================
 * Se apagan las animaciones y los desplazamientos. NO se apagan
 * los colores ni las sombras: son información, no adorno, y el
 * ajuste del sistema pide menos movimiento, no menos contraste.
 */
@media (prefers-reduced-motion: reduce) {
	.ppsa-builder .ppsa-blocks-list .ppsa-builder-block,
	.ppsa-builder .ppsa-desc-edit-panel:not([hidden]) {
		animation: none;
	}

	.ppsa-builder .ppsa-btn-pro:hover,
	.ppsa-builder button.ppsa-builder-block__action:hover,
	.ppsa-builder .ppsa-blocks-list .ppsa-builder-block:hover {
		transform: none;
	}
}

/* ============================================================
   Vinculación con Google Calendar — 0.99.768
   ------------------------------------------------------------
   El bloque va DENTRO del apartado «Google Calendar» del centro
   de agendamiento, y tiene que leerse como algo distinto del
   campo de URL que hay debajo: uno conecta una cuenta, el otro
   solo pega un enlace. De ahí el fondo propio y el borde.
   ============================================================ */

.ppsa-gcal-link {
	margin: 0 0 0.75rem;
	padding: 0.7rem 0.8rem;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
}

.ppsa-gcal-link__state {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem;
	margin: 0 0 0.35rem;
}

/* El punto verde dice «conectado» antes de que se lea la frase. */
.ppsa-gcal-link__state--on::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 999px;
	background: #16a34a;
	flex: 0 0 auto;
}

.ppsa-gcal-link__warn {
	margin: 0 0 0.5rem;
	padding: 0.45rem 0.6rem;
	background: #fef2f2;
	border-left: 3px solid #dc2626;
	border-radius: 6px;
	color: #991b1b;
	font-size: 0.85rem;
	line-height: 1.4;
}

.ppsa-gcal-link__msg {
	margin: 0 0 0.55rem;
	padding: 0.45rem 0.6rem;
	border-radius: 6px;
	font-size: 0.85rem;
	line-height: 1.4;
}

.ppsa-gcal-link__msg.is-ok {
	background: #f0fdf4;
	border-left: 3px solid #16a34a;
	color: #166534;
}

.ppsa-gcal-link__msg.is-err {
	background: #fef2f2;
	border-left: 3px solid #dc2626;
	color: #991b1b;
}

/* Aviso del modo Sencillo (0.99.769). Ámbar y no gris: es información
   que cambia lo que crees que existe, no una nota al pie. */
.ppsa-builder-simple-hint {
	display: inline-flex;
	align-items: center;
	flex: 1 1 16rem;
	min-width: 0;
	margin-left: 0.25rem;
	padding: 0.3rem 0.6rem;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 999px;
	color: #92400e;
	font-size: 0.76rem;
	line-height: 1.3;
}

@media (max-width: 700px) {
	.ppsa-builder-simple-hint {
		flex-basis: 100%;
		margin-left: 0;
		border-radius: 8px;
	}
}