/* ============================================================================
   Go PetiA Site — menús desplegables.

   El fallo de fondo: `.locale-menu` es `position: absolute` y vive dentro de
   `.gp-chat-main`, que tiene `overflow: hidden` para contener el scroll de la
   conversación. Cualquier cosa que sobresalga se recorta, y como el menú
   tampoco tiene `max-height` ni `overflow`, no había forma de alcanzar lo que
   quedaba fuera.

   Se resuelve como lo resuelve iOS:

   - En escritorio, el menú pasa a `position: fixed`. Al salir del flujo del
     contenedor deja de estar sujeto a su recorte, y se le da alto máximo con
     desplazamiento propio.
   - En el teléfono se convierte en hoja inferior. Es el patrón nativo y
     elimina el problema por completo: no hay nada que recortar.

   El acabado sigue el material translúcido de iOS: desenfoque de fondo,
   contorno de medio píxel, sombra en capas y áreas táctiles de 44 px.
   ========================================================================= */

body.has-gpshell.gpshell-menus {
	--gpm-radius: 18px;
	--gpm-surface: rgba(255, 255, 255, .78);
	--gpm-hairline: rgba(26, 22, 37, .09);
	--gpm-separator: rgba(26, 22, 37, .07);
	--gpm-ink: #1a1625;
	--gpm-muted: #6f6b7d;
	--gpm-accent: #5b3fa5;
	--gpm-press: rgba(91, 63, 165, .10);
}

/* ---------------------------------------------------------------------------
   1. La superficie
   ------------------------------------------------------------------------ */

body.has-gpshell.gpshell-menus .locale-menu {
	position: fixed;
	top: calc(var(--gps-h, 72px) + 10px);
	right: 16px;
	left: auto;
	z-index: 1200;
	min-width: 264px;
	max-width: min(340px, calc(100vw - 32px));
	max-height: min(70vh, 480px);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 8px;
	border-radius: var(--gpm-radius);
	border: 0;
	outline: .5px solid var(--gpm-hairline);
	outline-offset: -.5px;
	background: var(--gpm-surface);
	backdrop-filter: saturate(180%) blur(22px);
	-webkit-backdrop-filter: saturate(180%) blur(22px);
	box-shadow:
		0 0 0 .5px rgba(26, 22, 37, .04),
		0 8px 20px rgba(26, 22, 37, .10),
		0 24px 48px rgba(26, 22, 37, .14);
	animation: gpm-in .18s cubic-bezier(.32, .72, 0, 1);
	transform-origin: top right;
}

@keyframes gpm-in {
	from { opacity: 0; transform: scale(.96) translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

/* Barra de desplazamiento discreta, como la del sistema. */
body.has-gpshell.gpshell-menus .locale-menu::-webkit-scrollbar {
	width: 6px;
}

body.has-gpshell.gpshell-menus .locale-menu::-webkit-scrollbar-thumb {
	background: rgba(26, 22, 37, .18);
	border-radius: 3px;
}

body.has-gpshell.gpshell-menus .locale-menu::-webkit-scrollbar-track {
	background: transparent;
}

/* ---------------------------------------------------------------------------
   2. Encabezados de grupo
   ------------------------------------------------------------------------ */

body.has-gpshell.gpshell-menus .locale-menu__heading {
	position: sticky;
	top: -8px;
	z-index: 1;
	margin: 0;
	padding: 10px 12px 6px;
	background: linear-gradient(180deg, var(--gpm-surface) 70%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--gpm-muted);
}

body.has-gpshell.gpshell-menus .locale-menu__heading:not(:first-child) {
	margin-top: 4px;
}

/* ---------------------------------------------------------------------------
   3. Los renglones: 44 px de alto táctil y separadores insertados
   ------------------------------------------------------------------------ */

body.has-gpshell.gpshell-menus .locale-menu__list {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.has-gpshell.gpshell-menus .locale-menu__list a,
body.has-gpshell.gpshell-menus .locale-menu__soon,
body.has-gpshell.gpshell-menus .locale-menu__list button {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 8px 12px;
	border-radius: 11px;
	border: 0;
	background: transparent;
	color: var(--gpm-ink);
	font-size: .93rem;
	line-height: 1.25;
	text-decoration: none;
	cursor: pointer;
	width: 100%;
	text-align: left;
	transition: background .12s ease;
}

/* Separador entre renglones, insertado como en iOS: nunca de borde a borde. */
body.has-gpshell.gpshell-menus .locale-menu__list li + li > a::before,
body.has-gpshell.gpshell-menus .locale-menu__list li + li > button::before {
	content: "";
	position: absolute;
	left: 44px;
	right: 12px;
	height: .5px;
	background: var(--gpm-separator);
	transform: translateY(-8px);
}

body.has-gpshell.gpshell-menus .locale-menu__list li {
	position: relative;
}

body.has-gpshell.gpshell-menus .locale-menu__list a:hover,
body.has-gpshell.gpshell-menus .locale-menu__list a:focus-visible,
body.has-gpshell.gpshell-menus .locale-menu__soon:hover {
	background: var(--gpm-press);
	color: var(--gpm-accent);
}

body.has-gpshell.gpshell-menus .locale-menu__list a:active {
	background: rgba(91, 63, 165, .16);
}

/* Los no disponibles se atenúan en vez de desaparecer. */
body.has-gpshell.gpshell-menus .locale-menu__soon {
	color: var(--gpm-muted);
	justify-content: space-between;
	cursor: default;
}

body.has-gpshell.gpshell-menus .locale-menu__soon:hover {
	background: transparent;
	color: var(--gpm-muted);
}

body.has-gpshell.gpshell-menus .locale-flag {
	font-size: 1.15rem;
	line-height: 1;
	flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
   4. Teléfono: hoja inferior.

   Es el patrón nativo y resuelve el recorte de raíz. Al ser `fixed` con
   `inset` inferior, ningún contenedor puede cortarla.
   ------------------------------------------------------------------------ */

@media (max-width: 640px) {
	body.has-gpshell.gpshell-menus .locale-menu {
		top: auto;
		right: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		max-width: none;
		max-height: min(72vh, 560px);
		border-radius: 22px 22px 0 0;
		padding: 10px 10px calc(14px + env(safe-area-inset-bottom));
		transform-origin: bottom center;
		animation: gpm-sheet-in .26s cubic-bezier(.32, .72, 0, 1);
		box-shadow: 0 -12px 40px rgba(26, 22, 37, .22);
	}

	/* Asa superior, la señal de que se puede arrastrar y desplazar. */
	body.has-gpshell.gpshell-menus .locale-menu::before {
		content: "";
		display: block;
		width: 36px;
		height: 5px;
		border-radius: 3px;
		background: rgba(26, 22, 37, .18);
		margin: 2px auto 10px;
		position: sticky;
		top: 0;
	}

	body.has-gpshell.gpshell-menus .locale-menu__list a,
	body.has-gpshell.gpshell-menus .locale-menu__soon {
		min-height: 48px;
		font-size: .97rem;
	}
}

@keyframes gpm-sheet-in {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   5. Otros paneles del tema, con el mismo acabado
   ------------------------------------------------------------------------ */

body.has-gpshell.gpshell-menus .gp-peticard-panel,
body.has-gpshell.gpshell-menus .gp-push-sheet__card {
	border-radius: var(--gpm-radius);
	border: 0;
	outline: .5px solid var(--gpm-hairline);
	outline-offset: -.5px;
	box-shadow:
		0 8px 20px rgba(26, 22, 37, .08),
		0 24px 48px rgba(26, 22, 37, .10);
}

/* Cualquier panel alto debe poder desplazarse: era el fallo original. */
body.has-gpshell.gpshell-menus .gp-peticard-panel {
	max-height: min(78vh, 640px);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
	body.has-gpshell.gpshell-menus .gp-push-sheet__card {
		border-radius: 22px 22px 0 0;
		padding-bottom: calc(18px + env(safe-area-inset-bottom));
	}
}

/* ---------------------------------------------------------------------------
   6. Accesibilidad
   ------------------------------------------------------------------------ */

body.has-gpshell.gpshell-menus .locale-menu a:focus-visible,
body.has-gpshell.gpshell-menus .locale-menu button:focus-visible {
	outline: 2px solid var(--gpm-accent);
	outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
	body.has-gpshell.gpshell-menus .locale-menu {
		animation: none;
	}

	body.has-gpshell.gpshell-menus .locale-menu__list a {
		transition: none;
	}
}

/* ============================================================================
   7. El menú de secciones del panel.

   `.gp-account-nav` es una rejilla de seis columnas en escritorio y tres en el
   teléfono. Con nueve secciones de colores distintos todas compiten por
   atención, ninguna destaca, y los nombres largos se cortan.

   Convertido en lista vertical: se lee el nombre completo, se ve de un vistazo
   dónde estás, y el conjunto deja de parecer un tablero de botones.

   Ojo con el marcado: el emoji va dentro del texto del botón, no en un
   elemento aparte, así que no se puede separar por CSS. Se trabaja con el
   botón completo.
   ========================================================================= */

/*
 * Sobre el uso de !important en este bloque.
 *
 * El tema declara la rejilla y el color de cada botón con !important dentro de
 * @media(max-width:720px) y en style.css:
 *
 *     .gp-account-nav{ display:grid!important; grid-auto-flow:column!important; ... }
 *     .gp-account-nav>button:nth-of-type(1){ background:#6d3bb4!important; }
 *     ...catorce colores, uno por posición
 *
 * Contra eso no gana ninguna especificidad ni el orden de carga: sólo otro
 * !important. Es la única excepción a la regla de no usarlo en este plugin, y
 * está limitada a este componente.
 *
 * Sobre los colores: siete tonos distintos funcionaban como pastillas en una
 * rejilla, donde el color era lo único que distinguía una tarjeta de otra. En
 * una lista sobran: el nombre ya identifica cada sección, y siete fondos
 * compitiendo convierten el menú en un semáforo. El color se reserva para
 * señalar dónde estás, que es la única información que el texto no da.
 */

body.has-gpshell.gpshell-menus .gp-account-nav {
	display: flex !important;
	flex-direction: column !important;
	grid-auto-flow: row !important;
	grid-template-columns: none !important;
	grid-template-rows: none !important;
	grid-auto-columns: auto !important;
	gap: 1px !important;
	padding: 8px !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	max-height: 100% !important;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: none;
}

/* Fondo neutro para todos: se anulan los catorce colores por posición. */
body.has-gpshell.gpshell-menus .gp-account-nav > button,
body.has-gpshell.gpshell-menus .gp-account-nav > button:nth-of-type(1),
body.has-gpshell.gpshell-menus .gp-account-nav > button:nth-of-type(2),
body.has-gpshell.gpshell-menus .gp-account-nav > button:nth-of-type(3),
body.has-gpshell.gpshell-menus .gp-account-nav > button:nth-of-type(4),
body.has-gpshell.gpshell-menus .gp-account-nav > button:nth-of-type(5),
body.has-gpshell.gpshell-menus .gp-account-nav > button:nth-of-type(6),
body.has-gpshell.gpshell-menus .gp-account-nav > button:nth-of-type(7),
body.has-gpshell.gpshell-menus .gp-account-nav > button:nth-of-type(8),
body.has-gpshell.gpshell-menus .gp-account-nav > button:nth-of-type(9),
body.has-gpshell.gpshell-menus .gp-account-nav > button:nth-of-type(10),
body.has-gpshell.gpshell-menus .gp-account-nav > button:nth-of-type(11),
body.has-gpshell.gpshell-menus .gp-account-nav > button:nth-of-type(12),
body.has-gpshell.gpshell-menus .gp-account-nav > button:nth-of-type(13),
body.has-gpshell.gpshell-menus .gp-account-nav > button:nth-of-type(14) {
	display: flex !important;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 44px !important;
	padding: 9px 12px !important;
	border: 0 !important;
	border-radius: 10px;
	background: transparent !important;
	color: rgba(255, 255, 255, .82) !important;
	font: inherit;
	font-size: .88rem !important;
	font-weight: 500;
	line-height: 1.3;
	text-align: left !important;
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: clip !important;
	cursor: pointer;
	flex: 0 0 auto;
	transition: background .12s ease, color .12s ease;
}

body.has-gpshell.gpshell-menus .gp-account-nav > button:hover {
	background: rgba(255, 255, 255, .07) !important;
	color: #fff !important;
}

/* El color queda para una sola cosa: dónde estás. */
body.has-gpshell.gpshell-menus .gp-account-nav > button.is-active {
	background: rgba(139, 45, 177, .30) !important;
	color: #fff !important;
	font-weight: 700;
	box-shadow: inset 3px 0 0 #b45ce0;
}

/* Con la lista vertical vuelve a caber la cabecera con la cuenta, que el tema
   ocultaba en móvil por falta de espacio. */
@media (max-width: 720px) {
	body.has-gpshell.gpshell-menus .gp-account-nav__head {
		display: grid !important;
		margin-bottom: 12px;
		padding-bottom: 12px;
		border-bottom: 1px solid rgba(255, 255, 255, .08);
	}
}

/* ============================================================================
   8. El lanzador de PetiA OS, dentro del contenido.

   Misma lógica: tres columnas de bloques de 148 px con la descripción oculta
   por falta de espacio. En lista se lee completa.
   ========================================================================= */

body.has-gpshell.gpshell-menus .gp-os-launch-grid {
	display: flex;
	flex-direction: column;
	gap: 6px;
	grid-template-columns: none;
	margin: 20px 0 12px;
}

body.has-gpshell.gpshell-menus .gp-os-launch-grid > button {
	display: flex;
	align-items: center;
	gap: 13px;
	width: 100%;
	min-height: 0;
	padding: 12px 14px;
	border-radius: 14px;
	text-align: left;
}

body.has-gpshell.gpshell-menus .gp-os-launch-grid > button > span:first-child {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	border-radius: 11px;
	background: rgba(255, 255, 255, .16);
	font-size: 1.15rem;
	line-height: 1;
}

body.has-gpshell.gpshell-menus .gp-os-launch-grid b {
	font-size: .93rem;
	line-height: 1.25;
	white-space: normal;
}

body.has-gpshell.gpshell-menus .gp-os-launch-grid small {
	display: block;
	align-self: auto;
	font-size: .75rem;
	line-height: 1.35;
	opacity: .82;
	white-space: normal;
}

@media (min-width: 900px) {
	body.has-gpshell.gpshell-menus .gp-os-launch-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Aviso de diagnóstico del checkout, sólo visible para quien administra. */
body.has-gpshell .gps-paddle-notice {
	position: fixed;
	left: 50%;
	bottom: calc(18px + env(safe-area-inset-bottom));
	transform: translateX(-50%);
	z-index: 2000;
	max-width: min(520px, calc(100vw - 32px));
	padding: 12px 16px;
	border-radius: 14px;
	background: rgba(26, 22, 37, .96);
	color: #fff;
	font-size: .85rem;
	line-height: 1.4;
	box-shadow: 0 12px 36px rgba(26, 22, 37, .28);
}

body.has-gpshell .gps-paddle-notice[hidden] {
	display: none;
}

/* ============================================================================
   9. El menú del panel, plegable en el teléfono.

   En móvil `.gp-account-shell` pasa a una sola columna, así que el menú se
   lleva el ancho completo y el contenido queda empujado fuera de vista: se
   elige una sección y no aparece nada. La lista vertical, al ser más alta que
   la rejilla, lo agravó.

   Se pliega: el contenido ocupa la pantalla y el menú se despliega desde un
   botón, superpuesto y a un ancho contenido, como el menú lateral del sitio.
   ========================================================================= */

body.has-gpshell.gpshell-menus .gps-account-menu-toggle {
	display: none;
	position: absolute;
	z-index: 12;
	top: 14px;
	left: 14px;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 11px;
	background: rgba(36, 28, 42, .92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: #fff;
	font-size: 1.05rem;
	line-height: 1;
	cursor: pointer;
}

body.has-gpshell.gpshell-menus .gps-account-menu-toggle:hover {
	border-color: #b45ce0;
}

@media (max-width: 720px) {
	body.has-gpshell.gpshell-menus .gps-account-menu-toggle {
		display: inline-flex;
	}

	/* El contenido recupera la pantalla. */
	body.has-gpshell.gpshell-menus .gp-account-shell.gps-has-toggle .gp-account-nav {
		position: absolute !important;
		z-index: 11;
		top: 0;
		bottom: 0;
		left: 0;
		width: min(290px, 84vw) !important;
		max-height: none !important;
		border-right: 1px solid rgba(255, 255, 255, .10);
		background: #18131e !important;
		box-shadow: 12px 0 32px rgba(0, 0, 0, .34);
		transform: translateX(-102%);
		transition: transform .22s cubic-bezier(.32, .72, 0, 1);
		visibility: hidden;
	}

	body.has-gpshell.gpshell-menus .gp-account-shell.gps-nav-open .gp-account-nav {
		transform: none;
		visibility: visible;
	}

	/* Velo sobre el contenido: enfoca el menú y da dónde tocar para cerrarlo. */
	body.has-gpshell.gpshell-menus .gp-account-shell.gps-nav-open::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 10;
		background: rgba(0, 0, 0, .45);
	}

	/* Sitio para el botón, que si no taparía el título de la sección. */
	body.has-gpshell.gpshell-menus .gp-account-shell.gps-has-toggle .gp-account-content {
		padding-top: 66px !important;
	}

	body.has-gpshell.gpshell-menus .gp-account-shell {
		position: relative;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.has-gpshell.gpshell-menus .gp-account-shell.gps-has-toggle .gp-account-nav {
		transition: none;
	}
}

/* ============================================================================
   10. La cabecera del sitio en páginas internas.

   En la portada el tema oculta `.site-header`, así que sus fallos no se veían.
   En páginas como /petia-control/ sí aparece, y ahí se nota que no hay ninguna
   regla que limite el tamaño del logo: se pinta a su tamaño natural —cientos
   de píxeles— y arrastra el resto de la cabecera, dejando el menú aplastado
   contra el borde con los nombres partidos en varias líneas.

   El contenedor sí tiene ancho máximo, pero con un hijo tan grande no puede
   hacer nada.
   ========================================================================= */

body.has-gpshell .site-header__inner {
	padding-block: 10px;
	gap: 1.2rem;
}

/* Lo esencial: el logo deja de imponer su tamaño natural. */
body.has-gpshell .site-header__inner img,
body.has-gpshell .site-header .custom-logo,
body.has-gpshell .site-header__inner a > img {
	max-height: 46px;
	width: auto;
	max-width: 190px;
	object-fit: contain;
	flex: 0 0 auto;
}

/* El menú recupera su espacio y deja de partir los nombres. */
body.has-gpshell .site-nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 18px;
	min-width: 0;
}

body.has-gpshell .site-nav a {
	white-space: nowrap;
	font-size: .92rem;
	line-height: 1.3;
}

body.has-gpshell .site-header__inner .header-cta {
	white-space: nowrap;
	flex: 0 0 auto;
}

body.has-gpshell .site-header__inner .locale-selector {
	flex: 0 0 auto;
}

@media (max-width: 980px) {
	body.has-gpshell .site-header__inner img,
	body.has-gpshell .site-header .custom-logo {
		max-height: 38px;
		max-width: 150px;
	}

	body.has-gpshell .site-nav a {
		font-size: .86rem;
	}
}

@media (max-width: 720px) {
	body.has-gpshell .site-header__inner {
		gap: .8rem;
	}

	body.has-gpshell .site-header__inner img,
	body.has-gpshell .site-header .custom-logo {
		max-height: 34px;
		max-width: 128px;
	}
}

/* ============================================================================
   11. El pie de página.

   `.site-footer__grid` es una rejilla de tres columnas y el logo no tiene
   ningún límite de tamaño: se pinta a su tamaño natural —cientos de píxeles—
   y se come su columna entera, dejando el pie desproporcionado.

   Es el mismo fallo del logo de la cabecera, en otro sitio.
   ========================================================================= */

body.has-gpshell .site-footer .site-logo img,
body.has-gpshell .site-footer img,
body.has-gpshell .site-footer .custom-logo {
	max-height: 54px;
	width: auto;
	max-width: 190px;
	object-fit: contain;
	display: block;
}

body.has-gpshell .site-footer__grid {
	align-items: start;
	gap: 2rem 2.5rem;
}

body.has-gpshell .site-footer .site-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

@media (max-width: 900px) {
	body.has-gpshell .site-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 600px) {
	body.has-gpshell .site-footer__grid {
		grid-template-columns: 1fr;
		gap: 1.6rem;
	}

	body.has-gpshell .site-footer img,
	body.has-gpshell .site-footer .custom-logo {
		max-height: 44px;
		max-width: 150px;
	}
}



/* ==========================================================================
   1.47.0 — APPLE-INTELLIGENCE PANEL SYSTEM
   Una sola navegación por capa, superficies translúcidas, controles discretos
   y áreas táctiles amplias. Evita botones flotantes que se enciman.
   ========================================================================== */
body.has-gpshell.gpshell-menus {
	--gpa-panel-bg: rgba(18, 14, 24, .94);
	--gpa-panel-bg-soft: rgba(30, 24, 38, .78);
	--gpa-card: rgba(255, 255, 255, .055);
	--gpa-card-hover: rgba(255, 255, 255, .09);
	--gpa-line: rgba(255, 255, 255, .085);
	--gpa-text: rgba(255, 255, 255, .95);
	--gpa-muted: rgba(255, 255, 255, .58);
	--gpa-accent: #9b7cff;
	--gpa-yellow: #fec202;
}

/* El botón flotante antiguo ya no existe en JS 1.47; si queda en caché, se oculta. */
body.has-gpshell.gpshell-menus .gps-account-menu-toggle { display:none !important; }

/* Barra superior única del panel de cuenta. */
body.has-gpshell.gpshell-menus .gps-account-mobilebar { display:none; }

@media (max-width:720px) {
	body.has-gpshell.gpshell-menus .gp-account-shell.gps-account-stack {
		position:relative !important;
		display:block !important;
		width:100% !important;
		height:100% !important;
		min-height:0 !important;
		overflow:hidden !important;
		background:var(--gpa-panel-bg) !important;
		border:0 !important;
		border-radius:0 !important;
		box-shadow:none !important;
		isolation:isolate;
	}

	body.has-gpshell.gpshell-menus .gps-account-mobilebar {
		position:absolute;
		z-index:40;
		top:0;
		left:0;
		right:0;
		height:64px;
		display:grid;
		grid-template-columns:minmax(88px,1fr) auto minmax(88px,1fr);
		align-items:center;
		gap:8px;
		padding:10px 12px;
		background:rgba(18,14,24,.82);
		border-bottom:1px solid var(--gpa-line);
		backdrop-filter:saturate(160%) blur(26px);
		-webkit-backdrop-filter:saturate(160%) blur(26px);
	}

	body.has-gpshell.gpshell-menus .gps-account-mobilebar__title {
		max-width:42vw;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
		color:var(--gpa-text);
		font-size:.94rem;
		font-weight:750;
		letter-spacing:-.01em;
		text-align:center;
	}

	body.has-gpshell.gpshell-menus .gps-account-mobilebar__back,
	body.has-gpshell.gpshell-menus .gps-account-mobilebar__close {
		appearance:none;
		-webkit-appearance:none;
		border:1px solid var(--gpa-line) !important;
		background:rgba(255,255,255,.065) !important;
		color:var(--gpa-text) !important;
		box-shadow:none !important;
		cursor:pointer;
		transition:background .16s ease, transform .16s ease, border-color .16s ease;
	}

	body.has-gpshell.gpshell-menus .gps-account-mobilebar__back {
		justify-self:start;
		display:inline-flex;
		align-items:center;
		gap:3px;
		height:40px;
		min-width:0;
		max-width:112px;
		padding:0 10px 0 7px;
		border-radius:13px !important;
		font-size:.76rem;
		font-weight:700;
	}
	body.has-gpshell.gpshell-menus .gps-account-mobilebar__back span { font-size:1.45rem; line-height:1; color:#c9baff; }
	body.has-gpshell.gpshell-menus .gps-account-mobilebar__back b { font:inherit; overflow:hidden; text-overflow:ellipsis; }
	body.has-gpshell.gpshell-menus .gps-account-mobilebar__back[hidden] { visibility:hidden !important; display:inline-flex !important; pointer-events:none; }

	body.has-gpshell.gpshell-menus .gps-account-mobilebar__close,
	body.has-gpshell.gpshell-menus .gps-account-mobilebar__close.gps-account-close-btn {
		justify-self:end;
		width:40px !important;
		height:40px !important;
		min-width:40px !important;
		padding:0 !important;
		border-radius:50% !important;
		font-size:23px !important;
		font-weight:500 !important;
		line-height:1 !important;
	}

	body.has-gpshell.gpshell-menus .gps-account-mobilebar__back:hover,
	body.has-gpshell.gpshell-menus .gps-account-mobilebar__close:hover { background:rgba(255,255,255,.11) !important; border-color:rgba(201,186,255,.30) !important; }
	body.has-gpshell.gpshell-menus .gps-account-mobilebar__back:active,
	body.has-gpshell.gpshell-menus .gps-account-mobilebar__close:active { transform:scale(.96); }

	/* Se oculta la X que trae el tema; queda una sola X en la barra. */
	body.has-gpshell.gpshell-menus .gps-original-account-close { display:none !important; }

	/* Índice de secciones como pantalla de navegación, no drawer sobrepuesto. */
	body.has-gpshell.gpshell-menus .gp-account-shell.gps-account-stack .gp-account-nav {
		position:absolute !important;
		z-index:25 !important;
		top:64px !important;
		left:0 !important;
		right:0 !important;
		bottom:0 !important;
		width:100% !important;
		max-width:none !important;
		max-height:none !important;
		margin:0 !important;
		padding:14px 12px calc(24px + env(safe-area-inset-bottom)) !important;
		display:flex !important;
		flex-direction:column !important;
		gap:6px !important;
		overflow-y:auto !important;
		overflow-x:hidden !important;
		background:linear-gradient(180deg, rgba(25,19,32,.97), rgba(15,12,20,.98)) !important;
		border:0 !important;
		box-shadow:none !important;
		transform:translateX(-102%) !important;
		visibility:hidden !important;
		opacity:0 !important;
		transition:transform .28s cubic-bezier(.22,.78,.22,1), opacity .20s ease !important;
	}

	body.has-gpshell.gpshell-menus .gp-account-shell.gps-account-stack.gps-nav-open .gp-account-nav {
		transform:translateX(0) !important;
		visibility:visible !important;
		opacity:1 !important;
	}

	/* Ya no hay velo ni panel lateral encima del contenido. */
	body.has-gpshell.gpshell-menus .gp-account-shell.gps-nav-open::after { display:none !important; content:none !important; }

	/* Perfil/cabecera dentro del índice, con espacio real y sin botones encima. */
	body.has-gpshell.gpshell-menus .gp-account-nav__head {
		display:grid !important;
		grid-template-columns:auto minmax(0,1fr) !important;
		align-items:center !important;
		gap:12px !important;
		min-height:64px !important;
		margin:0 2px 8px !important;
		padding:8px 8px 14px !important;
		border-bottom:1px solid var(--gpa-line) !important;
		background:transparent !important;
	}

	body.has-gpshell.gpshell-menus .gp-account-nav__head img,
	body.has-gpshell.gpshell-menus .gp-account-nav__head [class*="avatar"] {
		width:44px !important;
		height:44px !important;
		min-width:44px !important;
		border-radius:50% !important;
		object-fit:cover !important;
		box-shadow:0 0 0 1px rgba(255,255,255,.10) !important;
	}

	/* Renglones tipo iOS Settings: una superficie tranquila, sin neón ni tarjetas gruesas. */
	body.has-gpshell.gpshell-menus .gp-account-nav > button,
	body.has-gpshell.gpshell-menus .gp-account-nav > a,
	body.has-gpshell.gpshell-menus .gps-account-section-btn {
		display:flex !important;
		align-items:center !important;
		justify-content:flex-start !important;
		gap:11px !important;
		width:100% !important;
		min-height:52px !important;
		padding:11px 14px !important;
		margin:0 !important;
		border:1px solid rgba(255,255,255,.06) !important;
		border-radius:15px !important;
		background:var(--gpa-card) !important;
		color:rgba(255,255,255,.82) !important;
		box-shadow:none !important;
		font-size:.92rem !important;
		font-weight:620 !important;
		line-height:1.25 !important;
		text-align:left !important;
		white-space:normal !important;
		transition:background .15s ease, border-color .15s ease, transform .15s ease !important;
	}
	body.has-gpshell.gpshell-menus .gp-account-nav > button:hover,
	body.has-gpshell.gpshell-menus .gp-account-nav > a:hover { background:var(--gpa-card-hover) !important; border-color:rgba(201,186,255,.15) !important; }
	body.has-gpshell.gpshell-menus .gp-account-nav > button:active,
	body.has-gpshell.gpshell-menus .gp-account-nav > a:active { transform:scale(.985); }

	body.has-gpshell.gpshell-menus .gp-account-nav > button.is-active,
	body.has-gpshell.gpshell-menus .gp-account-nav > a.is-active {
		background:linear-gradient(180deg, rgba(111,82,190,.30), rgba(82,58,145,.22)) !important;
		border-color:rgba(192,172,255,.18) !important;
		box-shadow:inset 3px 0 0 #b49cff !important;
		color:#fff !important;
		font-weight:700 !important;
	}

	/* Ayuda sigue siendo un CTA visible, pero sin glow de videojuego. */
	body.has-gpshell.gpshell-menus .gps-account-help-btn {
		margin-top:8px !important;
		background:#fec202 !important;
		color:#4e297f !important;
		border-color:rgba(254,194,2,.48) !important;
		box-shadow:none !important;
		font-weight:800 !important;
		justify-content:center !important;
	}
	body.has-gpshell.gpshell-menus .gps-account-help-btn:hover { background:#ffd13f !important; color:#42216d !important; }

	/* Contenido de la sección: ocupa toda la app debajo de la barra superior. */
	body.has-gpshell.gpshell-menus .gp-account-shell.gps-account-stack .gp-account-content {
		position:absolute !important;
		z-index:15 !important;
		top:64px !important;
		left:0 !important;
		right:0 !important;
		bottom:0 !important;
		width:100% !important;
		min-width:0 !important;
		height:auto !important;
		margin:0 !important;
		padding:16px 14px calc(28px + env(safe-area-inset-bottom)) !important;
		overflow-y:auto !important;
		overflow-x:hidden !important;
		background:rgba(17,13,22,.96) !important;
		transition:opacity .18s ease, transform .24s cubic-bezier(.22,.78,.22,1) !important;
	}
	body.has-gpshell.gpshell-menus .gp-account-shell.gps-account-stack.gps-nav-open .gp-account-content {
		opacity:0 !important;
		transform:translateX(10%) !important;
		pointer-events:none !important;
		visibility:hidden !important;
	}

	/* Evita que tarjetas, tablas o formularios internos provoquen scroll horizontal. */
	body.has-gpshell.gpshell-menus .gp-account-content *,
	body.has-gpshell.gpshell-menus .gp-account-nav * { box-sizing:border-box; max-width:100%; }
	body.has-gpshell.gpshell-menus .gp-account-content img,
	body.has-gpshell.gpshell-menus .gp-account-content video { height:auto; }
	body.has-gpshell.gpshell-menus .gp-account-content table { width:100%; min-width:0; }
	body.has-gpshell.gpshell-menus .gp-account-content input,
	body.has-gpshell.gpshell-menus .gp-account-content select,
	body.has-gpshell.gpshell-menus .gp-account-content textarea,
	body.has-gpshell.gpshell-menus .gp-account-content button { max-width:100%; }
}

/* Superficies compartidas: idioma, país, push, Peti Card y paneles emergentes. */
body.has-gpshell.gpshell-menus .locale-menu,
body.has-gpshell.gpshell-menus .gps-shell-popover {
	border:1px solid rgba(255,255,255,.10) !important;
	border-radius:22px !important;
	background:rgba(23,18,29,.90) !important;
	backdrop-filter:saturate(160%) blur(26px) !important;
	-webkit-backdrop-filter:saturate(160%) blur(26px) !important;
	box-shadow:0 22px 55px rgba(8,5,12,.28) !important;
	overflow:auto !important;
}

body.has-gpshell.gpshell-menus .gp-push-sheet__card,
body.has-gpshell.gpshell-menus .gp-peticard-panel {
	max-width:min(560px,calc(100vw - 24px)) !important;
	max-height:calc(100dvh - 24px) !important;
	border-radius:24px !important;
	border:1px solid rgba(50,35,70,.10) !important;
	box-shadow:0 28px 70px rgba(31,19,42,.18) !important;
	overflow:auto !important;
	overscroll-behavior:contain !important;
}

/* Perfil/registro: conserva el acento amarillo, pero como Apple Card, no bloque neón. */
body.has-gpshell .gps-profile-choice-card {
	background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,248,253,.96)) !important;
	border:1px solid rgba(91,34,183,.10) !important;
	box-shadow:0 10px 30px rgba(49,28,70,.07) !important;
	color:#3d2454 !important;
	transition:transform .16s ease, box-shadow .18s ease !important;
}
body.has-gpshell .gps-profile-choice-card::before {
	content:"";
	display:block;
	position:absolute;
	inset:0 auto 0 0;
	width:4px;
	border-radius:20px 0 0 20px;
	background:#fec202;
}
body.has-gpshell .gps-profile-choice-card { position:relative; overflow:hidden; }
body.has-gpshell .gps-profile-choice-card:hover { transform:translateY(-1px); box-shadow:0 14px 34px rgba(49,28,70,.10) !important; }
body.has-gpshell .gps-profile-choice-card h1,
body.has-gpshell .gps-profile-choice-card h2,
body.has-gpshell .gps-profile-choice-card h3,
body.has-gpshell .gps-profile-choice-card strong,
body.has-gpshell .gps-profile-choice-card b { color:#3f2455 !important; }
body.has-gpshell .gps-profile-choice-card p,
body.has-gpshell .gps-profile-choice-card small,
body.has-gpshell .gps-profile-choice-card span { color:#746b7e !important; }

@media (prefers-reduced-motion:reduce) {
	body.has-gpshell.gpshell-menus .gp-account-nav,
	body.has-gpshell.gpshell-menus .gp-account-content,
	body.has-gpshell.gpshell-menus .gps-account-mobilebar button { transition:none !important; }
}