html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: flex-start; 
  min-height: 100vh; 
  font-family: 'Roboto', sans-serif;
  background: radial-gradient(circle at top,#1c1233,#090613);
  overflow-y: auto; 
}
/* ///////////////////////////////////////// Formulario Login /////////////////////////// */

.login-wrapper-log {
  display: flex;
  justify-content: center; 
  align-items: center;    
  width: 100%;
  min-height: 100vh;
  padding: 20px 0;         
  box-sizing: border-box;
}

.login-card-log {
  width: 420px;
  max-width: 95%;
  padding: 30px 40px;
  border-radius: 14px;
  background: rgba(15,10,35,0.95);
  border: 1px solid rgba(130,90,255,0.2);
  box-shadow: 0 0 40px rgba(0,0,0,0.6);
}

.logo-log {
  text-align: center;
  margin-bottom: 20px;
  margin-top: -1em;
}

.logo-img-log {
  width: 120px;
  height: 120px;
  margin-bottom: 10px;
}

.logo-log span {
  color: #9ca3af;
  font-size: 12px;
  letter-spacing: 2px;
}

.title-login-log {
  color: #ffffff;
  font-weight: 600;
  font-size: 24px;
  margin-top: 5px;
  margin-bottom: 8px;
}

.text-highlight-log {
  color: #7c3aed;
  font-weight: 600;
}

.description-log {
  color: #9ca3af;
  font-size: 13px;
  margin-bottom: 15px;
}

.link-log {
  color: #7c3aed;
  text-decoration: none;
  font-size: 13px;
}

.link-log:hover {
  text-decoration: underline;
}

.btn-login-log {
  margin-top: 5px;
  width: 100%;
  height: 44px;
  border: none;
  border-radius: 10px;
  color: white;
  font-weight: 500;
  background: linear-gradient(90deg, #9333ea, #3b82f6);
  transition: 0.3s;
}

.btn-login-log:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.form-check-input-log {
  background-color: #0e0b1d;
  border: 1px solid #7c3aed;
}

.form-check-input-log:checked {
  background-color: #7c3aed;
  border-color: #7c3aed;
}

.form-check-input-log:focus {
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.4);
  border-color: #7c3aed;
}

.form-check-label-log {
  color: #9ca3af;
  font-size: 12px;
  margin-left: 5px;
}

.register-container-log {
  text-align: center;
  margin-top: 12px;
  font-size: 13px;
  color: #9ca3af;
}

.register-link-log {
  color: #7c3aed;
  text-decoration: none;
  font-weight: 500;
  margin-left: 5px;
}

.register-link-log:hover {
  text-decoration: underline;
}

/* ///////////////////////////////////////// Modal Olvide Contraseña /////////////////////////// */

.ModalRecordarContra {
  display: flex;
  position: fixed;
  z-index: 9000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  font-family: 'Roboto', sans-serif;
  margin: 0;
}

.ContentElementosRecorCont {
  width: 100%;
  max-width: 700px;
  min-height: 420px;
  background-color: rgba(15, 10, 35, 0.95);
  border-radius: 15px;
  margin-left: 2em;
  margin-right: 2em;
  border: 1px solid rgba(130, 90, 255, 0.4);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
}

.tituloOlvidoContra{
  color: #ffffff;
  font-weight: 600;
  font-size: 24px;
  margin-top: 5px;
  margin-bottom: 8px;
}
/* ═══════════ LOGIN ADSTRACKERPRO ═══════════ */
.AtpLoginPage{
    --atp-bg:#0a0a0f; --atp-surface:#111118; --atp-surface2:#18181f;
    --atp-border:rgba(155,19,242,.18); --atp-text:#e8e8f0; --atp-dim:#b8b8cc;
    --atp-purple:#9b13f2; --atp-blue:#32a3e8;
    display:block;width:100%;min-height:100vh;margin:0;padding:0;
    background:var(--atp-bg);color:var(--atp-text);
    font-family:'Ubuntu',-apple-system,BlinkMacSystemFont,sans-serif;font-weight:300;
}
.AtpLoginTarjeta{
    position:relative;display:flex;width:100%;min-height:100vh;
    background:var(--atp-bg);overflow:hidden;perspective:1500px;
}
.AtpLoginLado{
    position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
    width:50%;padding:40px 34px;
}
.AtpLoginLadoRecuperar{
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .3s ease .35s,visibility 0s linear .65s;
}
.AtpLoginTarjeta:not(.AtpLoginVistaRecuperar) .AtpLoginLadoLogin{z-index:8;}
.AtpLoginVistaRecuperar .AtpLoginLadoRecuperar{
    z-index:8;opacity:1;visibility:visible;pointer-events:auto;
    transition:opacity .35s ease .42s,visibility 0s linear .42s;
}
.AtpLoginVistaRecuperar .AtpLoginLadoLogin{
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .3s ease .35s,visibility 0s linear .65s;
}
.AtpLoginCard{width:100%;max-width:350px;}
.AtpLoginCardHead{margin-bottom:26px;}
.AtpLoginTitulo{
    margin:0 0 6px;font-size:23px;font-weight:500;letter-spacing:-.02em;
    background:linear-gradient(90deg,var(--atp-purple),var(--atp-blue));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.AtpLoginSubtitulo{margin:0;color:var(--atp-dim);font-size:13px;line-height:1.5;}
.AtpLoginLabel{
    display:block;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;
    color:var(--atp-dim);margin:0 0 7px;font-weight:500;
}
.AtpLoginInput{
    display:flex;align-items:center;gap:10px;background:var(--atp-surface2);
    border:1px solid var(--atp-border);border-radius:8px;padding:11px 13px;
    margin-bottom:18px;transition:border-color .15s;
}
.AtpLoginInput:focus-within{border-color:rgba(155,19,242,.55);}
.AtpLoginInput i{color:var(--atp-dim);font-size:13px;width:15px;text-align:center;}
.AtpLoginInput input{
    flex:1;background:none;border:none;outline:none;color:var(--atp-text);
    font-family:'Ubuntu',sans-serif;font-size:13px;
}
.AtpLoginInput input::placeholder{color:#6a6a80;}
.AtpLoginOjo{cursor:pointer;color:var(--atp-dim);font-size:13px;}
.AtpLoginOjo:hover{color:var(--atp-text);}
.AtpLoginFila{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.AtpLoginCheck{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:12px;color:var(--atp-dim);}
.AtpLoginCheck input{accent-color:var(--atp-purple);cursor:pointer;}
.AtpLoginLink{color:var(--atp-blue);font-size:12px;cursor:pointer;text-decoration:none;}
.AtpLoginLink:hover{text-decoration:underline;}
.AtpLoginBtn{
    width:100%;padding:12px;border:none;border-radius:8px;cursor:pointer;
    background:linear-gradient(90deg,var(--atp-purple),var(--atp-blue));
    color:#fff;font-family:'Ubuntu',sans-serif;font-size:13px;font-weight:500;
    transition:opacity .15s,transform .15s;
}
.AtpLoginBtn:hover{opacity:.9;transform:translateY(-1px);}
.AtpLoginRegistro{margin-top:22px;text-align:center;font-size:12px;color:var(--atp-dim);}
.AtpLoginRegistroLink{color:var(--atp-blue);text-decoration:none;margin-left:4px;}
.AtpLoginRegistroLink:hover{text-decoration:underline;}
.AtpLoginVolver{
    display:block;margin-top:18px;text-align:center;color:var(--atp-dim);
    font-size:12px;cursor:pointer;text-decoration:none;
}
.AtpLoginVolver:hover{color:var(--atp-text);}

/* ── panel de marca deslizante ── */
.AtpLoginMarca{
    position:absolute;top:0;left:50%;z-index:5;transform:translate3d(0,0,0);
    display:flex;align-items:center;justify-content:center;width:50%;height:100%;
    padding:40px 34px;background:var(--atp-surface);
    border-left:1px solid var(--atp-border);
    transform-style:preserve-3d;backface-visibility:hidden;will-change:transform;overflow:hidden;
}
.AtpLoginMarca::before{
    content:'';position:absolute;top:-120px;right:-120px;width:340px;height:340px;
    background:radial-gradient(circle,rgba(155,19,242,.28) 0%,transparent 70%);pointer-events:none;
}
.AtpLoginMarca::after{
    content:'';position:absolute;bottom:-140px;left:-100px;width:320px;height:320px;
    background:radial-gradient(circle,rgba(50,163,232,.20) 0%,transparent 70%);pointer-events:none;
}
.AtpLoginVistaRecuperar .AtpLoginMarca{animation:AtpLoginGiroIzq 860ms linear forwards;}
.AtpLoginTarjeta.AtpLoginYaCambio:not(.AtpLoginVistaRecuperar) .AtpLoginMarca{animation:AtpLoginGiroDer 860ms linear forwards;}
.AtpLoginTarjeta:not(.AtpLoginYaCambio) .AtpLoginMarca{animation:none;}
@keyframes AtpLoginGiroIzq{
    0%{transform:translate3d(0,0,0) rotateY(0);}
    20%{transform:translate3d(-10%,0,0) rotateY(-2.6deg);}
    50%{transform:translate3d(-50%,0,0) rotateY(-4.5deg);}
    80%{transform:translate3d(-90%,0,0) rotateY(-2.6deg);}
    100%{transform:translate3d(-100%,0,0) rotateY(0);}
}
@keyframes AtpLoginGiroDer{
    0%{transform:translate3d(-100%,0,0) rotateY(0);}
    20%{transform:translate3d(-90%,0,0) rotateY(2.6deg);}
    50%{transform:translate3d(-50%,0,0) rotateY(4.5deg);}
    80%{transform:translate3d(-10%,0,0) rotateY(2.6deg);}
    100%{transform:translate3d(0,0,0) rotateY(0);}
}
.AtpLoginMarcaInner{max-width:320px;text-align:center;position:relative;z-index:1;}
.AtpLoginLogo{width:110px;height:auto;margin-bottom:20px;}
.AtpLoginMarcaTitulo{
    margin:0 0 10px;font-size:27px;font-weight:500;letter-spacing:-.02em;color:#fff;
}
.AtpLoginMarcaBadge{
    display:inline-flex;align-items:center;font-size:9.5px;font-weight:500;letter-spacing:2px;
    text-transform:uppercase;color:var(--atp-blue);background:rgba(50,163,232,.1);
    border:1px solid rgba(50,163,232,.25);border-radius:3px;padding:3px 9px;margin-bottom:16px;
}
.AtpLoginMarcaTexto{margin:0;color:var(--atp-dim);font-size:13.5px;line-height:1.6;}

@media(max-width:820px){
    .AtpLoginTarjeta{flex-direction:column;}
    .AtpLoginLado{width:100%;min-height:100vh;}
    .AtpLoginMarca{display:none;}
    .AtpLoginLadoRecuperar{position:absolute;top:0;left:0;}
}