/* ===== RESET ===== */
*{margin:0;padding:0;box-sizing:border-box}
:root{ --topbar-h: 100px; }              /* ← altura de la barra (ajústala) */
html,body{height:100%;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;overflow:hidden}  /* sin scroll en desktop */

/* ===== TOPBAR ===== */
.topbar{
  height:var(--topbar-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;border-bottom:1px solid #e5e7eb;background:#fff
}
.topbar .brand{display:flex;align-items:center}
.topbar .brand img{
  height:calc(var(--topbar-h) - 12px) !important;   /* ← LOGO GRANDE */
  max-height:none !important;
  width:auto;display:block;object-fit:contain;
}
.topbar .topnav a{color:#0b69d1;text-decoration:none;font-weight:700;margin-left:16px}

/* ===== CONTENEDOR PRINCIPAL ===== */
.login-split{
  display:flex;height:calc(100vh - var(--topbar-h));
  overflow:hidden;flex-wrap:wrap
}

/* ===== LADO IZQUIERDO ===== */
.login-left{
  flex:1;min-width:300px;
  background:url('../images/Nueva_para_login.png') center center no-repeat;
  background-size:cover;height:100%
}

/* ===== LADO DERECHO ===== */
.login-right{
  flex:1;min-width:300px;display:flex;justify-content:center;align-items:flex-start;
  background:#fff;height:100%;padding:20px;overflow-y:auto  /* si el form crece */
}

/* ===== CAJA FORM ===== */
.login-box{width:400px;max-width:100%;text-align:center;margin-top:20px}

/* ===== LOGO CENTRAL (form) ===== */
.login-logo{
  width:100%;max-width:520px;margin:0 auto 24px;display:block;opacity:0;
  transform:translateX(-100%) scale(1.3);
  animation:fadeSlideIn .8s ease-out .2s forwards
}

/* ===== TÍTULO / INPUTS / BOTÓN ===== */
.login-title{font-size:1.6em;color:#908888;margin-bottom:24px}
.login-form input{width:100%;padding:12px 10px;margin-bottom:16px;border:1px solid #ccc;border-radius:6px;font-size:1em}
.login-form button{width:40%;padding:7px;background:#007BFF;color:#fff;font-size:1em;border:none;border-radius:6px;cursor:pointer;transition:background .2s}
.login-form button:hover{background:#0056b3}
.login-forgot{display:inline-block;margin-top:16px;font-size:.9em;color:#007BFF;text-decoration:none}
.login-forgot:hover{text-decoration:underline}

/* ===== ANIM ===== */
@keyframes fadeSlideIn{from{opacity:0;transform:translateX(-100%) scale(1.3)}to{opacity:1;transform:translateX(0) scale(1)}}

/* ===== RESPONSIVE ===== */
@media (max-width:900px){
  html,body{overflow:auto}                 /* permitir scroll en móvil */
  .topbar{height:72px}
  .topbar .brand img{height:64px !important}
  .login-split{flex-direction:column;height:auto}
  .login-left,.login-right{flex:none;width:100%;height:300px}
  .login-right{height:auto;padding:40px 20px}
  .login-box{width:100%;max-width:400px;margin:0 auto}
  .login-form button{width:100%}
}
@media (max-width:400px){.login-box{padding:0 10px}}