/* ============== LOADER OVERLAY ============== */

#page-loader{
  position:fixed;
  inset:0;
  background:#ffffff;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .4s ease;
  font-family:'Inter',sans-serif;
  color:#0A4772;
  padding:1rem;
}

/* oculto por defecto */
#page-loader.hidden{
  opacity:0;
  pointer-events:none;
  /* dejamos display:flex para poder hacer fade-in rápido */
}

/* Tarjeta */
.loader-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:#fff;
  border:2px solid #0A4772;
  border-radius:24px;
  padding:2rem 2rem 1.5rem;
  box-shadow:0 20px 40px rgba(0,0,0,.15);
  max-width:320px;
  width:100%;
}

.loader-logo{
  width:72px;
  height:72px;
  object-fit:contain;
  margin-bottom:1rem;
  border-radius:16px;
  box-shadow:0 6px 12px rgba(0,0,0,.15);
  background:#fff;
}

.loader-text{
  font-weight:700;
  font-size:1rem;
  line-height:1.4;
  color:#0A4772;
  margin-bottom:1rem;
  text-wrap:balance;
  text-shadow:0 2px 4px rgba(0,0,0,.08);
}

/* Lista de pasos */
.loader-steps{
  list-style:none;
  width:100%;
  text-align:left;
  padding:0;
  margin:0 0 1.25rem 0;
  font-size:.9rem;
  line-height:1.4;
  font-weight:500;
  color:#0A4772;
}

.loader-steps li{
  display:flex;
  align-items:flex-start;
  gap:.5rem;
  margin-bottom:.5rem;
  position:relative;
  padding-left:1.4rem;
}

/* bolita de estado */
.loader-steps li::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  position:absolute;
  left:0;
  top:.4rem;
  box-shadow:0 0 4px rgba(0,0,0,.2);
}

/* estados visuales */
.loader-steps li.pending::before{
  background:#ccc;
}
.loader-steps li.active{
  font-weight:600;
  color:#0072ff;
}
.loader-steps li.active::before{
  background:#0072ff;
}
.loader-steps li.done{
  color:#0A4772;
  opacity:.7;
}
.loader-steps li.done::before{
  background:#00c853; /* verde done */
  box-shadow:0 0 6px rgba(0,200,83,.6);
}

/* Spinner 3 anillos */
.loader-spinner{
  position:relative;
  width:48px;
  height:48px;
}

.loader-spinner .ring{
  position:absolute;
  inset:0;
  border:3px solid transparent;
  border-top-color:#0072ff;
  border-radius:50%;
  animation:spin 1s linear infinite;
}

.loader-spinner .ring:nth-child(2){
  border-top-color:#FFCA28;
  animation-duration:1.4s;
  inset:6px;
}

.loader-spinner .ring:nth-child(3){
  border-top-color:#ff7043;
  animation-duration:1.8s;
  inset:12px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Responsive loader */
@media(max-width:400px){
  .loader-card{
    max-width:90%;
    border-radius:18px;
    padding:1.5rem 1rem 1rem;
  }
  .loader-text{
    font-size:.95rem;
  }
  .loader-steps{
    font-size:.8rem;
  }
}