/* [Pulso-Supabase] 🎨 Animaciones (ver animaciones.js): un solo interruptor general y 6 categorías.
 * Reglas de la casa: todo lo nuevo se mueve con transform/opacity (nada de box-shadow ni filter en bucle) y su estado quieto es el final:
 * los @keyframes solo dicen de dónde viene, así que con la animación apagada se ve completo, nunca a medias ni escondido. */

:root { --cf-sil-base: color-mix(in srgb, var(--t2) 16%, transparent); --cf-sil-luz: rgba(255, 255, 255, .75); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cf-sil-luz: rgba(255, 255, 255, .07); } }
:root[data-theme="dark"] { --cf-sil-luz: rgba(255, 255, 255, .07); }

/* ════════ 🔕 Todo apagado (o «reducir movimiento» del equipo): nada se mueve ════════
   Es la red de seguridad: vale para lo de hoy (también las 6 que antes seguían: burbuja de la IA, temporizadores rojos, franja del semáforo,
   globos, borde que gira y línea del logo) y para lo que se agregue después. Nada de Pulso espera el fin de una animación. */
html.cf-quieto *, html.cf-quieto *::before, html.cf-quieto *::after { animation: none !important; transition: none !important; }
html.cf-quieto { scroll-behavior: auto !important; }
/* lo que sin su animación quedaría a medias: se ve completo y quieto */
html.cf-quieto #cf-app .cf-header .cf-pulso-ico .cf-hx-linea, html.cf-sin-ambiente #cf-app .cf-header .cf-pulso-ico:not(.cf-lat-suave):not(.cf-lat-fuerte) .cf-hx-linea { stroke-dashoffset: 0; opacity: 1; }
html.cf-sin-ambiente #cf-app .cf-header .cf-pulso-ico :is(.cf-hx-vent, .cf-hx-base, .cf-hx-segs, .cf-hx-seg > i, .cf-hx-seg > i > svg) { animation: none !important; }   /* ⚡ (vel1) el trazo original, quieto */
html.cf-quieto :is(.cf-huc-traza, .ae-vacio-linea, .cf-tv-ecg path, #cf-tv.tv2 .tv2-ecg path),
html.cf-sin-ambiente :is(.cf-tv-ecg path, #cf-tv.tv2 .tv2-ecg path) { stroke-dashoffset: 0 !important; }
html.cf-quieto :is(.cf-hero-mas, .cf-hg-mas), html.cf-sin-transiciones :is(.cf-hero-mas, .cf-hg-mas) { display: none; }   /* el «+1» que sube y se desvanece */
html.cf-quieto :is(#cf-app .cf-header .cf-pulso-ico .cf-hx-chispa, .cf-hx-latido), html.cf-sin-ambiente :is(#cf-app .cf-header .cf-pulso-ico .cf-hx-chispa, .cf-hx-latido) { display: none; }

/* ════════ 🐙 con Pulpo abierto, Pulso queda detrás: nada suyo se anima (antes ~34 animaciones seguían «corriendo» detrás, p. ej. las tarjetas en rojo) ════════ */
html.pp-abierto #cf-app *, html.pp-abierto #cf-app *::before, html.pp-abierto #cf-app *::after,
html.pp-abierto .cf-ia-burbuja, html.pp-abierto .cf-ia-burbuja *, html.pp-abierto .cf-ia-burbuja::after { animation: none !important; }

/* ════════ 🌙 Ambiente apagado: lo que se movía solo, todo el tiempo, queda quieto (con su color: el rojo de urgente se sigue viendo) ════════ */
/* (los ::before/::after van aparte: dentro de :is() no se pueden nombrar) */
html.cf-sin-ambiente :is(#cf-app .cf-header .cf-pulso-ico:not(.cf-lat-suave):not(.cf-lat-fuerte), #cf-app .cf-header .cf-pulso-ico:not(.cf-lat-suave):not(.cf-lat-fuerte) .cf-hx-linea,
  .cf-vivo-dot, .ae-saludo-ico, .cf-noti-aviso-ico, .cf-avisos-n, .cf-timer-txt, .cf-timer-bar span, .cf-meta-ring, .cf-meta-ring b, .cf-met-envivo, .cf-sal-mal, .cf-offline-dot,
  .cf-ia-burbuja img, .cf-tv-ecg path, .cf-tv-vivo, .cf-tv-logo span, .cf-tv-late, #cf-tv .tv2-ecg path, #cf-tv .tv2-vivo i, .cf-celeb-logo svg, .cf-vac, .cf-vac *),
html.cf-sin-ambiente #cf-app .cf-header .cf-pulso-ico:not(.cf-lat-suave):not(.cf-lat-fuerte)::after, html.cf-sin-ambiente #cf-btn-riesgo::before,
html.cf-sin-ambiente .cf-hero::before, html.cf-sin-ambiente .cf-hero-aro::before, html.cf-sin-ambiente .cf-hg-vivo::before, html.cf-sin-ambiente .cf-hg-vivo::after, html.cf-sin-ambiente .cf-jor-est-on::before,
html.cf-sin-ambiente .cf-card-av::after, html.cf-sin-ambiente .cf-card::after, html.cf-sin-ambiente .cf-ia-burbuja::after { animation: none !important; }
html.cf-sin-mascota .cf-ia-burbuja img { animation: none !important; }

/* ════════ 🎞️ Transiciones apagadas: paneles, hojas y pestañas aparecen sin deslizarse; los números quedan fijos ════════ */
html.cf-sin-transiciones :is(.cf-fx-pestana, #cf-panel-body.cf-cambio, .cf-toque, .cf-cascada > .cf-card, .cf-spark-dibuja i,
  .cf-fx-sube, .cf-fx-baja, .cf-hero.cf-hero-pop, .cf-hg-pop, .cf-salta, .ae-entra, .cf-lp *),
html.cf-sin-transiciones .cf-chip-llega::before, html.cf-sin-transiciones .cf-spark-dibuja::after { animation: none !important; }
html.cf-sin-transiciones :is(.cf-panel, .cf-overlay, .cf-perfil, .cf-perfil-ov, .cf-mmenu, .cf-mmenu-ov, .cf-celeb, .cf-guardado, .cf-deshacer, .cf-pf-barra) { transition: none !important; }

/* ════════ ⏳ Carga apagada: las siluetas se ven igual, pero sin el brillo que pasa ════════ */
html.cf-sin-carga :is(.cf-sil *, .cf-iac-m.pensando i, .cf-ptr.cf-ptr-carga svg path),
html.cf-sin-carga #cf-panel-body.cf-carga-pulso::before, html.cf-sin-carga #cf-panel-body.cf-carga-pulso::after, html.cf-sin-carga .cf-sil-met::after,
html.cf-sin-carga .cf-esq-card::after, html.cf-sin-carga .cf-skel::after, html.cf-sin-carga .cf-sil *::after { animation: none !important; }

/* ════════ 💓 Latido apagado / 🎉 Celebraciones apagadas ════════ */
html.cf-sin-latido :is(.cf-lat-suave, .cf-lat-fuerte), html.cf-sin-latido :is(.cf-lat-suave, .cf-lat-fuerte)::after,
html.cf-sin-latido :is(.cf-lat-suave, .cf-lat-fuerte)::before, html.cf-sin-latido :is(.cf-lat-suave, .cf-lat-fuerte) .cf-hx-linea { animation: none !important; }
html.cf-sin-celebraciones .cf-celeb-canvas { display: none; }

/* ════════ las que corrían sin fin, más livianas (mismo aspecto) ════════ */
/* burbuja de la IA: la onda era una sombra animada que la propia burbuja recortaba (overflow: hidden): no se veía y se pintaba en cada cuadro */
.cf-ia-burbuja::after { animation: none; box-shadow: none; }
/* franja roja del semáforo: el brillo queda fijo y late con opacidad (antes animaba box-shadow) */
.ae-semaforo .cf-card.cf-sem-rojo::after { box-shadow: 0 0 12px 1px rgba(239, 68, 68, .6); animation: cf-franja-late 1.6s ease-in-out infinite; }
@keyframes cf-franja-late { 50% { opacity: .5; } }
/* chispa del logo: sin drop-shadow (se recalculaba en cada cuadro); el halo del cuadro ya da el brillo */
/* (⚡ vel1: la chispa ya es una píldora con transform/opacity, sin filtro; ver cabecera.css) */

/* ════════ hoja y panel «🎨 Animaciones» ════════ */
.cf-an-hoja { width: min(460px, calc(100vw - 32px)); }
.cf-an-panel { display: grid; gap: 12px; }
.cf-an-maestro { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; cursor: pointer; border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 94%, #a855f7 6%); }
.cf-an-maestro.cf-on { border-color: color-mix(in srgb, #a855f7 45%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 86%, #f43f5e 14%), color-mix(in srgb, var(--surface) 86%, #a855f7 14%)); }
.cf-an-maestro-ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--t2) 22%, transparent); }
.cf-an-maestro.cf-on .cf-an-maestro-ico { background: linear-gradient(135deg, #f43f5e, #a855f7); }
.cf-an-maestro-ico svg { width: 30px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cf-an-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.cf-an-txt b { font-size: 14.5px; } .cf-an-txt small { color: var(--t2); font-size: 12.5px; line-height: 1.35; }
.cf-an-maestro .cf-an-txt b { font-size: 16px; }
.cf-an-aviso { padding: 10px 12px; border-radius: 14px; font-size: 13px; line-height: 1.4; background: var(--amber-bg); border: 1px solid var(--amber-bd); color: var(--t1); }
.cf-an-aviso .cf-btn { margin-top: 8px; min-height: 40px; }
.cf-an-lista { display: grid; gap: 8px; }
.cf-an-lista.cf-an-quieta .cf-an-fila { opacity: .6; }   /* con todo apagado se pueden elegir igual: se aplican al volver a encender */
.cf-an-fila { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); }
.cf-an-fila.cf-on { border-color: color-mix(in srgb, #a855f7 28%, var(--border)); }
.cf-an-vista { position: relative; width: 56px; height: 48px; padding: 0; border-radius: 14px; cursor: pointer; display: grid; place-items: center; overflow: hidden;
  border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 88%, #a855f7 12%); color: var(--t1); }
.cf-an-fila:not(.cf-on) .cf-an-vista { filter: grayscale(1); opacity: .6; }
.cf-an-mas { align-self: flex-start; margin-top: 4px; min-height: 32px; padding: 4px 10px; border-radius: 99px; border: 1px solid color-mix(in srgb, #a855f7 35%, var(--border));
  background: transparent; color: var(--t1); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.cf-an-mas:hover { background: color-mix(in srgb, #a855f7 12%, transparent); }
.cf-an-pie { margin: 2px 2px 0; color: var(--t2); font-size: 12px; }
@media (max-width: 420px) { .cf-an-fila { grid-template-columns: 48px 1fr auto; gap: 10px; padding: 10px; } .cf-an-vista { width: 48px; } }

/* vistas previas (quietas: dibujo completo; al encender o tocar, 2,4 s de movimiento) */
.cf-an-v-logo { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, #f43f5e, #a855f7); }
.cf-an-v-logo svg { width: 24px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cf-an-v-guardar { width: 40px; height: 28px; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cf-an-v-guardar .cf-an-v-l { stroke: #c084fc; stroke-dasharray: 60; }
.cf-an-v-guardar .cf-an-v-ok { stroke: #22c55e; opacity: 0; }
.cf-an-v-sil { width: 38px; display: grid; gap: 5px; position: relative; overflow: hidden; border-radius: 6px; }
.cf-an-v-sil i { display: block; height: 6px; border-radius: 4px; background: var(--cf-sil-base); } .cf-an-v-sil i:nth-child(2) { width: 75%; } .cf-an-v-sil i:nth-child(3) { width: 50%; }
.cf-an-v-sil::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, var(--cf-sil-luz) 50%, transparent 80%); transform: translateX(-100%); }
.cf-an-v-pulpo { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.cf-an-v-chispas { position: relative; width: 36px; height: 36px; display: grid; place-items: center; }
.cf-an-v-chispas b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #fff; background: linear-gradient(135deg, #22c55e, #16a34a); }
.cf-an-v-chispas i { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #f0abfc; opacity: 0; }
.cf-an-v-chispas i:nth-child(1) { --r: 0deg; } .cf-an-v-chispas i:nth-child(2) { --r: 60deg; background: #fb7185; } .cf-an-v-chispas i:nth-child(3) { --r: 120deg; background: #facc15; }
.cf-an-v-chispas i:nth-child(4) { --r: 180deg; } .cf-an-v-chispas i:nth-child(5) { --r: 240deg; background: #fb7185; } .cf-an-v-chispas i:nth-child(6) { --r: 300deg; background: #c084fc; }
.cf-an-play .cf-an-v-chispas b { animation: cf-an-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
.cf-an-play .cf-an-v-chispas i { animation: cf-an-chispa .8s .12s ease-out; }
.cf-an-play[data-anim-fila="ambiente"] .cf-an-v-logo { animation: cf-hx-golpe 1.2s cubic-bezier(.3, 0, .2, 1) 2; }
.cf-an-play[data-anim-fila="ambiente"] .cf-an-v-logo path { stroke-dasharray: 60; animation: cf-an-traza 1.2s cubic-bezier(.45, 0, .25, 1) 2; }
.cf-an-play .cf-an-v-guardar .cf-an-v-l { animation: cf-an-guarda-l 2.2s ease both; }
.cf-an-play .cf-an-v-guardar .cf-an-v-ok { stroke-dasharray: 24; animation: cf-an-guarda-ok 2.2s ease both; }
.cf-an-play .cf-an-v-sil::after { animation: cf-sil-brillo 1.1s ease-in-out 2; }
.cf-an-play .cf-an-v-lat { animation: cf-lat-fuerte 1.1s cubic-bezier(.3, 0, .2, 1) 2; }
.cf-an-play .cf-an-v-pulpo { animation: cf-an-pulpo 1.2s ease-in-out 2; }
@keyframes cf-an-pop { from { transform: scale(.3); } }
@keyframes cf-an-chispa { 0% { opacity: 1; transform: rotate(var(--r)) translateY(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--r)) translateY(-17px) scale(.4); } }
@keyframes cf-an-traza { from { stroke-dashoffset: 60; } 50% { stroke-dashoffset: 0; } }
@keyframes cf-an-guarda-l { 0% { stroke-dashoffset: 60; opacity: 1; } 45% { stroke-dashoffset: 0; opacity: 1; } 60%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes cf-an-guarda-ok { 0%, 55% { stroke-dashoffset: 24; opacity: 0; } 60% { opacity: 1; } 80%, 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes cf-an-pulpo { 0%, 100% { transform: none; } 25% { transform: translateY(-4px) rotate(-8deg); } 60% { transform: translateY(1px) rotate(6deg); } }

/* ════════ 💓 latido del logo: suave (pedido nuevo) y fuerte, «pum-pum» (venta confirmada) ════════ */
#cf-app .cf-header .cf-pulso-ico.cf-lat-suave { animation: cf-lat-suave .9s cubic-bezier(.3, 0, .2, 1); }
#cf-app .cf-header .cf-pulso-ico.cf-lat-fuerte { animation: cf-lat-fuerte 1.1s cubic-bezier(.3, 0, .2, 1); }
#cf-app .cf-header .cf-pulso-ico.cf-lat-suave::after { animation: cf-lat-anillo .9s ease-out; }
#cf-app .cf-header .cf-pulso-ico.cf-lat-fuerte::after { animation: cf-lat-anillo-f 1.1s ease-out; }
#cf-app .cf-header .cf-pulso-ico::before { content: ''; position: absolute; inset: -10px; border-radius: 24px; pointer-events: none; z-index: -1; opacity: 0;
  background: radial-gradient(closest-side, rgba(244, 63, 94, .55), rgba(168, 85, 247, .25) 60%, transparent); }
#cf-app .cf-header .cf-pulso-ico.cf-lat-fuerte::before { animation: cf-lat-brillo 1.1s ease-out; }
#cf-app .cf-header .cf-pulso-ico:is(.cf-lat-suave, .cf-lat-fuerte) .cf-hx-linea { animation: cf-lat-linea .7s cubic-bezier(.45, 0, .25, 1); stroke-dashoffset: 0; opacity: 1; }
#cf-app .cf-header .cf-pulso-ico:is(.cf-lat-suave, .cf-lat-fuerte) .cf-hx-chispa { animation: none; opacity: 0; }
@keyframes cf-lat-suave { 0% { transform: scale(1); } 22% { transform: scale(1.1); } 42% { transform: scale(.97); } 62% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes cf-lat-fuerte { 0% { transform: scale(1); } 12% { transform: scale(1.2); } 24% { transform: scale(.95); } 38% { transform: scale(1.15); } 54% { transform: scale(.98); } 100% { transform: scale(1); } }
@keyframes cf-lat-anillo { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes cf-lat-anillo-f { 0% { opacity: .9; transform: scale(1); } 45% { opacity: .5; transform: scale(1.5); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes cf-lat-brillo { 0% { opacity: 0; transform: scale(.8); } 20% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes cf-lat-linea { from { stroke-dashoffset: 100; } }

/* ════════ ⏳ siluetas de carga (pulsoSilueta): lista, tarjetas, tabla, pedidos y panel ════════ */
/* ⏳ (27-oct) sin parpadeo: escondida (ocupa su lugar) hasta los 150 ms; animaciones.js le quita la clase. Vale para .cf-sil y .pp-sil */
.cf-sil-tarde, .cf-sil-tarde * { visibility: hidden !important; }
.cf-sil { display: grid; gap: 10px; padding: 6px 0; position: relative; }
.cf-sil-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cf-sil i { display: block; height: 12px; border-radius: 8px; background: var(--cf-sil-base); }
.cf-sil :is(.cf-sil-it, .cf-sil-pd, .cf-sil-tj, .cf-sil-graf) { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); }
.cf-sil-it { display: grid; grid-template-columns: 36px 1fr; gap: 8px 12px; padding: 12px 14px; }
.cf-sil-pd { display: grid; grid-template-columns: 40px 1fr; gap: 9px 12px; padding: 14px; min-height: 112px; }
.cf-sil .cf-sil-a { grid-row: 1 / 3; width: 36px; height: 36px; border-radius: 12px; }
.cf-sil-pd .cf-sil-a { width: 40px; height: 40px; border-radius: 50%; }
.cf-sil .cf-sil-l { width: 72%; } .cf-sil .cf-sil-c { width: 44%; }
.cf-sil .cf-sil-b { grid-column: 1 / -1; justify-self: end; width: 38%; height: 32px; border-radius: 10px; }
.cf-sil-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cf-sil-tj { display: grid; align-content: start; gap: 10px; padding: 14px; min-height: 86px; }
.cf-sil .cf-sil-n { height: 24px; width: 62%; border-radius: 8px; }
.cf-sil-tabla { gap: 0; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--surface); padding: 0; }
.cf-sil-fila { position: relative; overflow: hidden; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 14px; padding: 13px 14px; border-top: 1px solid var(--border); }
.cf-sil-fila:first-of-type, .cf-sil-cab { border-top: 0; }
.cf-sil-cab i { height: 9px; opacity: .75; }
.cf-sil-graf { height: 170px; }
.cf-sil-pulso { display: block; width: min(320px, 72%); height: 42px; margin: 4px auto 6px; overflow: visible; }
.cf-sil-pulso path { fill: none; stroke: #c084fc; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .85; stroke-dasharray: 520; }
.cf-sil :is(.cf-sil-it, .cf-sil-pd, .cf-sil-tj, .cf-sil-graf, .cf-sil-fila)::after { content: ''; position: absolute; inset: 0; pointer-events: none; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 20%, var(--cf-sil-luz) 50%, transparent 80%); }
.cf-sil :is(.cf-sil-it, .cf-sil-pd, .cf-sil-tj, .cf-sil-graf, .cf-sil-fila)::after { animation: cf-sil-brillo 1.4s ease-in-out infinite; }
.cf-sil-pulso path { animation: cf-sil-ecg 1.6s linear infinite; }
@keyframes cf-sil-brillo { to { transform: translateX(100%); } }
@keyframes cf-sil-ecg { from { stroke-dashoffset: 520; } to { stroke-dashoffset: -520; } }
.cf-lista > .cf-sil { grid-column: 1 / -1; }
@media (min-width: 900px) { .cf-sil-pedidos { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }
@media (max-width: 520px) { .cf-sil-fila { grid-template-columns: 2fr 1fr 1fr; } .cf-sil-fila i:nth-child(4) { display: none; } }

/* ════════ 🫶 pantallas vacías con intención (pulsoVacio): dibujo + qué hacer. Lo que se mueve es «ambiente» ════════ */
.cf-vac { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 26px 18px 28px; }
.cf-vac-dib { width: 116px; height: 92px; margin-bottom: 4px; overflow: visible; }
.cf-vac-g { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.cf-vac-tr { opacity: .9; } .cf-vac-pl { stroke-width: 3.8; }
.cf-vac-sombra { fill: color-mix(in srgb, #a855f7 18%, transparent); }
.cf-vac-t { font-size: 16px; color: var(--t1); }
.cf-vac-x { max-width: 380px; color: var(--t2); font-size: 13.5px; font-weight: 500; line-height: 1.45; }
.cf-vac-acc { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.cf-vac-acc .cf-btn { min-height: 44px; }
html:not(.ae-vacios) .cf-vac-dib { display: none; }   /* 🎨 Apariencia → «Pantallas vacías con dibujo» apagado: solo el texto y el botón */
.cf-vac .cf-vac-dib { animation: cf-vac-entra .5s cubic-bezier(.2, .8, .2, 1); }
.cf-vac .cf-vac-tr { stroke-dasharray: 260; animation: cf-vac-traza 1.1s ease-out; }
.cf-vac .cf-vac-pl { stroke-dasharray: 80; animation: cf-vac-traza-pl 1.6s ease-out; }
.cf-vac .cf-vac-g { animation: cf-vac-flota 3.2s ease-in-out 1.6s 3; }   /* flota 3 veces y se queda quieto (no corre para siempre) */
.cf-vac .cf-vac-sombra { transform-box: fill-box; transform-origin: center; animation: cf-vac-sombra 3.2s ease-in-out 1.6s 3; }
@keyframes cf-vac-entra { from { opacity: 0; transform: translateY(8px) scale(.94); } }
@keyframes cf-vac-traza { from { stroke-dashoffset: 260; } }
@keyframes cf-vac-traza-pl { 0%, 45% { stroke-dashoffset: 80; } 100% { stroke-dashoffset: 0; } }
@keyframes cf-vac-flota { 50% { transform: translateY(-4px); } }
@keyframes cf-vac-sombra { 50% { transform: scaleX(.85); opacity: .7; } }

/* ════════ 〰️ la línea de pulso al guardar (pulsoLineaSvg): se dibuja → ✓ verde · error: plana y roja ════════ */
.cf-lp { width: 26px; height: 18px; flex: 0 0 auto; fill: none; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.cf-lp path { stroke-width: 2.6; }
.cf-lp .cf-lp-l { stroke: #c084fc; stroke-dasharray: 100; }
.cf-lp .cf-lp-ok { stroke: #22c55e; stroke-width: 3; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; }
.cf-lp .cf-lp-plana { stroke: #ef4444; stroke-width: 3; opacity: 0; }
.cf-lp.cf-lp-va .cf-lp-l { animation: cf-lp-dibuja 1.2s cubic-bezier(.45, 0, .25, 1) infinite; }
.cf-lp.cf-lp-bien .cf-lp-l { opacity: 0; animation: cf-lp-sale .25s ease; }
.cf-lp.cf-lp-bien .cf-lp-ok { stroke-dashoffset: 0; opacity: 1; animation: cf-lp-check .4s .1s cubic-bezier(.3, .9, .3, 1) backwards; }
.cf-lp.cf-lp-mal .cf-lp-l { opacity: 0; animation: cf-lp-sale .2s ease; }
.cf-lp.cf-lp-mal .cf-lp-plana { opacity: 1; animation: cf-lp-aplana .35s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes cf-lp-dibuja { 0% { stroke-dashoffset: 100; } 60% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -100; } }
@keyframes cf-lp-sale { from { opacity: 1; } }
@keyframes cf-lp-check { from { stroke-dashoffset: 100; opacity: 1; } }
@keyframes cf-lp-aplana { from { opacity: 0; transform: scaleY(5) scaleX(.6); } }
/* el aviso «Guardando… / Guardado / No se guardó» de arriba (guia.js) y la barra de Configuración usan la línea */
.cf-guardado .cf-lp { width: 24px; height: 16px; margin-left: -2px; }
.cf-guardado.cf-mal { border-color: color-mix(in srgb, #ef4444 50%, transparent); color: var(--t1); }
.cf-cfg-save .cf-lp { width: 24px; height: 16px; margin-right: 8px; vertical-align: -3px; }
.cf-lp.cf-lp-listo .cf-lp-l { opacity: 0; } .cf-lp.cf-lp-listo .cf-lp-ok { stroke-dashoffset: 0; opacity: 1; }   /* ✓ quieto (ya estaba guardado) */
/* 🎨 Apariencia: la fila que lleva a Animaciones */
.ae-op-anim { margin: 0 0 12px; border-color: color-mix(in srgb, #a855f7 40%, var(--border)); background: color-mix(in srgb, var(--surface) 90%, #a855f7 10%); }
.ae-op-anim .ae-ir { font-style: normal; font-size: 22px; line-height: 1; color: var(--t2); }
/* (el ✓ de antes en guia.css animaba todos los trazos del aviso: con la línea, cada trazo hace lo suyo) */
html.cf-mov .cf-guardado.cf-ok .cf-lp path { stroke-dasharray: 100; animation: none; }
html.cf-mov .cf-guardado.cf-ok .cf-lp .cf-lp-l { animation: cf-lp-sale .25s ease; }
html.cf-mov .cf-guardado.cf-ok .cf-lp .cf-lp-ok { animation: cf-lp-check .4s .1s cubic-bezier(.3, .9, .3, 1) backwards; }