/* MELIORA · login2026.css · Acceso */

/* General */
html{
  overflow-y:scroll;
  scrollbar-gutter:stable;
  margin: 0;
  padding: 0;
}
body.login-world-bg{
  background: var(--bg);
  --auth-h: 530px;
  margin: 0;
  padding: 0;
}

/* Container & Card Layout */
body > div,
body > form {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.auth-card{
  display:flex;
  width:100vw;
  height:100vh;
  background:transparent;
  border-radius:0;
  overflow:hidden;
  box-shadow:none;
}

/* Left Pane */
.auth-image-pane{
  width:44%;
  flex-shrink:0;
  padding:46px 44px;
  position:relative;
  overflow:hidden;
  color:#fff;
}
.auth-image-pane::after{
  content:'';
  position:absolute;
  bottom:-120px;
  right:-120px;
  width:340px;
  height:340px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,212,190,.22), transparent 70%);
  pointer-events:none;
}
.auth-image-content{ position:relative; z-index:1; }
.reg-logo{ max-height: 50px !important; }
.reg-brand-name{ font-size:21px; }
.reg-tagline{ font-family:'Instrument Serif', Georgia, serif; font-style:italic; }

/* Right Pane */
.auth-form-pane{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg);
  padding: 20px;
}
.auth-form-pane > div {
  width: 100%;
  max-width: 520px;
  background: var(--s);
  border-radius: var(--r4);
  box-shadow: var(--sh3);
  padding: 0;
}
.auth-form-pane .p-4,
.auth-form-pane .p-lg-5{
  padding:22px 20px !important;
}
.auth-form-logo{ height:34px; margin:0 auto; display:block; }

/* Segmented Tabs */
div.au-tabs{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  background:var(--s2) !important;
  border:1px solid var(--bd) !important;
  border-radius:var(--r2) !important;
  padding:4px !important;
  gap:4px !important;
  width:100%;
}
.au-tabs a{
  display:block !important;
  text-align:center !important;
  padding:9px !important;
  border-radius:9px !important;
  font-size:13px !important;
  font-weight:700 !important;
  color:var(--i3) !important;
  text-decoration:none !important;
  background:transparent !important;
  transition:.14s;
}
.au-tabs a:hover{ color:var(--i2) !important; }
.au-tabs a.on{
  background:var(--s) !important;
  color:var(--ink) !important;
  box-shadow:var(--sh1);
}

/* Password Toggle */
.toggle-password{ color:var(--i4); flex-shrink:0; display:flex; align-items:center; cursor:pointer; pointer-events: auto !important; z-index: 1; }
.toggle-password:hover{ color:var(--i2); }
.toggle-password i{ font-size:13px; pointer-events: auto !important; }

/* Separator */
.au-div{
  display:flex; align-items:center; gap:10px;
  margin:15px 0; color:var(--i4); font-size:11px; font-weight:700;
}
.au-div span{ flex:1; height:1px; background:var(--bd); }

/* Alt Links */
.au-alt{
  text-align:center; font-size:12px; color:var(--i3);
  margin-top:14px; font-weight:600; line-height:1.5;
}
.au-alt a{ color:var(--blue); font-weight:700; pointer-events: auto !important; }
.au-alt a:hover{ text-decoration:underline; }

/* Stepper */
.au-steps{ display:flex; align-items:center; gap:8px; }
.au-step{
  display:flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:700; color:var(--i4); white-space:nowrap;
}
.au-step .n{
  width:22px; height:22px; border-radius:99px;
  border:1.5px solid var(--bd2);
  display:grid; place-items:center;
  font-size:10.5px; font-weight:800; flex-shrink:0;
  transition:.14s;
}
.au-step.on{ color:var(--ink); }
.au-step.on .n{ background:var(--blue); border-color:var(--blue); color:#fff; }
.au-step.done{ color:var(--grn); }
.au-step.done .n{ background:var(--grn2); border-color:transparent; color:var(--grn); }
.au-sline{ flex:1; height:1.5px; background:var(--bd); }

/* Plan Selector */
.au-types{ display:flex; flex-direction:column; gap:9px; }
.au-type{
  display:flex; align-items:center; gap:12px;
  border:1.5px solid var(--bd); border-radius:var(--r3);
  padding:12px 14px; text-align:left; transition:.14s;
  background:var(--s); width:100%; cursor:pointer;
}
.au-type:hover{ border-color:var(--bd2); }
.au-type.sel{ border-color:var(--blue); box-shadow:0 0 0 3px var(--bt); }
.au-type .d2{
  width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center; color:#fff; flex-shrink:0;
}
.au-type .tn{ font-size:13.5px; font-weight:800; color:var(--ink); }
.au-type .td{ font-size:11.5px; color:var(--i3); margin-top:1px; }
.au-type .tp{
  margin-left:auto; font-size:13.5px; font-weight:800;
  color:var(--ink); flex-shrink:0; text-align:right;
}
.au-type .tp small{ display:block; font-size:10px; color:var(--i4); font-weight:600; }

/* Plan Summary & Notes */
.au-sum{
  display:flex; align-items:center; gap:11px;
  background:var(--s2); border:1px solid var(--bd);
  border-radius:var(--r2); padding:10px 13px; margin-bottom:14px;
}
.au-sum .sic{
  width:34px; height:34px; border-radius:10px;
  background:var(--bt); color:var(--blue);
  display:grid; place-items:center; flex-shrink:0;
}
.au-note{
  display:flex; gap:8px; align-items:flex-start;
  background:var(--ts); border:1px solid var(--tb);
  border-radius:var(--r2); padding:10px 12px;
  font-size:11.5px; color:var(--teal); font-weight:600;
  line-height:1.5; margin-bottom:13px;
}
.au-note svg{ flex-shrink:0; margin-top:1px; }

/* Bootstrap Compat */
.alert-danger{
  background:var(--red2) !important;
  border-color:#FCA5A5 !important;
  color:#B91C1C !important;
  border-radius:var(--r2) !important;
}

/* Compact layouts */
body.login-world-bg .min-vh-100{
  padding-top:14px !important;
  padding-bottom:14px !important;
}
.auth-form-pane .p-4,
.auth-form-pane .p-lg-5{
  padding:22px 20px !important;
}
.auth-form-logo{ height:50px !important; }
.text-center.mb-4{ margin-bottom:14px !important; }
.auth-form-pane h2{ margin-top:8px !important; font-size:18px !important; }
.auth-form-pane p.fs-12{ margin-top:2px !important; }
.au-tabs.mb-4{ margin-bottom:14px !important; }
.au-steps.mb-4{ margin-bottom:14px !important; }
.au-div{ margin:10px 0 !important; }
.auth-form-pane .mb-3{ margin-bottom:10px !important; }
.auth-form-pane .mt-3{ margin-top:10px !important; }
.au-alt{ margin-top:10px !important; }
.au-types{ gap:6px !important; }
.au-type{ padding:9px 12px !important; gap:10px !important; }
.au-type .d2{ width:30px !important; height:30px !important; }
.au-sum{ padding:8px 12px !important; margin-bottom:10px !important; }
.au-note{ padding:8px 10px !important; margin-bottom:10px !important; }

/* Responsive */
@media (max-width: 767.98px){
  body.login-world-bg{ --auth-h: auto; }
  .auth-card{ border-radius:var(--r3); }
  .au-step .td, .au-type .td{ display:none; }
  .au-steps{ gap:5px; }
  .au-step{ font-size:10.5px; }
}

/* Validation Errors */
label.error, .invalid-feedback {
  color: #EF4444 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  margin-top: 4px !important;
  text-align: left !important;
  display: block !important;
}
.input.error {
  border-color: #EF4444 !important;
}

/* Password Strength */
.pwd-bar-track {
  height: 4px;
  background: var(--bd);
  border-radius: 99px;
  overflow: hidden;
}
.pwd-bar-fill {
  height: 100%;
  border-radius: 99px;
  width: 0;
  transition: width 0.3s ease, background-color 0.3s ease;
}
.pwd-weak { background-color: var(--red); }
.pwd-medium { background-color: var(--amber); }
.pwd-strong { background-color: var(--grn); }
.pwd-bar-label {
  font-size: 11px;
  font-weight: 700;
  margin-top: 4px;
  display: inline-block;
}

/* Button personalizado */
.btn-primary-auth {
  width: 100%;
  padding: 10px 14px;
  background: var(--blue);
  color: #fff;
  border: 1.5px solid var(--blue);
  border-radius: var(--r2);
  font: 700 12px/1 'Plus Jakarta Sans', sans-serif;
  cursor: pointer;
  transition: .13s;
  box-shadow: var(--btn-shadow);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-sizing: border-box;
}

.d-flex .btn-primary-auth {
  width: auto;
  flex: 1;
  margin-bottom: 0;
}

.btn-primary-auth:hover {
  background: var(--bdk);
  border-color: var(--bdk);
}

.btn-primary-auth:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* Button Google (neutro, sin azul de marca) */
.btn-google-auth {
  width: 100%;
  padding: 10px 14px;
  background: #fff;
  color: #3c4043;
  border: 1.5px solid #ccc;
  border-radius: var(--r2);
  font: 700 12px/1 'Plus Jakarta Sans', sans-serif;
  cursor: pointer;
  transition: .13s;
  box-shadow: none;
  margin-bottom: 10px;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

.btn-google-auth:hover {
  background: #f5f5f5;
  border-color: #bbb;
}

/* Button Secundario */
.btn-secondary-auth {
  width: auto;
  padding: 10px 14px;
  background: var(--s);
  color: var(--i2);
  border: 1.5px solid var(--bd2);
  border-radius: var(--r2);
  font: 700 12px/1 'Plus Jakarta Sans', sans-serif;
  cursor: pointer;
  transition: .13s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 1;
}

.btn-secondary-auth:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.btn-secondary-auth:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* Animación de palpitación */
@keyframes pulse-glow {
  0%, 100% {
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.3));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 30px 60px rgba(18, 53, 194, 0.4));
    transform: scale(1.02);
  }
}

.pulse-logo {
  animation: pulse-glow 2.5s ease-in-out infinite;
}