/* ═══════════════════════════════════════════════════════════════
   VisionCore · Login — Corporativo Minimalista
   Paleta principal:
     Fondo    : #f0f4f8  (gris azulado muy claro)
     Card     : #ffffff
     Acento   : #2d7d46  (verde corporativo)
     Acento 2 : #1a5c32  (verde oscuro hover)
     Texto    : #1e293b  (slate-800)
     Texto 2  : #64748b  (slate-500)
     Borde    : #e2e8f0  (slate-200)
   ═══════════════════════════════════════════════════════════════ */

/* ── Google Font Inter (si no está cargada en el layout) ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Base ── */
body.login-page {
	margin: 0;
	min-height: 100vh;
	background-color: #eaf2ee;
	background-image:
		/* Patrón médico SVG — cruces, pulso, ojo estilizado */
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cdefs%3E%3Cstyle%3E.med%7Bfill:none;stroke:%232d7d46;stroke-linecap:round;stroke-linejoin:round%7D%3C/style%3E%3C/defs%3E%3C!-- Cruz médica --%3E%3Crect class='med' x='88' y='78' width='24' height='44' rx='3' opacity='.06' stroke-width='1.2'/%3E%3Crect class='med' x='78' y='88' width='44' height='24' rx='3' opacity='.06' stroke-width='1.2'/%3E%3C!-- Pulso cardíaco --%3E%3Cpolyline class='med' points='10,100 30,100 38,85 46,115 54,92 62,100 80,100' opacity='.05' stroke-width='1.2'/%3E%3C!-- Ojo estilizado --%3E%3Cellipse class='med' cx='155' cy='40' rx='22' ry='13' opacity='.05' stroke-width='1'/%3E%3Ccircle class='med' cx='155' cy='40' r='6' opacity='.05' stroke-width='1'/%3E%3C!-- Molécula / nodos --%3E%3Ccircle class='med' cx='40' cy='160' r='5' opacity='.04' stroke-width='1'/%3E%3Ccircle class='med' cx='60' cy='148' r='3.5' opacity='.04' stroke-width='1'/%3E%3Cline class='med' x1='44' y1='157' x2='57' y2='150' opacity='.04' stroke-width='1'/%3E%3Ccircle class='med' cx='30' cy='145' r='3' opacity='.04' stroke-width='1'/%3E%3Cline class='med' x1='36' y1='157' x2='32' y2='148' opacity='.04' stroke-width='1'/%3E%3C!-- Hexágono (bioquímica) --%3E%3Cpolygon class='med' points='160,155 172,162 172,176 160,183 148,176 148,162' opacity='.04' stroke-width='1'/%3E%3C/svg%3E"),
		/* Gradientes suaves de profundidad */
		radial-gradient(ellipse 80% 60% at 10% 90%,  rgba(45,125,70,.12) 0%, transparent 55%),
		radial-gradient(ellipse 70% 55% at 90% 10%,  rgba(34,100,120,.09) 0%, transparent 55%),
		radial-gradient(ellipse 50% 50% at 50% 50%,  rgba(45,125,70,.04) 0%, transparent 70%),
		radial-gradient(ellipse 40% 40% at 75% 80%,  rgba(72,187,120,.06) 0%, transparent 50%),
		radial-gradient(ellipse 45% 35% at 20% 20%,  rgba(56,142,60,.05) 0%, transparent 50%);
	background-attachment: fixed;
	font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
	overflow: auto;
}

/* ── Capa de malla con gradiente animado sutil ── */
body.login-page::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		/* Cuadrícula sutil */
		linear-gradient(rgba(45,125,70,.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(45,125,70,.025) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 70%);
	-webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 70%);
}

/* ── Línea decorativa superior (barra de marca) ── */
body.login-page::after {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #2d7d46 0%, #48bb78 40%, #38a169 60%, #2d7d46 100%);
	z-index: 100;
}

/* ── Login box ── */
.login-box {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 420px;
}

/* ── Card ── */
.login-box .card {
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	background: #ffffff;
	box-shadow:
		0 1px 3px rgba(0,0,0,.06),
		0 8px 32px rgba(0,0,0,.08),
		0 20px 60px rgba(0,0,0,.05);
	overflow: hidden;
}

.login-box .card.card-outline.card-success {
	border-top: 3px solid #2d7d46;
}

/* ── Header con logo ── */
.login-box .card-header {
	background: #fafbfc;
	border-bottom: 1px solid #f1f5f9;
	padding: 2rem 2rem 1.25rem;
}

/* ── Body ── */
.login-box .login-card-body {
	background: #ffffff;
	padding: 1.75rem 2rem 2rem;
}

/* ── Títulos ── */
.login-box .login-title {
	color: #1e293b;
	font-weight: 700;
	font-size: 1.2rem;
	margin-bottom: .2rem;
	letter-spacing: -.01em;
}

.login-box .login-subtitle {
	color: #94a3b8;
	font-size: .83rem;
	margin-bottom: 1.6rem;
}

/* ── Divisor ── */
.login-box .login-divider {
	height: 1px;
	background: linear-gradient(90deg, transparent, #e2e8f0 30%, #e2e8f0 70%, transparent);
	margin-bottom: 1.4rem;
}

/* ── Labels flotantes ── */
.login-box .form-label-static {
	display: block;
	font-size: .78rem;
	font-weight: 600;
	color: #475569;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-bottom: .35rem;
}

/* ── Inputs (sin form-floating, diseño propio) ── */
.login-box .login-input-wrap {
	position: relative;
	margin-bottom: 1.1rem;
}

.login-box .login-input-wrap--icon-left .login-input {
	padding-left: 2.6rem;
}

.login-box .login-input {
	width: 100%;
	height: 46px;
	padding: 0 2.75rem 0 .9rem;
	background: #f8fafc;
	border: 1.5px solid #e2e8f0;
	border-radius: 10px;
	color: #1e293b;
	font-size: .92rem;
	font-family: inherit;
	transition: border-color .2s, box-shadow .2s, background .2s;
	outline: none;
	box-sizing: border-box;
}

.login-box .login-input::placeholder {
	color: #c1cdd8;
	font-size: .88rem;
}

.login-box .login-input:focus {
	background: #fff;
	border-color: #2d7d46;
	box-shadow: 0 0 0 3px rgba(45,125,70,.12);
}

/* ── Ícono a la izquierda ── */
.login-box .login-input-icon-left {
	position: absolute;
	left: .85rem;
	top: calc(50% + .55rem);
	transform: translateY(-50%);
	color: #b0bec5;
	font-size: 1.05rem;
	pointer-events: none;
	transition: color .2s;
}
.login-box .login-input-wrap:focus-within .login-input-icon-left {
	color: #2d7d46;
}

/* ── Check de validación (derecha) ── */
.login-box .login-input-check {
	position: absolute;
	right: .85rem;
	top: calc(50% + .55rem);
	transform: translateY(-50%) scale(0);
	color: #2d7d46;
	font-size: .95rem;
	pointer-events: none;
	transition: transform .2s cubic-bezier(.34,1.56,.64,1), opacity .2s;
	opacity: 0;
}
.login-box .login-input-wrap.is-valid .login-input-check {
	transform: translateY(-50%) scale(1);
	opacity: 1;
}

/* ── Estados de validación inline ── */
.login-box .login-input-wrap.is-valid .login-input {
	border-color: #2d7d46;
}
.login-box .login-input-wrap.is-invalid .login-input {
	border-color: #e57373;
}
.login-box .login-input-wrap.is-invalid .login-input:focus {
	box-shadow: 0 0 0 3px rgba(229,115,115,.15);
}

/* ── Caps Lock warning ── */
.login-caps-warn {
	display: flex;
	align-items: center;
	gap: .35rem;
	font-size: .75rem;
	color: #d97706;
	margin-top: .35rem;
	padding: .25rem .5rem;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 6px;
	animation: capsWarnIn .2s ease both;
}
@keyframes capsWarnIn {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Meta row (helper + link) ── */
.login-box .login-meta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: .1rem;
}

/* ── Botón toggle contraseña ── */
.login-box .password-toggle {
	position: absolute;
	right: .75rem;
	top: calc(50% + .55rem);
	transform: translateY(-50%);
	background: none;
	border: none;
	padding: .25rem;
	color: #c1cdd8;
	cursor: pointer;
	line-height: 1;
	transition: color .18s;
}
.login-box .password-toggle:hover,
.login-box .password-toggle:focus {
	color: #2d7d46;
	outline: none;
}

/* ── Checkbox & Recordarme ── */
.login-box .form-check-label {
	color: #64748b;
	font-size: .83rem;
	cursor: pointer;
}
.login-box .form-check-input {
	width: 15px;
	height: 15px;
	border: 1.5px solid #cbd5e1;
	background-color: #f8fafc;
	cursor: pointer;
	transition: border-color .15s, background .15s;
}
.login-box .form-check-input:checked {
	background-color: #2d7d46;
	border-color: #2d7d46;
}
.login-box .form-check-input:focus {
	box-shadow: 0 0 0 3px rgba(45,125,70,.15);
}

/* ── Texto helper ── */
.login-box .helper-text {
	font-size: .76rem;
	color: #94a3b8;
	display: flex;
	align-items: center;
	gap: .3rem;
	margin-bottom: 0;
}
.login-box .helper-text .bi {
	color: #2d7d46;
	font-size: .9rem;
}

/* ── Botón ingresar ── */
.login-box .btn-login {
	width: 100%;
	height: 46px;
	background: #2d7d46;
	border: none;
	border-radius: 10px;
	color: #fff;
	font-weight: 600;
	font-size: .92rem;
	letter-spacing: .02em;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	cursor: pointer;
	transition: background .18s, transform .12s, box-shadow .18s;
	margin-top: 1.4rem;
}
.login-box .btn-login:hover {
	background: #1a5c32;
	box-shadow: 0 4px 16px rgba(45,125,70,.25);
	transform: translateY(-1px);
}
.login-box .btn-login:active {
	transform: translateY(0);
	box-shadow: none;
}
.login-box .btn-login:disabled {
	background: #81c99a;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* ── Alerta inline JS ── */
.login-box .login-alert {
	display: flex;
	align-items: center;
	gap: .5rem;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 8px;
	color: #b91c1c;
	font-size: .83rem;
	padding: .6rem .9rem;
	margin-bottom: 1rem;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .22s ease, transform .22s ease;
}
.login-box .login-alert.login-alert-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ── Alerta PHP (alert-danger Bootstrap) ── */
.login-box .alert.alert-danger {
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 8px;
	color: #b91c1c;
	font-size: .83rem;
	padding: .6rem .9rem;
	margin-top: .85rem;
}

/* ── Footer de la card ── */
.login-box .login-footer-text {
	text-align: center;
	font-size: .7rem;
	color: #cbd5e1;
	margin-top: 1.6rem;
	margin-bottom: 0;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* ── Animación de entrada ── */
@keyframes cardFadeIn {
	from {
		opacity: 0;
		transform: translateY(18px) scale(.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}
.login-card-animate {
	animation: cardFadeIn .5s cubic-bezier(.22,.68,0,1.15) both;
}

/* ── Shake en error ── */
@keyframes loginShake {
	0%   { transform: translateX(0); }
	18%  { transform: translateX(-6px); }
	36%  { transform: translateX(6px); }
	54%  { transform: translateX(-4px); }
	72%  { transform: translateX(4px); }
	90%  { transform: translateX(-2px); }
	100% { transform: translateX(0); }
}
.login-shake {
	animation: loginShake .4s ease both;
}

/* ── Responsive ── */
@media (max-width: 480px) {
	.login-box .login-card-body {
		padding: 1.4rem 1.4rem 1.75rem;
	}
	.login-box .card-header {
		padding: 1.5rem 1.4rem 1rem;
	}
}

/* ═══════════════════════════════════════════════════════════════
   LOGIN BACKGROUND – Formas decorativas flotantes
   ═══════════════════════════════════════════════════════════════ */

/* ── Contenedor de formas ── */
.login-bg-shapes {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

/* ── Blobs (manchas suaves) ── */
.login-bg-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: .35;
	will-change: transform;
}

.login-bg-blob--1 {
	width: 420px;
	height: 420px;
	background: radial-gradient(circle, rgba(45,125,70,.22), rgba(72,187,120,.08));
	top: -8%;
	right: -5%;
	animation: blobFloat1 18s ease-in-out infinite;
}

.login-bg-blob--2 {
	width: 340px;
	height: 340px;
	background: radial-gradient(circle, rgba(34,100,120,.18), rgba(56,178,172,.06));
	bottom: -5%;
	left: -3%;
	animation: blobFloat2 22s ease-in-out infinite;
}

.login-bg-blob--3 {
	width: 250px;
	height: 250px;
	background: radial-gradient(circle, rgba(45,125,70,.12), rgba(129,201,154,.06));
	top: 55%;
	right: 10%;
	animation: blobFloat3 20s ease-in-out infinite;
}

.login-bg-blob--4 {
	width: 180px;
	height: 180px;
	background: radial-gradient(circle, rgba(56,142,60,.14), rgba(76,175,80,.04));
	top: 15%;
	left: 8%;
	animation: blobFloat4 16s ease-in-out infinite;
}

.login-bg-blob--5 {
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, rgba(45,125,70,.08), rgba(200,230,210,.05));
	top: 35%;
	left: 50%;
	transform: translateX(-50%);
	animation: blobFloat5 24s ease-in-out infinite;
}

/* ── Rings (anillos decorativos) ── */
.login-bg-ring {
	position: absolute;
	border-radius: 50%;
	border: 1.5px solid rgba(45,125,70,.08);
	will-change: transform;
}

.login-bg-ring--1 {
	width: 500px;
	height: 500px;
	top: -12%;
	left: -8%;
	animation: ringRotate1 40s linear infinite;
}

.login-bg-ring--2 {
	width: 350px;
	height: 350px;
	bottom: -8%;
	right: -6%;
	border-style: dashed;
	border-color: rgba(45,125,70,.06);
	animation: ringRotate2 35s linear infinite;
}

/* ── Animaciones de blobs ── */
@keyframes blobFloat1 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	25%      { transform: translate(-30px, 20px) scale(1.05); }
	50%      { transform: translate(-15px, 40px) scale(.97); }
	75%      { transform: translate(20px, 15px) scale(1.03); }
}

@keyframes blobFloat2 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	25%      { transform: translate(25px, -15px) scale(1.04); }
	50%      { transform: translate(40px, -30px) scale(.96); }
	75%      { transform: translate(10px, -20px) scale(1.02); }
}

@keyframes blobFloat3 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	33%      { transform: translate(-20px, -25px) scale(1.06); }
	66%      { transform: translate(15px, 20px) scale(.95); }
}

@keyframes blobFloat4 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	30%      { transform: translate(18px, 22px) scale(1.08); }
	60%      { transform: translate(-12px, 10px) scale(.98); }
}

@keyframes blobFloat5 {
	0%, 100% { transform: translateX(-50%) scale(1); }
	50%      { transform: translateX(-50%) translateY(-20px) scale(1.04); }
}

/* ── Animaciones de rings ── */
@keyframes ringRotate1 {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

@keyframes ringRotate2 {
	from { transform: rotate(360deg); }
	to   { transform: rotate(0deg); }
}

/* ── En pantallas pequeñas reducir las formas ── */
@media (max-width: 768px) {
	.login-bg-blob--1 { width: 250px; height: 250px; }
	.login-bg-blob--2 { width: 200px; height: 200px; }
	.login-bg-blob--3 { width: 150px; height: 150px; }
	.login-bg-blob--4 { width: 100px; height: 100px; }
	.login-bg-blob--5 { display: none; }
	.login-bg-ring--1 { width: 300px; height: 300px; }
	.login-bg-ring--2 { display: none; }
}

/* ── Respetar preferencia de movimiento reducido ── */
@media (prefers-reduced-motion: reduce) {
	.login-bg-blob,
	.login-bg-ring {
		animation: none !important;
	}
}