/* Pantalla de ingreso: foto a la izquierda y tarjeta a la derecha.
   La foto se aplica desde el template con {% static %}, para no tener que
   procesar este archivo como template de Django. */
.login-screen{position:fixed;inset:0;z-index:100;display:flex;background:var(--bg);}
.login-foto{flex:0 0 50%;background-size:cover;background-position:60% center;background-color:var(--jd-green-dark);}
.login-panel{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:24px 4%;overflow-y:auto;}
.login-logo{height:60px;width:auto;display:block;}
.login-card{background:var(--surface);border:1px solid var(--rule);box-shadow:0 4px 24px rgba(0,0,0,0.10);padding:32px 34px;width:360px;max-width:90vw;}
.login-card h1{font-family:'JD Sans Pro Next Cond Med','Archivo',sans-serif;font-weight:500;font-size:24px;margin:0 0 4px;color:var(--jd-green);}
.login-card>p{font-size:13px;color:var(--ink-soft);margin:0 0 20px;}
.login-tabs{display:flex;border:1px solid var(--ink);margin-bottom:18px;}
.login-tabs button{flex:1;background:var(--surface);border:none;padding:9px;font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;}
.login-tabs button.active{background:var(--ink);color:#fff;}
.login-card label{display:block;font-size:12px;color:var(--ink-soft);margin:12px 0 6px;}
.login-card select, .login-card input{width:100%;padding:9px 10px;border:1px solid var(--rule);background:var(--bg);font-family:'Inter',sans-serif;font-size:13px;color:var(--ink);}
.login-error{color:var(--danger);font-size:12px;margin:8px 0 0;}
.login-card .btn{width:100%;margin-top:18px;}

/* El boton vive en app.css, que esta pantalla no carga: se repite aca. */
.btn{margin-top:14px;background:var(--green);color:#fff;border:none;padding:10px 16px;font-family:'Inter',sans-serif;font-weight:600;font-size:13px;cursor:pointer;}
.btn:hover{background:#2a5518;}

/* En pantallas angostas la foto se oculta y la tarjeta ocupa todo el ancho. */
@media (max-width:900px){
  .login-foto{display:none;}
  .login-panel{padding:24px 16px;}
}

/* --- Ingreso con cuenta de Microsoft --- */
.login-separador{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--ink-soft);font-size:12px;}
.login-separador::before,
.login-separador::after{content:"";flex:1;height:1px;background:var(--rule);}

/* Boton con el estilo que pide Microsoft para su marca: fondo blanco,
   borde gris y el texto en gris oscuro. */
.btn-microsoft{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;
  padding:11px 12px;background:#FFFFFF;border:1px solid #8C8C8C;color:#5E5E5E;
  font-family:'Inter',sans-serif;font-size:14px;font-weight:600;text-decoration:none;
  cursor:pointer;transition:background .15s;}
.btn-microsoft:hover{background:#F3F3F3;}
.btn-microsoft:focus-visible{outline:2px solid var(--jd-green);outline-offset:2px;}
.btn-microsoft svg{width:19px;height:19px;flex:none;}