@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --azul:        #1C62C1;
  --azul-dark:   #1450a3;
  --morado-a:   #3f2b5b;
  --lila:   #724ad8;
  --morado-b:      #301d52;
  --blanco:      #ffffff;
  --gris-fondo:  #efefef;
  --gris-borde:  #c8c8c8;
  --gris-texto:  #333333;
  --trans:       0.5s ease;
}

/* ── BODY ─────────────────────────────────────────────────── */
body {
  font-family: 'Nunito', sans-serif;
}

/* ── .cajafuera ───────────────────────────────────────────── */
/* 100vw × 100vh · gradiente Morado/lila · centra con grid */
.cajafuera {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(
    145deg,
    var(--morado-a)  0%,
    var(--morado-b)    45%,
    var(--lila) 100%
  );
}

/* ── .formulariocaja ──────────────────────────────────────── */
/* 400 × 550 px · overflow:hidden oculta los forms fuera      */
.formulariocaja {
  position: relative;
  width: 400px;
  height: 550px;
  background: var(--blanco);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.28);
  overflow: hidden;            /* ← oculta lo que está en left:450 o left:-400 */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 22px;
}

/* ── .botondeintercambiar ─────────────────────────────────── */
/* Píldora selector · box-shadow · border-radius:30px         */
.botondeintercambiar {
  position: relative;
  width: 220px;
  height: 40px;
  background: var(--gris-fondo);
  border-radius: 30px;
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,0.15),
    0 2px 6px rgba(0,0,0,0.10);
  flex-shrink: 0;
  margin-bottom: 14px;
}

/* ── #btnvai ──────────────────────────────────────────────── */
/* Indicador azul deslizante.
   JS: z.style.left = "0"    → Login activo
   JS: z.style.left = "110px"→ Registrar activo              */

#btnvai {
    position: absolute;
    top: 0;
    left: 0;
    width: 110px;
    height: 100%;
    background: #1C62C1;
    border-radius: 30px;
    transition: left 0.5s ease;
}

.grupo-entradas {
    transition: left 0.5s ease;
}


/* ── .botoncambiarcaja ────────────────────────────────────── */
/* Los dos botones flotan sobre toda la píldora               */
.botoncambiarcaja {
  position: absolute;
  top: 0;
  height: 100%;
  width: 110px;
  background: transparent;
  border: none;
  font-family: 'Nunito', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  z-index: 2;                  /* encima del indicador */
  transition: color var(--trans);
}

#vaibtnlogin    { left: 0;     color: white; } /* activo al inicio */
#vaibtnregistrar{ left: 110px; color: black; }

/* ── .grupo-entradas ──────────────────────────────────────── */
/* position:absolute · transition:left var(--trans)
   left:450px  → oculto derecha  (estado inicial frmregistrar)
   left:50px   → visible/activo  (JS lo pone aquí)
   left:-400px → oculto izquierda (JS lo pone aquí)           */
.grupo-entradas {
  position: absolute;
  top: 76px;                   /* debajo del selector + logo */
  left: 450px;                 /* oculto por defecto */
  width: 300px;                /* 400 − 50×2 márgenes */
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition: left var(--trans);
}

/* Login arranca visible */
#frmlogin {
  left: 50px;
}

/* ── Logo robot ───────────────────────────────────────────── */
.logovai {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.logovai img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.18));
}

/* ── Etiquetas <b> dentro del form ───────────────────────── */
.grupo-entradas b {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gris-texto);
  margin-top: 2px;
}

/* ── .cajaentradatexto ────────────────────────────────────── */
/* Inputs de usuario y password                               */
.cajaentradatexto {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1.5px solid var(--gris-borde);
  border-radius: 7px;
  font-size: 0.9rem;
  font-family: 'Nunito', sans-serif;
  color: var(--gris-texto);
  background: var(--blanco);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.cajaentradatexto:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(28,98,193,0.15);
}

/* ── Fila captcha ─────────────────────────────────────────── */
/* Agrupa .cajaentradarecaptcha + .fondorecaptcha en una fila */
.fila-captcha {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}

/* ── .cajaentradarecaptcha ────────────────────────────────── */
.cajaentradarecaptcha {
  flex: 1;
  height: 38px;
  padding: 0 12px;
  border: 1.5px solid var(--gris-borde);
  border-radius: 7px;
  font-size: 0.9rem;
  font-family: 'Nunito', sans-serif;
  color: var(--gris-texto);
  background: var(--blanco);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.cajaentradarecaptcha:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(28,98,193,0.15);
}

/* ── .fondorecaptcha ──────────────────────────────────────── */
/* Div captcha · fondo.png · innerHTML = código generado por JS
   Un clic lo regenera (onclick="crearrecaptcha()")           */

.fondorecaptcha {
    display: inline-block;
    width: 60px;
    height: 36px;
    background-image: url('https://tercera-unidad.jennifer-geronimo-sanchez.online/loginvaidroll5/img/fondo.jpg');
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    text-align: center;
    line-height: 36px;
    font-weight: bold;
    font-size: 15px;
    color: #fff;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 4px;
    letter-spacing: 2px;
    text-shadow: 1px 1px 3px #000, -1px -1px 3px #000;
    user-select: none;
    border: 1.5px solid #aaa;
}

.fondorecaptcha:hover { opacity: 0.75; }

/* ── .botonenviar ─────────────────────────────────────────── */
/* Azul #1C62C1 · border-radius:10px · texto blanco           */
.botonenviar {
  width: 100%;
  height: 44px;
  background: var(--azul);
  color: var(--blanco);
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
  margin-top: 6px;
  box-shadow: 0 4px 16px rgba(28,98,193,0.35);
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
}

.botonenviar:hover {
  background: var(--azul-dark);
  box-shadow: 0 6px 20px rgba(28,98,193,0.45);
}

.botonenviar:active { transform: scale(0.97); }

/* ── Responsivo ───────────────────────────────────────────── */
@media (max-width: 440px) {
  .formulariocaja {
    width: 93vw;
    height: auto;
    min-height: 520px;
    padding-bottom: 28px;
  }
  .grupo-entradas { width: calc(93vw - 60px); }
}