:root {
	  --bg: #0b0b22; --card-bg: rgba(21, 21, 42, 0.95); --card-border: rgba(255, 255, 255, 0.1);
	  --primary: #9d5bff; --text: #ffffff; --text-muted: #94a3b8; --input-bg: #0a0a16;
	  --border: #2d3748; --success: #00d26a; --error: #ff4b4b; --radius: 16px;
	}
	* { margin: 0; padding: 0; box-sizing: border-box; outline: none; }

	/* ============ FONDO DEL LOGIN (16/08/2026) ============
	   Antes: se pedía images/fondo-principal.jpg, que NO EXISTE (404 en
	   producción), y encima se le aplicaba backdrop-filter para desenfocar...
	   un color plano. Dos de los efectos más caros de CSS trabajando para
	   nada, más una petición fallida en cada visita.

	   Ahora: un degradado de marca con dos halos que se desplazan muy despacio.
	   Coste real ~0: no añade NINGUNA petición (es CSS puro, menos de 1 KB) y
	   solo se anima `transform`, que la tarjeta gráfica compone sin repintar.
	   Sale más ligero que lo que había. */
	body {
	  font-family: 'Poppins', sans-serif;
	  background-color: var(--bg);
	  color: var(--text);
	  min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px;
	  position: relative; z-index: 1;
	  overflow-x: hidden;
	}

	/* UNA SOLA CAPA con los dos halos dentro.
	   Antes eran dos cajas de 90vw/90vh: el degradado no llegaba a
	   transparente antes del borde de la caja, asi que se veia el RECTANGULO
	   recortado. Ahora los halos se posicionan dentro de una unica capa que
	   sobresale de la pantalla por los cuatro lados (inset -25%), de modo que
	   ningun borde puede entrar nunca en cuadro, ni siquiera al moverse. */
	body::before {
		content: '';
		position: fixed;
		inset: -25%;
		z-index: -2;
		pointer-events: none;
		background:
			radial-gradient(38% 38% at 26% 22%, rgba(157, 91, 255, 0.20) 0%, rgba(157, 91, 255, 0) 100%),
			radial-gradient(34% 34% at 78% 80%, rgba(56, 189, 248, 0.11) 0%, rgba(56, 189, 248, 0) 100%);
		will-change: transform;
		animation: derivaFondo 40s ease-in-out infinite alternate;
	}

	@keyframes derivaFondo {
		from { transform: translate3d(0, 0, 0) scale(1); }
		to   { transform: translate3d(2.5%, 2%, 0) scale(1.06); }
	}

	@media (prefers-reduced-motion: reduce) {
		body::before { animation: none; }
	}

	/* AUTORRELLENO DE CHROME
	   Cuando el navegador rellena usuario y contrasena, impone su propio fondo
	   claro y el campo se veia BLANCO sobre la tarjeta oscura. No se puede
	   cambiar con background a secas: hay que usar la sombra interior, que es
	   lo unico que Chrome respeta ahi. */
	input:-webkit-autofill,
	input:-webkit-autofill:hover,
	input:-webkit-autofill:focus,
	input:-webkit-autofill:active {
		-webkit-text-fill-color: var(--text) !important;
		-webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
		box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
		caret-color: var(--text);
		transition: background-color 9999s ease-in-out 0s;
	}

	.login-card {
	  /* Sin backdrop-filter: la tarjeta ya es opaca al 95%, el desenfoque no se
	     apreciaba y obligaba a recomponer el fondo en cada fotograma. */
	  background: var(--card-bg);
	  padding: 40px 35px; border-radius: var(--radius); border: 1px solid var(--card-border);
	  width: 100%; max-width: 450px; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
	  position: relative; overflow: hidden; border-top: 3px solid var(--primary);
	  animation: fadeIn 0.5s ease-out;
	}

	.back-link { position: absolute; top: 20px; left: 20px; color: var(--text-muted); text-decoration: none; font-size: 0.85rem; font-weight: 500; transition: 0.3s; }
	.back-link:hover { color: #fff; transform: translateX(-3px); }

	.logo-image { display: block; margin: 0 auto 10px auto; max-width: 140px; opacity: 0.9; }
	h1 { font-weight: 800; font-size: 1.8rem; text-align: center; margin: 10px 0 25px; color: #fff; letter-spacing: -0.5px; }

	/* --- ERRORES ROJOS --- */
	.error-container {
		background: rgba(255, 75, 75, 0.1);
		border: 1px solid #ff4b4b;
		color: #ff6b6b;
		padding: 12px; border-radius: 8px; margin-bottom: 20px;
		font-size: 0.85rem; text-align: left; font-weight: 500;
		display: none; flex-direction: column; gap: 5px;
	}
	.error-container.visible { display: flex; animation: shake 0.3s ease-in-out; }
	/* Para errores PHP.
	   08/09/2026 — ERA `display:flex; flex-direction:column`, copiado de
	   .error-container (que sí lleva un <span> por error y ahí la columna está
	   bien). El problema: los avisos de una sola línea se imprimen como
	   `<i class="fas ..."></i> Texto`, sin <span>. En una columna flex el icono
	   y el texto son DOS elementos, así que se apilaban: el icono arriba y la
	   frase debajo. Con `display:block` el icono vuelve a ser lo que es, un
	   elemento en línea, y la frase fluye a su lado. Los <span> se hacen bloque
	   a mano para conservar una línea por error, y el margen sustituye al `gap`
	   que daba flex. Así vale para los dos usos y para cualquier aviso futuro,
	   lleve <span> o no. */
	.error-container-php {
		background: rgba(255, 75, 75, 0.1); border: 1px solid #ff4b4b; color: #ff6b6b;
		padding: 12px; border-radius: 8px; margin-bottom: 20px;
		font-size: 0.85rem; text-align: left; font-weight: 500;
		display: block;
	}
	.error-container-php > span { display: block; }
	.error-container-php > span + span { margin-top: 5px; }

	.success-container { background: rgba(0, 210, 106, 0.1); border: 1px solid #00d26a; color: #00d26a; padding: 12px; border-radius: 8px; margin-bottom: 20px; text-align: center; }

	.form-group { margin-bottom: 20px; }
	.form-group label { display: block; font-weight: 500; font-size: 0.9rem; margin-bottom: 8px; color: #ccc; }
	input {
		width: 100%; padding: 14px 16px; background: var(--input-bg);
		border: 1px solid var(--border); border-radius: 10px; color: #fff;
		font-size: 1rem; font-family: 'Poppins', sans-serif; transition: 0.2s;
	}
	input:focus { border-color: var(--primary); background: #121225; box-shadow: 0 0 0 3px rgba(157, 91, 255, 0.2); }
	input.input-error { border-color: #ff4b4b !important; box-shadow: 0 0 0 3px rgba(255, 75, 75, 0.2) !important; }

	/* --- OPCIONES (RECORDARME) FIX MÓVIL --- */
	.form-options {
		display: flex; justify-content: space-between; align-items: center;
		margin-bottom: 25px; font-size: 0.85rem;
	}
	.form-options label { display: flex; align-items: center; cursor: pointer; color: var(--text-muted); margin: 0; }
	.form-options input[type="checkbox"] { width: 16px; height: 16px; margin-right: 8px; accent-color: var(--primary); }
	.form-options a { color: var(--primary); text-decoration: none; font-weight: 600; }
	.form-options a:hover { text-decoration: underline; }

	@media (max-width: 480px) {
		.form-options {
			flex-direction: column;
			align-items: flex-start;
			gap: 15px;
		}
	}

	.btn { display: block; width: 100%; padding: 16px; background: linear-gradient(135deg, var(--primary), #6d28d9); color: #fff; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 1.05rem; border: none; cursor: pointer; transition: 0.3s; box-shadow: 0 5px 15px rgba(157, 91, 255, 0.3); }
	.btn:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(157, 91, 255, 0.5); }

	.form-links { text-align: center; margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
	.form-links a, .btn-link { color: var(--text-muted); font-size: 0.9rem; text-decoration: none; transition: 0.3s; background: none; border: none; cursor: pointer; font-family: 'Poppins', sans-serif; }
	.form-links a:hover, .btn-link:hover { color: #fff; }

	/* Toggle pass */
	.toggle-pass-row { margin-top: 10px; display:flex; align-items:center; gap:10px; }
	.toggle-pass-btn {
		background: none;
		border: 1px solid var(--border);
		color: var(--text-muted);
		padding: 8px 12px;
		border-radius: 10px;
		cursor: pointer;
		font-family: 'Poppins', sans-serif;
		font-size: 0.85rem;
	}
	.toggle-pass-btn:hover { color: #fff; border-color: var(--primary); }

	 /* --- MODAL FAQ --- */
	.modal-overlay { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,0.85); backdrop-filter: blur(5px); justify-content: center; align-items: center; padding: 20px; }
	.modal-overlay.is-visible { display: flex; }
	.modal-content { background: #15152a; width: 100%; max-width: 500px; padding: 30px; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 25px 50px rgba(0,0,0,0.8); max-height: 85vh; overflow-y: auto; }
	.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 15px; }
	.modal-header h2 { margin: 0; font-size: 1.2rem; color: #fff; }
	.modal-close { font-size: 2rem; line-height: 0.5; cursor: pointer; color: #aaa; transition:0.2s; }
	.modal-close:hover { color: var(--error); }
	.modal-body p { font-size: 0.9rem; color: #ccc; line-height: 1.6; margin-bottom: 10px; }
	.modal-body h3 { color: var(--primary); font-size: 1rem; margin-top: 15px; margin-bottom: 5px; }

	/* --- ESTILOS EXTRA PARA 2FA --- */
	.otp-info { background: rgba(157, 91, 255, 0.1); padding: 15px; border-radius: 10px; margin-bottom: 20px; text-align: center; font-size: 0.9rem; color: #cbd5e1; border: 1px solid rgba(157, 91, 255, 0.3); }
	.otp-input { text-align: center; letter-spacing: 8px; font-weight: 900; font-size: 1.5rem; }
	.trust-device-box { margin-bottom: 20px; padding: 10px; background: rgba(255,255,255,0.03); border-radius: 10px; display: flex; align-items: center; justify-content: center; }

	@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
	@keyframes shake { 0%, 100% {transform: translateX(0);} 25% {transform: translateX(-5px);} 75% {transform: translateX(5px);} }
	/* ================= COOKIES LEGALES (DARK MODE) ================= */
	.cookie-banner-legal {
		position: fixed;
		bottom: -100%; /* Oculto abajo */
		left: 0;
		width: 100%;
		background: rgba(11, 11, 34, 0.98); /* Fondo casi opaco */
		border-top: 1px solid var(--primary);
		padding: 20px;
		z-index: 9999;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 15px;
		box-shadow: 0 -5px 30px rgba(0,0,0,0.8);
		transition: bottom 0.5s ease-out;
	}

	.cookie-banner-legal.show { bottom: 0; }

	.cookie-text {
		font-size: 0.85rem;
		color: #cbd5e1;
		text-align: center;
		max-width: 800px;
		line-height: 1.5;
	}
	.cookie-text a { color: var(--primary); text-decoration: underline; }

	.cookie-buttons {
		display: flex;
		gap: 15px;
	}

	.btn-cookie {
		padding: 10px 20px;
		border-radius: 8px;
		font-size: 0.85rem;
		font-weight: 600;
		cursor: pointer;
		border: none;
		transition: 0.2s;
	}

	.btn-accept-all {
		background: var(--primary);
		color: #fff;
		box-shadow: 0 4px 12px rgba(157, 91, 255, 0.3);
	}
	.btn-accept-all:hover { background: #fff; color: var(--primary); }

	.btn-reject-all {
		background: transparent;
		border: 1px solid #444;
		color: #aaa;
	}
	.btn-reject-all:hover { border-color: #fff; color: #fff; }

	@media (min-width: 768px) {
		.cookie-banner-legal { flex-direction: row; justify-content: center; }
		.cookie-text { text-align: left; margin-right: 20px; }
	}