/*
 * Estilo "weTAP" para páginas de cuenta (registro y afines). Reutiliza los tokens y componentes de site.html
 * (nav, fondo hero, form-box, .ff, botones, footer) para que se vean como la web.
 */
:root {
  --blue      : #1A56B0;
  --blue-dark : #0D3A7A;
  --blue-mid  : #1E6FD4;
  --blue-glow : #3B9EFF;
  --accent    : #00C6FF;
  --white     : #FFF;
  --gray      : #6B7EA0;
  --bg-dark   : #06101F;
  --bg-card   : rgba(255, 255, 255, 0.04);
  --border    : rgba(255, 255, 255, 0.09);
  --danger    : #F87171;
}

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

html { scroll-behavior : smooth; }

body {
  font-family : 'Montserrat Alternates', sans-serif;
  background  : var(--bg-dark);
  color       : var(--white);
  overflow-x  : hidden;
  line-height : 1.6;
  min-height  : 100vh;
  display     : flex;
  flex-direction : column;
}

body::after {
  content          : '';
  position         : fixed; inset : 0; z-index : 9999;
  pointer-events   : none;
  background-image : url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  opacity          : .3;
}

a { color : var(--accent); }

/* ── NAV ── */
nav {
  position        : fixed; top : 0; left : 0; right : 0; z-index : 500;
  display         : flex; align-items : center; justify-content : space-between;
  padding         : 14px 6vw;
  background      : rgba(6, 16, 31, 0.82);
  backdrop-filter : blur(22px);
  border-bottom   : 1px solid var(--border);
  animation       : slideDown .6s ease both;
}

.nav-logo img { height : 40px; display : block; }

.btn-nav {
  background      : var(--blue); color : #FFF;
  border          : none; cursor : pointer;
  padding         : 10px 22px; border-radius : 50px;
  font-family     : 'Montserrat Alternates', sans-serif;
  font-size       : 13px; font-weight : 700;
  letter-spacing  : .03em;
  transition      : background .2s, transform .15s;
  text-decoration : none; white-space : nowrap;
}

.btn-nav:hover { background : var(--blue-mid); transform : scale(1.04); }

.btn-ghost {
  background      : transparent; border : 1.5px solid rgba(255, 255, 255, .22);
  color           : rgba(255, 255, 255, .8); cursor : pointer;
  padding         : 8px 16px; border-radius : 25px;
  font-family     : 'Montserrat Alternates', sans-serif;
  font-size       : 12px; font-weight : 600; white-space : nowrap;
  transition      : border-color .2s, color .2s;
  text-decoration : none; display : inline-flex; align-items : center; gap : 8px;
}

.btn-ghost:hover { border-color : var(--accent); color : var(--accent); }

/* ── SECCIÓN CON FONDO HERO ── */
.auth-section {
  flex        : 1;
  display     : flex; flex-direction : column;
  align-items : center; justify-content : center;
  text-align  : center;
  padding     : 120px 6vw 70px;
  position    : relative; overflow : hidden;
}

.hero-bg {
  position   : absolute; inset : 0; z-index : 0;
  background : radial-gradient(ellipse 88% 62% at 50% 32%, rgba(26, 86, 176, .44) 0%, transparent 68%),
  radial-gradient(ellipse 40% 40% at 82% 72%, rgba(0, 198, 255, .10) 0%, transparent 60%),
  var(--bg-dark);
}

.hero-grid {
  position         : absolute; inset : 0; z-index : 0;
  background-image : linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size  : 58px 58px;
  mask-image       : radial-gradient(ellipse 80% 60% at 50% 28%, black 15%, transparent 80%);
}

.hero-badge {
  position       : relative; z-index : 1;
  display        : inline-flex; align-items : center; gap : 8px;
  background     : rgba(26, 86, 176, .2);
  border         : 1px solid rgba(0, 198, 255, .32);
  color          : var(--accent);
  font-size      : 11px; font-weight : 700;
  letter-spacing : .12em; text-transform : uppercase;
  padding        : 7px 18px; border-radius : 50px;
  margin-bottom  : 24px;
  animation      : fadeUp .5s .1s ease both;
}

.badge-dot { width : 7px; height : 7px; border-radius : 50%; background : var(--accent); flex-shrink : 0; animation : pulse 2s infinite; }

.auth-section h1 {
  position       : relative; z-index : 1;
  font-size      : clamp(32px, 5.4vw, 56px);
  font-weight    : 900; line-height : 1.05;
  letter-spacing : -.025em;
  animation      : fadeUp .6s .2s ease both;
}

.auth-section h1 em {
  font-style              : normal;
  background              : linear-gradient(105deg, var(--accent) 0%, #60C8FF 100%);
  -webkit-background-clip : text; -webkit-text-fill-color : transparent;
  background-clip         : text;
}

.auth-sub-wrap {
  position        : relative; z-index : 1;
  display         : flex;
  align-items     : center;
  justify-content : center;
  gap             : 20px;
  max-width       : 480px;
  margin          : 16px auto 0;
  animation       : fadeUp .6s .3s ease both;
}

.auth-sub-wrap.has-image {
  max-width : 620px;
}

.auth-sub-wrap .auth-sub-img {
  max-height  : 110px;
  max-width   : 130px;
  width       : auto;
  height      : auto;
  object-fit  : contain;
  flex-shrink : 0;
}

.auth-sub {
  position  : relative; z-index : 1;
  font-size : clamp(14px, 1.6vw, 17px); font-weight : 300;
  color     : rgba(255, 255, 255, .58);
  max-width : 480px; margin : 0; line-height : 1.7;
}

.auth-sub-wrap.has-image .auth-sub {
  text-align : left;
}

/* ── FORMULARIO ── */
.form-box {
  position   : relative; z-index : 1;
  width      : min(460px, 100%); margin-top : 34px; text-align : left;
  background : var(--bg-card); border : 1px solid var(--border); border-radius : 20px; padding : 34px;
  backdrop-filter : blur(6px);
  animation  : fadeUp .6s .4s ease both;
}

.form-box h3 { font-size : 17px; font-weight : 700; margin-bottom : 20px; }

.ff { margin-bottom : 13px; position : relative; }

.ff label { font-size : 10px; font-weight : 700; letter-spacing : .1em; text-transform : uppercase; color : rgba(255, 255, 255, .38); display : block; margin-bottom : 5px; }

.ff input[type=text], .ff input[type=email], .ff input[type=password], .ff textarea, .ff select {
  width              : 100%; background : rgba(255, 255, 255, .06); border : 1px solid rgba(255, 255, 255, .11);
  color              : #FFF; padding : 11px 15px; border-radius : 10px;
  font-family        : 'Montserrat Alternates', sans-serif; font-size : 13px; font-weight : 300;
  outline            : none; transition : border-color .2s; resize : vertical;
  -webkit-appearance : none; appearance : none;
}

.ff input::placeholder, .ff textarea::placeholder { color : rgba(255, 255, 255, .26); }

.ff input:focus, .ff textarea:focus, .ff select:focus { border-color : var(--accent); }

.ff.has-error input { border-color : var(--danger); }

.ff .hint { font-size : 11px; color : rgba(255, 255, 255, .34); font-weight : 300; margin-top : 5px; }

.ff .err { display : none; font-size : 11px; color : var(--danger); margin-top : 5px; }

.ff.has-error .err { display : block; }

.ff.has-pass input { padding-right : 44px; }

.pass-toggle {
  position : absolute; right : 4px; bottom : 2px; width : 40px; height : 40px;
  background : none; border : none; cursor : pointer; color : rgba(255, 255, 255, .4);
  font-size : 14px; transition : color .2s;
}

.pass-toggle:hover { color : var(--accent); }

.check {
  display : flex; align-items : flex-start; gap : 10px; margin : 16px 0 4px;
  font-size : 12px; font-weight : 300; color : rgba(255, 255, 255, .6); cursor : pointer;
}

.check input {
  -webkit-appearance : none; appearance : none; flex-shrink : 0;
  width : 18px; height : 18px; margin-top : 1px; border-radius : 5px; cursor : pointer;
  background : rgba(255, 255, 255, .06); border : 1px solid rgba(255, 255, 255, .22);
  display : grid; place-content : center; transition : background .2s, border-color .2s;
}

.check input::after { content : '\2713'; font-size : 12px; font-weight : 800; color : #FFF; transform : scale(0); transition : transform .15s; }

.check input:checked { background : var(--blue); border-color : var(--blue-glow); }

.check input:checked::after { transform : scale(1); }

.check.has-error input { border-color : var(--danger); }

.form-alert {
  display : none; margin-top : 14px; padding : 11px 14px; border-radius : 10px; font-size : 12px; font-weight : 400;
  background : rgba(248, 113, 113, .1); border : 1px solid rgba(248, 113, 113, .4); color : #FCA5A5;
}

.form-submit {
  width       : 100%; padding : 14px; background : var(--blue); color : #FFF;
  border      : none; cursor : pointer; border-radius : 50px;
  font-family : 'Montserrat Alternates', sans-serif; font-size : 14px; font-weight : 800;
  box-shadow  : 0 0 28px rgba(26, 86, 176, .4); transition : background .2s, transform .15s; margin-top : 18px;
}

.form-submit:hover { background : var(--blue-mid); transform : translateY(-1px); }

.form-submit:disabled { opacity : .6; cursor : default; transform : none; }

/* El badge fixed queda atrapado por el backdrop-filter de .form-box: se oculta y se muestra el aviso legal en el footer */
.grecaptcha-badge { visibility : hidden; }
.recaptcha-note { font-size : 11px; font-weight : 300; color : rgba(255, 255, 255, .35); margin-bottom : 8px; }
.recaptcha-note a { color : inherit; text-decoration : underline; }

.form-foot { margin-top : 18px; font-size : 12px; font-weight : 300; color : rgba(255, 255, 255, .5); text-align : center; }

/* ── LOGIN SOCIAL ── */
.social-login { margin-top : 18px; }

/* Botones sociales arriba del form: el separador "o" va debajo del botón */
.social-top .social-login { display : flex; flex-direction : column-reverse; margin-top : 0; margin-bottom : 18px; }
.social-top .social-sep { margin : 18px 0 0; }

.social-sep {
  display : flex; align-items : center; gap : 12px; margin-bottom : 14px;
  font-size : 11px; letter-spacing : .1em; text-transform : uppercase; color : rgba(255, 255, 255, .3);
}

.social-sep::before, .social-sep::after { content : ''; flex : 1; height : 1px; background : var(--border); }

.btn-social {
  display : flex; align-items : center; justify-content : center; gap : 10px; width : 100%;
  padding : 12px; margin-bottom : 10px; border-radius : 50px;
  background : rgba(255, 255, 255, .05); border : 1.5px solid rgba(255, 255, 255, .16);
  color : rgba(255, 255, 255, .85); text-decoration : none;
  font-family : 'Montserrat Alternates', sans-serif; font-size : 13px; font-weight : 600;
  transition : border-color .2s, background .2s, color .2s;
}

.btn-social:hover { border-color : var(--accent); background : rgba(0, 198, 255, .08); color : #FFF; }

/* ── ÉXITO ── */
.form-success { display : none; text-align : center; padding : 22px 6px; }

.form-success .fs-icon { font-size : 38px; margin-bottom : 10px; }

.form-success strong { font-size : 16px; font-weight : 700; display : block; margin-bottom : 8px; }

.form-success p { font-size : 13px; color : rgba(255, 255, 255, .55); font-weight : 300; }

.form-success a { font-weight : 600; }

/* ── FOOTER ── */
footer {
  border-top : 1px solid var(--border); padding : 34px 6vw;
  display    : flex; align-items : center; justify-content : space-between; flex-wrap : wrap; gap : 16px;
}

footer img { height : 34px; display : block; }

.footer-links { display : flex; gap : 13px; }

.footer-links a { font-size : 14px; color : rgba(255, 255, 255, .36); text-decoration : none; transition : color .2s; font-weight : 400; }

.footer-links a:hover { color : var(--accent); }

footer p { font-size : 12px; color : rgba(255, 255, 255, .26); font-weight : 300; }

/* ── ANIMACIONES ── */
@keyframes slideDown {
  from { opacity : 0; transform : translateY(-14px); }
  to { opacity : 1; transform : translateY(0); }
}

@keyframes fadeUp {
  from { opacity : 0; transform : translateY(26px); }
  to { opacity : 1; transform : translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity : 1; transform : scale(1); }
  50% { opacity : .5; transform : scale(.8); }
}

@media (prefers-reduced-motion : reduce) {
  *, *::before, *::after { animation : none !important; transition : none !important; }
}

/* ── RESPONSIVE ── */
@media (max-width : 768px) {
  .auth-sub-wrap.has-image {
    flex-direction : column;
    text-align     : center;
    gap            : 14px;
  }

  .auth-sub-wrap.has-image .auth-sub {
    text-align : center;
  }

  footer { flex-direction : column; text-align : center; }

  .footer-links { justify-content : center; }

  .form-box { padding : 26px 20px; }
}

/* alertify con el estilo de la web */
.alertify { color : #FFF !important; }

.alertify .ajs-header, .alertify .ajs-footer, .alertify .ajs-dialog { background-color : #1F3D69; }

.alertify .ajs-dialog { box-shadow : 0 0 28px rgba(0, 198, 255, .2); border-radius : 20px; }

/* ── Enlaces con aspecto de botón y paneles de página ── */
a.form-submit { display : block; text-align : center; text-decoration : none; color : #FFF; }

a.form-submit:hover { color : #FFF; }

.form-box p.lead { font-size : 13px; font-weight : 300; color : rgba(255, 255, 255, .62); margin-bottom : 16px; }

.form-box .wa-panel + .form-success, .form-box .form-success + .form-success { margin-top : 0; }