/* =========================================================
   VITRIO - REGISTRO MODERNO
   registro_nuevo.css

   Este archivo complementa registro.css.
   NO reemplaza ni modifica el CSS compartido.
   ========================================================= */


/* =========================================================
   PÁGINA
   ========================================================= */

.registro-page{

  width:100%;
  min-height:100vh;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  padding:30px 20px;

  background:
    radial-gradient(
      circle at 15% 50%,
      rgba(31,111,235,.08),
      transparent 35%
    ),
    radial-gradient(
      circle at 85% 30%,
      rgba(100,80,255,.05),
      transparent 35%
    ),
    var(--bg-main);

}


/*
   El .contii pertenece al CSS anterior.
   Lo dejamos funcionando pero neutralizamos
   cualquier comportamiento que pueda interferir.
*/

.contii{

  width:100%;

}



/* =========================================================
   CONTENEDOR PRINCIPAL
   ========================================================= */

.registro-container{

  width:100%;
  max-width:1050px;

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    420px;

  gap:70px;

  align-items:start;

}



/* =========================================================
   PRESENTACIÓN IZQUIERDA
   ========================================================= */

.registro-presentation{

  width:100%;

}


.registro-presentation-content{

  max-width:540px;

}


/* =========================================================
   LOGO
   ========================================================= */

.registro-logo{

  width:180px;
  height:auto;

  display:block;

  margin-bottom:24px;

}



/* =========================================================
   BADGE
   ========================================================= */

.registro-badge{

  display:inline-flex;

  align-items:center;
  gap:8px;

  padding:7px 13px;

  border-radius:20px;

  background:
    rgba(31,111,235,.10);

  border:
    1px solid
    rgba(31,111,235,.25);

  color:#8abaff;

  font-size:.78rem;

  font-weight:600;

  margin-bottom:20px;

}


.registro-badge i{

  font-size:.75rem;

}



/* =========================================================
   TITULAR IZQUIERDO
   ========================================================= */

.registro-presentation-content h2{

  font-size:3rem;

  line-height:1.08;

  letter-spacing:-1.5px;

  margin:0 0 20px;

  color:var(--txt-main);

}


.registro-presentation-content h2 span{

  color:#6da6ff;

}



/* =========================================================
   DESCRIPCIÓN
   ========================================================= */

.registro-description{

  color:var(--txt-muted);

  font-size:1rem;

  line-height:1.7;

  max-width:500px;

  margin:0 0 30px;

}



/* =========================================================
   BENEFICIOS
   ========================================================= */

.registro-benefits{

  display:flex;

  flex-direction:column;

  gap:17px;

  margin-bottom:30px;

}


.registro-benefit{

  display:flex;

  align-items:center;

  gap:14px;

}


.registro-benefit-icon{

  width:40px;
  height:40px;

  flex-shrink:0;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:10px;

  background:
    rgba(31,111,235,.10);

  border:
    1px solid
    rgba(31,111,235,.20);

  color:#79aaff;

}


.registro-benefit-icon i{

  font-size:.9rem;

}


.registro-benefit strong{

  display:block;

  color:var(--txt-main);

  font-size:.88rem;

  margin-bottom:2px;

}


.registro-benefit span{

  display:block;

  color:#8f969e;

  font-size:.78rem;

  line-height:1.45;

}



/* =========================================================
   MENSAJE FINAL DE PRESENTACIÓN
   ========================================================= */

.registro-presentation-note{

  color:#7d858e;

  font-size:.75rem;

  line-height:1.5;

  margin-top:2px;

}


.registro-presentation-note strong{

  color:#aab3bd;

}



/* =========================================================
   LINK HACIA LOGIN
   ========================================================= */

.registro-login-link{

  display:inline-flex;

  align-items:center;

  gap:7px;

  margin-top:18px;

  color:#7d858e;

  font-size:.78rem;

  text-decoration:none;

  transition:.2s ease;

}


.registro-login-link span{

  color:var(--primary);

  font-weight:600;

}


.registro-login-link i{

  font-size:.68rem;

  color:var(--primary);

  transition:.2s ease;

}


.registro-login-link:hover{

  color:#aab3bd;

}


.registro-login-link:hover i{

  transform:translateX(3px);

}



/* =========================================================
   ÁREA DEL FORMULARIO
   ========================================================= */

.registro-area{

  width:100%;

}



/* =========================================================
   CARD MODERNA

   Estas reglas sobrescriben únicamente el card de esta página.
   ========================================================= */

.registro-area .registro-card-modern{

  width:100%;
  max-width:420px;

  margin:0;

  padding:34px 28px;

  border-radius:14px;

  border:
    1px solid
    rgba(255,255,255,.04);

  background:
    rgba(22,27,34,.96);

  box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.01);

}



/* =========================================================
   MARCA MOBILE
   ========================================================= */

.registro-mobile-brand{

  display:none;

}



/* =========================================================
   ICONO SUPERIOR
   ========================================================= */

.registro-icon{

  width:64px;
  height:64px;

  margin:0 auto 18px;

  border-radius:50%;

  display:flex;

  align-items:center;
  justify-content:center;

  background:
    rgba(31,111,235,.10);

  border:
    1px solid
    rgba(31,111,235,.25);

  color:var(--icon-blue);

  font-size:1.7rem;

}



/* =========================================================
   TITULO DEL FORMULARIO
   ========================================================= */

.registro-area .registro-card-modern h1{

  text-align:center;

  font-size:1.55rem;

  margin-bottom:6px;

  color:var(--txt-main);

}


.registro-area .registro-card-modern > p{

  text-align:center;

  color:var(--txt-muted);

  font-size:.9rem;

  margin-bottom:24px;

}



/* =========================================================
   ALERTAS

   Reemplazan visualmente el aspecto básico de registro.css
   sin tocar el funcionamiento de las sesiones.
   ========================================================= */

.registro-area .registro-alert{

  display:flex;

  align-items:flex-start;

  gap:10px;

  padding:12px 14px;

  border-radius:10px;

  margin-bottom:18px;

  font-size:.82rem;

  line-height:1.4;

}


.registro-area .registro-alert p{

  text-align:left;

  margin:0;

  font-size:.82rem;

}


.registro-area .registro-alert i{

  margin-top:2px;

  flex-shrink:0;

}


.registro-area .error.registro-alert{

  background:
    rgba(248,81,73,.08);

  border:
    1px solid
    rgba(248,81,73,.25);

  color:#ffb3ae;

}


.registro-area .error.registro-alert p{

  color:#ffb3ae;

}


.registro-area .warning.registro-alert{

  background:
    rgba(207,72,10,.08);

  border:
    1px solid
    rgba(207,72,10,.25);

  color:#ffb27e;

}


.registro-area .warning.registro-alert p{

  color:#ffb27e;

}



/* =========================================================
   FORMULARIO
   ========================================================= */

.registro-area .registro-card-modern .form-group{

  margin-bottom:14px;

  gap:6px;

}


.registro-area .registro-card-modern label{

  font-size:.8rem;

  color:var(--txt-muted);

}



/* =========================================================
   INPUTS
   ========================================================= */

.registro-area .registro-card-modern input:not(
  [type="checkbox"]
){

  width:100%;

  background:#0b0f14;

  border:
    1px solid
    var(--border);

  padding:11px 12px;

  border-radius:8px;

  color:var(--txt-main);

  font-size:.95rem;

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;

}


.registro-area .registro-card-modern input:not(
  [type="checkbox"]
):focus{

  outline:none;

  border-color:var(--primary);

  box-shadow:
    0 0 0 3px
    rgba(31,111,235,.10);

}



/* =========================================================
   SELECTS
   ========================================================= */

.registro-area .registro-card-modern select{

  width:100%;

  background:#0b0f14;

  border:
    1px solid
    var(--border);

  padding:11px 12px;

  border-radius:8px;

  color:var(--txt-main);

  font-size:.95rem;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;

}


.registro-area .registro-card-modern select:focus{

  outline:none;

  border-color:var(--primary);

  box-shadow:
    0 0 0 3px
    rgba(31,111,235,.10);

}



/* =========================================================
   FECHA
   ========================================================= */

.registro-area .fecha-grid{

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:10px;

}



/* =========================================================
   CONTRASEÑA
   ========================================================= */

.registro-area .password-wrapper{

  position:relative;

}


.registro-area .password-wrapper input{

  padding-right:42px !important;

}


.registro-area #togglePass{

  position:absolute;

  right:12px;

  top:50%;

  transform:translateY(-50%);

  cursor:pointer;

  font-size:1rem;

  opacity:.7;

  color:#8f969e;

  transition:.2s ease;

}


.registro-area #togglePass:hover{

  color:#ffffff;

  opacity:1;

}


.registro-area #togglePass:active{

  color:var(--primary);

}



/* =========================================================
   TOOLTIP PASSWORD
   ========================================================= */

.registro-area #togglePass::after{

  content:attr(data-tooltip);

  position:absolute;

  bottom:130%;

  right:0;

  background:#111;

  color:#fff;

  padding:5px 8px;

  font-size:.7rem;

  border-radius:6px;

  white-space:nowrap;

  opacity:0;

  pointer-events:none;

  transform:translateY(4px);

  transition:.2s;

}


.registro-area #togglePass:hover::after{

  opacity:1;

  transform:translateY(0);

}



/* =========================================================
   BARRA DE SEGURIDAD
   ========================================================= */

.registro-area .strength-bar{

  width:100%;

  height:6px;

  background:#222;

  border-radius:10px;

  margin-top:6px;

  overflow:hidden;

}


.registro-area #strengthLevel{

  height:100%;

  width:0%;

  background:red;

  transition:.3s;

}


.registro-area #strengthText{

  font-size:.75rem;

  color:var(--txt-muted);

}



/* =========================================================
   PREVIEW URL
   ========================================================= */

.registro-area #previewUrl{

  display:block;

  font-size:.75rem;

  color:var(--txt-muted);

  margin-top:4px;

}



/* =========================================================
   ERRORES DE CAMPOS
   ========================================================= */

.registro-area .error{

  font-size:.75rem;

}


.registro-area .input-error{

  font-size:.75rem;

  color:var(--error);

  margin-top:6px;

  display:none;

}


.registro-area .input-invalid{

  border-color:
    var(--error) !important;

  box-shadow:
    0 0 0 1px
    rgba(248,81,73,.20);

}



/* =========================================================
   TÉRMINOS
   ========================================================= */

.registro-area .tercon{

  display:block;

  color:var(--txt-muted);

  font-size:.76rem;

  line-height:1.55;

  margin-top:18px;

}


.registro-area .tercon input[type="checkbox"]{

  width:auto;

  margin-right:5px;

  vertical-align:middle;

}


.registro-area .tercon a{

  color:var(--primary);

  text-decoration:none;

  transition:.2s ease;

}


.registro-area .tercon a:hover{

  color:#6da6ff;

  text-decoration:underline;

}


.registro-area #legalError{

  display:none;

  margin-top:6px;

}



/* =========================================================
   BOTÓN PRINCIPAL
   ========================================================= */

.registro-area .registro-submit{

  width:100%;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:10px;

  padding:12px;

  margin-top:10px;

  background:var(--primary);

  border:none;

  border-radius:25px;

  color:#fff;

  font-size:1rem;

  font-weight:600;

  cursor:pointer;

  box-shadow:
    0 8px 20px
    rgba(31,111,235,.18);

  transition:
    background .2s ease,
    transform .2s ease,
    box-shadow .2s ease;

}


.registro-area .registro-submit i{

  font-size:.8rem;

  transition:.2s ease;

}


.registro-area .registro-submit:hover{

  background:var(--primary-hover);

  transform:translateY(-1px);

  box-shadow:
    0 10px 25px
    rgba(31,111,235,.25);

}


.registro-area .registro-submit:hover i{

  transform:translateX(3px);

}


.registro-area .registro-submit:active{

  transform:translateY(0);

}



/* =========================================================
   TURNSTILE
   ========================================================= */

.registro-area .cf-turnstile{

  width:fit-content;

  margin:20px auto 0;

}



/* =========================================================
   LOGIN MOBILE
   ========================================================= */

.registro-mobile-login{

  display:none;

}



/* =========================================================
   FOOTER
   ========================================================= */

.registro-footer{

  width:100%;

  max-width:1050px;

  margin-top:25px;

}


.registro-footer .footer{

  margin-top:0;

}



/* =========================================================
   ANIMACIÓN
   ========================================================= */

.registro-presentation,
.registro-area{

  animation:
    registroAppear .45s ease both;

}


.registro-area{

  animation-delay:.08s;

}


@keyframes registroAppear{

  from{

    opacity:0;

    transform:translateY(8px);

  }

  to{

    opacity:1;

    transform:translateY(0);

  }

}



/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:850px){

  .registro-container{

    grid-template-columns:
      minmax(0,1fr)
      380px;

    gap:35px;

  }


  .registro-presentation-content h2{

    font-size:2.4rem;

  }


  .registro-description{

    font-size:.92rem;

  }

}



/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:640px){


  .registro-page{

    min-height:100vh;

    padding:0;

    display:block;

  }


  .registro-container{

    display:block;

    width:100%;

    max-width:none;

  }


  .registro-presentation{

    display:none;

  }


  .registro-area{

    width:100%;

  }


  .registro-area .registro-card-modern{

    min-height:
      calc(100vh - 55px);

    max-width:none;

    width:100%;

    border-radius:0;

    border:none;

    padding:30px 22px 35px;

    box-shadow:none;

  }



  /* -----------------------------
     BRAND MOBILE
     ----------------------------- */

  .registro-mobile-brand{

    display:block;

    text-align:center;

    margin-bottom:28px;

  }


  .registro-logo-mobile{

    width:145px;

    max-width:60%;

    height:auto;

    display:block;

    margin:0 auto 8px;

  }


  .registro-mobile-tagline{

    color:#7e8791 !important;

    font-size:.78rem !important;

    margin:0 !important;

  }



  /* -----------------------------
     ICONO
     ----------------------------- */

  .registro-icon{

    width:58px;

    height:58px;

    font-size:1.5rem;

    margin-bottom:16px;

  }



  /* -----------------------------
     TITULO
     ----------------------------- */

  .registro-area .registro-card-modern h1{

    font-size:1.55rem;

  }


  .registro-area .registro-card-modern > p{

    font-size:.88rem;

  }



  /* -----------------------------
     CAMPOS
     ----------------------------- */

  .registro-area .registro-card-modern input:not(
    [type="checkbox"]
  ){

    padding:14px 12px;

    font-size:1rem;

  }


  .registro-area .registro-card-modern select{

    padding:14px 10px;

    font-size:1rem;

  }


  .registro-area .registro-card-modern label{

    font-size:.9rem;

  }



  /* -----------------------------
     PASSWORD
     ----------------------------- */

  .registro-area #togglePass::after{

    display:none;

  }



  /* -----------------------------
     TÉRMINOS
     ----------------------------- */

  .registro-area .tercon{

    font-size:.78rem;

  }



  /* -----------------------------
     BOTÓN
     ----------------------------- */

  .registro-area .registro-submit{

    padding:14px;

    font-size:1.05rem;

  }



  /* -----------------------------
     LOGIN
     ----------------------------- */

  .registro-mobile-login{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    flex-wrap:wrap;

    margin-top:20px;

    padding-top:18px;

    border-top:1px solid var(--border);

    color:#7e8791;

    font-size:.82rem;

  }


  .registro-mobile-login a{

    color:var(--primary);

    text-decoration:none;

    font-weight:600;

  }


  .registro-mobile-login a:hover{

    color:#6da6ff;

    text-decoration:underline;

  }


  .registro-mobile-login i{

    font-size:.68rem;

    margin-left:3px;

  }



  /* -----------------------------
     FOOTER
     ----------------------------- */

  .registro-footer{

    margin-top:0;

    width:100%;

  }

}



/* =========================================================
   MOBILE PEQUEÑO
   ========================================================= */

@media(max-width:380px){

  .registro-area .registro-card-modern{

    padding-left:18px;

    padding-right:18px;

  }


  .registro-mobile-brand{

    margin-bottom:22px;

  }


  .registro-icon{

    width:52px;

    height:52px;

    font-size:1.35rem;

  }


  .registro-area .registro-card-modern h1{

    font-size:1.45rem;

  }

}
/*//////////////////////////registro carga*/
/* =========================
   PANTALLA DE CARGA REGISTRO
========================= */

.registro-loading {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(5, 8, 12, 0.82);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}

.registro-loading.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.registro-loading-box {
    width: min(90%, 360px);
    padding: 30px 25px;

    text-align: center;

    background: rgba(17, 22, 28, 0.92);
    border: 1px solid rgba(0, 147, 255, 0.28);
    border-radius: 14px;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, .45),
        0 0 35px rgba(0, 147, 255, .06);

    animation: registroLoadingIn .3s ease;
}

.registro-loading-spinner {
    width: 52px;
    height: 52px;

    margin: 0 auto 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 3px solid rgba(255, 255, 255, .08);
    border-top-color: var(--primary);
    border-right-color: var(--primary);

    border-radius: 50%;

    color: var(--primary);
    font-size: 1rem;

    animation: registroLoadingSpin 1s linear infinite;
}

.registro-loading-spinner i {
    animation: registroLoadingSparkle 1.4s ease-in-out infinite;
}

.registro-loading-box h2 {
    margin: 0 0 7px;

    color: var(--txt-main);

    font-size: 1.05rem;
    font-weight: 600;
}

.registro-loading-box p {
    margin: 0;

    color: var(--txt-muted);

    font-size: .8rem;
    line-height: 1.5;
}


/* =========================
   ANIMACIONES
========================= */

@keyframes registroLoadingSpin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

@keyframes registroLoadingSparkle {

    0%, 100% {
        transform: scale(.8);
        opacity: .65;
    }

    50% {
        transform: scale(1.15);
        opacity: 1;
    }

}

@keyframes registroLoadingIn {

    from {
        opacity: 0;
        transform: translateY(8px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 600px) {

    .registro-loading-box {
        width: calc(100% - 30px);
        padding: 27px 20px;
    }

}