/* Composición de la puerta de acceso. Este archivo se carga después de nueva.css. */

#nvPuerta:not(.es-encima) .nv-puerta-panel {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(auto, 1fr) auto;
  justify-items: center;
  align-items: stretch;
  min-height: 100vh;
  min-height: 100svh;
  height: auto;
  width: 100%;
  padding: 24px clamp(18px, 3vw, 48px) max(14px, env(safe-area-inset-bottom, 0px));
}

#nvPuerta:not(.es-encima) .nv-puerta-formularios {
  box-sizing: border-box;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  justify-self: stretch;
  min-width: 0;
  margin: 0;
  padding: 24px 0 42px;
}

#nvPuerta:not(.es-encima) .nv-puerta-panel .nv-puerta-legal {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-self: end;
  align-items: center;
  justify-content: center;
  gap: 2px 18px;
  width: min(100%, 420px);
  max-width: none;
  min-height: 44px;
  margin: 0;
  padding: 10px 0 0;
  border-top: 1px solid #dfe5df;
  text-align: center;
}

#nvPuerta:not(.es-encima) .nv-puerta-panel .nv-puerta-legal a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0;
  color: #53635b;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
}

#nvPuerta:not(.es-verificacion):not(.es-encima) #nvAuthShell {
  box-sizing: border-box;
  width: min(100%, 420px);
  max-width: 420px;
  gap: 18px;
  padding: 27px 27px 25px;
  border-radius: 19px;
}

#nvPuerta #nvPuertaTabs[hidden] { display: none !important; }
#nvPuerta .nv-auth-tabs { padding: 4px; border-radius: 12px; }
#nvPuerta .nv-auth-tab { min-height: 44px; font-size: 13px; }

/* Transiciones discretas para entrar y cambiar entre acceso y registro. */
@keyframes nv-auth-presentar {
  from { opacity: 0; transform: translateY(8px) scale(.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

#nvPuerta.es-acceso-limpio:not(.es-encima):not(.es-verificacion) #nvAccesoCredenciales:not([hidden]),
#nvPuerta.es-acceso-limpio:not(.es-encima):not(.es-verificacion) #nvRegistro:not([hidden]) {
  animation: nv-auth-presentar 300ms cubic-bezier(.2, .7, .25, 1) both;
}

#nvPuerta.es-acceso-limpio:not(.es-encima):not(.es-verificacion) .nv-auth-tab,
#nvPuerta.es-acceso-limpio:not(.es-encima):not(.es-verificacion) .nv-campo,
#nvPuerta.es-acceso-limpio:not(.es-encima):not(.es-verificacion) .nv-cta,
#nvPuerta.es-acceso-limpio:not(.es-encima):not(.es-verificacion) .nv-puerta-pie a {
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease,
    box-shadow 180ms ease, transform 180ms ease;
}

#nvPuerta.es-acceso-limpio:not(.es-encima):not(.es-verificacion) .nv-campo:focus {
  box-shadow: 0 0 0 3px rgb(143 199 46 / 18%);
}

#nvPuerta.es-acceso-limpio:not(.es-encima):not(.es-verificacion) .nv-cta:active:not(:disabled) {
  transform: scale(.985);
}

@media (hover: hover) {
  #nvPuerta.es-acceso-limpio:not(.es-encima):not(.es-verificacion) .nv-auth-tab:hover {
    transform: translateY(-1px);
  }

  #nvPuerta.es-acceso-limpio:not(.es-encima):not(.es-verificacion) .nv-cta:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgb(20 29 28 / 14%);
  }
}

@media (prefers-reduced-motion: reduce) {
  #nvPuerta.es-acceso-limpio:not(.es-encima):not(.es-verificacion) #nvAccesoCredenciales:not([hidden]),
  #nvPuerta.es-acceso-limpio:not(.es-encima):not(.es-verificacion) #nvRegistro:not([hidden]) {
    animation: none;
  }

  #nvPuerta.es-acceso-limpio:not(.es-encima):not(.es-verificacion) .nv-auth-tab,
  #nvPuerta.es-acceso-limpio:not(.es-encima):not(.es-verificacion) .nv-campo,
  #nvPuerta.es-acceso-limpio:not(.es-encima):not(.es-verificacion) .nv-cta,
  #nvPuerta.es-acceso-limpio:not(.es-encima):not(.es-verificacion) .nv-puerta-pie a {
    transition: none;
  }

  #nvPuerta.es-acceso-limpio:not(.es-encima):not(.es-verificacion) .nv-auth-tab:hover,
  #nvPuerta.es-acceso-limpio:not(.es-encima):not(.es-verificacion) .nv-cta:hover,
  #nvPuerta.es-acceso-limpio:not(.es-encima):not(.es-verificacion) .nv-cta:active {
    transform: none;
  }
}

#nvPuerta .nv-auth-shell .nv-puerta-caja h1 {
  font-size: clamp(24px, 2.2vw, 27px);
  line-height: 1.2;
}

#nvPuerta .nv-auth-shell .nv-puerta-nota {
  font-size: 14px;
  line-height: 1.5;
}

#nvPuerta .nv-auth-shell .nv-campo { min-height: 48px; }
#nvPuerta .nv-auth-shell .nv-cta { min-height: 50px; }
#nvPuerta .nv-auth-shell #nvAccesoCredenciales:not([hidden]) { gap: 13px; }
#nvPuerta .nv-auth-shell #nvRegistro:not([hidden]) { row-gap: 13px; column-gap: 12px; }
#nvPuerta .nv-auth-shell .nv-puerta-pie { padding-top: 14px; }

/* La verificación ocupa una página blanca, sin tarjeta ni panel de marca. */
#nvPuerta.es-verificacion:not(.es-encima) {
  display: block;
  min-height: 100vh;
  min-height: 100svh;
  height: auto;
  padding: 0;
  overflow: visible;
  background: #fff;
  color: #17211d;
}

#nvPuerta.es-verificacion:not(.es-encima) .nv-puerta-presentacion { display: none; }

#nvPuerta.es-verificacion:not(.es-encima) .nv-puerta-panel {
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  max-width: none;
  overflow: visible;
  padding: 24px 16px;
  background: #fff;
}

#nvPuerta.es-verificacion:not(.es-encima) .nv-puerta-formularios {
  min-height: 100%;
  padding: 28px 0;
}

#nvPuerta.es-verificacion:not(.es-encima) .nv-puerta-panel .nv-puerta-legal {
  display: none !important;
}

body:has(#nvPuerta.es-verificacion:not([hidden])) .wa-fab {
  display: none !important;
}

#nvPuerta.es-verificacion:not(.es-encima) #nvAuthShell {
  box-sizing: border-box;
  width: min(100%, 400px);
  max-width: 400px;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#nvPuerta.es-verificacion .nv-auth-shell .nv-puerta-caja {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#nvPuerta.es-verificacion .nv-auth-shell .nv-acceso-verificacion {
  display: grid;
  justify-items: center;
  gap: 18px;
  text-align: center;
}
#nvPuerta.es-verificacion .nv-auth-shell .nv-acceso-verificacion h1 {
  margin: 0;
  font-size: clamp(23px, 5.4vw, 28px);
  line-height: 1.25;
  text-align: center;
}

#nvPuerta.es-verificacion .nv-auth-shell .nv-acceso-verificacion .nv-puerta-nota {
  max-width: 34ch;
  margin: 0;
  color: #53615a;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

#nvPuerta.es-verificacion .nv-auth-shell .nv-captcha { min-height: 66px; margin: 2px 0; }
#nvPuerta.es-verificacion .nv-auth-shell .nv-acceso-estado {
  max-width: 36ch;
  margin: 0;
  color: #5e6b63;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 860px) {
  body.auth-locked {
    position: relative;
    min-height: 100svh;
  }

  #nvPuerta:not(.es-encima) {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: none;
    min-height: 100vh;
    min-height: 100svh;
    height: auto;
    padding: 0;
    overflow: visible;
    background: #141d1c;
  }

  #nvPuerta:not(.es-encima) .nv-puerta-presentacion { display: none; }

  #nvPuerta:not(.es-encima) .nv-puerta-panel {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    min-height: 100svh;
    overflow: visible;
    padding: 18px 16px max(14px, env(safe-area-inset-bottom, 0px));
    background: transparent;
  }

  #nvPuerta:not(.es-encima) .nv-puerta-formularios {
    padding: 18px 0 80px;
  }

  #nvPuerta:not(.es-verificacion):not(.es-encima) #nvAuthShell {
    padding: 24px;
    background: #fff;
    box-shadow: 0 18px 45px rgb(0 0 0 / 13%);
  }

  #nvPuerta:not(.es-encima) .nv-puerta-panel .nv-puerta-legal {
    width: min(100%, 420px);
    gap: 2px 15px;
    border-color: rgb(255 255 255 / 22%);
  }

  #nvPuerta:not(.es-encima) .nv-puerta-panel .nv-puerta-legal a { color: #d0d8d3; }

  #nvPuerta.es-verificacion:not(.es-encima) { background: #fff; }
  #nvPuerta.es-verificacion:not(.es-encima) .nv-puerta-panel { background: #fff; }
  #nvPuerta.es-verificacion:not(.es-encima) .nv-puerta-formularios { padding: 28px 0; }

  body.auth-locked .wa-fab {
    position: absolute;
    right: 16px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 560px) {
  #nvPuerta:not(.es-encima) .nv-puerta-panel { padding-right: 16px; padding-left: 16px; }
  #nvPuerta:not(.es-verificacion):not(.es-encima) #nvAuthShell { padding: 22px 21px; }
  #nvPuerta .nv-auth-shell #nvRegistro:not([hidden]) { row-gap: 12px; }
  #nvPuerta:not(.es-encima) .nv-puerta-panel .nv-puerta-legal a { font-size: 11px; }
}

@media (max-width: 360px) {
  #nvPuerta .nv-auth-shell #nvRegistro > .nv-mitad { grid-column: 1 / -1; }
  #nvPuerta:not(.es-encima) .nv-puerta-panel { padding-right: 13px; padding-left: 13px; }
  #nvPuerta:not(.es-verificacion):not(.es-encima) #nvAuthShell { padding: 21px 18px; }
}

#nvPuerta .nv-auth-fvc-label {
  display: block;
  min-width: 0;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* Dos enlaces legales centrados; sin las reglas de la antigua tercera fila. */
#nvPuerta .nv-puerta-panel .nv-puerta-legal a {
  flex: 0 1 auto;
  grid-column: auto;
  justify-self: auto;
  justify-content: center;
}

@media (max-width: 860px) {
  #nvPuerta.es-acceso-limpio .nv-auth-fvc-mobile {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 448px;
    min-height: 64px;
    margin: 0 auto;
    padding: 12px 14px;
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
  }
  #nvPuerta .nv-auth-fvc-mobile::before { content: ''; }
  #nvPuerta .nv-auth-fvc-mobile > .nv-auth-fvc-arrow {
    width: 28px;
    height: 28px;
    line-height: 1;
  }
  #nvPuerta:not(.es-encima) .nv-puerta-panel .nv-puerta-legal {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 0 max(8px, env(safe-area-inset-bottom, 0px));
  }
  #nvPuerta:not(.es-encima) .nv-puerta-panel .nv-puerta-legal a {
    flex-basis: auto;
    min-height: 40px;
    font-size: 12px;
    text-align: center;
    white-space: normal;
    text-wrap: balance;
  }
  body.auth-locked .wa-fab {
    bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  }
}