/* NexxoWin 2.0 · Pantallas de acceso (Winsermant)
   Selector de sucursal, inicio de sesión y recuperación de contraseña.
   Izquierda: marca NexxoWin sobre azul marino. Derecha: tarjeta blanca con el logo y el color de la sucursal. */

.login-page.v2-login{display:grid;grid-template-columns:minmax(360px,42%) 1fr;align-items:stretch;justify-content:stretch;min-height:100vh;min-height:100svh;padding:0;background:#f4f6f9;font-family:var(--v2-font)}

/* Panel de marca */
.v2-login-side{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:44px 48px;color:#fff;overflow:hidden;
  background:linear-gradient(165deg,color-mix(in srgb,var(--brand-primary) 62%,rgba(10,25,41,.6)) 0%,rgba(10,25,41,.45) 42%,rgba(10,25,41,.93) 100%),url("../login-bg-center.jpg") center/cover no-repeat}
.v2-login-side:after{content:"";position:absolute;right:-120px;bottom:-120px;width:420px;height:420px;border:2px solid rgba(77,191,255,.12);transform:rotate(30deg);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.v2-login-brand{position:relative;z-index:1;display:flex;align-items:center;gap:16px}
.v2-login-brand .v2-brand-ico{width:64px;height:auto}
.v2-login-brand .v2-wm{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1}
.v2-login-brand b{font-weight:800;font-size:43px;letter-spacing:-1px;color:#fff;line-height:1}
.v2-login-brand b span{color:#1f8fe0}
.v2-login-brand small{display:inline-block;margin-top:3px;font-size:9.4px;font-weight:600;text-transform:uppercase;color:#a9b6c7;white-space:nowrap;line-height:1.2}
.v2-login-pitch{position:relative;z-index:1;max-width:440px}
.v2-login-pitch h2{margin:0 0 22px;font-family:var(--v2-font);font-size:30px;line-height:1.2;font-weight:700;letter-spacing:-.5px;color:#fff}
.v2-login-pitch ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.v2-login-pitch li{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 7px;border:1px solid rgba(255,255,255,.16);border-radius:99px;background:rgba(255,255,255,.06);font-size:14px;font-weight:600;color:#dbe4ee}
.v2-login-pitch li span{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#1f8fe0;color:#fff;font-size:12px;font-weight:700}
.v2-login-credit{position:relative;z-index:1;margin:0;font-size:12px;color:#8b97a8}
.v2-login-credit a{color:#cbd5e1;font-weight:600}

/* Área del formulario */
.v2-login-main{display:flex;align-items:center;justify-content:center;padding:40px 24px}
.v2-login .login-panel{width:100%;max-width:440px;margin:0;padding:32px;border:1px solid var(--v2-line);border-radius:18px;background:#fff;box-shadow:0 18px 48px rgba(10,25,41,.08);backdrop-filter:none}
.v2-login .access-selector-panel{max-width:560px}
/* La marca NexxoWin ya está a la izquierda: se quita de la tarjeta */
.v2-login .login-product,.v2-login .branch-login-footer{display:none}
.v2-login .login-heading-mark{display:none}
.v2-login h1{font-family:var(--v2-font);font-size:24px;font-weight:800;letter-spacing:-.4px;color:var(--v2-ink);margin:0}
.v2-login .login-panel header p{margin:4px 0 0;color:var(--v2-muted);font-size:14px}

/* Sucursal elegida: logo grande y centrado */
.v2-login .branch-login-header{margin-bottom:6px}
.v2-login .branch-login-company article{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 16px 14px;border:1px solid var(--v2-line);border-radius:14px;background:#fafbfc;text-align:center}
.v2-login .login-company-logo{display:inline-flex;align-items:center;justify-content:center;width:auto;height:auto;padding:0;border:0;background:transparent;box-shadow:none}
.v2-login .branch-login-company .login-company-logo img{width:auto;height:96px;max-width:180px;object-fit:contain;border-radius:12px}
.v2-login .login-company-logo > span{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:16px;background:var(--brand-primary);color:#fff;font-weight:800;font-size:24px}
.v2-login .branch-login-company strong{font-size:15px;color:var(--v2-ink)}
.v2-login .branch-login-change{border:0;background:transparent;padding:2px 6px;font-size:13px;font-weight:600;color:var(--brand-primary);box-shadow:none}
.v2-login .branch-login-change:hover{text-decoration:underline;background:transparent}

/* Campos y botones */
.v2-login .branch-login-field > span:first-child{font-size:13px;font-weight:600;color:#3d4756}
.v2-login .branch-login-control{border:1px solid #d5dae1;border-radius:10px;background:#fff;box-shadow:none}
.v2-login .branch-login-control:focus-within{border-color:var(--brand-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-primary) 15%,transparent)}
.v2-login .branch-login-control input{background:transparent!important;box-shadow:none!important}
.v2-login .branch-login-forgot{color:var(--brand-primary);font-weight:600}
.v2-login .branch-login-submit{border-radius:10px;background:var(--brand-primary);border-color:var(--brand-primary);box-shadow:none;font-weight:700;min-height:46px}
.v2-login .branch-login-submit:hover{filter:brightness(.94)}
.v2-login .branch-login-dev button{border-radius:10px;border-style:dashed}

/* Selector de sucursales */
.v2-login .access-selector-section-heading{display:none}
.v2-login .login-company-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.v2-login .login-company-choice{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:10px;height:100%;padding:16px 12px 12px;border:1px solid var(--v2-line);border-radius:14px;background:#fff;text-align:center;box-shadow:none;transition:border-color .15s,transform .15s,box-shadow .15s}
.v2-login .login-company-choice:hover{border-color:#1f8fe0;transform:translateY(-2px);box-shadow:0 10px 24px rgba(10,25,41,.08)}
.v2-login .login-company-choice .login-company-logo img{width:auto;height:72px;max-width:120px;object-fit:contain;border-radius:10px}
.v2-login .login-company-choice strong{font-size:13px;line-height:1.3;color:var(--v2-ink)}
.v2-login .login-company-enter{width:100%;padding:6px 8px;border:0;border-radius:8px;background:#eef6fd;font-size:13px;font-weight:700;color:#1f8fe0}
.v2-login .login-company-switch-form{display:contents}
.v2-login .access-selector-footer a{color:#1f8fe0;font-weight:600}

/* Tableta y celular: la marca pasa arriba, compacta */
@media (max-width:900px){
  .login-page.v2-login{grid-template-columns:1fr}
  .v2-login-side{flex-direction:row;align-items:center;justify-content:flex-start;min-height:0;padding:16px 20px;gap:12px}
  .v2-login-side:after,.v2-login-credit,.v2-stairs,.v2-login-pitch h2{display:none}
  .v2-login-brand .v2-brand-ico{width:38px}
  .v2-login-brand b{font-size:26px}
  .v2-login-brand small{font-size:5.7px}
  .v2-login-main{align-items:flex-start;padding:20px 16px 32px}
  .v2-login .login-panel{padding:22px}
  .v2-login .login-company-grid{grid-template-columns:1fr}
  .v2-login .login-company-choice{flex-direction:row;justify-content:flex-start;text-align:left}
  .v2-login .login-company-choice .login-company-logo img{height:48px;max-width:64px}
  .v2-login .login-company-choice{min-height:0;padding:12px}
  .v2-login .login-company-choice .login-company-logo{flex:none;width:64px;height:48px;overflow:visible}
  .v2-login .login-company-choice .login-company-logo img{width:100%;height:100%;max-width:none}
  .v2-login .login-company-enter{width:auto;margin-left:auto;white-space:nowrap}
}

/* Quitar capas de la v1 */
.login-page.v2-login:before{display:none}
.v2-login .branch-login-header,.v2-login .access-selector-header{display:block;padding:0 0 16px;border:0}
.v2-login .branch-login-company,.v2-login .login-companies{padding:0;border:0;background:transparent}
.v2-login .branch-login-form{padding:16px 0 0}
.v2-login .branch-login-dev{padding:10px 0 0}

/* La v1 fija el logo a 50px: aquí se agranda */
.v2-login .login-panel .login-company-logo{width:auto;height:auto;min-width:0;overflow:visible}
.v2-login .login-panel .login-company-logo img{max-height:none;min-height:0}
.v2-login .branch-login-company .login-company-logo img{height:150px;width:auto;max-width:300px}
.v2-login .login-company-choice .login-company-logo img{height:96px;width:auto;max-width:150px}
@media (max-width:900px){
  .v2-login .login-company-choice .login-company-logo{width:64px;height:48px}
  .v2-login .login-company-choice .login-company-logo img{width:100%;height:100%;max-width:none}
}

/* Acento de la sucursal en la tarjeta y entrada suave */
.v2-login .login-panel{position:relative;overflow:hidden}
.v2-login .login-panel:before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--brand-primary)}
@media (prefers-reduced-motion:no-preference){
  .v2-login .login-panel{animation:v2-login-in .45s ease-out both}
  .v2-login-pitch{animation:v2-login-in .6s .1s ease-out both}
}
@keyframes v2-login-in{from{transform:translateY(8px)}to{transform:none}}
.v2-login-pitch h2{text-shadow:0 2px 18px rgba(0,0,0,.35)}

/* ---- Panel de marca centrado: logo grande, subtítulo y escalera de etapas ---- */
.v2-login-side{justify-content:center;align-items:center;text-align:center}
.v2-login-center{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:30px;width:100%;max-width:520px}
.v2-login-credit{position:absolute;left:0;right:0;bottom:24px;text-align:center}
/* Logo a tamaño oficial (ícono 96px, separación 26px, nombre 64px, bajada 14px) */
.v2-login-brand{gap:26px}
.v2-login-brand .v2-brand-ico{width:96px}
.v2-login-brand b{font-size:64px;letter-spacing:-1.4px}
.v2-login-brand small{margin-top:4px;font-size:14px}
.v2-login-pitch{max-width:none;width:100%}
.v2-login-pitch h2{margin:0 auto 26px;max-width:440px;font-size:22px;font-weight:600;line-height:1.35;letter-spacing:-.2px;color:#e6edf5}
/* Escalera: cada etapa es un escalón más alto */
.v2-stairs{list-style:none;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:6px!important;margin:0;padding:0}
.v2-stairs li{display:flex!important;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;height:calc(38px + var(--step) * 24px);padding:12px 6px 0!important;border:1px solid rgba(255,255,255,.18)!important;border-bottom:0!important;border-radius:12px 12px 0 0!important;
  background:linear-gradient(180deg,rgba(255,255,255,calc(.06 + var(--step) * .035)),rgba(255,255,255,.02))!important;font-size:13px;font-weight:700;color:#fff!important}
.v2-stairs li > span{display:inline-flex;align-items:center;justify-content:center;width:28px!important;height:28px!important;border-radius:50%;background:#1f8fe0;color:#fff;font-size:13px;font-weight:800}
.v2-stairs li:last-child > span{background:#fff;color:var(--v2-ink)}
.v2-stairs li > span .ms{font-size:17px;width:17px;height:17px;font-variation-settings:"FILL" 1}
.v2-stairs:after{content:"";grid-column:1/-1;height:3px;border-radius:3px;background:linear-gradient(90deg,rgba(77,191,255,.25),#4dbfff)}
@media (min-width:901px){
  /* La escalera queda justo al centro del panel azul; encima, el texto y, unos 5 cm más arriba, el logo centrado.
     En pantallas bajas la separación se reduce para que el logo no se salga del panel. */
  .v2-login-side{display:grid;place-items:center}
  .v2-login-center{display:contents}
  .v2-login-pitch{grid-area:1/1;position:relative;max-width:520px;margin:0}
  .v2-login-head{position:absolute;left:0;right:0;bottom:100%;display:flex;flex-direction:column;align-items:center;gap:clamp(24px,calc(50vh - 300px),5cm)}
  .v2-login-head h2{margin:0 auto 26px}
}
@media (max-width:1180px){
  .v2-login-brand{gap:18px}
  .v2-login-brand .v2-brand-ico{width:72px}
  .v2-login-brand b{font-size:48px;letter-spacing:-1px}
  .v2-login-brand small{font-size:10.5px}
}
@media (max-width:900px){
  .v2-login-center{flex-direction:row;gap:0;max-width:none}
  .v2-login-brand{gap:12px}
}
/* Pantallas bajas (laptops 768px): escalera más compacta para que no choque con el pie */
@media (min-width:901px) and (max-height:820px){
  .v2-login-head h2{margin-bottom:16px;font-size:19px}
  .v2-stairs li{height:calc(30px + var(--step) * 19px);padding-top:8px!important;gap:5px}
  .v2-stairs li > span{width:24px!important;height:24px!important;font-size:12px}
  .v2-login-credit{bottom:14px}
}
@media (max-width:900px){
  .v2-login-side{justify-content:center}
  .v2-login-center{justify-content:center}
  .v2-login-brand{gap:12px}
  .v2-login-brand .v2-brand-ico{width:40px}
  .v2-login-brand b{font-size:28px;letter-spacing:-.6px}
  .v2-login-brand small{font-size:6.2px;margin-top:2px}
}
@media (max-width:900px){
  .v2-login .v2-stairs,.v2-login .v2-login-head h2{display:none!important}
  .v2-login-pitch,.v2-login-head{position:static}
}

/* ---- Animación de la escalera ----
   1) Al cargar, los escalones suben uno tras otro.
   2) Después, un brillo recorre las etapas en orden (Calificación → Entrega) y se repite.
   Se desactiva para quien tenga activado "reducir movimiento" en su computadora. */
@media (prefers-reduced-motion:no-preference){
  .v2-stairs li{transform-origin:50% 100%;animation:v2-step-rise .55s cubic-bezier(.2,.8,.2,1) both,v2-step-glow 6s ease-in-out infinite;
    animation-delay:calc(var(--step) * .14s),calc(1.2s + var(--step) * .9s)}
  .v2-stairs li > span{animation:v2-step-dot 6s ease-in-out infinite;animation-delay:calc(1.2s + var(--step) * .9s)}
  .v2-stairs:after{background:linear-gradient(90deg,rgba(77,191,255,.2) 0%,#4dbfff 40%,#ffffff 50%,#4dbfff 60%,rgba(77,191,255,.2) 100%);background-size:250% 100%;animation:v2-floor 6s linear infinite;animation-delay:1.2s}
}
@keyframes v2-step-rise{from{transform:scaleY(.15)}to{transform:none}}
@keyframes v2-step-glow{
  0%,22%,100%{box-shadow:inset 0 0 0 0 rgba(77,191,255,0)}
  8%{box-shadow:inset 0 0 0 1.5px rgba(77,191,255,.95),0 -8px 26px rgba(77,191,255,.35)}
}
@keyframes v2-step-dot{
  0%,22%,100%{transform:none;box-shadow:none}
  8%{transform:scale(1.18);box-shadow:0 0 0 6px rgba(77,191,255,.22)}
}
@keyframes v2-floor{from{background-position:120% 0}to{background-position:-120% 0}}