/* Micro-animaciones de la ficha de producto (04/11/2026).
   Cada componente va en su bloque «COMPONENTE n». Para quitar uno, borrar su
   bloque aquí y en src/js/micro-anim.js (o revertir su commit).
   Cómo estaba antes: apunte 96 del cuaderno «Apuntes Odoo». */

/* ===== COMPONENTE 1 · Tarjetas de opción (Uiverse · radio cards) =====
   Se elevan al pasar el ratón, la foto se mueve y el check «salta» al elegir. */
.opt-card { transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow .2s ease, opacity var(--dur-fast), transform .2s ease; }
.opt-card:not(.is-disabled):hover { transform: translateY(-3px); box-shadow: 0 10px 22px hsl(168 100% 24% / .14); border-color: hsl(168 40% 62%); }
.opt-card.is-selected { transform: translateY(-3px); box-shadow: 0 0 0 4px hsl(168 100% 24% / .14), 0 10px 22px hsl(168 100% 24% / .16); }
.opt-card.is-selected .check { animation: cdPop .35s cubic-bezier(.3,1.6,.6,1); }
.opt-card img { transition: transform .25s ease; }
.opt-card:not(.is-disabled):hover img { transform: scale(1.08) rotate(-2deg); }
@keyframes cdPop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
/* hueco para que la tarjeta elevada y su halo no se corten: .step-body tiene overflow:auto (04/11/2026) */
.opt-grid { padding: 8px 5px 6px; }

/* ===== COMPONENTE 2 · Plazos de entrega (Uiverse · radio pill) =====
   Círculo de radio animado y el plazo elegido resaltado. Solo .delivery-chip
   (los tamaños predefinidos también son .chip y no se tocan). */
.delivery-chip { transition: border-color var(--dur-fast), background .25s, color var(--dur-fast), box-shadow .2s, transform .2s; }
.delivery-chip:hover { transform: translateX(3px); }
.delivery-chip::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--gray-300, #9aa9a3); flex: none; margin-right: 8px; transition: border .2s, transform .2s; box-sizing: border-box; }
.delivery-chip.is-selected::before { border: 5px solid var(--brand-600); transform: scale(1.1); }
.delivery-chip.is-selected { background: linear-gradient(90deg, var(--brand-50), #fff); box-shadow: 0 6px 16px hsl(168 100% 24% / .15); }
/* El panel mide ~300 px: etiqueta y fecha no caben en una línea y la fecha se partía.
   Dos líneas limpias: «Urgente +17%» arriba y la fecha entera debajo (04/11/2026). */
.delivery-chip { display: grid !important; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px; align-items: center; padding: 10px 16px; border-radius: 16px; }
.delivery-chip::before { grid-row: 1 / 3; margin-right: 0; }
.delivery-chip > span { white-space: nowrap; }
.delivery-chip strong { white-space: nowrap; font-weight: 600; font-size: 13px; color: var(--gray-600, #5f6f69); }
.delivery-chip.is-selected strong { color: var(--brand-700); }

/* ===== COMPONENTE 3 · Total que «cuenta» (Magic UI · Number Ticker) =====
   El total va contando hasta el precio nuevo: ámbar si sube, verde si baja.
   El #sum-total original sigue en la página (oculto a la vista, no a lectores
   de pantalla) y es el que manda; .cd-tick es solo lo que se ve. */
#sum-total.cd-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cd-tick { font-variant-numeric: tabular-nums; display: inline-block; transition: color .3s; }
.cd-tick.sube { color: #b45309; }
.cd-tick.baja { color: #047857; }

/* ===== COMPONENTE 4B · Reflejo en «Añadir al carrito» (Uiverse · shine) =====
   Un reflejo diagonal cruza el botón cada 4 s. Sin cambiar color ni forma. */
#add-to-cart { position: relative; overflow: hidden; }
#add-to-cart::after { content: ""; position: absolute; top: 0; bottom: 0; width: 60px; left: -80px; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); animation: cdBarrido 4s ease-in-out infinite; pointer-events: none; }
#add-to-cart:disabled::after { display: none; }
@keyframes cdBarrido { 0%, 70% { left: -80px; } 100% { left: 110%; } }

/* ===== COMPONENTE 5B · La foto vuela al carrito + «✓ Añadido» =====
   Al añadir (de verdad), la foto vuela al carrito de la cabecera, el icono
   rebota y el botón queda «✓ Añadido» en verde 1,5 s. Vale para el botón
   grande y para «Añadir» de la barra de móvil. Si la cabecera no se ve, solo
   el «✓ Añadido». (Reserva: 5A, un carrito que cruza el botón; apunte 96.) */
.cd-vuela { position: fixed; z-index: 9999; border-radius: 12px; object-fit: cover; box-shadow: 0 10px 30px rgba(0,0,0,.3); pointer-events: none; }
.cd-rebota { animation: cdRebota .6s cubic-bezier(.3,1.8,.5,1); }
@keyframes cdRebota { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.cd-anadido { position: relative; color: transparent !important; background: #1f8f4e !important; }
.cd-anadido::before { content: "✓ Añadido"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; animation: cdPop .35s cubic-bezier(.3,1.6,.6,1); }
#bar-add.cd-anadido::before { content: "✓"; }
@keyframes cdPop { 0% { transform: scale(0); } 100% { transform: scale(1); } }

/* ===== COMPONENTE 6 · Zona de subida de archivo (Uiverse · loaders + inputs) =====
   Borde que «camina» al pasar el ratón o arrastrar, icono que respira y
   barras de carga mientras sube el archivo de verdad. */
.dropzone { border-style: solid !important; border-color: transparent !important;
  background: linear-gradient(#fff, #fff) padding-box, repeating-linear-gradient(90deg, var(--brand-500) 0 10px, transparent 10px 18px) border-box;
  background-size: auto, 36px 100%; animation: cdHormigas 1.2s linear infinite paused; transition: transform .2s; }
.dropzone:hover, .dropzone.drag-over { animation-play-state: running; transform: scale(1.01);
  background: linear-gradient(var(--brand-50), var(--brand-50)) padding-box, repeating-linear-gradient(90deg, var(--brand-500) 0 10px, transparent 10px 18px) border-box;
  background-size: auto, 36px 100%; }
.dropzone svg { animation: cdRespira 1.6s ease-in-out infinite; }
.cd-cargando { display: none; gap: 5px; align-items: flex-end; height: 26px; justify-content: center; margin-top: 8px; }
.dropzone.cd-subiendo .cd-cargando { display: flex; }
.cd-cargando i { width: 6px; border-radius: 3px; background: var(--brand-600); animation: cdBarra 1s ease-in-out infinite; }
.cd-cargando i:nth-child(2) { animation-delay: .1s; } .cd-cargando i:nth-child(3) { animation-delay: .2s; }
.cd-cargando i:nth-child(4) { animation-delay: .3s; } .cd-cargando i:nth-child(5) { animation-delay: .4s; }
@keyframes cdHormigas { to { background-position: 0 0, 36px 0; } }
@keyframes cdRespira { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes cdBarra { 0%, 100% { height: 6px; opacity: .5; } 50% { height: 26px; opacity: 1; } }

/* ===== COMPONENTE 9 · Aparición suave al bajar (Magic UI · Blur Fade, versión ligera) =====
   Solo bloques que al cargar quedan por debajo de la pantalla; lo que ya se ve
   nunca se oculta. 0,45 s. */
.cd-bf { opacity: 0; filter: blur(4px); transform: translateY(8px); transition: opacity .45s ease-out, filter .45s ease-out, transform .45s ease-out; }
.cd-bf.cd-ver { opacity: 1; filter: none; transform: none; }

/* Quien pide menos movimiento en su sistema no ve ninguna de estas animaciones */
@media (prefers-reduced-motion: reduce) {
  .opt-card, .opt-card img, .delivery-chip, .dropzone, .dropzone svg, #add-to-cart::after, .cd-cargando i, .cd-bf { animation: none !important; transition: none !important; transform: none !important; }
  .cd-bf { opacity: 1; filter: none; }
}