/* ============================================================
   Tarot Tiziana Juegos - Pantalla de login.
   Depende de tokens.css y kit.css.
   ============================================================ */

/* ============================================================
   Contenedor principal: ocupa la viewport entera y aplica el
   fondo atmosferico aleatorio (1 de 5).
   ============================================================ */
.tdt-juegos-login {
	min-height: 100vh; /* fallback */
	min-height: 100dvh; /* v0.30.27: barra de URL móvil */
	display: flex;
	align-items: stretch;
	justify-content: center;
	padding: 24px 18px;
	position: relative;
	overflow: hidden;
	font-family: var(--font-body);
	color: var(--fg);
}

/* Capa base de cada fondo atmosferico. Cinco variantes que se
   asignan por la clase .bg-1 ... .bg-5 que pinta el shortcode al
   azar en cada carga. */
.tdt-juegos-login.bg-1 {
	background:
		radial-gradient(closest-side at 75% 18%, rgba(174, 68, 90, 0.42), transparent 55%),
		radial-gradient(closest-side at 18% 80%, rgba(102, 37, 73, 0.40), transparent 55%),
		linear-gradient(160deg, #2D0F3A 0%, #0D0612 100%);
}
.tdt-juegos-login.bg-2 {
	background:
		radial-gradient(closest-side at 50% 10%, rgba(243, 159, 90, 0.18), transparent 55%),
		radial-gradient(closest-side at 30% 75%, rgba(174, 68, 90, 0.32), transparent 60%),
		linear-gradient(180deg, #1A0B1F 0%, #0D0612 100%);
}
.tdt-juegos-login.bg-3 {
	background:
		radial-gradient(closest-side at 85% 90%, rgba(255, 216, 155, 0.10), transparent 55%),
		radial-gradient(closest-side at 20% 25%, rgba(69, 25, 82, 0.55), transparent 55%),
		linear-gradient(160deg, #1A0B1F 0%, #2D0F3A 60%, #0D0612 100%);
}
.tdt-juegos-login.bg-4 {
	background:
		radial-gradient(closest-side at 65% 35%, rgba(102, 37, 73, 0.50), transparent 55%),
		radial-gradient(closest-side at 15% 85%, rgba(174, 68, 90, 0.25), transparent 55%),
		linear-gradient(170deg, #2D0F3A 0%, #0D0612 100%);
}
.tdt-juegos-login.bg-5 {
	background:
		radial-gradient(closest-side at 40% 60%, rgba(174, 68, 90, 0.30), transparent 55%),
		radial-gradient(closest-side at 90% 12%, rgba(255, 216, 155, 0.12), transparent 50%),
		linear-gradient(160deg, #1A0B1F 0%, #2D0F3A 50%, #0D0612 100%);
}

/* Estrellas dispersas en cada fondo, animadas con un fade-in suave. */
.tdt-juegos-login::before {
	content: "";
	position: absolute; inset: 0;
	background-image:
		radial-gradient(2px 2px at 12% 14%, rgba(255, 216, 155, 0.55), transparent 60%),
		radial-gradient(1.4px 1.4px at 78% 8%, rgba(245, 233, 220, 0.45), transparent 60%),
		radial-gradient(1.8px 1.8px at 92% 28%, rgba(255, 216, 155, 0.40), transparent 60%),
		radial-gradient(1.4px 1.4px at 28% 38%, rgba(245, 233, 220, 0.30), transparent 60%),
		radial-gradient(1.6px 1.6px at 12% 64%, rgba(255, 216, 155, 0.30), transparent 60%),
		radial-gradient(1.4px 1.4px at 60% 70%, rgba(245, 233, 220, 0.30), transparent 60%),
		radial-gradient(1.4px 1.4px at 88% 86%, rgba(255, 216, 155, 0.25), transparent 60%),
		radial-gradient(1.2px 1.2px at 35% 88%, rgba(245, 233, 220, 0.30), transparent 60%);
	mix-blend-mode: screen;
	pointer-events: none;
	z-index: 0;
	animation: tdt-juegos-fade 600ms ease-out;
}

/* Halo central, siempre por encima de las estrellas pero detras de
   la tarjeta de login. Refuerza la idea de "luna creciente" del brief
   sin tener que dibujar una. */
.tdt-juegos-login::after {
	content: "";
	position: absolute; inset: 0;
	background:
		radial-gradient(closest-side at 50% 28%, rgba(255, 216, 155, 0.18), transparent 60%);
	pointer-events: none;
	z-index: 0;
	animation: tdt-juegos-fade 800ms ease-out;
}

@keyframes tdt-juegos-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ============================================================
   Tarjeta de login centrada.
   ============================================================ */
.tdt-juegos-login__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 420px;
	margin: auto;
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: 16px 4px;
	animation: tdt-juegos-fade 800ms ease-out;
}

.tdt-juegos-login__brand {
	display: flex; flex-direction: column; align-items: center;
	gap: 10px;
}
.tdt-juegos-login__brand img.isologo {
	width: 132px; height: auto;
	filter: drop-shadow(0 0 32px rgba(243, 159, 90, 0.45));
}
.tdt-juegos-login__brand img.wordmark {
	width: 200px; height: auto;
	margin-top: 2px;
}
.tdt-juegos-login__eyebrow {
	font-family: var(--font-body);
	font-weight: 600; font-size: 10px;
	letter-spacing: 0.20em;
	text-transform: uppercase;
	color: var(--moonstone);
	margin-top: 2px;
}

.tdt-juegos-login__welcome {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 19px;
	line-height: 1.35;
	color: var(--cream);
	text-align: center;
	max-width: 290px;
	margin: 0 auto;
	text-wrap: pretty;
}

/* ============================================================
   Formulario.
   ============================================================ */
.tdt-juegos-login__form {
	display: flex; flex-direction: column;
	gap: 12px;
}

.tdt-juegos-login__field {
	display: flex; flex-direction: column; gap: 6px;
}
.tdt-juegos-login__label {
	font-family: var(--font-body);
	font-weight: 600; font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--moonstone);
}
.tdt-juegos-login__input {
	height: 50px;
	padding: 0 18px;
	border-radius: 14px;
	background: rgba(245, 233, 220, 0.06);
	border: 1px solid rgba(245, 233, 220, 0.14);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	color: var(--cream);
	font-family: var(--font-body); font-size: 15px;
	transition: border-color 200ms, box-shadow 200ms;
	width: 100%;
}
.tdt-juegos-login__input:focus {
	outline: none;
	border-color: rgba(243, 159, 90, 0.55);
	box-shadow: 0 0 18px rgba(243, 159, 90, 0.20);
}
.tdt-juegos-login__input::placeholder {
	color: rgba(245, 233, 220, 0.35);
}

.tdt-juegos-login__row {
	display: flex; align-items: center; justify-content: space-between;
	margin-top: 2px;
}
.tdt-juegos-login__remember {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--font-body);
	font-size: 12px;
	color: var(--moonstone);
	cursor: pointer;
	user-select: none;
}
.tdt-juegos-login__remember input {
	appearance: none;
	width: 16px; height: 16px;
	border-radius: 4px;
	border: 1px solid rgba(245, 233, 220, 0.30);
	background: rgba(245, 233, 220, 0.04);
	cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	margin: 0;
	transition: background 150ms, border-color 150ms;
}
.tdt-juegos-login__remember input:checked {
	background: rgba(243, 159, 90, 0.85);
	border-color: rgba(243, 159, 90, 0.85);
}
.tdt-juegos-login__remember input:checked::after {
	content: "";
	width: 8px; height: 4px;
	border-left: 2px solid #1A0B1F;
	border-bottom: 2px solid #1A0B1F;
	transform: rotate(-45deg) translate(0, -1px);
}

.tdt-juegos-login__forgot {
	background: transparent;
	border: none;
	padding: 0;
	color: var(--accent);
	font-family: var(--font-body);
	font-size: 12px;
	font-style: italic;
	cursor: pointer;
	text-decoration: none;
}
.tdt-juegos-login__forgot:hover { text-decoration: underline; }

.tdt-juegos-login__submit {
	margin-top: 4px;
	width: 100%;
	height: 52px;
	border: none; border-radius: 22px;
	background: linear-gradient(180deg, var(--orange) 0%, var(--orange-deep) 100%);
	color: var(--cream);
	font-family: var(--font-body); font-weight: 600; font-size: 16px;
	letter-spacing: 0.01em;
	cursor: pointer;
	box-shadow:
		0 8px 24px rgba(243, 159, 90, 0.40),
		inset 0 1px 0 rgba(255, 255, 255, 0.30);
	transition: transform 200ms cubic-bezier(.22, 1, .36, 1), box-shadow 200ms, opacity 200ms;
}
.tdt-juegos-login__submit:hover { transform: translateY(-1px); }
.tdt-juegos-login__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

/* Mensaje de error (oculto hasta que el JS lo activa con .is-visible). */
.tdt-juegos-login__error {
	display: none;
	background: rgba(174, 68, 90, 0.12);
	border: 1px solid rgba(174, 68, 90, 0.45);
	color: var(--cream);
	font-family: var(--font-body); font-size: 13px;
	padding: 12px 14px;
	border-radius: 14px;
	line-height: 1.4;
}
.tdt-juegos-login__error.is-visible { display: block; }

/* ============================================================
   Mensaje footer (texto + link al curso).
   ============================================================ */
.tdt-juegos-login__foot {
	font-family: var(--font-body);
	font-style: italic;
	font-size: 12px;
	color: var(--moonstone);
	text-align: center;
	line-height: 1.5;
	padding: 0 12px;
}
.tdt-juegos-login__foot-cta {
	color: var(--accent);
	font-style: normal;
	text-decoration: none;
}
.tdt-juegos-login__foot-cta:hover { text-decoration: underline; }

/* ============================================================
   Estado: usuario ya autenticado pero sin acceso.
   ============================================================ */
.tdt-juegos-login__estado {
	background: rgba(245, 233, 220, 0.06);
	border: 1px solid rgba(245, 233, 220, 0.14);
	border-radius: 18px;
	padding: 22px;
	text-align: center;
	color: var(--cream);
	font-family: var(--font-body);
}
.tdt-juegos-login__estado h2 {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 22px;
	margin: 0 0 10px;
	color: var(--cream);
}
.tdt-juegos-login__estado p {
	font-size: 14px;
	margin: 0 0 16px;
	color: var(--moonstone);
}
.tdt-juegos-login__estado .row-acciones {
	display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}
.tdt-juegos-login__estado .btn {
	display: inline-flex; align-items: center; justify-content: center;
	height: 44px; padding: 0 20px;
	border-radius: 22px;
	font-family: var(--font-body); font-weight: 600; font-size: 14px;
	cursor: pointer; border: none;
	text-decoration: none;
}
.tdt-juegos-login__estado .btn-primary {
	background: linear-gradient(180deg, var(--orange) 0%, var(--orange-deep) 100%);
	color: var(--cream);
	box-shadow: 0 6px 18px rgba(243, 159, 90, 0.30);
}
.tdt-juegos-login__estado .btn-secondary {
	background: rgba(245, 233, 220, 0.10);
	border: 1px solid rgba(245, 233, 220, 0.20);
	color: var(--cream);
}

/* ============================================================
   Modo claro pergamino.
   ============================================================ */
.tdt-juegos-login[data-theme="light"] {
	background: var(--bg-gradient-mobile);
	color: var(--ink-sepia);
}
.tdt-juegos-login[data-theme="light"]::before { display: none; }
.tdt-juegos-login[data-theme="light"]::after {
	background: radial-gradient(closest-side at 50% 28%, rgba(122, 49, 39, 0.12), transparent 60%);
}
.tdt-juegos-login[data-theme="light"] .tdt-juegos-login__welcome { color: var(--ink-sepia); font-style: italic; }
.tdt-juegos-login[data-theme="light"] .tdt-juegos-login__eyebrow { color: var(--ink-medium); }
.tdt-juegos-login[data-theme="light"] .tdt-juegos-login__label   { color: var(--ink-medium); }
.tdt-juegos-login[data-theme="light"] .tdt-juegos-login__input {
	background: rgba(61, 40, 23, 0.04);
	border-color: rgba(61, 40, 23, 0.20);
	color: var(--ink-sepia);
}
.tdt-juegos-login[data-theme="light"] .tdt-juegos-login__remember { color: var(--ink-medium); }
.tdt-juegos-login[data-theme="light"] .tdt-juegos-login__forgot   { color: var(--wine-sepia); }
.tdt-juegos-login[data-theme="light"] .tdt-juegos-login__foot     { color: var(--ink-medium); }
.tdt-juegos-login[data-theme="light"] .tdt-juegos-login__foot-cta { color: var(--wine-sepia); font-weight: 600; }
.tdt-juegos-login[data-theme="light"] .tdt-juegos-login__error {
	background: rgba(122, 49, 39, 0.10);
	border-color: rgba(122, 49, 39, 0.40);
	color: var(--ink-sepia);
}
.tdt-juegos-login[data-theme="light"] .tdt-juegos-login__submit {
	background: linear-gradient(180deg, var(--wine-sepia) 0%, #5B2018 100%);
	color: var(--parchment);
}

/* ----------------------------------------------------------
   Toggle mostrar/ocultar contrasena (icono ojo dentro del input).
   ---------------------------------------------------------- */
.tdt-juegos-login__password-wrap {
	position: relative;
}

.tdt-juegos-login__password-wrap .tdt-juegos-login__input {
	padding-right: 44px; /* deja espacio al boton del ojo */
	width: 100%;
}

.tdt-juegos-login__pwd-toggle {
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: rgba(245, 239, 230, 0.65);
	border-radius: 8px;
	transition: color 0.15s ease, background 0.15s ease;
}

.tdt-juegos-login__pwd-toggle:hover,
.tdt-juegos-login__pwd-toggle:focus-visible {
	color: rgba(245, 239, 230, 0.95);
	background: rgba(255, 255, 255, 0.06);
	outline: none;
}

.tdt-juegos-login__pwd-toggle:focus-visible {
	box-shadow: 0 0 0 2px rgba(255, 216, 155, 0.45);
}

/* Alternancia de iconos segun aria-pressed. */
.tdt-juegos-login__pwd-icon--hide {
	display: none;
}
.tdt-juegos-login__pwd-toggle[aria-pressed="true"] .tdt-juegos-login__pwd-icon--show {
	display: none;
}
.tdt-juegos-login__pwd-toggle[aria-pressed="true"] .tdt-juegos-login__pwd-icon--hide {
	display: inline-block;
}

/* Estado revelado: ademas de cambiar el icono, el boton se tine del
   color de acento para dar feedback claro de que la contrasena esta
   visible (patron consistente con el ojito de wp-login.php). */
.tdt-juegos-login__pwd-toggle[aria-pressed="true"] {
	color: var(--accent);
}
.tdt-juegos-login__pwd-toggle[aria-pressed="true"]:hover,
.tdt-juegos-login__pwd-toggle[aria-pressed="true"]:focus-visible {
	color: var(--accent);
	background: rgba(243, 159, 90, 0.12);
}

/* Tema claro: color del icono mas oscuro para contraste. */
.tdt-juegos-login[data-theme="light"] .tdt-juegos-login__pwd-toggle {
	color: rgba(69, 25, 82, 0.55);
}
.tdt-juegos-login[data-theme="light"] .tdt-juegos-login__pwd-toggle:hover,
.tdt-juegos-login[data-theme="light"] .tdt-juegos-login__pwd-toggle:focus-visible {
	color: rgba(69, 25, 82, 0.9);
	background: rgba(69, 25, 82, 0.08);
}
.tdt-juegos-login[data-theme="light"] .tdt-juegos-login__pwd-toggle[aria-pressed="true"],
.tdt-juegos-login[data-theme="light"] .tdt-juegos-login__pwd-toggle[aria-pressed="true"]:hover,
.tdt-juegos-login[data-theme="light"] .tdt-juegos-login__pwd-toggle[aria-pressed="true"]:focus-visible {
	color: var(--wine-sepia);
	background: rgba(122, 49, 39, 0.10);
}