/* ====== Paleta y tokens (AdminLTE skin-blue) ====== */
:root{
  --brand-primary: #3c8dbc;      /* navbar/btn primary */
  --brand-primary-dark: #367fa9; /* hover */
  --brand-accent: #00c0ef;       /* info/acento */
  --text: #333;
  --muted: #777;
  --bg-page: #ecf0f5;            /* background de login/dashboard AdminLTE */
  --card-bg: #fff;
  --card-shadow: 0 3px 8px rgba(0,0,0,.08);
  --radius: 6px;                 /* radios más rectos como AdminLTE */
  --radius-lg: 10px;
  --focus: rgba(60,141,188,.35);
}

/* ====== Reset mínimo para que no “peleen” estilos ====== */
html,body{height:100%;}
body{background:var(--bg-page); font-family:"Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;}

/* ====== Contenedor ====== */
.login-new{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:24px 12px;
  background: var(--bg-page);
}

.login-container{
  width:100%; max-width:920px; min-height:520px;
  background:var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  display:flex; flex-direction:row;
  overflow:hidden;
  border: 1px solid #d2d6de; /* mismo borde sutil de AdminLTE */
}

/* ====== Columna izquierda (form) ====== */
.login-form-section{
  flex:1 1 0;
  padding:40px 32px;
  display:flex; flex-direction:column; justify-content:center;
  background: var(--card-bg);
}

.login-brand{
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.logo-buap{ width:44px; height:44px; object-fit:contain; }
.brand-title{
  font-weight:600; font-size:18px; color: var(--brand-primary);
  letter-spacing:.2px;
}

/* Texto */
.login-title{
  font-size:26px; font-weight:600; color:var(--text); margin:0 0 6px;
}
.login-subtitle{
  color:var(--muted); font-size:14px; margin:0 0 22px;
}

/* Form */
.login-form{ width:100%; display:flex; flex-direction:column; gap:14px; }

.form-group{ position:relative; }
.form-group label{
  display:block; font-size:13px; color:var(--brand-primary); font-weight:600; margin-bottom:6px;
}

.form-control{
  display:block; width:100%;
  padding:10px 12px;
  border:1px solid #d2d6de;
  border-radius: var(--radius);
  background:#fff;
  color:#555;
  box-shadow:none;
  transition: border-color .15s, box-shadow .15s;
  font-size:14px;
}
.form-control:focus{
  border-color: var(--brand-primary);
  outline:0;
  box-shadow: 0 0 0 3px var(--focus);
}
.form-control.is-invalid{ border-color:#dd4b39; }
.invalid-feedback{ color:#dd4b39; font-size:12.5px; margin-top:4px; }

/* Mostrar/ocultar contraseña */
.show-password{
  position:absolute; right:8px; top:31px;
  border:0; background:transparent; color:var(--brand-primary);
  cursor:pointer; padding:4px 6px; line-height:1;
}
.show-password .fallback-text{ font-size:12.5px; margin-left:6px; color:var(--muted); }

/* Links auxiliares */
.form-links{ text-align:right; margin-top:-2px; }
.form-links a{ color: var(--brand-primary); text-decoration:underline; font-size:13px; }
.form-links a:hover{ color: var(--brand-primary-dark); }

/* Botón principal, mismo tono AdminLTE */
.btn-login{
  display:inline-block; width:100%;
  padding:10px 12px;
  background: var(--brand-primary);
  color:#fff; border:1px solid #367fa9;
  border-radius: var(--radius);
  font-size:15px; font-weight:600;
  transition: background .15s, transform .12s, box-shadow .15s;
}
.btn-login:hover{ background: var(--brand-primary-dark); }
.btn-login:active{ transform: translateY(1px); }
.btn-login:disabled{ opacity:.75; cursor:not-allowed; }

/* Mensaje inferior (soporte) */
.form-register{
  text-align:center; margin-top:8px; color:var(--muted); font-size:13.5px;
}
.form-register a{ color: var(--brand-primary); font-weight:600; }
.form-register a:hover{ color: var(--brand-primary-dark); }

/* ====== Columna derecha (ilustración) en estilo AdminLTE ====== */
.login-illustration-section{
  flex:1 1 0;
  background: #f7fafc; /* sin degradés para que se sienta AdminLTE */
  border-left: 1px solid #e1e5ea;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:32px 24px;
}
.welcome-message{ text-align:center; margin-bottom:16px; }
.welcome-message h2{
  font-size:20px; font-weight:600; color:var(--brand-primary); margin:0 0 4px;
}
.welcome-message p{ color:var(--muted); margin:0; font-size:14px; }

.login-illustration{
  width:100%; max-width:360px; border-radius: var(--radius);
}

/* Loader, alertas muy AdminLTE */
.loader{ padding:8px; color:#888; font-size:13px; }
.alert{ border-radius: var(--radius); }

/* ====== Responsive ====== */
@media (max-width: 780px){
  .login-container{ flex-direction:column; min-height:auto; }
  .login-illustration-section{ order:-1; border-left:0; border-bottom:1px solid #e1e5ea; }
}