/* ===========================================================================
   Login de Medium con la película al lado (2026-10-17).
   Se carga DESPUÉS de landing.css: sólo saca la película de pantalla completa
   y la mete en la columna izquierda, y estila el formulario de la derecha.
   =========================================================================== */

/* `landing.css` no define estos dos (la película es violeta/verde sobre noche): los
   agrega el login para la columna clara del formulario. */
:root{--fondo:#FBF8FC; --verde-50:#F0F5E8}

body.login-medium{overflow:hidden; background:var(--noche)}

.pantalla-login{display:grid; grid-template-columns:1.3fr minmax(380px,.7fr); height:100vh; width:100%}

/* --- columna de la película: la misma de /bienvenida/, pero contenida --- */
.col-peli{position:relative; overflow:hidden}
.col-peli .film{position:absolute}
.col-peli .esc{padding:92px 36px 64px}
.col-peli .pie{padding:14px 24px}
.col-peli .zona{width:12%}

/* --- columna del formulario --- */
.col-form{position:relative; z-index:6; background:var(--fondo); color:var(--tinta);
  display:grid; place-items:center; padding:40px 36px; box-shadow:-24px 0 60px -30px rgba(27,10,34,.45)}
.caja-login{width:100%; max-width:360px}
.login-marca{display:flex; align-items:center; gap:11px; margin-bottom:30px}
.login-marca .cerebro{width:42px; height:42px}
.login-marca b{font-size:1.5rem; font-weight:800; letter-spacing:-.04em}
.caja-login h1{font-size:1.75rem; font-weight:800; letter-spacing:-.035em; margin:0 0 6px}
.caja-login .ayuda{color:var(--gris); font-size:.92rem; font-weight:500; margin:0 0 26px; line-height:1.5}

.campo-login{margin-bottom:16px}
.campo-login label{display:block; font-size:.72rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gris-2); margin-bottom:7px}
.campo-login .envoltura{position:relative}
.campo-login input{width:100%; border:1.5px solid var(--linea); border-radius:12px; padding:14px 16px;
  font:500 1rem Montserrat,system-ui,sans-serif; color:var(--tinta); background:#fff; outline:none;
  transition:border-color .25s, box-shadow .25s}
.campo-login input::placeholder{color:#b9b1be}
.campo-login input:focus{border-color:var(--vio); box-shadow:0 0 0 4px rgba(125,22,121,.12)}
.campo-login input[type=password]{padding-right:48px}
.ver-clave{position:absolute; right:12px; top:50%; transform:translateY(-50%); border:0; background:transparent;
  cursor:pointer; color:var(--gris-2); padding:4px; line-height:0; border-radius:8px}
.ver-clave:hover{color:var(--vio)}
.ver-clave svg{width:19px; height:19px}

.btn-entrar{width:100%; border:0; border-radius:12px; padding:15px; cursor:pointer;
  background:var(--vio); color:#fff; font:700 1rem Montserrat,system-ui,sans-serif;
  box-shadow:0 12px 26px -12px rgba(125,22,121,.9); transition:transform .25s var(--ease), background .25s}
.btn-entrar:hover{transform:translateY(-2px); background:var(--vio-osc)}
.pie-login{margin-top:20px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.pie-login a{color:var(--vio); font-size:.88rem; font-weight:600; text-decoration:none}
.pie-login a:hover{text-decoration:underline}
.pie-login span{color:var(--gris-2); font-size:.8rem; font-weight:600}

.aviso-login{background:#FBE6E7; border:1px solid #f0c4c7; color:#8d2229; border-radius:12px;
  padding:12px 14px; font-size:.88rem; font-weight:600; margin-bottom:18px; line-height:1.5}
.aviso-login.ok{background:var(--verde-50); border-color:#cfe0b8; color:var(--verde-osc)}

/* --- celular: sólo el formulario, con la marca arriba --- */
@media(max-width:980px){
  .pantalla-login{grid-template-columns:1fr}
  .col-peli{display:none}
  .col-form{box-shadow:none; align-items:start; padding-top:64px}
}
@media(prefers-reduced-motion:reduce){.btn-entrar{transition:none}}