/* ==========================================================================
   ODIN SOFTWARE — login del gestor de reservas
   Hoja NUEVA y autónoma: solo la usa login.php (reutilizable en login2fa.php).
   Split-screen: panel de marca oscuro (tinta cálida + naranja ODIN #ff7c00)
   + panel de formulario claro donde el logo vive en su color natural.
   Mobile-first: en <992px el panel de marca colapsa a banda superior.
   [JL 2026-10-07]
   ========================================================================== */

:root {
	--odin-orange:      #ff7c00;
	--odin-orange-deep: #e96f00;
	--odin-orange-soft: rgba(255, 124, 0, .16);
	--odin-ink:         #0d0c0a;   /* negro calido, nunca #000 puro */
	--odin-ink-2:       #16140f;
	--odin-paper:       #faf8f4;   /* blanco calido */
	--odin-card:        #fffefb;
	--odin-text:        #28241e;
	--odin-muted:       #8d867b;
	--odin-line:        rgba(30, 25, 17, .12);
	--odin-line-dark:   rgba(255, 252, 245, .10);
	--odin-error:       #c23d31;
	--odin-error-bg:    rgba(194, 61, 49, .08);
	--ease-soft:        cubic-bezier(.32, .72, 0, 1);
	--r-outer:          1.75rem;
	--r-inner:          calc(1.75rem - .55rem);
	--r-field:          .9rem;
}

/* ---- Base -------------------------------------------------------------- */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { height: 100%; }

body {
	font-family: 'Sora', 'Poppins', system-ui, sans-serif;
	min-height: 100dvh;
	background: var(--odin-paper);
	color: var(--odin-text);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* ---- Loader (se conserva #global-loader y su JS) ----------------------- */

#global-loader {
	position: fixed;
	inset: 0;
	background: var(--odin-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 40;
}

.loader-img { width: 54px; height: 54px; }

/* ---- Lienzo split-screen ----------------------------------------------- */

.odin-login {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	min-height: 100dvh;
	width: 100%;
}

/* ---- Panel de marca (izquierda, oscuro) -------------------------------- */

.odin-brand {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 3rem;
	padding: clamp(2rem, 4.5vw, 4.5rem);
	background:
		radial-gradient(60rem 38rem at -12% -14%, rgba(255, 124, 0, .22), transparent 58%),
		radial-gradient(42rem 30rem at 112% 112%, rgba(255, 124, 0, .10), transparent 55%),
		linear-gradient(165deg, var(--odin-ink-2) 0%, var(--odin-ink) 62%);
	color: #f7f3ec;
	overflow: hidden;
}

/* grano sutil para romper la plancha digital */
.odin-brand::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .5;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.05'/></svg>");
}

/* linea de horizonte vertical, detalle de maquetado */
.odin-brand::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: clamp(1.2rem, 2.5vw, 2.4rem);
	width: 1px;
	background: linear-gradient(to bottom, transparent, var(--odin-line-dark) 30%, var(--odin-line-dark) 70%, transparent);
	pointer-events: none;
}

.odin-brand > * { position: relative; }

/* wordmark HTML (el PNG es negro: en oscuro se dibuja con texto) */
.odin-wordmark {
	display: flex;
	align-items: flex-end;
	gap: .65rem;
	text-decoration: none;
	color: inherit;
	width: max-content;
}

.odin-wordmark strong {
	font-size: 1.9rem;
	font-weight: 800;
	letter-spacing: -.04em;
	line-height: .9;
	color: #fdfbf7;
}

.odin-wordmark small {
	display: block;
	margin-top: .3rem;
	font-size: .58rem;
	font-weight: 600;
	letter-spacing: .34em;
	color: var(--odin-orange);
}

/* icono de señal del logo, dibujado en CSS */
.odin-mark {
	position: relative;
	width: 34px;
	height: 28px;
	flex: none;
	margin-bottom: .95rem;
}

.odin-mark::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 7px;
	height: 7px;
	margin-left: -3.5px;
	border-radius: 50%;
	background: var(--odin-orange);
}

.odin-mark span {
	position: absolute;
	left: 50%;
	bottom: -4px;
	border: 3px solid transparent;
	border-top-color: var(--odin-orange);
	border-radius: 50%;
}

.odin-mark span:nth-child(1) { width: 20px; height: 20px; margin-left: -10px; }
.odin-mark span:nth-child(2) { width: 33px; height: 33px; margin-left: -16.5px; opacity: .85; }

/* bloque hero */
.odin-hero { max-width: 34rem; }

.odin-eyebrow {
	display: inline-block;
	padding: .3rem .85rem;
	border: 1px solid var(--odin-line-dark);
	border-radius: 999px;
	font-size: .6rem;
	font-weight: 600;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: rgba(247, 243, 236, .72);
	margin-bottom: 1.4rem;
	backdrop-filter: none;
}

.odin-hero h1 {
	font-size: clamp(2rem, 3.4vw, 3.1rem);
	font-weight: 600;
	letter-spacing: -.035em;
	line-height: 1.08;
	text-wrap: balance;
	color: #fdfbf7;
}

.odin-hero h1 em {
	font-style: normal;
	color: var(--odin-orange);
}

.odin-hero p {
	margin-top: 1.1rem;
	font-size: .92rem;
	font-weight: 300;
	line-height: 1.65;
	color: rgba(247, 243, 236, .62);
	max-width: 28rem;
}

.odin-feats {
	list-style: none;
	margin-top: 2.2rem;
	display: grid;
	gap: .8rem;
}

.odin-feats li {
	display: flex;
	align-items: center;
	gap: .75rem;
	font-size: .84rem;
	font-weight: 400;
	color: rgba(247, 243, 236, .78);
}

.odin-feats li::before {
	content: '';
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--odin-orange);
	box-shadow: 0 0 0 4px var(--odin-orange-soft);
}

/* pie del panel */
.odin-brand-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-size: .68rem;
	letter-spacing: .08em;
	color: rgba(247, 243, 236, .40);
}

/* ---- Panel de formulario (derecha, claro) ------------------------------ */

.odin-form-panel {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1.25rem, 4vw, 4rem);
	background: var(--odin-paper);
}

/* doble bisel: bandeja exterior + tarjeta interior concentrica */
.odin-shell {
	width: 100%;
	max-width: 27.5rem;
	padding: .55rem;
	border-radius: var(--r-outer);
	background: rgba(30, 25, 17, .035);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, .7), 0 0 0 1px var(--odin-line);
	animation: odin-rise .8s var(--ease-soft) both;
}

.odin-card {
	background: var(--odin-card);
	border-radius: var(--r-inner);
	padding: clamp(1.75rem, 3.2vw, 2.75rem);
	box-shadow:
		0 1px 2px rgba(42, 32, 16, .05),
		0 24px 60px -24px rgba(42, 32, 16, .18);
}

@keyframes odin-rise {
	from { opacity: 0; transform: translateY(22px); filter: blur(6px); }
	to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* logo real (negro+naranja) sobre fondo claro */
.logo-container { margin-bottom: 1.9rem; }
.logo-container img { height: 52px; width: auto; display: block; }

.login-title {
	font-size: 1.45rem;
	font-weight: 600;
	letter-spacing: -.025em;
	color: var(--odin-ink);
	margin-bottom: .35rem;
}

.login-subtitle {
	font-size: .84rem;
	font-weight: 300;
	color: var(--odin-muted);
	margin-bottom: 1.9rem;
}

/* ---- Campos ------------------------------------------------------------ */

.form-group { margin-bottom: 1.15rem; }

.form-group label {
	display: block;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--odin-muted);
	margin-bottom: .45rem;
}

.odin-card .form-control {
	width: 100%;
	height: auto;
	background: var(--odin-paper);
	border: 1px solid var(--odin-line);
	border-radius: var(--r-field);
	padding: .85rem 1.05rem;
	font-family: inherit;
	font-size: .92rem;
	color: var(--odin-text);
	transition: border-color .45s var(--ease-soft), box-shadow .45s var(--ease-soft), background-color .45s var(--ease-soft);
}

.odin-card .form-control::placeholder { color: #b9b2a6; font-weight: 300; }

.odin-card .form-control:hover { border-color: rgba(30, 25, 17, .24); }

.odin-card .form-control:focus {
	outline: none;
	background: #fff;
	border-color: var(--odin-orange);
	box-shadow: 0 0 0 4px var(--odin-orange-soft);
	color: var(--odin-ink);
}

/* autocompletar del navegador sin amarillo */
.odin-card .form-control:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px #fff inset;
	-webkit-text-fill-color: var(--odin-text);
}

/* ---- Mensajes de error (misma clase .errortxt del PHP) ----------------- */

.errortxt {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	margin: .35rem 0 .9rem;
	padding: .7rem .95rem;
	font-size: .8rem;
	line-height: 1.45;
	color: var(--odin-error);
	background: var(--odin-error-bg);
	border: 1px solid rgba(194, 61, 49, .22);
	border-radius: var(--r-field);
	animation: odin-rise .5s var(--ease-soft) both;
}

/* ---- Boton ------------------------------------------------------------- */

.btn-login {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	width: 100%;
	margin-top: .6rem;
	padding: .55rem .55rem .55rem 1.4rem;
	background: var(--odin-ink);
	color: #fdfbf7;
	border: none;
	border-radius: 999px;
	font-family: inherit;
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: .01em;
	cursor: pointer;
	transition: transform .45s var(--ease-soft), box-shadow .45s var(--ease-soft), background-color .45s var(--ease-soft);
	box-shadow: 0 14px 30px -14px rgba(13, 12, 10, .55);
}

/* icono anidado: boton dentro del boton */
.btn-login .btn-login__ico {
	flex: none;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: var(--odin-orange);
	color: var(--odin-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.05rem;
	font-weight: 400;
	transition: transform .45s var(--ease-soft), background-color .45s var(--ease-soft);
}

.btn-login:hover {
	background: #1d1a15;
	transform: translateY(-1px);
	box-shadow: 0 18px 34px -14px rgba(233, 111, 0, .45);
}

.btn-login:hover .btn-login__ico { transform: translateX(3px); background: var(--odin-orange-deep); color: #fff; }

.btn-login:active { transform: translateY(0) scale(.985); }

.btn-login:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px var(--odin-orange-soft), 0 0 0 1px var(--odin-orange);
}

/* pie de la tarjeta */
.odin-card-foot {
	margin-top: 1.6rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--odin-line);
	font-size: .68rem;
	letter-spacing: .06em;
	color: var(--odin-muted);
	text-align: center;
}

/* ---- Responsive: colapso mobile-first ----------------------------------- */

@media (max-width: 991.98px) {
	.odin-login { grid-template-columns: 1fr; }

	.odin-brand {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 1rem;
		padding: 1.1rem 1.25rem;
		min-height: 0;
	}

	.odin-brand::after,
	.odin-hero,
	.odin-brand-foot { display: none; }

	.odin-wordmark strong { font-size: 1.35rem; }
	.odin-wordmark small { letter-spacing: .28em; }
	.odin-mark { width: 26px; height: 22px; margin-bottom: .7rem; }
	.odin-mark span:nth-child(1) { width: 15px; height: 15px; margin-left: -7.5px; }
	.odin-mark span:nth-child(2) { width: 25px; height: 25px; margin-left: -12.5px; }

	.odin-form-panel {
		align-items: flex-start;
		padding: 1.5rem 1rem 2.5rem;
	}

	.odin-shell { margin-top: 1rem; }
	.logo-container img { height: 44px; }
}

@media (max-width: 575.98px) {
	.odin-card { padding: 1.5rem 1.15rem; }
	.login-title { font-size: 1.25rem; }
}

/* pantallas muy anchas: que el panel oscuro no engulla el layout */
@media (min-width: 1700px) {
	.odin-login { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

/* ---- Accesibilidad ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.odin-shell, .errortxt { animation: none; }
	.btn-login, .btn-login .btn-login__ico, .odin-card .form-control { transition: none; }
}