/* ============================================================
   ESTILOS EXCLUSIVOS — PÁGINA DE INICIO DE SESIÓN (LOGIN)
============================================================ */

/* Animaciones de entrada */
@keyframes loginPanelIn {
   from { opacity: 0; transform: translateX(-24px); }
   to   { opacity: 1; transform: translateX(0); }
}

@keyframes loginFormIn {
   from { opacity: 0; transform: translateY(20px); }
   to   { opacity: 1; transform: translateY(0); }
}

@keyframes loginFeatureIn {
   from { opacity: 0; transform: translateX(-12px); }
   to   { opacity: 1; transform: translateX(0); }
}

.auth-wrap {
   min-height: 100vh;
   display: flex;
}

/* Panel Izquierdo Informativo */
.auth-info {
   flex: 1 1 55%;
   background: linear-gradient(145deg, #3730A3 0%, #4F46E5 35%, #6366F1 65%, #7C3AED 100%);
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding: 56px 64px;
   color: #fff;
   overflow: hidden;
   animation: loginPanelIn 0.6s ease both;
}

/* Textura de fondo: orbes de luz + rejilla sutil */
.auth-info::before {
   content: '';
   position: absolute;
   inset: 0;
   background-image:
      radial-gradient(circle at 12% 10%, rgba(167, 139, 250, 0.45), transparent 40%),
      radial-gradient(circle at 85% 80%, rgba(99, 102, 241, 0.35), transparent 45%),
      radial-gradient(circle at 70% 15%, rgba(139, 92, 246, 0.25), transparent 35%),
      linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
   background-size: auto, auto, auto, 36px 36px, 36px 36px;
   pointer-events: none;
}

.auth-info>* {
   position: relative;
   z-index: 1;
}

.auth-brand {
   display: flex;
   align-items: center;
   gap: 12px;
}

.auth-brand-icon {
   width: 40px;
   height: 40px;
   background: linear-gradient(135deg, var(--ud-secondary), var(--ud-primary));
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   color: #fff;
   flex-shrink: 0;
}

.auth-brand-text {
   font-family: 'Sora', sans-serif;
   font-weight: 700;
   font-size: 20px;
   color: #fff;
   letter-spacing: -0.3px;
}

.auth-info-body {
   max-width: 460px;
   margin: auto 0;
}

.auth-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: #C4B5FD;
   background: rgba(196, 181, 253, 0.12);
   border: 1px solid rgba(196, 181, 253, 0.25);
   padding: 6px 12px;
   border-radius: 20px;
   margin-bottom: 24px;
}

.auth-info-body h1 {
   font-size: 33px;
   font-weight: 700;
   line-height: 1.25;
   color: #fff;
   margin-bottom: 16px;
}

.auth-info-body h1 span {
   color: #C4B5FD;
}

.auth-info-body p {
   color: rgba(255, 255, 255, 0.75);
   font-size: 15px;
   line-height: 1.7;
   margin-bottom: 36px;
}

.auth-feature-list {
   display: flex;
   flex-direction: column;
   gap: 18px;
}

.auth-feature {
   display: flex;
   align-items: flex-start;
   gap: 14px;
   animation: loginFeatureIn 0.5s ease both;
   transition: transform var(--ud-transition);
}

.auth-feature:nth-child(1) { animation-delay: 0.3s; }
.auth-feature:nth-child(2) { animation-delay: 0.45s; }
.auth-feature:nth-child(3) { animation-delay: 0.60s; }

.auth-feature:hover {
   transform: translateX(4px);
}

.auth-feature-icon {
   width: 36px;
   height: 36px;
   flex-shrink: 0;
   border-radius: 9px;
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.15);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   color: #C4B5FD;
   transition: background var(--ud-transition), transform var(--ud-transition), border-color var(--ud-transition);
}

.auth-feature:hover .auth-feature-icon {
   background: rgba(196, 181, 253, 0.18);
   border-color: rgba(196, 181, 253, 0.3);
   transform: scale(1.10);
}

.auth-feature-text strong {
   display: block;
   color: #fff;
   font-size: 13.5px;
   font-weight: 600;
   margin-bottom: 2px;
}

.auth-feature-text span {
   color: rgba(255, 255, 255, 0.6);
   font-size: 12.5px;
}

.auth-footer-note {
   display: flex;
   align-items: center;
   gap: 10px;
   color: rgba(255, 255, 255, 0.55);
   font-size: 12px;
}

.auth-footer-note .avatars {
   display: flex;
}

.auth-footer-note .avatars span {
   width: 26px;
   height: 26px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.2);
   border: 2px solid rgba(255, 255, 255, 0.4);
   margin-left: -8px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 10px;
   font-weight: 600;
   color: #fff;
}

.auth-footer-note .avatars span:first-child {
   margin-left: 0;
}

/* Panel Derecho del Formulario */
.auth-form-panel {
   flex: 1 1 45%;
   background: var(--ud-surface);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 48px;
   animation: loginFormIn 0.6s 0.15s ease both;
}

.auth-form-box {
   width: 100%;
   max-width: 380px;
}

.auth-form-head {
   margin-bottom: 32px;
}

.auth-form-head h2 {
   font-size: 24px;
   font-weight: 700;
   color: var(--ud-text);
   margin-bottom: 6px;
}

.auth-form-head p {
   color: var(--ud-text-muted);
   font-size: 13.5px;
   margin: 0;
}

.form-label-ud {
   font-size: 13px;
   font-weight: 600;
   color: var(--ud-text);
   margin-bottom: 6px;
   display: block;
}

.input-group-ud {
   position: relative;
   margin-bottom: 18px;
}

.input-group-ud .input-icon {
   position: absolute;
   left: 14px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--ud-text-light);
   font-size: 14px;
   pointer-events: none;
}

.form-control-ud {
   width: 100%;
   padding: 11px 14px 11px 40px;
   border: 1.5px solid var(--ud-border);
   border-radius: var(--ud-radius-sm);
   font-size: 13.5px;
   font-family: inherit;
   color: var(--ud-text);
   background: var(--ud-surface);
   transition: border-color var(--ud-transition), box-shadow var(--ud-transition), background var(--ud-transition);
}

.form-control-ud:focus {
   outline: none;
   border-color: var(--ud-primary);
   box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
   background: rgba(99, 102, 241, 0.02);
}

.input-group-ud .toggle-pass {
   position: absolute;
   right: 14px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--ud-text-light);
   font-size: 13px;
   cursor: pointer;
   background: none;
   border: none;
   padding: 4px;
}

.auth-row-between {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 24px;
}

.form-check-ud {
   display: flex;
   align-items: center;
   gap: 8px;
}

.form-check-ud input {
   width: 16px;
   height: 16px;
   accent-color: var(--ud-primary);
   cursor: pointer;
}

.form-check-ud label {
   font-size: 13px;
   color: var(--ud-text-muted);
   cursor: pointer;
   margin: 0;
}

.link-ud {
   font-size: 13px;
   color: var(--ud-primary);
   font-weight: 600;
   text-decoration: none;
}

.link-ud:hover {
   color: var(--ud-primary-dark);
   text-decoration: underline;
}

.btn-ud-primary {
   width: 100%;
   padding: 13px;
   border-radius: var(--ud-radius-sm);
   border: none;
   background: linear-gradient(135deg, #4F46E5, #6366F1, #8B5CF6);
   background-size: 200% 100%;
   color: #fff;
   font-size: 14px;
   font-weight: 600;
   font-family: inherit;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   transition: background-position var(--ud-transition-slow), transform var(--ud-transition), box-shadow var(--ud-transition);
   cursor: pointer;
   box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
   letter-spacing: 0.01em;
}

.btn-ud-primary:hover {
   background-position: 100% 0;
   box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45);
   transform: translateY(-1px);
}

.btn-ud-primary:active {
   transform: translateY(0) scale(0.99);
   box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}

.auth-divider {
   display: flex;
   align-items: center;
   gap: 12px;
   margin: 24px 0;
   color: var(--ud-text-light);
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

.auth-divider::before,
.auth-divider::after {
   content: '';
   height: 1px;
   background: var(--ud-border);
   flex: 1;
}

.btn-ud-sso {
   width: 100%;
   padding: 11px;
   border-radius: var(--ud-radius-sm);
   border: 1.5px solid var(--ud-border);
   background: var(--ud-surface);
   color: var(--ud-text);
   font-size: 13.5px;
   font-weight: 600;
   font-family: inherit;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   transition: border-color var(--ud-transition), background var(--ud-transition);
   cursor: pointer;
}

.btn-ud-sso:hover {
   border-color: var(--ud-primary);
   background: var(--ud-primary-light);
   color: var(--ud-primary-dark);
}

.btn-ud-sso i {
   font-size: 15px;
   color: var(--ud-primary);
}

.auth-signup-note {
   text-align: center;
   margin-top: 28px;
   font-size: 13px;
   color: var(--ud-text-muted);
}

.auth-alert {
   display: none;
   align-items: flex-start;
   gap: 10px;
   background: rgba(239, 68, 68, 0.08);
   border: 1px solid rgba(239, 68, 68, 0.25);
   color: var(--ud-danger);
   border-radius: var(--ud-radius-sm);
   padding: 11px 13px;
   font-size: 12.5px;
   margin-bottom: 18px;
}

.auth-alert.show {
   display: flex;
}