/* ============================================================
   VARIABLES Y RESET GLOBAL
   ============================================================ */
:root{
  --color-primary:black;
  --color-secondary:#6287b7;
  --color-accent:#fa9b35;
  --color-danger:#c22c2c;
  --color-text:#555;
  --color-muted:#999;
  --font-main:'Montserrat',sans-serif;

  --input-border:#e6e9ee;
  --input-border-focus:#cfcfcf;
  --input-bg-autofill:#e9eef6;
  --panel-padding:40px;
  --img-margin-right:20px;
  --img-vertical-gap:120px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:var(--font-main);
  background-color:#f0f2f5;
  color:var(--color-text);
}

/* ============================================================
   ESTRUCTURA PRINCIPAL
   ============================================================ */

.login-page .login-wrapper{
  display:flex;
  width:100%;
  height:100vh;
  background:#ffffff;
  box-shadow:0 12px 40px rgba(16,24,40,0.08);
}

/* ============================================================
   PANEL IZQUIERDO
   ============================================================ */

.login-page .panel-izquierdo{
  width:50%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:var(--panel-padding);
}

.login-page .panel-izquierdo img{
  max-width:96%;
  max-height:calc(100vh - var(--img-vertical-gap));
  object-fit:contain;
  margin-right:var(--img-margin-right);
  border-radius:6px;
  box-shadow:0 6px 18px rgba(16,24,40,0.04);
}

/* ============================================================
   PANEL DERECHO
   ============================================================ */

.login-page .panel-derecho{
  width:50%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-left:20px;
}

.login-page .panel-derecho h2{
  margin-bottom:20px;
  font-size:22px;
  color:#0f1724;
}

/* ============================================================
   FORMULARIO
   ============================================================ */

.login-page .login-form{
  display:flex;
  flex-direction:column;
  gap:18px;
  width:420px;
  max-width:100%;
}

.login-page .form-group{
  display:flex;
  flex-direction:column;
  gap:4px;
}

/* labels */
.login-page .form-label{
  font-size:15px;
  color:#475569;
}

/* inputs */
.login-page .form-input{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--input-border);
  border-radius:10px;
  background:#fff;
  font-size:15px;
  color:#0f1724;
  transition:box-shadow .12s ease,border-color .12s ease;
}

.login-page .form-input:focus{
  outline:none;
  border-color:var(--input-border-focus);
  box-shadow:0 0 0 4px rgba(207,207,207,0.12);
}

/* ============================================================
   AUTOFILL (QUITAR AMARILLO)
   ============================================================ */

.login-page .form-input:-webkit-autofill,
.login-page .form-input:-webkit-autofill:hover,
.login-page .form-input:-webkit-autofill:focus {
  -webkit-box-shadow:0 0 0 1000px var(--input-bg-autofill) inset;
  box-shadow:0 0 0 1000px var(--input-bg-autofill) inset;
  -webkit-text-fill-color:#0f1724;
  transition:background-color 5000s ease-in-out 0s;
}

/* ============================================================
   PASSWORD TOGGLE
   ============================================================ */

.password-wrapper{
  position:relative;
}

.password-wrapper .form-input{
  padding-right:44px;
}

.toggle-password{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.toggle-password svg{
  width:20px;
  height:20px;
  stroke:#999;
  transition:stroke .15s ease;
}

.toggle-password:hover svg{
  stroke:#666;
}

/* ============================================================
   ERRORES
   ============================================================ */

.login-page .form-error{
  color:var(--color-danger);
  font-size:13px;
  min-height:16px;
}

.login-page .form-error-global{
  background:#ffffff;
  border:1px solid #ffb3b3;
  padding:10px 12px;
  border-radius:8px;
  color:#c22c2c;
  font-size:14px;
}

/* ============================================================
   BOTÓN
   ============================================================ */

.login-page .btn-primary{
  padding:12px 14px;
  border-radius:10px;
  background:#0b0b0b;
  color:#fff;
  border:none;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(37,99,235,0.12);
  transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease;
}

.login-page .btn-primary:hover{
  background:var(--color-secondary);
  box-shadow:0 12px 30px rgba(15,23,42,0.25);
}

/* ============================================================
   ENLACE RESET
   ============================================================ */

.login-page .link-reset{
  margin-top:18px;
  font-size:14px;
}

.login-page .link-reset a{
  color:#89898a;
  text-decoration:none;
  font-weight:600;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:720px){
  .login-page .login-wrapper{flex-direction:column;height:auto;}
  .login-page .panel-izquierdo,.login-page .panel-derecho{width:100%;}
  .login-page .panel-izquierdo{padding:28px;justify-content:center;}
  .login-page .panel-izquierdo img{max-width:70%;margin-right:12px;}
  .login-page .panel-derecho{padding:20px;}
  .login-page .login-form{width:100%;max-width:420px;}
}