/*
 * PanelWEB2 authentication experience
 * Scoped to body.panel-auth so the rest of the panel remains untouched.
 */

body.panel-auth {
	position: relative;
	isolation: isolate;
	background: #020713;
	overflow-x: hidden;
}

body.panel-auth::before {
	content: "";
	position: fixed;
	inset: -5%;
	width: auto;
	height: auto;
	z-index: 0;
	pointer-events: none;
	opacity: .78;
	filter: saturate(1.16) contrast(1.06);
	background: #020713 url("/static/img/panel-auth-tunnel.webp") center center / cover no-repeat;
	transform: scale(1.06);
	animation: panelTunnelTravel 18s ease-in-out infinite alternate;
}

body.panel-auth::after {
	content: "";
	position: fixed;
	inset: 0;
	width: auto;
	height: auto;
	z-index: 0;
	pointer-events: none;
	opacity: 1;
	filter: none;
	background:
		radial-gradient(circle at 50% 44%, rgba(2, 7, 19, .22) 0, rgba(2, 7, 19, .58) 54%, rgba(2, 7, 19, .88) 100%),
		linear-gradient(115deg, rgba(2, 7, 19, .72), rgba(2, 7, 19, .18) 45%, rgba(2, 7, 19, .68));
	animation: none;
}

.panel-auth .grid-overlay {
	z-index: 1;
	opacity: .48;
	background-size: 42px 42px;
	background-image:
		linear-gradient(rgba(74, 202, 255, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(74, 202, 255, .045) 1px, transparent 1px);
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .72), transparent 92%);
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .72), transparent 92%);
	overflow: hidden;
}

.panel-auth .grid-overlay::before,
.panel-auth .grid-overlay::after {
	content: "";
	position: absolute;
	inset: -30%;
	pointer-events: none;
}

.panel-auth .grid-overlay::before {
	opacity: .35;
	background:
		repeating-linear-gradient(118deg,
			transparent 0 86px,
			rgba(55, 213, 255, .1) 87px 88px,
			transparent 89px 178px);
	animation: panelDataLines 14s linear infinite;
}

.panel-auth .grid-overlay::after {
	opacity: .55;
	background-image:
		radial-gradient(circle, rgba(89, 230, 255, .9) 0 1.2px, transparent 1.8px),
		radial-gradient(circle, rgba(119, 97, 255, .75) 0 1px, transparent 1.6px);
	background-position: 0 0, 70px 45px;
	background-size: 150px 105px, 190px 135px;
	filter: drop-shadow(0 0 5px rgba(65, 209, 255, .55));
	animation: panelDataParticles 16s linear infinite;
}

.panel-auth .login-shell {
	z-index: 2;
	padding-block: clamp(1rem, 3vw, 2.2rem);
}

.panel-auth .login-panel {
	background: linear-gradient(145deg, rgba(6, 14, 28, .77), rgba(8, 17, 31, .62));
	border-color: rgba(92, 218, 255, .2);
	box-shadow:
		0 34px 100px rgba(0, 0, 0, .58),
		0 0 0 1px rgba(255, 255, 255, .025) inset,
		0 0 46px rgba(31, 165, 255, .08);
}

.panel-auth .brand-side {
	background:
		linear-gradient(145deg, rgba(3, 10, 23, .9), rgba(7, 18, 36, .72)),
		radial-gradient(circle at 18% 20%, rgba(65, 209, 255, .16), transparent 34%);
}

.panel-auth .form-side {
	background: linear-gradient(165deg, rgba(4, 10, 22, .88), rgba(7, 16, 30, .8));
}

.panel-auth .brand-chip {
	max-width: 100%;
	border-color: rgba(87, 221, 255, .22);
	background: rgba(4, 15, 29, .62);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
	font-size: clamp(.66rem, 1vw, .8rem);
	letter-spacing: .065em;
	white-space: normal;
}

.panel-auth .brand-title {
	max-width: 12ch;
	font-size: clamp(2.25rem, 4.5vw, 4.35rem);
	line-height: .98;
	text-shadow: 0 10px 35px rgba(0, 0, 0, .44);
}

.panel-auth .brand-copy {
	max-width: 44ch;
	color: #c4d3e7;
	font-size: clamp(.9rem, 1.25vw, 1rem);
	line-height: 1.62;
}

.panel-auth .brand-legal {
	display: block;
	margin-top: .75rem;
	color: #8092aa;
	font-size: .72rem;
	line-height: 1.45;
}

.panel-auth .signal-bar {
	box-shadow: 0 0 22px rgba(65, 209, 255, .35);
}

.panel-auth--admin .login-panel {
	border-color: rgba(255, 76, 145, .2);
}

.panel-auth--admin .brand-side {
	background:
		linear-gradient(145deg, rgba(16, 7, 24, .9), rgba(10, 14, 34, .75)),
		radial-gradient(circle at 18% 20%, rgba(255, 65, 129, .15), transparent 34%);
}

.panel-auth--admin .grid-overlay::after {
	filter: drop-shadow(0 0 5px rgba(255, 65, 129, .32));
}

.panel-auth-loader {
	position: fixed;
	inset: 0;
	z-index: 2147483600;
	display: grid;
	place-items: center;
	padding: 1.5rem;
	color: #f7fbff;
	background:
		radial-gradient(circle at 50% 38%, rgba(20, 72, 112, .22), transparent 32%),
		linear-gradient(145deg, rgba(2, 6, 13, .985), rgba(3, 9, 18, .99));
	opacity: 0;
	visibility: hidden;
	transition: opacity .28s ease, visibility .28s ease;
}

.panel-auth-loader.is-active {
	opacity: 1;
	visibility: visible;
}

.panel-auth-loader__content {
	width: min(92vw, 390px);
	text-align: center;
	transform: translateY(8px);
	transition: transform .35s ease;
}

.panel-auth-loader.is-active .panel-auth-loader__content {
	transform: translateY(0);
}

.panel-auth-loader__logo {
	width: 76px;
	height: 76px;
	margin: 0 auto 1.45rem;
	padding: 4px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 22px;
	background: rgba(255, 255, 255, .045);
	box-shadow:
		0 18px 50px rgba(0, 0, 0, .5),
		0 0 38px rgba(65, 209, 255, .12);
}

.panel-auth-loader__logo img {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 17px;
	object-fit: cover;
}

.panel-auth-loader__eyebrow {
	margin: 0 0 .65rem;
	color: #a8b5c7;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.panel-auth-loader__title {
	margin: 0;
	font-family: "Space Grotesk", "Inter", sans-serif;
	font-size: clamp(2rem, 6vw, 2.65rem);
	font-weight: 700;
	letter-spacing: -.035em;
}

.panel-auth-loader__brand {
	margin: .28rem 0 0;
	color: #55dfff;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.panel-auth-loader__status {
	min-height: 2.8em;
	margin: 1.15rem auto 1.8rem;
	color: #93a1b5;
	font-size: .92rem;
	line-height: 1.45;
}

.panel-auth-loader__track {
	position: relative;
	width: min(100%, 310px);
	height: 4px;
	margin: 0 auto;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .025);
}

.panel-auth-loader__bar {
	position: absolute;
	inset: 0 auto 0 0;
	width: 38%;
	border-radius: inherit;
	background: linear-gradient(90deg, #28c9ff, #36f1bd, #7469ff);
	box-shadow: 0 0 16px rgba(57, 219, 255, .7);
	animation: panelLoaderBar 1.15s cubic-bezier(.55, .05, .35, .98) infinite;
}

@keyframes panelTunnelTravel {
	0% {
		transform: scale(1.06) translate3d(-1.2%, -.6%, 0);
		background-position: 48% 50%;
	}
	100% {
		transform: scale(1.12) translate3d(1.2%, .7%, 0);
		background-position: 52% 50%;
	}
}

@keyframes panelDataLines {
	to {
		transform: translate3d(120px, -52px, 0);
	}
}

@keyframes panelDataParticles {
	to {
		transform: translate3d(190px, -105px, 0);
	}
}

@keyframes panelLoaderBar {
	0% {
		left: -42%;
		width: 34%;
	}
	52% {
		width: 55%;
	}
	100% {
		left: 108%;
		width: 28%;
	}
}

@media (max-width: 991.98px) {
	body.panel-auth::before {
		opacity: .68;
		background-position: 42% center;
	}

	.panel-auth .login-panel {
		width: min(100%, 680px);
	}

	.panel-auth .brand-side {
		min-height: auto;
		padding-bottom: 1.6rem;
	}

	.panel-auth .brand-title {
		max-width: 14ch;
		font-size: clamp(2.15rem, 9vw, 3.7rem);
	}

	.panel-auth .signal-wrap {
		height: 54px;
		margin-top: 1.25rem;
	}
}

@media (max-width: 575.98px) {
	.panel-auth .login-shell {
		align-items: flex-start;
		padding: .75rem;
	}

	.panel-auth .login-panel {
		border-radius: 24px;
	}

	.panel-auth .brand-side,
	.panel-auth .form-side {
		padding: 1.35rem;
	}

	.panel-auth .brand-title {
		margin-block: 1rem .8rem;
		font-size: clamp(2rem, 11vw, 3rem);
	}

	.panel-auth .brand-copy {
		font-size: .86rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.panel-auth::before,
	.panel-auth .grid-overlay::before,
	.panel-auth .grid-overlay::after,
	.panel-auth-loader__bar {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* Acceso centrado: sólo cambia la pantalla de login. */
.panel-auth-login .login-shell { width: 100%; min-height: 100vh; min-height: 100dvh; display:flex; align-items:center; justify-content:center; padding:24px 16px; }
.panel-auth-login .login-panel { width:100%; max-width:500px; margin:auto; }
.panel-auth-login .login-panel > .row > .col-lg-6:first-child { display:none; }
.panel-auth-login .login-panel > .row > .col-lg-6:last-child { width:100%; }
.panel-auth-login .form-side { padding:30px; }
.panel-auth-login .form-subtitle { margin-bottom:22px; }
.panel-auth-login .divider-line { margin:20px 0 14px; }
.auth-center-logo { display:block; border-radius:50%; object-fit:cover; margin:0 auto 18px; border:2px solid rgba(65,209,255,.6); }
.panel-auth-login .eyebrow, .panel-auth-login .form-title, .panel-auth-login .form-subtitle { text-align:center; }
@media(max-width:575px) { .panel-auth-login .form-side {padding:24px 18px;} .panel-auth-login .login-shell {padding:12px;} }