/* ============================================================
   ESTADOS — carga y vacío (2026-09-20).
   Antes: un "Cargando…" en texto plano y un cuadro punteado con una frase.
   Ahora: esqueletos con la forma de lo que va a llegar y vacíos con
   composición propia (arte de los pilotos + una sola invitación).
   Solo tokens del tema, así que sirve en Medianoche, Alba y Aurora.
   ============================================================ */

/* ---- Esqueletos ---- */
.skel{
  display:block;position:relative;overflow:hidden;
  border-radius:8px;background:var(--s5);
}
.skel::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,var(--s5) 50%,transparent 100%);
  transform:translateX(-100%);
  animation:skelBarrido 1.7s ease-in-out infinite;
}
.skel-line{height:14px;width:100%;margin:10px 0;}
.skel-line--media{width:72%;}
.skel-line--corta{width:46%;}
.skel-block{height:78px;border-radius:14px;margin:0 0 12px;}
@keyframes skelBarrido{to{transform:translateX(100%);}}
@media (prefers-reduced-motion:reduce){
  .skel::after{animation:none;}
}
/* Texto solo para lectores de pantalla (el esqueleto es puramente visual). */
.solo-lectores{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* Los esqueletos dentro de un párrafo de subtítulo mantienen su ancho de lectura. */
.section-sub .skel-line{margin-left:auto;margin-right:auto;}

/* ---- Vacíos ---- */
.vacio{
  position:relative;isolation:isolate;overflow:hidden;
  padding:38px 26px 32px;text-align:center;
  border:1px dashed var(--border);border-radius:18px;
}
.vacio::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--vacio-art) center/cover no-repeat;
  opacity:.3;
  -webkit-mask-image:radial-gradient(closest-side,#000 25%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 25%,transparent 100%);
}
/* El arte de los pilotos es oscuro: en Alba se invierte y se funde con el crema. */
html[data-theme="alba"] .vacio{background:var(--void);}
html[data-theme="alba"] .vacio::before{filter:invert(1);mix-blend-mode:multiply;opacity:.4;}
.vacio--personas{--vacio-art:url('../../assets/editorial/pilotos/orbitas.webp');}
.vacio--memoria{--vacio-art:url('../../assets/editorial/pilotos/ciclos.webp');}
.vacio--luna{--vacio-art:url('../../assets/editorial/pilotos/luna.webp');}
.vacio-titulo{
  margin:0 0 8px;
  font-family:'Fraunces','Georgia',serif;font-optical-sizing:auto;font-weight:400;
  font-size:clamp(19px,2.4vw,23px);line-height:1.2;color:var(--ink);text-wrap:balance;
}
.vacio p{
  margin:0 auto;max-width:440px;
  font-family:'Fraunces','Georgia',serif;font-weight:300;font-size:15px;line-height:1.6;color:var(--muted);
  text-wrap:pretty;
}
.vacio .action-btn{margin-top:18px;}

/* Encaja con los contenedores que ya existían */
.vacio.biblioteca-empty-state{background:transparent;border:1px dashed var(--border);}
html[data-theme="alba"] .vacio.biblioteca-empty-state{background:var(--void);}
.vacio.biblioteca-empty-state p{color:var(--muted);font-size:15px;}