/* Área de cuenta de GUAY.news (/cuenta/): tarjetas crema, bordes redondeados
   y botón naranja píldora. Los campos y el .g-btn los pinta el tema. */

.g-cuenta {
	/* Sale de la columna de lectura: ocupa casi toda la pantalla en escritorio. */
	--gc-w: min(1240px, calc(100vw - 32px));
	width: var(--gc-w);
	margin-inline: calc((100% - var(--gc-w)) / 2);
	font-family: var(--g-sans, Inter, sans-serif);
}

.g-cuenta__aviso {
	margin: 0 0 20px;
	padding: 12px 16px;
	border-radius: 14px;
	font-size: 15px;
	font-weight: 600;
}

.g-cuenta__aviso.is-ok {
	background: rgb(47 143 91 / 0.12);
	color: var(--g-ink, #1a1a1a);
}

.g-cuenta__aviso.is-error {
	background: rgb(224 49 49 / 0.1);
	color: #a11212;
}

.g-cuenta__hola {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 24px;
	margin: 0 0 24px;
	padding: 28px 32px;
	overflow: hidden;
	border-radius: 24px;
	background: linear-gradient(120deg, var(--g-sun-tint, #fff6d6), #ffe3c2);
	isolation: isolate;
}

.g-cuenta__hola::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: -80px;
	right: -60px;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background: radial-gradient(circle, rgb(255 122 26 / 0.22), transparent 70%);
}

.g-cuenta__avatar {
	display: grid;
	flex: none;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--g-orange, #ff7a1a);
	box-shadow: 0 0 0 5px rgb(255 255 255 / 0.7);
	color: #fff;
	font-family: var(--g-serif, Georgia, serif);
	font-size: 2rem;
	font-weight: 700;
}

.g-cuenta__quien {
	flex: 1 1 260px;
	min-width: 0;
}

.g-cuenta__kicker {
	margin: 0 0 2px;
	color: var(--g-orange-ink, #a64e10);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.g-cuenta__hola .g-cuenta__titulo {
	margin: 0;
	overflow-wrap: anywhere;
}

.g-cuenta__desde {
	margin: 4px 0 0;
	color: var(--g-ink-2, #5a5a5a);
	font-size: 14px;
	overflow-wrap: anywhere;
}

.g-cuenta__cifras {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.g-cuenta__cifras li,
.g-cuenta__cifras a {
	display: grid;
	justify-items: center;
	min-width: 92px;
	padding: 10px 14px;
	border-radius: 16px;
	background: rgb(255 255 255 / 0.75);
	color: var(--g-ink-2, #5a5a5a);
	font-size: 12px;
	text-decoration: none;
}

.g-cuenta__cifras a {
	min-width: 0;
	padding: 0;
	background: none;
}

.g-cuenta__cifras b {
	color: var(--g-ink, #1a1a1a);
	font-family: var(--g-serif, Georgia, serif);
	font-size: 1.6rem;
	line-height: 1.1;
}

.g-cuenta__salir {
	flex: none;
}

.g-cuenta__rejilla {
	display: grid;
	gap: 20px;
	align-items: start;
}

@media (min-width: 760px) {
	.g-cuenta__rejilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.g-cuenta__card--ancha {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1100px) {
	.g-cuenta__rejilla {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.g-cuenta__card {
	height: 100%;
	padding: 26px 26px 28px;
	background: var(--g-surface, #faf7f0);
	border: 1px solid var(--g-rule, #e6e1d6);
	border-radius: 20px;
	box-shadow: 0 1px 0 rgb(26 26 26 / 0.03), 0 18px 36px -30px rgb(26 26 26 / 0.35);
}

.g-cuenta__card--ancha {
	height: auto;
}

/* Todos los campos iguales (los de contraseña salían sin estilo). */
.g-cuenta input[type="text"],
.g-cuenta input[type="email"],
.g-cuenta input[type="password"] {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 12px 16px;
	border: 1.5px solid var(--g-rule-2, #d8d1c2);
	border-radius: 12px;
	background: var(--g-bg, #fff);
	color: var(--g-ink, #1a1a1a);
	font: inherit;
	font-size: 16px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.g-cuenta input:focus {
	border-color: var(--g-orange, #ff7a1a);
	outline: none;
	box-shadow: 0 0 0 4px rgb(255 122 26 / 0.18);
}

.g-cuenta .g-btn {
	min-height: 48px;
}

.g-cuenta__card form {
	display: grid;
	gap: 14px;
}

.g-cuenta__card form p {
	margin: 0;
}

.g-cuenta__card label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
}

.g-cuenta__card input:disabled {
	background: var(--g-surface-2, #f3eee3);
	color: var(--g-ink-2, #5a5a5a);
}

.g-cuenta__titulo {
	margin: 0 0 8px;
	font-family: var(--g-serif, Georgia, serif);
	font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.3rem);
	line-height: 1.1;
}

.g-cuenta__sub {
	margin: 0 0 14px;
	font-family: var(--g-serif, Georgia, serif);
	font-size: 1.3rem;
}

.g-cuenta__intro {
	margin: 0 0 18px;
	color: var(--g-ink-2, #5a5a5a);
}

.g-cuenta__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 4px;
}

.g-cuenta__link {
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
}

.g-cuenta__nota,
.g-cuenta__opcional {
	font-size: 13px;
	color: var(--g-ink-2, #5a5a5a);
}

.g-cuenta__nota {
	margin: 14px 0 0;
}

.g-cuenta__estado {
	margin: 0 0 14px;
	font-size: 15px;
	color: var(--g-ink-2, #5a5a5a);
}

.g-cuenta__chip {
	display: inline-block;
	margin-right: 6px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--g-surface-2, #f3eee3);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--g-ink, #1a1a1a);
}

.g-cuenta__chip.is-ok {
	background: var(--g-sun, #ffd23f);
}

.g-cuenta__comentarios {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 14px;
}

.g-cuenta__comentarios li {
	padding: 12px 14px;
	background: var(--g-bg, #fff);
	border: 1px solid var(--g-rule, #e6e1d6);
	border-radius: 12px;
}

.g-cuenta__comentarios a {
	font-weight: 700;
}

.g-cuenta__comentarios p {
	margin: 6px 0 0;
	font-size: 14px;
	color: var(--g-ink-2, #5a5a5a);
}

.g-cuenta__fecha {
	margin-left: 8px;
	font-size: 12px;
	color: var(--g-ink-2, #5a5a5a);
}

/* 1.2.0: avisos informativos, noticias guardadas y hueco de pagos. */
.g-cuenta__aviso.is-info {
	background: var(--g-sun-tint, #fff6d6);
	color: var(--g-ink, #1a1a1a);
}

.g-cuenta__cuenta {
	display: inline-block;
	min-width: 24px;
	margin-left: 4px;
	padding: 2px 8px;
	border-radius: 999px;
	background: #ff7a1a;
	font: 700 13px/1.4 var(--g-sans, sans-serif);
	text-align: center;
	vertical-align: middle;
	color: #1a1a1a;
}

.g-cuenta__guardadas {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}

@media (min-width: 760px) {
	.g-cuenta__guardadas {
		grid-template-columns: 1fr 1fr;
	}
}

.g-cuenta__guardada {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px;
	background: var(--g-bg, #fff);
	border: 1px solid var(--g-rule, #e6e1d6);
	border-radius: 14px;
}

.g-cuenta__guardada form {
	display: block;
	margin-left: auto;
}

.g-cuenta__mini-wrap {
	flex: 0 0 64px;
}

.g-cuenta__mini {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 10px;
	background: var(--g-surface-2, #f3eee3);
}

.g-cuenta__guardada-txt {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.g-cuenta__seccion {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.g-cuenta__guardada-titulo {
	font-family: var(--g-serif, Georgia, serif);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--g-ink, #1a1a1a);
	text-decoration: none;
}

.g-cuenta__guardada-titulo:hover {
	text-decoration: underline;
}

.g-cuenta__quitar {
	padding: 6px 12px;
	border: 1.5px solid var(--g-rule-2, #d6cfbf);
	border-radius: 999px;
	background: transparent;
	color: var(--g-ink, #1a1a1a);
	font: 600 13px/1 var(--g-sans, sans-serif);
	cursor: pointer;
}

.g-cuenta__quitar:hover {
	border-color: #ff7a1a;
	background: rgb(255 122 26 / 0.1);
}

.g-cuenta__paginas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 18px;
	font-size: 14px;
}

.g-cuenta__card--pronto {
	opacity: 0.75;
	border-style: dashed;
}


/* Móvil: todo a una columna, botones a lo ancho y cabecera compacta. */
@media (max-width: 640px) {
	.g-cuenta {
		--gc-w: calc(100vw - 24px);
	}

	.g-cuenta__hola {
		padding: 22px 18px;
		border-radius: 20px;
	}

	.g-cuenta__avatar {
		width: 56px;
		height: 56px;
		font-size: 1.6rem;
	}

	.g-cuenta__quien {
		flex-basis: calc(100% - 80px);
	}

	.g-cuenta__cifras {
		flex: 1 1 100%;
	}

	.g-cuenta__cifras li {
		flex: 1;
	}

	.g-cuenta__salir {
		width: 100%;
		justify-content: center;
		text-align: center;
	}

	.g-cuenta__card {
		padding: 22px 18px;
	}

	.g-cuenta__card .g-btn {
		width: 100%;
		justify-content: center;
	}
}

/* Con :has, toda la página de cuenta (migas y título incluidos) usa el ancho del diario. */
.g-page__article:has(.g-cuenta) {
	max-width: calc(1240px + 2 * var(--g-gutter, 16px));
}

.g-page__article:has(.g-cuenta) > *,
.g-page__article:has(.g-cuenta) .g-page__content {
	max-width: none;
}

.g-page__article:has(.g-cuenta) .g-cuenta {
	width: 100%;
	margin-inline: 0;
}

.g-cuenta__cifras a,
.g-cuenta__cifras a:hover {
	background-image: none;
	text-decoration: none;
}