/**
 * Pro Profile SaaS — repintado del portal sobre tokens (0.99.666+)
 *
 * ============================================================
 * POR QUÉ ES UNA HOJA APARTE
 * ------------------------------------------------------------
 * El chrome del portal está pintado a mano en ~700 KB repartidos
 * entre public.css, member-dashboard.css, public-builder.css y
 * agency.css, y varios de esos ficheros redefinen los MISMOS
 * componentes (`.ppsa-btn-pro` aparece en cuatro). Reescribirlos
 * sería tocar miles de líneas sin poder probarlas.
 *
 * En vez de eso, esta hoja se encola la ÚLTIMA y repinta los
 * componentes sobre los tokens `--ppsa-ui-*`. Gana por orden de
 * cascada, no por `!important`, así que sigue siendo posible
 * sobrescribir puntualmente algo desde una hoja más específica.
 *
 * Revertir es quitar una línea del enqueue.
 *
 * ALCANCE
 * ------------------------------------------------------------
 * Todo cuelga de `.ppsa-portal`, la clase del contenedor que usan
 * dashboard, builder, checkout y admin. La página pública del
 * miembro NO la lleva, así que su diseño —el que él eligió con su
 * paleta— queda intacto. Esto es deliberado: el portal debe verse
 * siempre igual, sin que lo tiña la paleta de un perfil.
 *
 * NOTA SOBRE MODO OSCURO
 * ------------------------------------------------------------
 * Los tokens ya están listos para soportarlo, pero NO se activa
 * aquí: la mayoría del CSS que no toca esta hoja tiene blancos y
 * negros escritos a mano, y el resultado sería texto blanco sobre
 * fondo blanco en las zonas no repintadas. Cuando el repintado
 * cubra todo el portal, activarlo será añadir un bloque.
 * ============================================================
 */

/* ------------------------------------------------------------
   1. Base del contenedor
   ------------------------------------------------------------ */
.ppsa-portal {
	color: var(--ppsa-ui-ink);
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.ppsa-portal h1,
.ppsa-portal h2,
.ppsa-portal h3,
.ppsa-portal h4 {
	color: var(--ppsa-ui-ink);
	letter-spacing: -0.018em;
	line-height: 1.25;
}

.ppsa-portal .ppsa-muted {
	color: var(--ppsa-ui-ink-muted);
}

.ppsa-portal a:not(.ppsa-btn-pro):not(.ppsa-dash-nav__btn) {
	color: var(--ppsa-ui-accent);
	text-underline-offset: 2px;
}

.ppsa-portal a:not(.ppsa-btn-pro):not(.ppsa-dash-nav__btn):hover {
	color: var(--ppsa-ui-accent-hover);
}

/* ------------------------------------------------------------
   2. Tarjetas y paneles
   ------------------------------------------------------------ */
.ppsa-portal .ppsa-box,
.ppsa-portal .ppsa-dash-panel {
	background: var(--ppsa-ui-surface);
	border: 1px solid var(--ppsa-ui-line);
	border-radius: var(--ppsa-ui-r-lg);
	box-shadow: var(--ppsa-ui-e1);
}

.ppsa-portal .ppsa-dash-panel__h {
	color: var(--ppsa-ui-ink);
	font-weight: 650;
	letter-spacing: -0.015em;
}

/*
 * La barra superior es lo primero que se mira al entrar: se le da
 * un punto más de elevación y un filo de color arriba para que
 * lea como cabecera y no como una caja más de la pila.
 */
.ppsa-portal .ppsa-dash-topbar {
	position: relative;
	overflow: hidden;
	box-shadow: var(--ppsa-ui-e2);
}

.ppsa-portal .ppsa-dash-topbar::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(
		90deg,
		var(--ppsa-ui-accent),
		var(--ppsa-ui-violet)
	);
}

.ppsa-portal .ppsa-code {
	background: var(--ppsa-ui-surface-2);
	border: 1px solid var(--ppsa-ui-line);
	border-radius: var(--ppsa-ui-r-sm);
	color: var(--ppsa-ui-ink-soft);
	padding: 0.35rem 0.6rem;
	font-size: var(--ppsa-ui-t-sm);
	word-break: break-all;
}

/* ------------------------------------------------------------
   3. Navegación por pestañas
   ------------------------------------------------------------ */
.ppsa-portal .ppsa-dash-nav__btn {
	border: 1px solid var(--ppsa-ui-line-strong);
	background: var(--ppsa-ui-surface);
	color: var(--ppsa-ui-ink-soft);
	border-radius: var(--ppsa-ui-r-full);
	font-weight: 550;
	text-decoration: none;
	transition: background var(--ppsa-ui-dur-1) var(--ppsa-ui-ease),
		color var(--ppsa-ui-dur-1) var(--ppsa-ui-ease),
		border-color var(--ppsa-ui-dur-1) var(--ppsa-ui-ease),
		box-shadow var(--ppsa-ui-dur-1) var(--ppsa-ui-ease);
}

.ppsa-portal .ppsa-dash-nav__btn:hover {
	background: var(--ppsa-ui-surface-2);
	border-color: var(--ppsa-ui-accent-line);
	color: var(--ppsa-ui-ink);
}

/*
 * Activo en sólido, no en tinte suave: con muchas pestañas en dos
 * filas el tinte no bastaba para saber dónde estabas.
 */
.ppsa-portal .ppsa-dash-nav__btn--active,
.ppsa-portal .ppsa-dash-nav__btn[aria-selected='true'] {
	background: var(--ppsa-ui-accent);
	border-color: var(--ppsa-ui-accent);
	color: var(--ppsa-ui-ink-invert);
	font-weight: 650;
	box-shadow: var(--ppsa-ui-e2);
}

.ppsa-portal .ppsa-dash-nav__btn--active:hover,
.ppsa-portal .ppsa-dash-nav__btn[aria-selected='true']:hover {
	background: var(--ppsa-ui-accent-hover);
	border-color: var(--ppsa-ui-accent-hover);
	color: var(--ppsa-ui-ink-invert);
}

.ppsa-portal .ppsa-dash-nav__btn--agency:not(.ppsa-dash-nav__btn--active) {
	border-color: var(--ppsa-ui-line);
	background: var(--ppsa-ui-violet-soft);
}

.ppsa-portal .ppsa-dash-nav__row-label {
	color: var(--ppsa-ui-ink-faint);
	font-size: var(--ppsa-ui-t-xs);
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.ppsa-portal .ppsa-dash-nav__badge {
	background: var(--ppsa-ui-danger);
	color: var(--ppsa-ui-ink-invert);
	border-radius: var(--ppsa-ui-r-full);
	font-size: 0.68rem;
	font-weight: 700;
	padding: 0.05rem 0.38rem;
	margin-left: 0.25rem;
}

/* ------------------------------------------------------------
   4. Botones
   ------------------------------------------------------------ */
.ppsa-portal .ppsa-btn-pro {
	border-radius: var(--ppsa-ui-r-full);
	font-weight: 600;
	font-family: inherit;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--ppsa-ui-dur-1) var(--ppsa-ui-ease),
		border-color var(--ppsa-ui-dur-1) var(--ppsa-ui-ease),
		color var(--ppsa-ui-dur-1) var(--ppsa-ui-ease),
		box-shadow var(--ppsa-ui-dur-1) var(--ppsa-ui-ease),
		transform var(--ppsa-ui-dur-1) var(--ppsa-ui-ease);
}

.ppsa-portal .ppsa-btn-pro:hover:not([disabled]):not(:disabled) {
	transform: translateY(-1px);
}

.ppsa-portal .ppsa-btn-pro:active:not([disabled]):not(:disabled) {
	transform: translateY(0);
}

.ppsa-portal .ppsa-btn-pro--primary {
	background: var(--ppsa-ui-accent);
	border: 1px solid var(--ppsa-ui-accent);
	color: var(--ppsa-ui-ink-invert);
	box-shadow: var(--ppsa-ui-e1);
}

.ppsa-portal .ppsa-btn-pro--primary:hover:not([disabled]):not(:disabled) {
	background: var(--ppsa-ui-accent-hover);
	border-color: var(--ppsa-ui-accent-hover);
	box-shadow: var(--ppsa-ui-e2);
}

.ppsa-portal .ppsa-btn-pro--outline {
	background: var(--ppsa-ui-surface);
	border: 1px solid var(--ppsa-ui-line-strong);
	color: var(--ppsa-ui-ink-soft);
}

.ppsa-portal .ppsa-btn-pro--outline:hover:not([disabled]):not(:disabled) {
	background: var(--ppsa-ui-accent-soft);
	border-color: var(--ppsa-ui-accent-line);
	color: var(--ppsa-ui-accent-hover);
}

.ppsa-portal .ppsa-btn-pro--ghost {
	background: transparent;
	border: 1px solid transparent;
	color: var(--ppsa-ui-ink-muted);
}

.ppsa-portal .ppsa-btn-pro--ghost:hover:not([disabled]):not(:disabled) {
	background: var(--ppsa-ui-surface-3);
	color: var(--ppsa-ui-ink);
}

.ppsa-portal .ppsa-btn-pro--danger,
.ppsa-portal .ppsa-btn-pro--danger-ghost:hover {
	background: var(--ppsa-ui-danger);
	border: 1px solid var(--ppsa-ui-danger);
	color: var(--ppsa-ui-ink-invert);
}

.ppsa-portal .ppsa-btn-pro[disabled],
.ppsa-portal .ppsa-btn-pro:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* ------------------------------------------------------------
   5. Formularios
   ------------------------------------------------------------ */
.ppsa-portal input[type='text'],
.ppsa-portal input[type='email'],
.ppsa-portal input[type='url'],
.ppsa-portal input[type='tel'],
.ppsa-portal input[type='number'],
.ppsa-portal input[type='search'],
.ppsa-portal input[type='password'],
.ppsa-portal select,
.ppsa-portal textarea {
	background: var(--ppsa-ui-surface-2);
	border: 1px solid var(--ppsa-ui-line-strong);
	border-radius: var(--ppsa-ui-r-md);
	color: var(--ppsa-ui-ink);
	font-family: inherit;
	font-size: var(--ppsa-ui-t-base);
	transition: border-color var(--ppsa-ui-dur-1) var(--ppsa-ui-ease),
		box-shadow var(--ppsa-ui-dur-1) var(--ppsa-ui-ease),
		background var(--ppsa-ui-dur-1) var(--ppsa-ui-ease);
}

.ppsa-portal input::placeholder,
.ppsa-portal textarea::placeholder {
	color: var(--ppsa-ui-ink-faint);
}

.ppsa-portal input:focus,
.ppsa-portal select:focus,
.ppsa-portal textarea:focus {
	outline: none;
	background: var(--ppsa-ui-surface);
	border-color: var(--ppsa-ui-accent);
	box-shadow: var(--ppsa-ui-focus);
}

.ppsa-portal label {
	color: var(--ppsa-ui-ink-soft);
	font-weight: 550;
}

/* ------------------------------------------------------------
   6. Píldoras, avisos y separadores
   ------------------------------------------------------------ */
.ppsa-portal .ppsa-pill,
.ppsa-portal .ppsa-status-badge {
	border-radius: var(--ppsa-ui-r-full);
	font-size: var(--ppsa-ui-t-xs);
	font-weight: 650;
	padding: 0.2rem 0.6rem;
	display: inline-block;
}

.ppsa-portal .ppsa-pill-warn {
	background: var(--ppsa-ui-warn-soft);
	color: var(--ppsa-ui-warn);
	border: 1px solid rgba(180, 83, 9, 0.22);
}

.ppsa-portal .ppsa-flash-success,
.ppsa-portal .ppsa-notice--ok {
	background: var(--ppsa-ui-ok-soft);
	border-color: rgba(5, 150, 105, 0.28);
}

.ppsa-portal .ppsa-notice--warn {
	background: var(--ppsa-ui-warn-soft);
	border-color: rgba(180, 83, 9, 0.24);
}

.ppsa-portal .ppsa-notice--error {
	background: var(--ppsa-ui-danger-soft);
	border-color: rgba(220, 38, 38, 0.24);
}

.ppsa-portal hr {
	border: 0;
	border-top: 1px solid var(--ppsa-ui-line);
	margin: var(--ppsa-ui-s5) 0;
}

/* ------------------------------------------------------------
   7. Foco visible
   ------------------------------------------------------------
   Unificado en todo el portal. Antes cada hoja resolvía el foco a
   su manera —o no lo resolvía—, así que navegar con teclado dejaba
   de verse a mitad de camino.
   ------------------------------------------------------------ */
.ppsa-portal :is(button, a, [tabindex], summary):focus-visible {
	outline: 2px solid var(--ppsa-ui-accent);
	outline-offset: 2px;
	border-radius: var(--ppsa-ui-r-xs);
}

.ppsa-portal .ppsa-btn-pro:focus-visible {
	outline: none;
	box-shadow: var(--ppsa-ui-focus);
}

/* ------------------------------------------------------------
   8. Detalles
   ------------------------------------------------------------ */
.ppsa-portal details > summary {
	cursor: pointer;
	color: var(--ppsa-ui-ink-soft);
	font-weight: 550;
}

.ppsa-portal details > summary:hover {
	color: var(--ppsa-ui-accent);
}

.ppsa-portal table {
	border-color: var(--ppsa-ui-line);
}

.ppsa-portal th {
	color: var(--ppsa-ui-ink-muted);
	font-size: var(--ppsa-ui-t-xs);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Barras de scroll internas: finas y en gama slate, no del sistema. */
.ppsa-portal ::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

.ppsa-portal ::-webkit-scrollbar-thumb {
	background: var(--ppsa-ui-line-strong);
	border-radius: var(--ppsa-ui-r-full);
	border: 2px solid transparent;
	background-clip: content-box;
}

.ppsa-portal ::-webkit-scrollbar-thumb:hover {
	background: var(--ppsa-ui-ink-faint);
	background-clip: content-box;
}

@media (prefers-reduced-motion: reduce) {
	.ppsa-portal .ppsa-btn-pro,
	.ppsa-portal .ppsa-dash-nav__btn,
	.ppsa-portal input,
	.ppsa-portal select,
	.ppsa-portal textarea {
		transition: none;
	}
	.ppsa-portal .ppsa-btn-pro:hover:not([disabled]):not(:disabled) {
		transform: none;
	}
}

/* ------------------------------------------------------------
   9. Menú «Más» de la tabla de empleados
   ------------------------------------------------------------
   El panel se saca del flujo por JS al abrirlo (ver el IIFE final
   de agency.js) porque `.ppsa-emp-table-wrap` tiene `overflow:auto`
   y lo recortaba. Aquí solo se le da el aspecto de menú flotante:
   al ir fijo ya no hereda el fondo de la celda.
   ------------------------------------------------------------ */
.ppsa-emp-actions__secondary--floating {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 11.5rem;
	padding: 0.4rem;
	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.14));
	overflow-y: auto;
	overscroll-behavior: contain;
	animation: ppsaEmpMoreIn 0.14s var(--ppsa-ui-ease, ease) both;
}

@keyframes ppsaEmpMoreIn {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}

.ppsa-emp-actions__secondary--floating > * {
	width: 100%;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.ppsa-emp-actions__secondary--floating { animation: none; }
}

/* ------------------------------------------------------------
   10. Modal «Contenido del empleado»
   ------------------------------------------------------------
   Este diálogo se monta fuera de `.ppsa-portal`, así que ninguna
   de las reglas de arriba le llegaba: sus campos salían con el
   estilo por defecto del navegador, con esquinas rectas y sin
   foco visible. Se le aplica el mismo lenguaje, apuntando al
   diálogo directamente.
   ------------------------------------------------------------ */
.ppsa-am-emp-content-dialog {
	color: var(--ppsa-ui-ink, #0f172a);
}

.ppsa-am-emp-content-dialog input[type='text'],
.ppsa-am-emp-content-dialog input[type='url'],
.ppsa-am-emp-content-dialog input[type='email'],
.ppsa-am-emp-content-dialog input[type='tel'],
.ppsa-am-emp-content-dialog input[type='number'],
.ppsa-am-emp-content-dialog select,
.ppsa-am-emp-content-dialog textarea {
	width: 100%;
	padding: 0.5rem 0.65rem;
	font-family: inherit;
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--ppsa-ui-ink, #0f172a);
	background: var(--ppsa-ui-surface-2, #f8fafc);
	border: 1px solid var(--ppsa-ui-line-strong, #cbd5e1);
	border-radius: var(--ppsa-ui-r-sm, 10px);
	box-sizing: border-box;
	transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.ppsa-am-emp-content-dialog input::placeholder,
.ppsa-am-emp-content-dialog textarea::placeholder {
	color: var(--ppsa-ui-ink-faint, #94a3b8);
}

.ppsa-am-emp-content-dialog input:focus,
.ppsa-am-emp-content-dialog select:focus,
.ppsa-am-emp-content-dialog 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));
}

.ppsa-am-emp-content-dialog label,
.ppsa-am-emp-content-dialog .ppsa-field-label {
	display: block;
	margin-bottom: 0.22rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--ppsa-ui-ink-soft, #334155);
}

.ppsa-am-emp-content-dialog select {
	/* El select nativo se veía más bajo que los inputs de al lado. */
	min-height: 2.3rem;
}

/* Cada bloque del listado, como tarjeta y no como franja suelta. */
.ppsa-am-emp-content-dialog .ppsa-builder-block {
	border: 1px solid var(--ppsa-ui-line, #e2e8f0);
	border-radius: var(--ppsa-ui-r-md, 12px);
	background: var(--ppsa-ui-surface, #fff);
	box-shadow: var(--ppsa-ui-e1, 0 1px 2px rgba(15, 23, 42, 0.05));
}

.ppsa-am-emp-content-dialog .ppsa-btn-pro {
	border-radius: var(--ppsa-ui-r-full, 999px);
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
}

/* ------------------------------------------------------------
   12. Generador de equipo (fase E)
   ------------------------------------------------------------
   Alta por lotes en el panel de empleados. Va plegado: es una
   herramienta de arranque, no algo de uso diario, y desplegada
   empujaría la tabla hacia abajo cada vez que entras.
   ------------------------------------------------------------ */
.ppsa-portal .ppsa-team-gen {
	margin-bottom: 0.75rem;
	padding: 0;
	overflow: hidden;
}

.ppsa-portal .ppsa-team-gen__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.7rem 0.9rem;
	font-size: 0.9rem;
	font-weight: 650;
	color: var(--ppsa-ui-ink, #0f172a);
	cursor: pointer;
	list-style: none;
	transition: background var(--ppsa-ui-dur-1, 0.14s) var(--ppsa-ui-ease, ease);
}

.ppsa-portal .ppsa-team-gen__summary::-webkit-details-marker { display: none; }
.ppsa-portal .ppsa-team-gen__summary:hover { background: var(--ppsa-ui-surface-2, #f8fafc); }

.ppsa-portal .ppsa-team-gen__quota {
	flex: 0 0 auto;
	padding: 0.16rem 0.55rem;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--ppsa-ui-accent-hover, #1d4ed8);
	background: var(--ppsa-ui-accent-soft, #eff6ff);
	border-radius: var(--ppsa-ui-r-full, 999px);
	white-space: nowrap;
}

.ppsa-portal .ppsa-team-gen__body {
	padding: 0.25rem 0.9rem 0.9rem;
	border-top: 1px solid var(--ppsa-ui-line, #e2e8f0);
}

.ppsa-portal .ppsa-team-gen__note {
	margin: 0 0 0.7rem;
	padding: 0.5rem 0.65rem;
	font-size: 0.8rem;
	color: var(--ppsa-ui-warn, #b45309);
	background: var(--ppsa-ui-warn-soft, #fffbeb);
	border-left: 3px solid var(--ppsa-ui-warn, #b45309);
	border-radius: 0 8px 8px 0;
}

.ppsa-portal .ppsa-team-gen__grid {
	display: grid;
	gap: 0.6rem;
	grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
	margin-bottom: 0.75rem;
}

.ppsa-portal .ppsa-team-gen__field {
	display: flex;
	flex-direction: column;
	gap: 0.22rem;
	min-width: 0;
}

.ppsa-portal .ppsa-team-gen__roles {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.ppsa-portal .ppsa-team-gen__role {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.34rem 0.7rem;
	font-size: 0.82rem;
	font-weight: 550;
	color: var(--ppsa-ui-ink-soft, #334155);
	background: var(--ppsa-ui-surface-2, #f8fafc);
	border: 1px solid var(--ppsa-ui-line, #e2e8f0);
	border-radius: var(--ppsa-ui-r-full, 999px);
	cursor: pointer;
	transition: border-color 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-portal .ppsa-team-gen__role:hover {
	border-color: var(--ppsa-ui-accent-line, #bfdbfe);
}

.ppsa-portal .ppsa-team-gen__role:has(input:checked) {
	background: var(--ppsa-ui-accent-soft, #eff6ff);
	border-color: var(--ppsa-ui-accent, #2563eb);
	color: var(--ppsa-ui-accent-hover, #1d4ed8);
}

.ppsa-portal .ppsa-team-gen__actions {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	flex-wrap: wrap;
	margin: 0;
}

.ppsa-portal .ppsa-team-gen__status {
	font-size: 0.82rem;
	color: var(--ppsa-ui-ink-muted, #64748b);
}

.ppsa-portal .ppsa-team-gen__status.is-busy { color: var(--ppsa-ui-accent, #2563eb); }
.ppsa-portal .ppsa-team-gen__status.is-ok { color: var(--ppsa-ui-ok, #059669); font-weight: 600; }
.ppsa-portal .ppsa-team-gen__status.is-hint { color: var(--ppsa-ui-warn, #b45309); font-weight: 600; }

.ppsa-portal .ppsa-team-gen__result {
	margin-top: 0.8rem;
	padding-top: 0.7rem;
	border-top: 1px solid var(--ppsa-ui-line, #e2e8f0);
}

.ppsa-portal .ppsa-team-gen__result-h {
	margin: 0 0 0.5rem;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--ppsa-ui-ink, #0f172a);
}

.ppsa-portal .ppsa-team-gen__list {
	list-style: none;
	margin: 0 0 0.5rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	max-height: 16rem;
	overflow-y: auto;
}

.ppsa-portal .ppsa-team-gen__list li {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.25rem 0.6rem;
	padding: 0.4rem 0.55rem;
	background: var(--ppsa-ui-surface-2, #f8fafc);
	border-radius: var(--ppsa-ui-r-sm, 10px);
	font-size: 0.82rem;
}

.ppsa-portal .ppsa-team-gen__list strong { color: var(--ppsa-ui-ink, #0f172a); }
.ppsa-portal .ppsa-team-gen__list span { color: var(--ppsa-ui-ink-muted, #64748b); }

.ppsa-portal .ppsa-team-gen__list code {
	margin-left: auto;
	font-size: 0.76rem;
	color: var(--ppsa-ui-ink-soft, #334155);
	background: var(--ppsa-ui-surface, #fff);
	border: 1px solid var(--ppsa-ui-line, #e2e8f0);
	border-radius: 6px;
	padding: 0.1rem 0.4rem;
}

.ppsa-portal .ppsa-team-gen__failed {
	margin: 0 0 0.5rem;
	font-size: 0.8rem;
	color: var(--ppsa-ui-warn, #b45309);
}

@media (prefers-reduced-motion: reduce) {
	.ppsa-portal .ppsa-team-gen__summary,
	.ppsa-portal .ppsa-team-gen__role { transition: none; }
}

/* ------------------------------------------------------------
   13. Filas heredadas de plantilla (modal de contenido)
   ------------------------------------------------------------
   Son los bloques que el empleado NO puede editar, solo reordenar.
   Salían con el mismo peso visual que los suyos, así que costaba
   distinguir qué se podía tocar. Ahora se leen como pasivos: fondo
   apagado, borde punteado y texto atenuado, sin dejar de ser
   legibles ni perder los botones de orden.
   ------------------------------------------------------------ */
.ppsa-am-cta-placement--tpl,
.ppsa-am-cta-placement[data-kind='template'] {
	background: var(--ppsa-ui-surface-2, #f8fafc);
	border: 1px dashed var(--ppsa-ui-line-strong, #cbd5e1);
	border-radius: var(--ppsa-ui-r-md, 12px);
	box-shadow: none;
}

.ppsa-am-cta-placement--tpl .ppsa-am-cta-placement__label,
.ppsa-am-cta-placement[data-kind='template'] .ppsa-am-cta-placement__label {
	color: var(--ppsa-ui-ink-muted, #64748b);
	font-weight: 550;
}

/* Los de contenido propio, en cambio, se ven activos y con relieve. */
.ppsa-am-cta-placement:not(.ppsa-am-cta-placement--tpl):not([data-kind='template']) {
	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));
}

/*    ----------------------------------------------------------
   12. Tabla de idiomas: cabeceras que se pisaban
   ----------------------------------------------------------
   Las columnas «Visible en enlace», «Generar con IA» y «Estado
   traduccion» no podian partirse en dos lineas, asi que en el
   ancho real del panel se solapaban y se leia
   «VISIBLE EN ENLAGENERAR CON IESTADO TRADUCCION».
   Se permite el salto de linea y se alinean abajo, para que
   las de una linea queden a la misma altura que las de dos.
   ---------------------------------------------------------- */
.ppsa-portal .ppsa-lang-table thead th,
.ppsa-portal .ppsa-builder-i18n-grid thead th,
.ppsa-builder .ppsa-lang-table thead th,
.ppsa-builder .ppsa-builder-i18n-grid thead th {
	white-space: normal;
	overflow-wrap: anywhere;
	line-height: 1.25;
	vertical-align: bottom;
	text-align: center;
}

/* La primera columna (el idioma) si va a la izquierda. */
.ppsa-portal .ppsa-lang-table thead th:first-child,
.ppsa-builder .ppsa-lang-table thead th:first-child {
	text-align: start;
}

/*    ----------------------------------------------------------
   13. Transicion al cambiar de panel
   ----------------------------------------------------------
   El cambio entre pestanas era un corte seco: el panel viejo
   desaparecia y el nuevo aparecia en el mismo fotograma, asi
   que costaba percibir que habias cambiado de sitio.
   Se anima la ENTRADA del panel que se muestra. No se anima la
   salida a proposito: el panel anterior se oculta con [hidden]
   y esperar una animacion de salida obligaria a JS.
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.ppsa-portal .ppsa-dash-panel:not([hidden]) {
		animation: ppsaPanelIn 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
	}
}

@keyframes ppsaPanelIn {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

/* El chip activo tambien acompana el cambio. */
.ppsa-portal .ppsa-dash-nav__btn {
	will-change: transform;
}

.ppsa-portal .ppsa-dash-nav__btn:active {
	transform: scale(0.97);
}