/* Páginas de acceso: ingresar, registro, recuperar contraseña, autorización de apoderado. */
.ico { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: -.2em; }

body { background: #f2f6fb; }
.auth-split { min-height: calc(100vh - 80px); background: #f2f6fb; }

.auth-split__imagen { isolation: isolate; }
.auth-split__imagen::after {
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(242,101,34,.35), transparent 65%),
    linear-gradient(0deg, rgba(4,29,61,.94) 0%, rgba(6,42,85,.55) 55%, rgba(6,42,85,.35) 100%);
}
.auth-split__imagen::before { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 5px; z-index: 2; background: linear-gradient(180deg, #ffb100, #f26522, #e0442d, #2a6fd6, #1ea7f0, #0fb5c8, #22a35a); }
.auth-logo { position: absolute; left: 2.4rem; top: 2.4rem; z-index: 2; display: inline-flex; background: #fff; border-radius: 16px; padding: .6rem 1rem; box-shadow: 0 14px 34px rgba(0,0,0,.35); }
.auth-logo img { height: 48px; width: auto; }
.auth-split__imagen-texto { z-index: 2; }
.auth-split__imagen-texto h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: .4em; }
.auth-split__imagen-texto p { font-size: 1.08rem; color: rgba(255,255,255,.92); margin-bottom: 1.2rem; }
.auth-beneficios { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.auth-beneficios li { display: flex; align-items: center; gap: .65rem; color: #fff; font-weight: 700; }
.auth-beneficios .ico { width: 1.6rem; height: 1.6rem; padding: .3rem; border-radius: 50%; background: var(--vivo-bosque); color: #fff; stroke-width: 3.2; }

.auth-split__formulario { padding: 2.4rem 1.4rem; background: radial-gradient(60% 50% at 100% 0%, rgba(245,182,61,.16), transparent 70%), radial-gradient(60% 50% at 0% 100%, rgba(30,167,240,.14), transparent 70%); }
.form-tarjeta {
  position: relative; overflow: hidden; border-radius: 30px; padding: 2.8rem 2.6rem 2.4rem; max-width: 480px;
  border: 1px solid rgba(6,42,85,.06); box-shadow: 0 26px 64px rgba(6,42,85,.14);
}
.auth-split .form-tarjeta { box-shadow: 0 26px 64px rgba(6,42,85,.14); }
.form-tarjeta::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--franja-logo); }
.auth-icono { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 1.1rem; border-radius: 22px; background: linear-gradient(135deg, #ffd15c, var(--vivo-fuego)); color: var(--color-azul-patrimonial); box-shadow: 0 14px 30px rgba(242,101,34,.35); }
.auth-icono .ico { width: 32px; height: 32px; }

/* Variante limpia (ingresar, registro, recuperar/restablecer contraseña): foto sin velo
   ni texto encima, logo dentro de la tarjeta. */
.auth-split--limpio .auth-split__imagen::after,
.auth-split--limpio .auth-split__imagen::before { content: none; }
/* El panel es alto y angosto pero la foto es panorámica: se encuadra hacia la izquierda
   (donde está el sobre del álbum) para que el recorte se coma el paisaje vacío de la
   derecha, en vez de cortar el producto. */
.auth-split--limpio .auth-split__imagen { background-position: 20% center; }
.auth-tarjeta-logo { display: block; width: fit-content; margin: 0 auto 1.4rem; }
.auth-tarjeta-logo img { display: block; height: 64px; width: auto; }
.form-tarjeta h1 { font-size: 1.85rem; }
.form-tarjeta__sub { font-size: 1rem; }

.campo label { color: var(--color-azul-patrimonial); }
.campo input[type=text], .campo input[type=email], .campo input[type=password], .campo input[type=date], .campo input[type=number], .campo select, .campo textarea {
  border: 2px solid rgba(6,42,85,.14); background: #f7fafd; border-radius: 14px; padding: .8em 1.05em; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--vivo-cielo); background: #fff; box-shadow: 0 0 0 4px rgba(30,167,240,.18); }
.form-pie a { text-decoration: underline; text-underline-offset: 2px; }
.form-tarjeta .boton--primario { padding: 1em 1.7em; }

/* Registro en 2 pasos */
.registro-progreso { margin-bottom: 1.6rem; }
.registro-progreso__texto { display: block; font-size: .82rem; font-weight: 700; color: var(--color-azul-patrimonial); margin-bottom: .5rem; }
.registro-progreso__pista { height: 6px; border-radius: 999px; background: rgba(6,42,85,.1); overflow: hidden; }
.registro-progreso__relleno { height: 100%; border-radius: 999px; background: var(--franja-logo); transition: width .4s ease; }
.registro-pasos-botones { display: flex; gap: .8rem; align-items: center; }
.registro-pasos-botones .boton--primario { flex: 1; }

@media (max-width: 860px) {
  .auth-split__formulario { padding: 1.6rem 1rem 3rem; }
  .form-tarjeta { padding: 2.4rem 1.5rem 2rem; margin: 1.2rem auto; }
}