.loader{
    position: fixed;
    top: 0;
    left: 0;
    min-height: 100dvh;
    background: #fff;
    z-index: 9999999;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    opacity: 1;
}
.loader.done{
    top: 150%;
    opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* Contenedor interno del esqueleto */
.loader .skeleton{
  width: 100%;
  display: grid;
  height: 100%;
}

/* Fila y columna utilitarias */
.loader .s-row{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .5rem;
}
.loader .s-col{
  display: grid;
  gap: .2rem;
}

/* Bloque base con efecto "shimmer" blanco -> gris -> blanco */
.loader .s-box{
  display: block;
  border-radius: 10px;
  background: linear-gradient(45deg, #e4e4e4 0%,  #d4d4d4 100%);
  background-size: 400% 100%;
  animation: loaderShimmer 3s linear infinite;
}

/* Alturas comunes */
.loader .s-h10{ height: 10px; height: 2rem;}
.loader .s-h12{ height: 12px; }
.loader .s-h14{ height: 14px; }

/* Anchos variados */
.loader .s-w35{ width: 35%;  height: 2rem;}
.loader .s-w40{ width: 40%; }
.loader .s-w55{ width: 55%; }
.loader .s-w60{ width: 60%; }
.loader .s-w65{ width: 65%; }
.loader .s-w70{ width: 70%; height: 1.5rem;}
.loader .s-w75{ width: 75%; }
.loader .s-w80{ width: 80%; height: 2rem;}
.loader .s-w85{ width: 85%; }
.loader .s-w90{ width: 90%; }
.loader .s-w95{ width: 95%; height: 3rem;}

/* Avatar y miniatura */
.loader .s-avatar{
  width: 44px; height: 44px; border-radius: 50%;;
}
.loader .s-thumb{
  width: 88px; height: 66px; border-radius: 12px;
}

/* Animación */
@keyframes loaderShimmer{
  0%   { background-position: 0% 0; }
  100% { background-position: -400% 0; }
}

@media (prefers-reduced-motion: reduce){
  .loader .s-box{ animation: none; background-position: 50% 0; }
}

/* Modo oscuro opcional (ajusta si tu UI usa dark) */
@media (prefers-color-scheme: dark){
  .loader .s-box{
    background: linear-gradient(45deg, #e6e6e6 0%, #d6d6d6 50%, #ffffff 100%);
    background-size: 400% 100%;
  }
}

body.noScroll{ overflow: hidden; }

.loader{
  transition: opacity .25s ease;
}