/* =============================================================================
   componentes/carga.css — Indicadores de carga
   -----------------------------------------------------------------------------
   Skeletons (.sk) que ocupan el sitio del contenido mientras llega por AJAX
   (mini-carrito, comparador, login de favoritos, sugerencias del buscador) y la
   barra de progreso de navegación (ui.js).
   ============================================================================= */

/* ---------- SKELETONS (carga) ---------- */
.sk { position:relative; overflow:hidden; background:#e9ecef; border-radius:6px; }
.sk::after { content:''; position:absolute; inset:0; transform:translateX(-100%);
             background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
             animation:skShimmer 1.25s infinite; }
@keyframes skShimmer { 100% { transform:translateX(100%); } }
.sk-linea { height:.7rem; margin-bottom:.45rem; }
.sk-linea.w-40 { width:40%; } .sk-linea.w-60 { width:60%; } .sk-linea.w-80 { width:80%; }
.sk-thumb { width:48px; height:48px; border-radius:8px; flex:0 0 auto; }
.sk-card-img { width:100%; padding-top:75%; }
@media (prefers-reduced-motion: reduce) { .sk::after { animation:none; } }

/* Formas con la medida de lo que sustituyen. Mejor un nombre por lo que imitan que por lo
   que miden: si cambia el botón de verdad, se retoca aquí y todos los esqueletos siguen. */
.sk-thumb-sm { width:32px; height:32px; }                  /* miniatura de una sugerencia */
.sk-foto     { height:8rem; }                               /* foto (comparativa) */
.sk-bloque   { height:3rem; }                               /* fila de tabla / bloque de texto */
.sk-campo    { height:3.5rem; }                             /* campo de formulario flotante */
.sk-boton    { height:2.6rem; border-radius:999px; }        /* botón pill */
.sk-boton.sk-boton-sm { height:2.4rem; }                    /* botón pill del mini-carrito */
/* Anchos fijos para cifras cortas (importes, "Total"), que no dependen del ancho de la caja. */
.sk-linea.sk-cifra    { width:3.5rem; }
.sk-linea.sk-cifra-md { width:4rem; }
.sk-linea.sk-cifra-lg { width:5rem; }

/* ---------- BARRA DE PROGRESO DE NAVEGACIÓN ----------
   Sale mientras el navegador espera la página nueva (ui.js): al buscar, filtrar, reordenar o
   paginar, y al seguir cualquier enlace interno que tarde (categorías, familias…). No mide
   nada real —no se puede saber cuánto falta—, así que avanza deprisa al principio y se queda
   esperando cerca del final: lo justo para que se vea que la web está trabajando. La quita el
   propio navegador al pintar la página siguiente.

   Con el degradado corporativo (el mismo carmín → azul del aro del buscador). El degradado
   mide el ANCHO DE LA VENTANA y la barra lo va descubriendo: arranca en carmín y solo llega
   al azul cerca del final. Sin el background-size, el degradado entero se encogería dentro
   de la barra y se vería igual al 10% que al 90%.

   APILADO: el z-index es el MÁXIMO, el mismo que los paneles laterales (layout.css los sube
   ahí para quedar sobre el chat). Con 2000 se quedaba DEBAJO del menú móvil abierto, que
   ocupa justo la franja de arriba: al pulsar una familia no se veía que la web cargaba.
   Empatando gana el que va después en el documento, y la barra la añade ui.js al final del
   <body> en el momento del clic, detrás del panel y de su velo. */
.ss-progreso {
    position:fixed; top:0; left:0; height:3px; width:0; z-index:2147483647;
    background:linear-gradient(90deg, #e20049, #1a2b6d) left / 100vw 100% no-repeat;
    box-shadow:0 0 6px rgba(226,0,73,.35);
    animation:ss-progreso 8s cubic-bezier(.1,.6,.2,1) forwards;
}
@keyframes ss-progreso {
    0%   { width:0; }
    20%  { width:45%; }
    60%  { width:75%; }
    100% { width:92%; }
}
@media (prefers-reduced-motion: reduce) { .ss-progreso { animation:none; width:60%; } }