/* NUC-125 · El diálogo de espera larga (ficha docs/fichas/NUC125_espera_larga.md).
   Se pinta con los tokens de ui/base.html; los valores de reserva son los del tema oscuro
   de siempre, para las pantallas con base propia (la puerta de entrar). */
dialog.espera-larga {
  --el-acento: var(--acento);
  --el-pista: color-mix(in srgb, var(--el-acento) 16%, transparent);
  width: min(360px, calc(100vw - 32px));
  margin: auto;
  padding: var(--aire-6, 32px) var(--aire-5, 24px) var(--aire-5, 24px);
  border: 1px solid var(--borde, #262b32);
  border-radius: 12px;
  background: var(--panel, #1e2329);
  color: var(--tinta, #d7dbe0);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  text-align: center;
  cursor: progress;
  outline: none;
}
dialog.espera-larga[open] {
  display: grid;
  justify-items: center;
  gap: var(--aire-3, 12px);
  animation: el-entrar .32s var(--curva-salida, cubic-bezier(.23, 1, .32, 1));
}
dialog.espera-larga::backdrop {
  background: rgba(10, 12, 15, .62);
  backdrop-filter: blur(3px) saturate(.9);
  -webkit-backdrop-filter: blur(3px) saturate(.9);
  cursor: progress;
}
@keyframes el-entrar { from { opacity: 0; transform: translateY(6px) scale(.98); } }
dialog.espera-larga .el-titulo { margin: var(--aire-2, 8px) 0 0; font-size: 16px; font-weight: 600;
  color: var(--brillo, #f0f2f4); text-wrap: balance; }
dialog.espera-larga .el-texto { margin: 0; font-size: 13.5px; max-width: 30ch; }
dialog.espera-larga .el-reloj { margin: 0; min-height: 1.5em; font-size: 12px; color: var(--suave, #8a919b);
  font-variant-numeric: tabular-nums; }
dialog.espera-larga .el-reloj.lento { color: var(--el-acento); }
dialog.espera-larga .el-figura { display: grid; place-items: center; min-height: 56px; }

/* anillo (por defecto): cargas genéricas */
.el-anillo { width: 44px; height: 44px; border-radius: 50%; position: relative; }
.el-anillo::before, .el-anillo::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid var(--el-pista); }
.el-anillo::after { border-color: transparent; border-top-color: var(--el-acento); border-right-color: var(--el-acento);
  animation: el-girar 1.1s cubic-bezier(.55, .15, .45, .85) infinite; }
@keyframes el-girar { to { transform: rotate(360deg); } }

/* barra: esperas largas por lotes */
.el-barra { width: 180px; height: 3px; border-radius: 3px; background: var(--el-pista); overflow: hidden; position: relative; }
.el-barra::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; border-radius: 3px;
  background: var(--el-acento); animation: el-deslizar 1.4s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes el-deslizar { from { left: -40%; } to { left: 100%; } }

/* pulso: la IA pensando */
.el-pulso { display: flex; gap: 7px; align-items: center; }
.el-pulso i { width: 8px; height: 8px; border-radius: 50%; background: var(--el-acento);
  animation: el-respirar 1.2s ease-in-out infinite; }
.el-pulso i:nth-child(2) { animation-delay: .16s; }
.el-pulso i:nth-child(3) { animation-delay: .32s; }
@keyframes el-respirar { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }

/* hoja: papeles, paquetes y envíos de documentos — las líneas se escriben y se borran juntas */
.el-hoja { width: 46px; height: 56px; }
.el-hoja .papel { fill: var(--panel-2, #1a1e23); stroke: var(--borde-input, #2c323a); stroke-width: 1.5; }
.el-hoja .doblez { fill: var(--borde, #262b32); }
.el-hoja .pista { stroke: var(--el-pista); stroke-width: 3; stroke-linecap: round; }
.el-hoja .linea { stroke: var(--el-acento); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 24;
  stroke-dashoffset: 24; animation: 2.6s var(--curva-salida, cubic-bezier(.23, 1, .32, 1)) infinite; }
.el-hoja .linea.l1 { animation-name: el-escribir1; }
.el-hoja .linea.l2 { animation-name: el-escribir2; }
.el-hoja .linea.l3 { animation-name: el-escribir3; }
.el-hoja .linea.l4 { animation-name: el-escribir4; stroke-dasharray: 16 24; }
@keyframes el-escribir1 { 0% { stroke-dashoffset: 24; opacity: 1; } 14%, 82% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes el-escribir2 { 0%, 16% { stroke-dashoffset: 24; opacity: 1; } 30%, 82% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes el-escribir3 { 0%, 32% { stroke-dashoffset: 24; opacity: 1; } 46%, 82% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes el-escribir4 { 0%, 48% { stroke-dashoffset: 24; opacity: 1; } 62%, 82% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }

/* filas: el importador — cuatro filas se ordenan de menor a mayor y se vuelven a barajar */
.el-filas { position: relative; width: 56px; height: 44px; }
.el-filas i { position: absolute; left: 0; top: 0; height: 6px; border-radius: 3px; background: var(--el-acento);
  animation: 2.8s var(--curva-salida, cubic-bezier(.23, 1, .32, 1)) infinite; }
.el-filas i:nth-child(1) { width: 22px; opacity: .55; animation-name: el-fila1; }
.el-filas i:nth-child(2) { width: 34px; opacity: .7; animation-name: el-fila2; }
.el-filas i:nth-child(3) { width: 44px; opacity: .85; animation-name: el-fila3; }
.el-filas i:nth-child(4) { width: 56px; animation-name: el-fila4; }
@keyframes el-fila1 { 0%, 10% { transform: translateY(24px); } 30%, 45% { transform: translateY(0); } 65%, 80% { transform: translateY(36px); } 100% { transform: translateY(24px); } }
@keyframes el-fila2 { 0%, 10% { transform: translateY(36px); } 30%, 45% { transform: translateY(12px); } 65%, 80% { transform: translateY(0); } 100% { transform: translateY(36px); } }
@keyframes el-fila3 { 0%, 10% { transform: translateY(0); } 30%, 45% { transform: translateY(24px); } 65%, 80% { transform: translateY(12px); } 100% { transform: translateY(0); } }
@keyframes el-fila4 { 0%, 10% { transform: translateY(12px); } 30%, 45% { transform: translateY(36px); } 65%, 80% { transform: translateY(24px); } 100% { transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
  dialog.espera-larga[open] { animation: none; }
  .el-anillo::after, .el-pulso i, .el-hoja .linea, .el-filas i { animation-duration: 5s; }
  .el-barra::after { animation: none; left: 30%; }
}