/* ==========================================================================
   Portal AdOps RCN · MOVIMIENTO (v2)
   --------------------------------------------------------------------------
   Regla madre: el movimiento explica un cambio de estado. Si no hay cambio
   de estado, no hay animación. Nada se anima "por decorar".
   Todo usa estos tokens; ningún componente escribe su propia duración.
   ========================================================================== */

:root {
  /* Duraciones */
  --dur-micro:   150ms;  /* hover, foco, color, borde */
  --dur-quieta:  160ms;
  --dur-hover:   180ms;
  --dur-corta:   200ms;  /* desplegar, tostada, diálogo */
  --dur-media:   240ms;  /* cambio de paso, barra lateral, cajón */
  --dur-entrada: 300ms;  /* entrada de una vista */
  --dur-larga:   400ms;  /* trazo del check, líneas de etapas, rellenos */

  /* Curvas */
  --curva-estandar: cubic-bezier(.4, 0, .2, 1);     /* cambios de color/borde */
  --curva-salida:   cubic-bezier(.2, .8, .2, 1);    /* lo que entra a pantalla */
  --curva-resorte:  cubic-bezier(.34, 1.56, .64, 1);/* solo "pop" de confirmación */

  /* Ciclos (solo mientras algo está de verdad en curso) */
  --ciclo-respirar: 1.6s;
  --ciclo-girar:    1.15s;
  --ciclo-brillo:   1.4s;
  --ciclo-anillo:   4.8s;
  --ciclo-girar-lento: 6s;
  --ciclo-comer:    750ms;
  --ciclo-hexagono: 1s;
  /* Ventanas de carga (nucleo/carga.js): un ciclo por animación */
  --ciclo-ladrillos: 6s;
  --ciclo-cafe:      8s;
  --ciclo-carta:     2s;
  --ciclo-infinito:  2s;
  --ciclo-barras:    1.2s;
  --paso-barras:     100ms;  /* desfase entre una barra y la siguiente */
  --espera-respaldo: 3s;     /* la ventana fija del arranque solo se ve si app.js tarda más que esto */
  --espera-cierre:   1.6s;
  --ciclo-caja:     1.8s;
  --ciclo-imprimir: 2.6s;
  --ciclo-barajar:  3s;
  --ciclo-franja:   2.2s;
  --ciclo-gotear:   1.8s;
  --ciclo-rodar:    600ms;
  --paso-franja:    35ms;

  --dur-plegar:   550ms;
  --dur-avance:   2s;
  --dur-tinta:    1800ms;
  --dur-sostener: 700ms;
  --dur-aparecer: 500ms;
  --curva-plegar: cubic-bezier(.65, 0, .35, 1);
  --curva-avance: cubic-bezier(.5, .05, .3, 1);
  --curva-rebote: cubic-bezier(.3, 1.6, .5, 1);
  --curva-acelera:   cubic-bezier(.32, 0, .67, 0);  /* lo que arranca y sale (carta, asa del café) */
  --curva-ladrillos: cubic-bezier(.37, 0, .63, 1);  /* ventana de carga: ladrillos */
  --curva-cafe:      cubic-bezier(.9, 0, .1, 1);    /* ventana de carga: café (giro de la taza) */
  --curva-gotear:    cubic-bezier(.55, 0, .85, .4);

  --nucleo-cometa: var(--texto);

  /* Compatibilidad con v1 */
  --transicion: var(--dur-micro) var(--curva-estandar);
}
:root[data-tema="claro"] { --nucleo-cometa: currentColor; }

/* --------------------------------------------------------------------------
   @property: permite animar números y porcentajes de verdad
   -------------------------------------------------------------------------- */
@property --pct     { syntax: '<number>';  inherits: true; initial-value: 0; }
@property --pct-int { syntax: '<integer>'; inherits: true; initial-value: 0; }

/* --------------------------------------------------------------------------
   KEYFRAMES
   -------------------------------------------------------------------------- */
@keyframes entrar        { from { opacity: 0; transform: translateY(6px); }   to { opacity: 1; transform: none; } }
@keyframes entrar-lado   { from { opacity: 0; transform: translateX(32px); }  to { opacity: 1; transform: none; } }
@keyframes paso-avanza   { from { opacity: 0; transform: translateX(16px); }  to { opacity: 1; transform: none; } }
@keyframes paso-retrocede{ from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes aparecer      { from { opacity: 0; } to { opacity: 1; } }
@keyframes desplegar     { from { opacity: 0; transform: translateY(-4px); }  to { opacity: 1; transform: none; } }
@keyframes trazo         { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pop           { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
@keyframes pop-boton     { 0% { transform: scale(.85); } 100% { transform: scale(1); } }
@keyframes girar         { to { transform: rotate(360deg); } }
@keyframes hexagono-titila { 0% { opacity: .1; } 30% { opacity: 1; } 100% { opacity: .1; } }
@keyframes girar-barra   { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
@keyframes respirar-eco  { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes latido-eco    { 0% { box-shadow: 0 0 0 0 var(--acento-borde); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
@keyframes brillo        { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes resaltar      { from { background-color: var(--acento-suave); } to { background-color: transparent; } }
@keyframes cifra-sube    { from { opacity: 0; transform: translateY(40%); } to { opacity: 1; transform: none; } }
@keyframes tostada       { from { opacity: 0; transform: translateY(8px); }  to { opacity: 1; transform: none; } }
@keyframes cg-arriba     { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(0deg); } }
@keyframes cg-abajo      { 0%, 100% { transform: rotate(9deg); } 50% { transform: rotate(0deg); } }
@keyframes cg-avanzar    { from { transform: translateX(0); } to { transform: translateX(calc(var(--cg-paso) * -1)); } }
@keyframes cg-asomar     { from { opacity: 0; } to { opacity: 1; } }
@keyframes sacudir       { 0%,100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes avance        { 0% { stroke-dashoffset: 145; } 35% { stroke-dashoffset: 96; } 55% { stroke-dashoffset: 88; } 100% { stroke-dashoffset: 18; } }
@keyframes tinta-anillo  { 0% { stroke-dashoffset: 164; } 45%, 100% { stroke-dashoffset: 0; } }
@keyframes tinta-check   { 0%, 45% { stroke-dashoffset: 36; } 70%, 100% { stroke-dashoffset: 0; } }
@keyframes tinta-pop     { 0%, 68%, 100% { transform: scale(1); } 78% { transform: scale(1.07); } }
@keyframes tinta-brillo  { 0%, 66% { opacity: 0; transform: scale(.6); } 76% { opacity: .18; } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes anillo        { 0%, 100% { transform: scale(.72); border-width: 6px; box-shadow: 0 0 0 0 transparent; }
                           50% { transform: scale(1); border-width: 1.5px; box-shadow: 0 0 30px 2px color-mix(in srgb, currentColor 35%, transparent), inset 0 0 18px color-mix(in srgb, currentColor 20%, transparent); } }
@keyframes anillo-eco    { 0%, 46% { transform: scale(1); opacity: 0; } 52% { opacity: .5; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes anillo-entra  { 0%, 6% { opacity: 0; } 16%, 40% { opacity: .85; } 50%, 100% { opacity: 0; } }
@keyframes anillo-sale   { 0%, 56% { opacity: 0; } 66%, 90% { opacity: .85; } 100% { opacity: 0; } }

/* --------------------------------------------------------------------------
   1. Entradas
   -------------------------------------------------------------------------- */
.entrar          { animation: entrar var(--dur-entrada) var(--curva-salida) both; }
.entrar-lado     { animation: entrar-lado var(--dur-media) var(--curva-salida) both; }
.paso-avanza     { animation: paso-avanza var(--dur-media) var(--curva-salida) both; }
.paso-retrocede  { animation: paso-retrocede var(--dur-media) var(--curva-salida) both; }
.desplegar       { animation: desplegar var(--dur-corta) var(--curva-salida) both; }
.aparecer        { animation: aparecer var(--dur-aparecer) var(--curva-estandar) both; }

/* Escalonado: SOLO primera carga de Inicio (tarjetas de herramienta). Máx. 6 hijos. */
.escalonar > * { animation: entrar var(--dur-entrada) var(--curva-salida) both; }
.escalonar > :nth-child(2) { animation-delay: 30ms; }
.escalonar > :nth-child(3) { animation-delay: 60ms; }
.escalonar > :nth-child(4) { animation-delay: 90ms; }
.escalonar > :nth-child(5) { animation-delay: 120ms; }
.escalonar > :nth-child(6) { animation-delay: 150ms; }

/* --------------------------------------------------------------------------
   2. Plegar (lo que se resuelve sale con suavidad, sin saltos de layout)
   -------------------------------------------------------------------------- */
.plegable {
  display: grid; grid-template-rows: 1fr; opacity: 1;
  transition: grid-template-rows var(--dur-media) var(--curva-salida), opacity var(--dur-corta) var(--curva-estandar), margin var(--dur-media) var(--curva-salida);
}
.plegable > * { overflow: hidden; min-height: 0; }
.plegable.plegado { grid-template-rows: 0fr; opacity: 0; margin-top: 0 !important; margin-bottom: 0 !important; }

/* --------------------------------------------------------------------------
   3. Confirmación: check que se dibuja + pop
   Uso: <svg class="trazo"><path pathLength="1" d="M5 12l5 5L20 7"/></svg>
   -------------------------------------------------------------------------- */
.trazo path, .trazo polyline { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trazo var(--dur-larga) var(--curva-salida) forwards; }
.pop { animation: pop var(--dur-media) var(--curva-resorte) both; }

/* --------------------------------------------------------------------------
   4. Líneas que se llenan (pasos del asistente, etapas de un trabajo)
   -------------------------------------------------------------------------- */
.linea-llena { transition: height var(--dur-larga) var(--curva-salida), width var(--dur-larga) var(--curva-salida); }

/* --------------------------------------------------------------------------
   5. Girador «cometa»: cola cónica que se aclara hacia una cabeza con brillo
   Uso: <span class="girador" role="status" aria-label="Cargando"></span>
        Grande: <span class="girador grande"><i></i></span>, solo dentro de la ventana de carga (nucleo/carga.js)
   -------------------------------------------------------------------------- */
.girador {
  --tam: 18px; --grosor: 2.5px; --cabeza: calc(var(--grosor) * 1.35);
  position: relative; display: inline-block; width: var(--tam); height: var(--tam); flex: none;
  color: var(--acento);
}
.girador::before, .girador::after { content: ""; position: absolute; border-radius: 50%; animation: girar var(--ciclo-girar) linear infinite; }
.girador::before {
  inset: 0;
  background:
    conic-gradient(from 0deg, transparent 0deg, color-mix(in srgb, currentColor 6%, transparent) 120deg, currentColor 300deg,
      color-mix(in srgb, currentColor 55%, var(--nucleo-cometa)) 355deg, transparent 360deg),
    color-mix(in srgb, currentColor 9%, transparent);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--grosor)), #000 calc(100% - var(--grosor) + .5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--grosor)), #000 calc(100% - var(--grosor) + .5px));
}
.girador::after {
  left: 50%; top: calc((var(--grosor) - var(--cabeza)) / 2);
  width: var(--cabeza); height: var(--cabeza); margin-left: calc(var(--cabeza) / -2);
  transform-origin: 50% calc(var(--tam) / 2 - (var(--grosor) - var(--cabeza)) / 2);
  background: color-mix(in srgb, currentColor 35%, var(--nucleo-cometa));
  box-shadow: 0 0 calc(var(--grosor) * 1.3) calc(var(--grosor) * .5) color-mix(in srgb, currentColor 85%, transparent),
              0 0 calc(var(--grosor) * 3.6) calc(var(--grosor) * 1.1) color-mix(in srgb, currentColor 45%, transparent);
}
.girador > i {
  position: absolute; inset: 30%; border-radius: 50%;
  border: 1px dashed color-mix(in srgb, currentColor 22%, transparent);
  animation: girar var(--ciclo-girar-lento) linear infinite reverse;
}
.girador.grande { --tam: 56px; --grosor: 4.5px; }
.boton.menta .girador, .boton.acento .girador { color: var(--sobre-acento); --nucleo-cometa: currentColor; }

/* --------------------------------------------------------------------------
   6. «Respirar»: lo que está en curso
   Punto (filas y píldoras): <span class="punto-vivo"></span>
   Anillo con dos palabras que se alternan (el paso en curso de una vista):
     <span class="anillo-vivo" aria-hidden="true"><i></i><i></i><i></i><span>Orden</span><span>Líneas</span></span>
   -------------------------------------------------------------------------- */
.punto-vivo { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--acento); flex: none; }
.punto-vivo::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit;
  animation: respirar-eco var(--ciclo-respirar) var(--curva-salida) infinite;
}
.latiendo { animation: latido-eco var(--ciclo-respirar) var(--curva-salida) infinite; }
.comegalletas {
  --cg: 18px; --cg-paso: calc(var(--cg) * .62); --cg-galleta: calc(var(--cg) * .2);
  display: inline-flex; align-items: center; gap: calc(var(--cg) * .08); flex: none; vertical-align: middle;
}
.comegalletas--icono { --cg: 12px; }
.comegalletas__boca { width: calc(var(--cg) * 1.741); height: var(--cg); overflow: visible; fill: var(--marca); }
.comegalletas__mandibula { transform-origin: 30px 215.57px; animation: cg-arriba var(--ciclo-comer) var(--curva-estandar) infinite; }
.comegalletas__mandibula--abajo { animation-name: cg-abajo; }
.comegalletas__galletas { position: relative; width: calc(var(--cg-paso) * 3.5); height: var(--cg-galleta); overflow: hidden; }
.comegalletas__fila { position: absolute; inset: 0; animation: cg-avanzar var(--ciclo-comer) linear infinite; }
.comegalletas__fila i {
  position: absolute; top: 0; width: var(--cg-galleta); height: var(--cg-galleta); border-radius: 50%; background: var(--acento);
  left: calc(var(--cg-paso) * (var(--k) + .5) - var(--cg-galleta) / 2);
}
.comegalletas__fila i:nth-child(1) { --k: 0; }
.comegalletas__fila i:nth-child(2) { --k: 1; }
.comegalletas__fila i:nth-child(3) { --k: 2; }
.comegalletas__fila i:nth-child(4) { --k: 3; animation: cg-asomar var(--ciclo-comer) linear infinite; }
.anillo-vivo {
  --tam: 112px;
  position: relative; display: grid; place-items: center; width: var(--tam); height: var(--tam); flex: none;
  color: var(--acento);
}
.anillo-vivo > i {
  position: absolute; inset: 13%; border-radius: 50%; border: 2px solid currentColor;
  animation: anillo var(--ciclo-anillo) ease-in-out var(--fase, 0s) infinite;
}
.anillo-vivo > i:nth-child(2), .anillo-vivo > i:nth-child(3) { border-width: 1px; opacity: 0; animation-name: anillo-eco; }
.anillo-vivo > i:nth-child(2) { animation-delay: var(--fase, 0s); }
.anillo-vivo > i:nth-child(3) { animation-delay: calc(var(--fase, 0s) + var(--ciclo-anillo) * .146); }
.anillo-vivo > span {
  position: absolute; max-width: 60%; overflow: hidden;
  font: 500 10.5px/1 var(--mono); letter-spacing: .6px; text-indent: .6px; text-transform: uppercase; white-space: nowrap;
  color: var(--texto); opacity: 0;
  animation: anillo-entra var(--ciclo-anillo) ease-in-out var(--fase, 0s) infinite;
}
.anillo-vivo > span + span { animation-name: anillo-sale; }

/* --------------------------------------------------------------------------
   7. Esqueleto con brillo (carga de listas y tarjetas)
   -------------------------------------------------------------------------- */
.esqueleto {
  border-radius: 6px; color: transparent !important;
  background: linear-gradient(100deg, var(--pastilla) 40%, var(--borde-input) 50%, var(--pastilla) 60%) var(--pastilla);
  background-size: 200% 100%;
  animation: brillo var(--ciclo-brillo) linear infinite;
}

/* --------------------------------------------------------------------------
   8. Progreso con número que cuenta (codificación, subida, valor repartido)
   Uso: <div class="progreso" style="--pct:62;--pct-int:62">…</div>
        JS solo cambia las dos variables; el CSS anima barra y número.
   -------------------------------------------------------------------------- */
.progreso { transition: --pct var(--dur-larga) var(--curva-salida), --pct-int var(--dur-larga) var(--curva-salida); }
.progreso__barra { height: 4px; border-radius: var(--pildora); background: var(--borde); overflow: hidden; }
.progreso__barra > i { display: block; height: 100%; width: calc(var(--pct) * 1%); border-radius: inherit; background: var(--acento); }
.progreso__cifra { font: 500 12.5px var(--mono); color: var(--texto-2); counter-reset: pct var(--pct-int); }
.progreso__cifra::after { content: counter(pct) "%"; }
.progreso.atencion .progreso__barra > i { background: var(--ambar-texto); }

/* --------------------------------------------------------------------------
   9. Botón con estados: listo → trabajando → hecho | aviso (Publicar, Montar, Guardar)
   Trabajando: el botón se pliega a un círculo y un anillo avanza.
   Hecho: círculo verde con el check. Aviso: círculo ámbar con «!» (terminó con algo para revisar).
   Uso: <button class="boton menta boton-estado" data-estado="listo">
          <span class="be be--listo">Publicar en GAM</span>
          <span class="be be--trabajando">Publicando…</span>
          <span class="be be--hecho">Publicado</span>
        </button>
        estadoBoton(boton, "trabajando" | "hecho" | "aviso" | "listo") en nucleo/dom.js agrega el anillo
        y mide el botón; los textos quedan para el lector de pantalla.
   -------------------------------------------------------------------------- */
/* Doble clase a propósito: gana a `.boton { display: inline-flex }` sin importar el orden de carga */
.boton.boton-estado {
  position: relative; display: inline-grid; place-items: center; overflow: hidden;
  width: var(--ancho, auto);
  transition: width var(--dur-plegar) var(--curva-plegar), background-color var(--dur-entrada) var(--curva-estandar),
              border-color var(--dur-entrada) var(--curva-estandar), box-shadow var(--dur-entrada) var(--curva-estandar),
              color var(--dur-micro) var(--curva-estandar), opacity var(--dur-micro) var(--curva-estandar), transform var(--dur-corta) var(--curva-estandar);
}
.boton-estado > .be { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  transition: opacity var(--dur-corta) var(--curva-estandar), transform var(--dur-media) var(--curva-salida); }
.boton-estado > .be:not(.be--listo) { opacity: 0; }
.boton-estado > .be.solo-lector { grid-area: auto; }
.boton-estado > .be .girador, .boton-estado > .be .trazo { display: none; }
.boton-estado:not([data-estado="listo"]) > .be { opacity: 0; transform: scale(.8); }

.boton.boton-estado:not([data-estado="listo"]) {
  width: var(--alto, 40px); padding: 0; border-radius: 50%;
  background: var(--relleno-estado, transparent); border-color: transparent; pointer-events: none; opacity: 1; cursor: progress;
  box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--relleno-estado, transparent) 90%, transparent);
}
.boton-estado:is([data-estado="hecho"], [data-estado="aviso"]) { animation: pop-boton var(--dur-entrada) var(--curva-rebote); }
.boton-estado[data-estado="hecho"] { --relleno-estado: var(--exito); }
.boton-estado[data-estado="aviso"] { --relleno-estado: var(--ambar); }

.anillo-estado { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; pointer-events: none;
  transition: opacity var(--dur-entrada) var(--curva-estandar); }
.boton-estado:not([data-estado="listo"]) .anillo-estado { opacity: 1; }
.boton-estado[data-estado="trabajando"] .anillo-estado { transition-delay: var(--dur-entrada); }
.anillo-estado circle { fill: none; stroke-width: 3; transition: opacity var(--dur-corta) var(--curva-estandar); }
.anillo-estado .pista { stroke: var(--borde); }
.anillo-estado .barra { stroke: var(--acento); stroke-linecap: round; stroke-dasharray: 145; stroke-dashoffset: 145; transform: rotate(-90deg); transform-origin: 26px 26px; }
.boton-estado[data-estado="trabajando"] .barra {
  animation: avance var(--dur-avance) var(--curva-avance) var(--dur-entrada) forwards,
             girar-barra var(--ciclo-girar) linear calc(var(--dur-entrada) + var(--dur-avance)) infinite;
}
.boton-estado:is([data-estado="hecho"], [data-estado="aviso"]) circle { opacity: 0; }
.anillo-estado .marca { fill: none; stroke: var(--fondo); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.boton-estado[data-estado="hecho"] .marca--hecho,
.boton-estado[data-estado="aviso"] .marca--aviso { animation: trazo var(--dur-larga) var(--curva-salida) var(--dur-micro) forwards; }

/* --------------------------------------------------------------------------
   10. Ícono de tema sol ↔ luna (barra lateral)
   -------------------------------------------------------------------------- */
.icono-sol, .icono-luna { transition: transform var(--dur-media) var(--curva-salida), opacity var(--dur-corta) var(--curva-estandar); }
:root:not([data-tema="claro"]) .icono-luna,
:root[data-tema="claro"] .icono-sol { transform: rotate(-90deg) scale(.5); opacity: 0; }
/* Cambio de tema: colores en transición corta (se añade la clase solo durante el cambio) */
html.cambiando-tema, html.cambiando-tema * { transition: background-color var(--dur-media) var(--curva-estandar), border-color var(--dur-media) var(--curva-estandar), color var(--dur-media) var(--curva-estandar) !important; }

/* --------------------------------------------------------------------------
   11. Fila que cambió de estado (el worker actualizó un trabajo)
   Si quedó lista, su ícono se dibuja una vez con el check de tinta (CHECK_TINTA en nucleo/dom.js):
   el anillo se traza, entra el check, un pulso pequeño y un brillo que se apaga.
   -------------------------------------------------------------------------- */
.resaltar { animation: resaltar 1200ms var(--curva-estandar) both; }
.check-tinta { width: 100%; height: 100%; overflow: visible; color: var(--exito);
  animation: tinta-pop var(--dur-tinta) var(--curva-plegar) both; }
.check-tinta .c, .check-tinta .k { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.check-tinta .c { stroke-width: 2.6; stroke-dasharray: 164; stroke-dashoffset: 164; transform: rotate(-90deg); transform-origin: 32px 32px;
  animation: tinta-anillo var(--dur-tinta) var(--curva-plegar) forwards; }
.check-tinta .k { stroke-width: 5; stroke-dasharray: 36; stroke-dashoffset: 36; animation: tinta-check var(--dur-tinta) var(--curva-plegar) forwards; }
.check-tinta .g { fill: currentColor; opacity: 0; transform-origin: 32px 32px; animation: tinta-brillo var(--dur-tinta) ease-out forwards; }
.estado-icono:has(> .check-tinta) { border-color: transparent; }
.insignia .check-tinta { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   12. Cifra que cambia (valores del resumen, conteos de pestañas)
   Uso: reemplazar el <span> y ponerle .cifra-cambia
   -------------------------------------------------------------------------- */
.cifra-cambia { display: inline-block; animation: cifra-sube var(--dur-corta) var(--curva-salida) both; }

/* --------------------------------------------------------------------------
   14. Error de validación: el campo se sacude una vez
   -------------------------------------------------------------------------- */
.sacudir { animation: sacudir 240ms var(--curva-estandar) 1; }

.espera-previa { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; min-height: 240px; padding: 32px 16px; text-align: center; }
.espera-previa p { margin: 0; font-size: 13px; color: var(--texto-3); }
.hexagono { --hex: 12px; display: inline-flex; flex-direction: column; align-items: center; flex: none; color: var(--acento); }
.hexagono__fila { display: flex; }
.hexagono i {
  --vuelta: 18;
  width: 0; height: 0; margin: 0 calc(var(--hex) / -2);
  border-left: var(--hex) solid transparent; border-right: var(--hex) solid transparent;
  border-bottom: calc(var(--hex) * 1.8) solid currentColor;
  filter: drop-shadow(0 0 calc(var(--hex) * 1.5) currentColor);
  opacity: .1;
  animation: hexagono-titila var(--ciclo-hexagono) var(--curva-estandar) infinite;
  animation-delay: calc(var(--ciclo-hexagono) * var(--n) / var(--vuelta) * -1);
}
.hexagono i.abajo { transform: rotate(180deg); }
.hexagono i.adentro { --vuelta: 6; }

/* --------------------------------------------------------------------------
   MOVIMIENTO REDUCIDO: se apaga todo. Los ciclos quedan como indicador fijo.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .punto-vivo::after { display: none; }
  .latiendo { animation: none; box-shadow: 0 0 0 2px var(--acento-borde); }
  .comegalletas__mandibula, .comegalletas__fila, .comegalletas__fila i { animation: none; }
  .comegalletas__mandibula { transform: rotate(-5deg); }
  .comegalletas__mandibula--abajo { transform: rotate(5deg); }
  .hexagono i { animation: none; opacity: .55; }
  .comegalletas__fila i:nth-child(4) { animation: none; opacity: 0; }
  .girador::before, .girador::after, .girador > i { animation: none; }
  .anillo-vivo > i { animation: none; transform: scale(.8); border-width: 2px; }
  .anillo-vivo > i + i { display: none; }
  .anillo-vivo > span { animation: none; opacity: .85; }
  .anillo-vivo > span + span { display: none; }
  .esqueleto { animation: none; }
  .trazo path, .trazo polyline { stroke-dashoffset: 0; }
}

/* ==========================================================================
   VENTANAS DE CARGA (nucleo/carga.js, AdOps 2026-10-18)
   Tapan el área de trabajo mientras llega algo que la ocupa entera. Se centran
   en el viewport, ocupan todo el alto y, dentro de la app, dejan ver la barra
   lateral. La animación se elige al azar entre siete (incluido el girador
   grande); todas pintan con tokens y sus ciclos son los --ciclo-* de arriba.
   ========================================================================== */
.ventana-carga {
  position: fixed; inset: 0; z-index: 25;
  display: grid; place-items: center; overflow: hidden;
  background: var(--fondo); color: var(--texto-2);
  font-size: 16px; line-height: 1.5;
  animation: aparecer var(--dur-entrada) var(--curva-estandar) both;
}
/* Dentro de la app: a la derecha de la barra lateral (también colapsada) y bajo la barra superior */
.app .ventana-carga { top: var(--alto-barra, 0px); left: var(--ancho-lateral); }
@media (max-width: 900px) { .app .ventana-carga { left: 0; } }
/* La pantalla de arranque no entra con desplazamiento: un transform en curso movería la ventana fija */
#v-cargando { animation: none; }
.ventana-carga--respaldo { animation-delay: var(--espera-respaldo); }

/* ── Ladrillos ── */
.ladrillos { display: block; width: 15em; height: auto; overflow: visible; }
.ladrillos__grupo {
  --tono: var(--acento);
  fill: var(--tono);
  animation: var(--ciclo-ladrillos) var(--curva-ladrillos) infinite;
}
.ladrillos__grupo[data-tono="2"] { --tono: color-mix(in srgb, var(--acento) 70%, var(--fondo)); }
.ladrillos__grupo[data-tono="3"] { --tono: color-mix(in srgb, var(--acento) 48%, var(--fondo)); }
.ladrillos__grupo[data-tono="4"] { --tono: color-mix(in srgb, var(--acento) 32%, var(--fondo)); }
.ladrillos__izq { fill: color-mix(in srgb, var(--tono) 78%, var(--sobre-acento)); }
.ladrillos__sup { fill: color-mix(in srgb, var(--tono) 58%, var(--sobre-acento)); }
.ladrillos__todo { animation: ladrillos-rebote var(--ciclo-ladrillos) var(--curva-ladrillos) infinite; }
.ladrillos__grupo--1 { animation-name: ladrillos-1; }
.ladrillos__grupo--2 { animation-name: ladrillos-2; }
.ladrillos__grupo--3 { animation-name: ladrillos-3; }
.ladrillos__grupo--4 { animation-name: ladrillos-4; }
@keyframes ladrillos-rebote {
  from, 12%, 15%, 27%, 30%, 42%, 45%, 62%, 65%, 77%, 80%, 92%, 95%, to { transform: translate(0, 0); }
  13.5%, 28.5%, 43.5%, 63.5%, 78.5%, 93.5% { transform: translate(0, 6px); }
}
@keyframes ladrillos-1 {
  from, 4%, 92%, to { transform: translate(0, 0); }
  12%, 19%, 77%, 84% { transform: translate(17.5px, 10px); }
  27%, 34%, 62%, 69% { transform: translate(35px, 20px); }
  42%, 54% { transform: translate(52.5px, 30px); }
}
@keyframes ladrillos-2 {
  from, 92%, to { transform: translate(0, -47px); }
  4% { transform: translate(0, -87px); }
  8% { transform: translate(-35px, -87px); }
  12%, 80% { transform: translate(-35px, -67px); }
  84% { transform: translate(-35px, -107px); }
  88% { transform: translate(0, -67px); }
}
@keyframes ladrillos-3 {
  from, 15%, 77%, to { transform: translate(0, -47px); }
  19% { transform: translate(0, -87px); }
  23% { transform: translate(-35px, -87px); }
  27%, 65% { transform: translate(-35px, -67px); }
  69% { transform: translate(-35px, -107px); }
  73% { transform: translate(0, -67px); }
}
@keyframes ladrillos-4 {
  from, 30%, 62%, to { transform: translate(0, -47px); }
  34% { transform: translate(0, -87px); }
  38% { transform: translate(-35px, -87px); }
  42%, 50% { transform: translate(-35px, -67px); }
  54% { transform: translate(-35px, -107px); }
  58% { transform: translate(0, -67px); }
}

/* ── Café ── */
.cafe {
  --cafe-fondo: var(--fondo); --cafe-trazo: var(--texto-2);
  position: relative; width: 21.5em; height: 9em; font-size: 9.6px; color: var(--cafe-trazo);
}
.cafe::before { content: ""; position: absolute; top: 7.5em; width: 100%; border-bottom: .25em dashed; }
.cafe__taza, .cafe__parte, .cafe__asa, .cafe__vapor-trazo { animation-duration: var(--ciclo-cafe); animation-iteration-count: infinite; }
.cafe__taza, .cafe__parte, .cafe__asa { animation-timing-function: var(--curva-cafe); }
.cafe__taza { animation-name: cafe-taza; position: relative; width: 11.25em; height: 9em; }
.cafe__taza, .cafe__vapor { transform: translateX(-50%); }
.cafe__parte { position: absolute; background-color: var(--cafe-fondo); }
.cafe__parte--a {
  animation-name: cafe-a; top: 4.3em; width: 11.25em; height: 4.7em;
  border-radius: 5.625em 5.625em 5.625em 5.625em / 2em 2em 2.7em 2.7em;
  box-shadow: 0 0 0 .3em var(--cafe-trazo) inset;
}
.cafe__parte--b {
  animation-name: cafe-b; top: 4.3em; width: 11.25em; height: 4em; background-color: transparent;
  border-radius: 5.625em / 2em; box-shadow: 0 0 0 .2em var(--cafe-trazo) inset;
}
.cafe__parte--c {
  animation-name: cafe-c; top: 7.1em; left: 3.925em; width: 3.4em; height: .9em;
  border-radius: 1.7em / .45em; box-shadow: 0 0 0 .2em var(--cafe-trazo) inset;
}
.cafe__parte--d, .cafe__parte--e, .cafe__parte--f { z-index: 1; }
.cafe__parte--d {
  animation-name: cafe-d; top: 2.55em; left: 2.025em; width: 7.2em; height: 5.15em;
  border-radius: 3.6em 3.6em 3.3em 3.3em / 1em 1em 3.5em 3.5em; box-shadow: 0 0 0 .2em var(--cafe-trazo) inset;
}
.cafe__parte--e {
  animation-name: cafe-e; top: 2.65em; left: 2.125em; width: 7em; height: 2em;
  background-color: var(--cafe-trazo); border-radius: 3.5em / 1em;
  box-shadow: 0 0 0 .2em var(--cafe-trazo) inset, 0 1em 0 var(--cafe-fondo) inset;
}
.cafe__parte--f { animation-name: cafe-f; top: 4.1em; left: 5.925em; width: 4.8em; height: 3em; background-color: transparent; }
.cafe__parte--f svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cafe__asa { animation-name: cafe-asa; fill: none; stroke: var(--cafe-trazo); stroke-width: 4; stroke-linecap: round; }
.cafe__vapor { position: absolute; top: -.6em; left: 0; width: 3.5em; height: 3.5em; overflow: visible; }
.cafe__vapor--der { left: auto; right: 0; transform: translateX(50%); }
.cafe__vapor-trazo {
  animation-name: cafe-vapor-izq; animation-timing-function: linear;
  fill: none; stroke: var(--acento); stroke-width: 3; stroke-linecap: round; stroke-dashoffset: 48;
}
.cafe__vapor--der .cafe__vapor-trazo { animation-name: cafe-vapor-der; stroke-dashoffset: 35; }
.cafe__vapor-trazo--a { stroke-dasharray: 24 142; }
.cafe__vapor-trazo--b { stroke-dasharray: 30 8 10 130; }
.cafe__vapor-trazo--c { stroke-dasharray: 15 6 1 134; }
.cafe__vapor-trazo--d { stroke-dasharray: 18 6 1 90; }
.cafe__vapor-trazo--e { stroke-dasharray: 25 6 4 76; }
@keyframes cafe-taza { from, 25%, 75%, to { left: 0; } 50% { left: 21.5em; } }
@keyframes cafe-a { from, 50%, to { width: 11.25em; } 25%, 75% { width: calc(11.25em + 21.5em); } }
@keyframes cafe-b { from, 50%, to { width: 11.25em; } 25%, 75% { width: calc(11.25em + 21.5em); } }
@keyframes cafe-c { from, 50%, to { width: 3.4em; } 25%, 75% { width: calc(3.4em + 21.5em); } }
@keyframes cafe-d { from, 50%, to { width: 7.2em; } 25%, 75% { width: calc(7.2em + 21.5em); } }
@keyframes cafe-e {
  from, 50%, to { box-shadow: 0 0 0 .2em var(--cafe-trazo) inset, 0 1em 0 var(--cafe-fondo) inset; width: 7em; }
  25%, 75% { box-shadow: 0 0 0 .2em var(--cafe-trazo) inset, 0 1.5em 0 var(--cafe-fondo) inset; width: calc(7em + 21.5em); }
}
@keyframes cafe-f {
  from { left: 5.925em; z-index: 0; }
  25% { left: calc(5.925em + 8.35em); z-index: 0; }
  50% { left: .525em; z-index: 0; }
  50.01% { left: .525em; z-index: 1; }
  75% { left: calc(5.925em + 8.35em); z-index: 1; }
  to { left: 5.925em; z-index: 1; }
}
@keyframes cafe-asa {
  from, to {
    animation-timing-function: var(--curva-acelera); transform: translate(0, 0);
    d: path("M64,4.413s6.64-2.913,11-2.913c11.739,0,19.5,10.759,19.5,22.497,0,23.475-45,22.497-45,22.497");
  }
  10%, 40%, 60%, 90% {
    animation-timing-function: var(--curva-salida); transform: translate(0, 15px);
    d: path("M48.036,4.415s-.03-2.913-.049-2.913c-.052,0-.087,10.759-.087,22.497,0,23.475,.2,22.497,.2,22.497");
  }
  50% {
    animation-timing-function: var(--curva-acelera); transform: translate(0, 0);
    d: path("M32,4.413s-6.64-2.913-11-2.913C9.261,1.5,1.5,12.259,1.5,23.997c0,23.475,45,22.497,45,22.497");
  }
}
@keyframes cafe-vapor-izq { from { stroke-dashoffset: 48; } 25%, to { stroke-dashoffset: -66; } }
@keyframes cafe-vapor-der { from, 50% { stroke-dashoffset: 35; } 75%, to { stroke-dashoffset: -76; } }

/* ── Carta (pila isométrica con los logos de RCN y La República) ── */
.pila {
  --pila-dur: var(--ciclo-carta); --pila-retraso: .05; --pila-espacio: 15%;
  position: relative; overflow: hidden; width: 14em; height: 32em; font-size: 12px;
}
.pila__carta {
  position: absolute; inset: 0; top: var(--pila-espacio); margin: auto;
  width: 70%; aspect-ratio: 1;
  transform: rotateX(45deg) rotateZ(-45deg); transform-style: preserve-3d;
}
.pila__cara {
  position: absolute; inset: 0; display: grid; place-items: center;
  border-radius: 7.5%; background-color: var(--acento);
  box-shadow: -.5em .5em 1.5em rgb(0 0 0 / .18);
  animation: pila-carta var(--pila-dur) infinite;
}
.pila__carta:nth-child(2) { top: 0; }
.pila__carta:nth-child(2) .pila__cara {
  animation-delay: calc(var(--pila-dur) * (-1 + var(--pila-retraso)));
  background-color: color-mix(in srgb, var(--acento) 45%, var(--superficie));
}
.pila__carta:nth-child(3) { top: calc(var(--pila-espacio) * -1); }
.pila__carta:nth-child(3) .pila__cara {
  animation-delay: calc(var(--pila-dur) * (-1 + var(--pila-retraso) * 2));
  background-color: var(--superficie); box-shadow: -.5em .5em 1.5em rgb(0 0 0 / .18), inset 0 0 0 1px var(--borde-fuerte);
}
.pila__logo { display: block; width: 55%; height: auto; }
.pila__logo--rcn { fill: var(--marca); }
.pila__logo--lr { width: 34%; }
@keyframes pila-carta {
  0%, 100% { animation-timing-function: var(--curva-plegar); transform: translateZ(0); }
  11% { animation-timing-function: var(--curva-acelera); opacity: 1; transform: translateZ(.125em); }
  34% { animation-timing-function: steps(1); opacity: 0; transform: translateZ(-12em); }
  48% { animation-timing-function: linear; opacity: 0; transform: translateZ(12em); }
  57% { animation-timing-function: var(--curva-salida); opacity: 1; transform: translateZ(0); }
  61% { animation-timing-function: var(--curva-plegar); transform: translateZ(-1.8em); }
  74% { animation-timing-function: var(--curva-plegar); transform: translateZ(.6em); }
  87% { animation-timing-function: var(--curva-plegar); transform: translateZ(-.2em); }
}

/* ── Infinito ── */
.infinito { display: block; width: 16em; height: 8em; fill: none; stroke-linecap: round; stroke-width: 8; }
.infinito__pista { stroke: color-mix(in srgb, var(--acento) 16%, var(--fondo)); }
.infinito__gusano { stroke: var(--acento); stroke-dasharray: 150 700; animation: infinito-1 var(--ciclo-infinito) linear infinite; }
.infinito__gusano--2 { animation-name: infinito-2; }
@keyframes infinito-1 {
  from { stroke-dashoffset: 0; }
  50% { animation-timing-function: steps(1); stroke-dashoffset: -358; }
  50.01% { animation-timing-function: linear; stroke-dashoffset: 358; }
  to { stroke-dashoffset: 0; }
}
@keyframes infinito-2 { from { stroke-dashoffset: 358; } 50% { stroke-dashoffset: 0; } to { stroke-dashoffset: -358; } }

/* ── Barras (ecualizador) ── */
.barras { display: flex; align-items: flex-end; gap: 6px; height: 70px; }
.barras > i {
  width: 10px; height: 70px; border-radius: 20px 20px 0 0;
  background: var(--texto-3); transform-origin: bottom center; transform: scaleY(.1);
  animation: barras var(--ciclo-barras) linear infinite; animation-delay: calc(var(--i) * var(--paso-barras));
}
@keyframes barras {
  0% { transform: scaleY(.1); background: var(--texto-3); }
  50% { transform: scaleY(1); background: var(--acento); }
  100% { transform: scaleY(.1); background: transparent; }
}

/* Movimiento reducido: cada animación queda quieta en un cuadro que se entiende */
@media (prefers-reduced-motion: reduce) {
  .ventana-carga { animation: none; }
  .ventana-carga.ventana-carga--respaldo { animation: aparecer 0s var(--espera-respaldo) both; }
  .ladrillos__todo, .ladrillos__grupo, .cafe__taza, .cafe__parte, .cafe__asa, .cafe__vapor-trazo,
  .pila__cara, .infinito__gusano, .barras > i { animation: none; }
  .ventana-carga .girador::before, .ventana-carga .girador::after, .ventana-carga .girador > i { animation: none; }
  .ladrillos__grupo--2, .ladrillos__grupo--3, .ladrillos__grupo--4 { transform: translate(0, -47px); }
  .infinito__gusano--2 { stroke-dashoffset: 358; }
  .barras > i { transform: scaleY(calc(.25 + var(--i) * .09)); background: var(--acento); }
}

.espera-desc { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 40px 24px; }
.espera-desc[data-estado="descargando"] { --tinta: var(--acento); --tinta-fondo: var(--acento-suave); --tinta-borde: var(--acento-borde); }
.espera-desc[data-estado="listo"] { --tinta: var(--exito); --tinta-fondo: var(--exito-fondo); --tinta-borde: var(--exito-borde); }
.espera-desc[data-estado="fallo"] { --tinta: var(--rojo-texto); --tinta-fondo: var(--error-fondo); --tinta-borde: var(--error-borde); }
.ed-escena { position: relative; display: flex; align-items: center; justify-content: center; }
.ed-pie { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.ed-titulo { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--tinta); }
.ed-archivo { font-family: var(--mono); font-size: 13px; color: var(--texto-2); overflow-wrap: anywhere; }
.ed-ayuda { font-size: 12.5px; color: var(--texto-3); }
.espera-desc .icono { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ed-sello {
  position: absolute; z-index: 5; width: 36px; height: 36px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  color: var(--tinta); background: var(--tinta-fondo); border: 1px solid var(--tinta-borde); box-shadow: var(--e1);
  opacity: 0; transform: scale(.6);
  transition: opacity var(--dur-larga) var(--curva-resorte), transform var(--dur-larga) var(--curva-resorte);
}
.ed-sello .icono { width: 20px; height: 20px; stroke-width: 2.4; }
.espera-desc:is([data-estado="listo"], [data-estado="fallo"]) .ed-sello { opacity: 1; transform: scale(1); }
.ed-sello__error, .espera-desc[data-estado="fallo"] .ed-sello__ok { display: none; }
.espera-desc[data-estado="fallo"] .ed-sello__error { display: block; }

.ed-caja { position: relative; width: 140px; height: 150px; }
.ed-caja__cuerpo {
  position: absolute; left: 10px; right: 10px; bottom: 0; z-index: 2; height: 78px;
  border-radius: 0 0 12px 12px; background: var(--superficie);
  border: 1.5px solid var(--borde-fuerte); border-top: 0; box-shadow: var(--filo), var(--e1);
}
.ed-caja__borde { position: absolute; left: 4px; right: 4px; bottom: 76px; z-index: 3; height: 10px; border-radius: 4px; background: var(--hundido); border: 1.5px solid var(--borde-fuerte); }
.ed-caja__ficha {
  position: absolute; left: 44px; top: 4px; z-index: 1; width: 52px; height: 64px;
  display: flex; flex-direction: column; gap: 6px; padding: 10px 8px;
  border-radius: 5px; background: var(--superficie); border: 1px solid var(--borde-input); opacity: 0;
}
.ed-caja__ficha i { display: block; height: 4px; border-radius: 999px; background: var(--borde-input); }
.ed-caja__ficha i:first-child { width: 60%; background: var(--tinta); }
.espera-desc[data-estado="descargando"] .ed-caja__ficha { animation: ed-caer var(--ciclo-caja) var(--curva-estandar) infinite; }
.espera-desc[data-estado="descargando"] .ed-caja__ficha:nth-child(2) { animation-delay: calc(var(--ciclo-caja) / 3); }
.espera-desc[data-estado="descargando"] .ed-caja__ficha:nth-child(3) { animation-delay: calc(var(--ciclo-caja) * 2 / 3); }
@keyframes ed-caer {
  0% { transform: translateY(-24px) rotate(-6deg); opacity: 0; }
  20% { opacity: 1; }
  75% { transform: translateY(54px) rotate(0); opacity: 1; }
  100% { transform: translateY(60px); opacity: 0; }
}
.ed-caja .ed-sello { left: 50%; bottom: 22px; margin-left: -18px; }

.ed-imp { position: relative; display: flex; flex-direction: column; align-items: center; width: 180px; height: 170px; }
.ed-imp__ranura { position: relative; z-index: 2; width: 180px; height: 22px; border-radius: 999px; background: var(--hundido); border: 1px solid var(--borde-fuerte); box-shadow: var(--filo), var(--e1); }
.ed-imp__ranura::after { content: ""; position: absolute; left: 24px; right: 24px; top: 9px; height: 3px; border-radius: 999px; background: var(--texto); }
.ed-imp__boca { position: relative; width: 120px; height: 148px; margin-top: -10px; overflow: hidden; }
.ed-imp__hoja {
  position: absolute; left: 12px; top: 0; width: 96px; height: 132px;
  display: flex; flex-direction: column; gap: 8px; padding: 20px 12px;
  border-radius: 0 0 6px 6px; background: var(--superficie); border: 1px solid var(--borde-fuerte); border-top: 0;
  transform: translateY(-6%); transition: transform var(--dur-larga) var(--curva-salida);
}
.ed-imp__hoja i { display: block; height: 5px; border-radius: 999px; background: var(--borde-input); }
.ed-imp__hoja i:nth-child(1) { width: 55%; background: var(--tinta); }
.ed-imp__hoja i:nth-child(4) { width: 70%; }
.ed-imp__hoja i:nth-child(6) { width: 45%; }
.espera-desc[data-estado="descargando"] .ed-imp__hoja { animation: ed-imprimir var(--ciclo-imprimir) infinite; }
.espera-desc[data-estado="fallo"] .ed-imp__hoja { transform: translateY(-62%); }
@keyframes ed-imprimir {
  0% { transform: translateY(-100%); opacity: 1; animation-timing-function: steps(14, end); }
  70% { transform: translateY(-6%); opacity: 1; animation-timing-function: var(--curva-salida); }
  86% { transform: translateY(-6%); opacity: 1; }
  100% { transform: translateY(8%); opacity: 0; }
}
.ed-imp .ed-sello { right: 16px; bottom: 18px; }

.ed-mazo { position: relative; width: 150px; height: 150px; perspective: 700px; transform-style: preserve-3d; }
.ed-mazo__carta {
  position: absolute; left: 15px; top: 30px; width: 120px; height: 92px;
  display: flex; flex-direction: column; gap: 8px; padding: 14px;
  border-radius: 12px; background: var(--superficie); border: 1px solid var(--borde-fuerte);
  box-shadow: var(--filo), var(--e1); backface-visibility: hidden;
}
.ed-mazo__carta i { display: block; height: 5px; border-radius: 999px; background: var(--borde-input); }
.ed-mazo__carta i:first-child { width: 40%; background: var(--tinta); }
.ed-mazo__carta:nth-child(2) { transform: translate3d(0, -14px, -40px); }
.ed-mazo__carta:nth-child(3) { transform: translate3d(0, -28px, -80px); }
.espera-desc[data-estado="descargando"] .ed-mazo__carta { animation: ed-barajar var(--ciclo-barajar) var(--curva-estandar) infinite; }
.espera-desc[data-estado="descargando"] .ed-mazo__carta:nth-child(2) { animation-delay: calc(var(--ciclo-barajar) / -3); }
.espera-desc[data-estado="descargando"] .ed-mazo__carta:nth-child(3) { animation-delay: calc(var(--ciclo-barajar) * -2 / 3); }
@keyframes ed-barajar {
  0% { transform: translate3d(0, -28px, -80px); }
  33% { transform: translate3d(0, -14px, -40px); }
  60% { transform: translate3d(0, 0, 0); }
  75% { transform: translate3d(0, 46px, 30px) rotateX(-28deg); opacity: 1; }
  88% { transform: translate3d(0, -70px, -60px) rotateX(24deg); opacity: .5; }
  100% { transform: translate3d(0, -28px, -80px); opacity: 1; }
}
.ed-mazo .ed-sello { right: 0; bottom: 6px; }

.ed-franja {
  --celda: 8px;
  display: grid; grid-template-columns: repeat(24, var(--celda)); grid-auto-rows: var(--celda); gap: 5px; padding: 18px;
  border-radius: 14px; background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--filo), var(--e1);
}
.ed-franja__p { border-radius: 2px; background: var(--tinta); opacity: .22; transform: scale(.55); }
.espera-desc[data-estado="descargando"] .ed-franja__p { animation: ed-respira-franja var(--ciclo-franja) var(--curva-estandar) infinite; animation-delay: calc(var(--d) * var(--paso-franja)); }
@keyframes ed-respira-franja { 0%, 55%, 100% { opacity: .22; transform: scale(.55); } 22% { opacity: 1; transform: scale(1); } }
.espera-desc[data-estado="listo"] .ed-franja__p {
  opacity: 1; transform: scale(1);
  transition: transform var(--dur-larga) var(--curva-resorte), opacity var(--dur-larga) var(--curva-estandar);
  transition-delay: calc(var(--d) * var(--paso-franja));
}
.espera-desc[data-estado="fallo"] .ed-franja__p { opacity: .35; }
@media (max-width: 480px) { .ed-franja { --celda: 6px; gap: 4px; padding: 12px; } }

.ed-gota { position: relative; width: 200px; height: 190px; }
.ed-gota__filtro { position: absolute; width: 0; height: 0; }
.ed-gota__liquido { position: absolute; inset: 0; filter: var(--filtro); }
.ed-gota__fuente {
  position: absolute; left: 76px; top: 6px; width: 48px; height: 48px; border-radius: 999px; background: var(--tinta);
  transition: opacity var(--dur-larga) var(--curva-salida), transform var(--dur-larga) var(--curva-salida);
}
.ed-gota__caida { position: absolute; left: 88px; top: 22px; width: 24px; height: 24px; border-radius: 999px; background: var(--tinta); opacity: 0; }
.ed-gota__charco { position: absolute; left: 30px; bottom: 14px; width: 140px; height: 22px; border-radius: 999px; background: var(--tinta); }
.espera-desc[data-estado="descargando"] .ed-gota__caida { animation: ed-gotear var(--ciclo-gotear) var(--curva-gotear) infinite; }
.espera-desc[data-estado="descargando"] .ed-gota__caida + .ed-gota__caida { animation-delay: calc(var(--ciclo-gotear) / 2); }
.espera-desc[data-estado="descargando"] .ed-gota__charco { animation: ed-ondear calc(var(--ciclo-gotear) / 2) var(--curva-estandar) infinite; }
@keyframes ed-gotear {
  0% { transform: translateY(0) scale(.6); opacity: 1; }
  25% { transform: translateY(14px) scale(.9); }
  100% { transform: translateY(128px) scale(.75); opacity: 1; }
}
@keyframes ed-ondear { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(1.06) scaleY(.85); } }
.espera-desc:is([data-estado="listo"], [data-estado="fallo"]) .ed-gota__fuente { opacity: 0; transform: scale(.4); }
.ed-gota .ed-sello { left: 82px; bottom: 6px; }

.ed-rueda { position: relative; width: 260px; height: 110px; }
.ed-rueda__piso { position: absolute; left: 0; right: 56px; bottom: 20px; height: 2px; border-radius: 999px; background: var(--borde-fuerte); }
.ed-rueda__bandeja { position: absolute; right: 0; bottom: 8px; width: 60px; height: 36px; color: var(--tinta); }
.ed-rueda__fade { position: absolute; left: 8px; bottom: 22px; width: 36px; height: 36px; transition: transform var(--dur-aparecer) var(--curva-resorte); }
.ed-rueda__pista, .ed-rueda__cubo { width: 36px; height: 36px; }
.ed-rueda__cubo {
  display: flex; align-items: center; justify-content: center; transform-origin: 100% 100%;
  border-radius: 8px; background: var(--tinta-fondo); border: 2px solid var(--tinta-borde); color: var(--tinta);
}
.ed-rueda__cubo .icono { width: 16px; height: 16px; stroke-width: 2.4; }
.espera-desc[data-estado="descargando"] .ed-rueda__fade { animation: ed-asomar calc(var(--ciclo-rodar) * 4) linear infinite; }
.espera-desc[data-estado="descargando"] .ed-rueda__pista { animation: ed-avanzar calc(var(--ciclo-rodar) * 4) steps(4, end) infinite; }
.espera-desc[data-estado="descargando"] .ed-rueda__cubo { animation: ed-rodar var(--ciclo-rodar) var(--curva-estandar) infinite; }
@keyframes ed-avanzar { from { transform: translateX(0); } to { transform: translateX(144px); } }
@keyframes ed-rodar { from { transform: rotate(0); } to { transform: rotate(90deg); } }
@keyframes ed-asomar { 0% { opacity: 0; } 8%, 86% { opacity: 1; } 100% { opacity: 0; } }
.espera-desc[data-estado="listo"] .ed-rueda__fade { transform: translate(190px, 4px) scale(.7); }

@media (max-width: 480px) { .espera-desc { padding: 32px 16px; } }

@media (prefers-reduced-motion: reduce) {
  .espera-desc *, .espera-desc *::before, .espera-desc *::after { animation: none !important; transition-delay: 0s !important; }
  .ed-sello, .ed-gota__fuente { transform: none; transition: opacity var(--dur-quieta) var(--curva-estandar) !important; }
  .espera-desc:is([data-estado="listo"], [data-estado="fallo"]) .ed-gota__fuente { transform: none; }
  .ed-franja__p { transition: opacity var(--dur-quieta) var(--curva-estandar) !important; }
  .espera-desc[data-estado="descargando"] .ed-caja__ficha:first-child { opacity: 1; transform: translateY(30px); }
  .espera-desc[data-estado="descargando"] .ed-imp__hoja { transform: translateY(-40%); }
  .espera-desc[data-estado="descargando"] .ed-franja__p { opacity: .5; transform: scale(.8); }
  .espera-desc[data-estado="descargando"] .ed-gota__fuente + .ed-gota__caida { opacity: 1; transform: translateY(64px) scale(.75); }
}