/* La llave del modo editor: el iris que se abre desde el logo, y la barrita del administrador. */

/* Mientras se mantiene pulsado el logo: un anillo que se va llenando (aparece tarde para no molestar a un toque normal). */
.marca { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; position: relative; }
.marca::after {
	content: "";
	position: absolute;
	left: -0.45rem;
	top: 50%;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: conic-gradient(currentColor var(--re-llenado, 0deg), transparent 0);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
	opacity: 0;
	transform: translateY(-50%);
	pointer-events: none;
}
@property --re-llenado { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.marca.re-cargando::after { animation: re-llenar 1s linear forwards, re-aparecer 0.2s 0.25s forwards; }
@keyframes re-llenar { to { --re-llenado: 360deg; } }
@keyframes re-aparecer { to { opacity: 0.85; } }

html.re-llave-abierta { overflow: hidden; }
.re-llave, .re-llave * { box-sizing: border-box; }
.re-llave {
	--x: 50vw;
	--y: 2rem;
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	padding: 1.25rem;
	color: #fff;
	font-family: "Host Grotesk", system-ui, sans-serif;
}
/* El iris: un círculo que crece desde el logo, con los anillos del objetivo de una cámara. */
.re-llave__iris {
	position: absolute;
	inset: 0;
	background:
		repeating-radial-gradient(circle at var(--x) var(--y), rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 46px),
		radial-gradient(120% 90% at var(--x) var(--y), #0b2a7a, #001233 55%, #000814);
	clip-path: circle(0 at var(--x) var(--y));
	transition: clip-path 0.75s cubic-bezier(0.7, 0, 0.2, 1);
}
.re-llave.es-abierta .re-llave__iris { clip-path: circle(150vmax at var(--x) var(--y)); }
.re-llave.es-dentro .re-llave__iris { clip-path: circle(0 at 50% 50%); transition-duration: 0.6s; }
.re-llave__caja {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 0.85rem;
	width: min(22rem, 100%);
	text-align: center;
	opacity: 0;
	transform: translateY(24px) scale(0.96);
	transition: opacity 0.45s 0.3s, transform 0.6s 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.re-llave.es-abierta .re-llave__caja { opacity: 1; transform: none; }
.re-llave.es-dentro .re-llave__caja { opacity: 0; transform: scale(0.9); transition-delay: 0s; }
.re-llave__caja .marca__mono { width: 3.2rem; height: auto; margin-bottom: 0.4rem; color: #fff; filter: drop-shadow(0 0 24px rgba(31, 75, 255, 0.9)); }
.re-llave__etiqueta { margin: 0; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.re-llave__titulo { margin: 0 0 0.6rem; font-size: clamp(2.2rem, 1.6rem + 3vw, 3.2rem); font-weight: 600; line-height: 0.95; letter-spacing: -0.035em; color: #fff; }
.re-llave__campo { display: grid; gap: 0.35rem; width: 100%; text-align: left; }
.re-llave__campo.es-oculto { display: none; }
.re-llave__campo span { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.re-llave__campo input {
	width: 100%;
	padding: 0.9rem 1.1rem;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.07);
	color: #fff;
	font: inherit;
	font-size: 17px; /* 16 o más: el iPhone no hace zoom */
	outline: none;
	transition: border-color 0.2s, background-color 0.2s;
}
.re-llave__campo input:focus { border-color: #4d74ff; background: rgba(255, 255, 255, 0.11); box-shadow: 0 0 0 4px rgba(31, 75, 255, 0.35); }
.re-llave__boton {
	width: 100%;
	margin-top: 0.4rem;
	padding: 0.95rem 1rem;
	border: 0;
	border-radius: 999px;
	background: #1f4bff;
	color: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 14px 40px -12px rgba(31, 75, 255, 0.9);
	transition: transform 0.2s, background-color 0.2s;
}
.re-llave__boton:hover { background: #3a60ff; }
.re-llave__boton:active { transform: scale(0.98); }
.re-llave__boton[disabled] { opacity: 0.7; cursor: progress; }
.re-llave__error { min-height: 1.3em; margin: 0; font-size: 14px; color: #ff9b9b; }
.re-llave__otro { border: 0; background: none; color: rgba(255, 255, 255, 0.55); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 0.25em; cursor: pointer; }
.re-llave__caja.es-error { animation: re-temblor 0.45s; }
@keyframes re-temblor { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
.re-llave__cerrar {
	position: absolute;
	top: max(1rem, env(safe-area-inset-top));
	right: 1rem;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	background: none;
	color: #fff;
	font-size: 1.5rem;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.3s 0.4s;
}
.re-llave.es-abierta .re-llave__cerrar { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.re-llave__iris, .re-llave__caja { transition-duration: 0.01s !important; transition-delay: 0s !important; }
}

/* La barrita del modo editor (solo para el administrador ya dentro). */
.re-barra {
	position: fixed;
	left: 50%;
	bottom: max(1rem, env(safe-area-inset-bottom));
	z-index: 9999;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.35rem 0.4rem 0.35rem 0.9rem;
	border-radius: 999px;
	background: rgba(11, 15, 25, 0.88);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6);
	color: #fff;
	font: 500 12px/1 "Host Grotesk", system-ui, sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transform: translateX(-50%);
	white-space: nowrap;
}
.re-barra__punto { width: 0.5rem; height: 0.5rem; margin-right: 0.35rem; border-radius: 50%; background: #7dffb0; box-shadow: 0 0 10px #7dffb0; }
.re-barra a { padding: 0.6rem 0.8rem; border-radius: 999px; color: #fff; text-decoration: none; }
.re-barra a:hover, .re-barra a:focus-visible { background: rgba(255, 255, 255, 0.12); }
.re-barra .re-barra__editar { background: #1f4bff; }
.re-barra .re-barra__editar:hover { background: #3a60ff; }
.re-barra .re-barra__salir { color: rgba(255, 255, 255, 0.6); }