/* viperptt.com · auth.css — ajustes de las pantallas de entrar / registro / recuperar. */
.vp-auth__form .vp-input-group>.vp-ico{width:1.1em;height:1.1em}
.vp-auth__form a{font-weight:600}
.vp-auth__box .vp-help[data-disp-msg].is-ok{color:var(--vp-ok);font-weight:600}
.vp-auth__box .vp-help[data-disp-msg].is-bad{color:var(--vp-danger);font-weight:600}
.vp-auth__box [data-err]{margin:0}
.vp-auth__box .vp-check a{text-decoration:underline}

/* ── Registro compacto (2026-10-26) ─────────────────────────────────────────
   Los campos van de dos en dos para que en una pantalla de escritorio quepa SIN desplazarse (antes sobraban 190–520 px).
   En un teléfono se apilan, como siempre. «Género» y la casilla de términos comparten renglón. */
.vp-reg{--g:12px 16px;margin-top:14px}
.vp-reg .vp-help{font-size:.76rem;line-height:1.3}
.vp-reg .vp-field{align-content:start}
@media (min-width:560px){
  .vp-auth__box:has(.vp-reg){max-width:640px}
  .vp-reg{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vp-reg .vp-reg__ancho{grid-column:1/-1}
  .vp-reg .vp-reg__acepto{align-self:end;padding-bottom:11px;line-height:1.3}
  .vp-reg .vp-field{align-content:start}
}
@media (min-width:901px) and (max-height:760px){
  .vp-auth__main{padding-top:10px;padding-bottom:12px}
  .vp-auth__box:has(.vp-reg){padding:4px 0}
  .vp-auth__box:has(.vp-reg) h1{font-size:1.55rem;margin-bottom:2px}
  .vp-auth__box:has(.vp-reg) > p{margin:0}
  .vp-reg{--g:9px 16px;margin-top:10px!important}
  .vp-reg .vp-field{gap:4px}
  .vp-reg .vp-field>label{font-size:.8rem}
  .vp-reg .vp-input,.vp-reg .vp-select{min-height:40px;padding-top:7px;padding-bottom:7px}
  .vp-reg .vp-btn--lg{min-height:46px}
  .vp-reg .vp-help{font-size:.72rem}
  .vp-auth__box:has(.vp-reg) ~ *,.vp-auth__box:has(.vp-reg) .vp-center{margin-top:10px!important}
}
/* En un teléfono: UN campo por renglón (2026-10-27, lo pidió el dueño mirando el registro en su celular: dos campos lado a lado se leían apretados). */
@media (max-width:559px){
  .vp-reg{grid-template-columns:minmax(0,1fr);--g:12px 0}
  .vp-reg>.vp-field,.vp-reg>.vp-reg__acepto,.vp-reg>.vp-reg__ancho{grid-column:1/-1}
  .vp-reg .vp-input,.vp-reg .vp-select{min-height:46px}
  .vp-reg .vp-help{font-size:.74rem}
}

/* ── Panel azul con la composición del héroe (2026-10-30) ───────────────────── */
.vp-auth__side{position:relative;overflow:hidden}
.vp-auth__side>*{position:relative;z-index:2}
.vp-auth__vis{position:relative;flex:1 1 auto;min-height:230px;max-height:420px;z-index:1}
.vp-auth__ph{position:absolute;right:-6%;bottom:0;width:78%;height:auto;border-radius:22px;box-shadow:0 26px 50px -20px rgba(0,0,0,.55);border:2px solid rgba(255,255,255,.28);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}
.vp-auth__tel{position:absolute;left:8%;bottom:-8%;width:30%;height:auto;filter:drop-shadow(0 28px 36px rgba(0,0,0,.45))}
.vp-auth__canal{position:absolute;left:34%;top:6%;width:34%;height:auto;filter:drop-shadow(0 14px 22px rgba(0,0,0,.3))}
@media (prefers-reduced-motion:no-preference){.vp-auth__tel{animation:vpAuthFlota 7s ease-in-out infinite}.vp-auth__canal{animation:vpAuthFlota 6s ease-in-out -2s infinite}}
@keyframes vpAuthFlota{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (max-height:700px){.vp-auth__vis{display:none}}

/* ── Registro cerrado: tarjeta en vez de un aviso suelto ────────────────────── */
.vp-cerrado{display:grid;gap:14px;justify-items:start;padding:clamp(22px,3vw,34px);border-radius:var(--vp-r-xl);background:linear-gradient(180deg,var(--vp-p50),#fff);border:1px solid var(--vp-p100);box-shadow:var(--vp-sh-2)}
.vp-cerrado__ic{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;color:#fff;background:linear-gradient(140deg,var(--vp-accent),var(--vp-primary));box-shadow:0 14px 26px -12px color-mix(in srgb,var(--vp-primary) 70%,transparent)}
.vp-cerrado__ic .vp-ico{width:26px;height:26px}
.vp-cerrado h1{margin:0}
.vp-cerrado p{margin:0;line-height:1.55}
.vp-cerrado__cta{margin-top:6px}
@media (max-width:559px){.vp-cerrado__cta .vp-btn{flex:1 1 100%;justify-content:center}}

/* ── En celular: la composición va ARRIBA, en una banda azul, y la tarjeta debajo (2026-10-30) ── */
.vp-auth__banner{display:none}
@media (max-width:900px){
  .vp-auth__banner{display:block;position:relative;overflow:hidden;margin-top:12px;padding:20px 20px 0;border-radius:var(--vp-r-xl);color:#fff;
    background:radial-gradient(300px 200px at 100% 0%,rgba(34,184,240,.5),transparent 70%),linear-gradient(150deg,#1162f4 0%,#0b3fb8 100%)}
  .vp-auth__banner h2{position:relative;z-index:3;margin:0;max-width:13ch;color:#fff;font-size:1.35rem;line-height:1.12;letter-spacing:-.02em}
  .vp-auth__banner .vp-auth__vis{display:block;height:190px;min-height:0;max-height:none;margin-top:-34px}
  .vp-auth__banner .vp-auth__ph{width:70%;right:-8%;bottom:-6px}
  .vp-auth__banner .vp-auth__tel{left:4%;width:27%;bottom:-18%}
  .vp-auth__banner .vp-auth__canal{left:30%;top:18%;width:36%}
  .vp-auth__box{margin-top:6px;padding-top:18px}
  .vp-auth__main{padding-bottom:20px}
}