/* ============================================================
   KIT-FLANDES · PIEZA 4 · AVISO DE GUARDADO (COHETE) — estilos
   Pareja de kit/guardado.js.
   ============================================================ */

.kit-guard {
  position: fixed;
  inset: 0;
  z-index: 9800;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: var(--k-velo);
  backdrop-filter: blur(4px);
}
.kit-guard--on { display: flex; }

.kit-guard__caja {
  width: min(400px, 100%);
  background: var(--k-papel);
  color: var(--k-tinta);
  border-radius: var(--k-r-lg);
  box-shadow: var(--k-sombra-2);
  padding: 0 22px 24px;
  text-align: center;
  overflow: hidden;
  animation: kit-guard-entra .26s cubic-bezier(.2, .9, .3, 1) both;
}
@keyframes kit-guard-entra {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* ── el cielo por el que VIAJA el cohete ──
   4.4: antes el cohete solo se balanceaba en el sitio y las estrellas
   caían de arriba abajo, que se lee como nieve, no como vuelo. Ahora el
   cohete ATRAVIESA el cielo en diagonal, igual que el avión del loader de
   SEP-AGENDA, y las estelas pasan en sentido contrario para que se note la
   velocidad. El viaje va en .kit-guard__nave y la inclinación en
   .kit-guard__cohete: dos transform separados que no se pisan. */

.kit-guard__cielo {
  position: relative;
  height: 128px;
  margin: 0 -22px 18px;
  background: linear-gradient(180deg, var(--k-marca-2) 0%, var(--k-marca) 100%);
  overflow: hidden;
  color: #fff;                 /* los iconos son currentColor */
}

.kit-guard__nave {
  position: absolute;
  left: 50%;
  bottom: 40px;
  margin-left: -17px;
  animation: kit-guard-viaja 3.1s cubic-bezier(.45, 0, .55, 1) infinite;
}
.kit-guard__cohete {
  display: block;
  transform: rotate(38deg);    /* apuntando a donde va */
  filter: drop-shadow(0 5px 9px rgba(0, 0, 0, .35));
}
@keyframes kit-guard-viaja {
  0%   { transform: translate(-104px, 40px);  opacity: 0; }
  14%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { transform: translate(104px, -52px);  opacity: 0; }
}

/* Estelas: pasan al revés del cohete, que es lo que da la sensación de
   que el que se mueve es él y no el fondo. */
.kit-guard__estela {
  position: absolute;
  width: 34px; height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  animation: kit-guard-estela 1.7s linear infinite;
}
.kit-guard__estela.e1 { top: 26px;  animation-delay: 0s;   }
.kit-guard__estela.e2 { top: 62px;  animation-delay: .55s; width: 22px; }
.kit-guard__estela.e3 { top: 96px;  animation-delay: 1.1s; width: 44px; }
@keyframes kit-guard-estela {
  from { transform: translateX(240px); opacity: 0; }
  25%  { opacity: .7; }
  to   { transform: translateX(-90px); opacity: 0; }
}

.kit-guard__ok {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
}

/* ── textos ── */

.kit-guard__t { font: 700 18px/1.3 var(--k-fuente-titulo); margin-bottom: 8px; }
.kit-guard__p { font: 400 14px/1.45 var(--k-fuente); color: var(--k-tinta-2); margin-bottom: 18px; }
.kit-guard__p b { color: var(--k-tinta); }

.kit-guard__pista {
  height: 7px;
  border-radius: var(--k-r-pill);
  background: var(--k-papel-2);
  overflow: hidden;
  margin-bottom: 12px;
}
.kit-guard__bar {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--k-r-pill);
  background: linear-gradient(90deg, var(--k-marca-clara), var(--k-marca));
  transition: width .3s ease;
}

.kit-guard__paso {
  font: 500 13px/1.3 var(--k-fuente);
  color: var(--k-apagado);
  min-height: 17px;
}

/* ── final feliz ── */

.kit-guard--listo .kit-guard__cielo { background: linear-gradient(180deg, #0b5f3e 0%, var(--k-ok) 100%); }
.kit-guard--listo .kit-guard__nave {
  animation: kit-guard-despega .85s cubic-bezier(.4, 0, .2, 1) forwards;
}
.kit-guard--listo .kit-guard__estela { animation: none; opacity: 0; }
@keyframes kit-guard-despega {
  to { transform: translate(150px, -120px) scale(.7); opacity: 0; }
}
.kit-guard--listo .kit-guard__ok { display: flex; animation: kit-guard-sello .38s cubic-bezier(.2, 1.4, .4, 1) both; }
.kit-guard--listo .kit-guard__bar { background: var(--k-ok); }

@keyframes kit-guard-sello {
  from { opacity: 0; transform: scale(.4); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .kit-guard__caja, .kit-guard__nave, .kit-guard__estela,
  .kit-guard--listo .kit-guard__nave, .kit-guard--listo .kit-guard__ok {
    animation: none !important;
  }
  .kit-guard__nave { transform: none; opacity: 1; }
  .kit-guard__estela { opacity: .45; transform: none; }
}

/* ════════════════════════════════════════════════════════════
   4.5 · EL COHETE, CON ALGO QUE CONTAR

   "Demasiado pobre", dijo Oss, y tenía razón: el cohete se movía
   pero el cielo estaba quieto, y sin nada alrededor no hay
   sensación de avanzar. Lo que se añade:

     · estrellas que corren hacia atrás — es lo que da la
       velocidad, no el cohete;
     · fuego debajo del cohete, que tiembla;
     · un punto por paso, que se va marcando: dice cuánto falta
       de verdad, no como la barra, que va a ojo;
     · el rótulo del paso se va y vuelve en vez de saltar;
     · al terminar, el cohete despega y caen doce papelitos.

   Todo con CSS. Ni una imagen ni una librería más.
   ════════════════════════════════════════════════════════════ */

.kit-guard__cielo { position: relative; overflow: hidden; }

/* las estrellas */
.kit-guard__estrellas { position: absolute; inset: 0; pointer-events: none; }
.kit-guard__estrellas i {
  position: absolute; right: -8px;
  width: 2px; height: 2px; border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  animation: kit-guard-estrella 2.2s linear infinite;
}
.kit-guard__estrellas i.s0 { top: 12%; animation-duration: 1.9s; animation-delay: -.2s; }
.kit-guard__estrellas i.s1 { top: 26%; animation-duration: 2.6s; animation-delay: -.9s; width: 3px; height: 3px; }
.kit-guard__estrellas i.s2 { top: 38%; animation-duration: 1.6s; animation-delay: -1.4s; }
.kit-guard__estrellas i.s3 { top: 54%; animation-duration: 2.9s; animation-delay: -.5s; }
.kit-guard__estrellas i.s4 { top: 67%; animation-duration: 2.1s; animation-delay: -1.8s; width: 3px; height: 3px; }
.kit-guard__estrellas i.s5 { top: 79%; animation-duration: 2.4s; animation-delay: -1.1s; }
.kit-guard__estrellas i.s6 { top: 90%; animation-duration: 1.8s; animation-delay: -.7s; }
@keyframes kit-guard-estrella {
  0%   { transform: translateX(0) scaleX(1); opacity: 0; }
  10%  { opacity: .9; }
  80%  { opacity: .9; }
  100% { transform: translateX(-340px) scaleX(4); opacity: 0; }
}

/* el fuego del cohete */
.kit-guard__cohete { position: relative; display: inline-block; }
.kit-guard__fuego {
  position: absolute; left: 50%; bottom: -7px;
  width: 9px; height: 16px; margin-left: -4.5px;
  border-radius: 50% 50% 45% 45%;
  background: linear-gradient(180deg, #ffd166 0%, #f77f00 55%, rgba(247, 127, 0, 0) 100%);
  transform-origin: 50% 0;
  animation: kit-guard-fuego .18s ease-in-out infinite alternate;
}
@keyframes kit-guard-fuego {
  from { transform: scaleY(.72) scaleX(.9); opacity: .85; }
  to   { transform: scaleY(1.18) scaleX(1.08); opacity: 1; }
}

/* un punto por paso */
.kit-guard__puntos {
  display: flex; justify-content: center; gap: 7px;
  margin-top: 12px;
}
.kit-guard__puntos i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--k-linea, rgba(0, 0, 0, .16));
  transition: background .25s ease, transform .25s ease;
}
.kit-guard__punto--ok    { background: var(--k-ok, #1f9d55); }
.kit-guard__punto--ahora {
  background: var(--k-marca, #06402B);
  animation: kit-guard-punto 1s ease-in-out infinite;
}
@keyframes kit-guard-punto {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.45); }
}

/* el rótulo del paso, que se va y vuelve */
.kit-guard__paso { transition: opacity .16s ease, transform .16s ease; }
.kit-guard__paso--cambia { opacity: 0; transform: translateY(-5px); }

/* el confeti del final */
.kit-guard__confeti { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.kit-guard--listo .kit-guard__confeti { opacity: 1; }
.kit-guard__confeti i {
  position: absolute; top: -12px;
  width: 7px; height: 11px; border-radius: 1px;
  opacity: 0;
}
.kit-guard--listo .kit-guard__confeti i {
  animation: kit-guard-papel 1.5s cubic-bezier(.3, .7, .5, 1) forwards;
}
.kit-guard__confeti i.c0 { left: 10%; background: #ffd166; animation-delay: .04s; }
.kit-guard__confeti i.c1 { left: 22%; background: #fff;    animation-delay: .16s; }
.kit-guard__confeti i.c2 { left: 35%; background: #8ae6b4; animation-delay: .00s; }
.kit-guard__confeti i.c3 { left: 48%; background: #ffd166; animation-delay: .22s; }
.kit-guard__confeti i.c4 { left: 62%; background: #fff;    animation-delay: .10s; }
.kit-guard__confeti i.c5 { left: 76%; background: #8ae6b4; animation-delay: .28s; }
.kit-guard__confeti i:nth-child(n+7) { width: 5px; height: 8px; }
@keyframes kit-guard-papel {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translateY(150px) rotate(420deg); opacity: 0; }
}

/* mientras se guarda, el cielo se apaga un poco al terminar */
.kit-guard--listo .kit-guard__estrellas,
.kit-guard--listo .kit-guard__fuego { opacity: 0; transition: opacity .3s ease; }

@media (prefers-reduced-motion: reduce) {
  .kit-guard__estrellas,
  .kit-guard__confeti,
  .kit-guard__fuego { display: none; }
  .kit-guard__punto--ahora { animation: none; }
  .kit-guard__paso--cambia { opacity: 1; transform: none; }
}