/* =============================================================================
   Cargador de página (tienda y panel de staff) — assets/cargador.js lo muestra al cambiar de página.
   Se configura en Apariencia → «Cargador de página»: Cargador.ashx pone las variables --carg-* y el CSS propio.
   Todas las animaciones mueven solo transform y opacity (las hace la tarjeta gráfica).
   ============================================================================= */
.carg{
  --carg-color:#1f4fa3; --carg-color2:#ffc107; --carg-fondo:#ffffff; --carg-fondo-osc:#0f141b; --carg-op:70%;
  --carg-tam:56px; --carg-dur:1s; --carg-blur:0px; --carg-texto:#16202e; --carg-tinta:#16202e;
  position:fixed; inset:0; z-index:2147483000; display:grid; place-items:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease-out,visibility 0s linear .2s;
}
.carg::before{content:""; position:absolute; inset:0; background:var(--carg-fondo); opacity:var(--carg-op)}
.carg--ver{opacity:1; visibility:visible; pointer-events:auto; cursor:progress; transition:opacity .2s ease-out,visibility 0s}
.carg--blur.carg--ver{-webkit-backdrop-filter:blur(var(--carg-blur)); backdrop-filter:blur(var(--carg-blur))}
:root[data-modo=oscuro] .carg{--carg-fondo:var(--carg-fondo-osc); --carg-texto:#e6ebf2}
.carg *,.carg *::before,.carg *::after{box-sizing:border-box}
.carg__caja{position:relative; display:grid; justify-items:center; gap:14px; padding:16px; transform:translateY(8px) scale(.97); transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.carg--ver .carg__caja{transform:none}
.carg__fig{position:relative; width:var(--carg-tam); height:var(--carg-tam); color:var(--carg-color)}
.carg__t{margin:0; max-width:80vw; font:600 .92rem/1.35 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:var(--carg-texto); text-align:center; letter-spacing:.01em}
.carg__sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.carg i,.carg b{display:block; font-style:normal}

/* 1. Anillo */
.carg__anillo{position:absolute; inset:0; border-radius:50%; border:calc(var(--carg-tam) * .1) solid color-mix(in srgb,var(--carg-color) 16%,transparent); border-top-color:var(--carg-color); border-right-color:var(--carg-color2); animation:carg-gira var(--carg-dur) linear infinite}

/* 2. Puntos */
.carg__puntos{position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between}
.carg__puntos i{width:24%; aspect-ratio:1; border-radius:50%; background:var(--carg-color); animation:carg-salta var(--carg-dur) ease-in-out infinite}
.carg__puntos i:nth-child(2){background:var(--carg-color2); animation-delay:calc(var(--carg-dur) * -.82)}
.carg__puntos i:nth-child(3){animation-delay:calc(var(--carg-dur) * -.64)}

/* 3. Barra arriba */
.carg--barra{place-items:start stretch}
.carg--barra::before{opacity:calc(var(--carg-op) * .35)}
.carg--barra .carg__caja{padding:0; transform:none; gap:0}
.carg--barra .carg__fig{width:100%; height:max(3px,calc(var(--carg-tam) * .07)); overflow:hidden}
.carg--barra .carg__t{position:fixed; top:calc(max(3px,calc(var(--carg-tam) * .07)) + 10px); right:12px; padding:4px 10px; border-radius:999px; background:var(--carg-fondo); font-size:.8rem; box-shadow:0 2px 10px rgba(0,0,0,.12)}
.carg__barra{position:absolute; inset:0; background:color-mix(in srgb,var(--carg-color) 14%,transparent)}
.carg__barra i{position:absolute; top:0; bottom:0; left:0; width:45%; background:linear-gradient(90deg,transparent,var(--carg-color) 30%,var(--carg-color2) 70%,transparent); animation:carg-barra calc(var(--carg-dur) * 1.3) cubic-bezier(.45,.05,.55,.95) infinite}

/* 4. Pulso */
.carg__pulso{position:absolute; inset:0}
.carg__pulso i{position:absolute; inset:0; border-radius:50%; background:var(--carg-color); opacity:0; animation:carg-pulso calc(var(--carg-dur) * 1.6) cubic-bezier(.2,.6,.3,1) infinite}
.carg__pulso i:nth-child(2){background:var(--carg-color2); animation-delay:calc(var(--carg-dur) * -.8)}

/* 5. Onda (barras) */
.carg__onda{position:absolute; inset:12% 0; display:flex; align-items:center; justify-content:space-between}
.carg__onda i{width:14%; height:100%; border-radius:99px; background:var(--carg-color); transform:scaleY(.35); animation:carg-onda var(--carg-dur) ease-in-out infinite}
.carg__onda i:nth-child(2){animation-delay:calc(var(--carg-dur) * -.85)}
.carg__onda i:nth-child(3){background:var(--carg-color2); animation-delay:calc(var(--carg-dur) * -.7)}
.carg__onda i:nth-child(4){animation-delay:calc(var(--carg-dur) * -.55)}
.carg__onda i:nth-child(5){animation-delay:calc(var(--carg-dur) * -.4)}

/* 6. Cuadros */
.carg__cuadros{position:absolute; inset:6%; display:grid; grid-template-columns:1fr 1fr; gap:12%}
.carg__cuadros i{border-radius:18%; background:var(--carg-color); animation:carg-cuadro calc(var(--carg-dur) * 1.4) ease-in-out infinite}
.carg__cuadros i:nth-child(2){background:var(--carg-color2); animation-delay:calc(var(--carg-dur) * .35)}
.carg__cuadros i:nth-child(4){background:var(--carg-color2); animation-delay:calc(var(--carg-dur) * .7)}
.carg__cuadros i:nth-child(3){animation-delay:calc(var(--carg-dur) * 1.05)}

/* 7. Órbita */
.carg__orbita{position:absolute; inset:0; animation:carg-gira calc(var(--carg-dur) * 1.2) linear infinite}
.carg__orbita i{position:absolute; width:26%; aspect-ratio:1; border-radius:50%; background:var(--carg-color); top:0; left:37%}
.carg__orbita i:nth-child(2){background:var(--carg-color2); top:auto; bottom:0}
.carg__orbita b{position:absolute; inset:38%; border-radius:50%; background:color-mix(in srgb,var(--carg-color) 30%,transparent)}

/* 8. Engranaje */
.carg__engranaje{position:absolute; inset:0; width:100%; height:100%; animation:carg-gira calc(var(--carg-dur) * 2) linear infinite}
.carg__engranaje .carg__eg{fill:var(--carg-color); fill-rule:evenodd}
.carg__engranaje .carg__eg2{fill:var(--carg-color2)}

/* 9. Ladrillos */
.carg__ladrillos{position:absolute; inset:14% 0; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(3,1fr); gap:7%}
.carg__ladrillos i{grid-column:span 2; border-radius:12%; background:var(--carg-color); opacity:0; animation:carg-ladrillo calc(var(--carg-dur) * 2.4) ease-out infinite}
.carg__ladrillos i:nth-child(1){grid-row:3; grid-column:1 / span 2}
.carg__ladrillos i:nth-child(2){grid-row:3; grid-column:3 / span 2; animation-delay:calc(var(--carg-dur) * .2)}
.carg__ladrillos i:nth-child(3){grid-row:2; grid-column:2 / span 2; background:var(--carg-color2); animation-delay:calc(var(--carg-dur) * .4)}
.carg__ladrillos i:nth-child(4){grid-row:2; grid-column:4 / span 1; animation-delay:calc(var(--carg-dur) * .55)}
.carg__ladrillos i:nth-child(5){grid-row:2; grid-column:1 / span 1; animation-delay:calc(var(--carg-dur) * .3)}
.carg__ladrillos i:nth-child(6){grid-row:1; grid-column:2 / span 2; animation-delay:calc(var(--carg-dur) * .7)}

/* 10. Cinta de obra */
.carg__cinta{position:absolute; top:34%; bottom:34%; left:-60%; right:-60%; overflow:hidden; border-radius:4px; box-shadow:0 2px 8px rgba(0,0,0,.18); transform:rotate(-8deg)}
.carg__cinta i{position:absolute; top:0; bottom:0; left:0; width:200%; background:repeating-linear-gradient(-45deg,var(--carg-color2) 0 calc(var(--carg-tam) * .14),var(--carg-tinta) 0 calc(var(--carg-tam) * .28)); animation:carg-cinta calc(var(--carg-dur) * 1.6) linear infinite}

/* Imagen o SVG propio, con su movimiento */
.carg__img{position:absolute; inset:0; display:grid; place-items:center}
.carg__img img,.carg__img svg{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain}
.carg__img svg{width:100%; height:100%}
.carg__img--girar{animation:carg-gira calc(var(--carg-dur) * 1.4) linear infinite}
.carg__img--latir{animation:carg-late var(--carg-dur) ease-in-out infinite}
.carg__img--rebotar{animation:carg-rebota var(--carg-dur) cubic-bezier(.3,0,.3,1) infinite}
.carg__img--flotar{animation:carg-flota calc(var(--carg-dur) * 2.2) ease-in-out infinite}
.carg__img--voltear{animation:carg-voltea calc(var(--carg-dur) * 1.6) ease-in-out infinite}

/* HTML propio: ocupa lo que necesite */
.carg--propio .carg__fig{width:auto; height:auto; min-width:var(--carg-tam); min-height:var(--carg-tam); display:grid; place-items:center}

/* Muestra dentro de una caja (vista previa del panel) */
.carg--muestra{position:absolute; z-index:1; pointer-events:none!important; cursor:default}
/* Marco de una muestra: la contiene y la recorta (no depende de otra hoja de estilos) */
.carg-marco{position:relative; overflow:hidden; contain:paint}
.carg--muestra.carg--barra .carg__t{position:absolute}

@keyframes carg-gira{to{transform:rotate(360deg)}}
@keyframes carg-salta{0%,80%,100%{transform:translateY(0) scale(.8); opacity:.55}40%{transform:translateY(-55%) scale(1); opacity:1}}
@keyframes carg-barra{0%{transform:translateX(-100%)}100%{transform:translateX(230%)}}
@keyframes carg-pulso{0%{transform:scale(.1); opacity:.9}100%{transform:scale(1); opacity:0}}
@keyframes carg-onda{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes carg-cuadro{0%,70%,100%{transform:scale(1); opacity:1}35%{transform:scale(.55); opacity:.45}}
@keyframes carg-ladrillo{0%{opacity:0; transform:translateY(-60%)}12%{opacity:1; transform:none}78%{opacity:1; transform:none}92%,100%{opacity:0; transform:none}}
@keyframes carg-cinta{to{transform:translateX(-50%)}}
@keyframes carg-late{0%,100%{transform:scale(.88)}45%{transform:scale(1.06)}60%{transform:scale(.98)}}
@keyframes carg-rebota{0%,100%{transform:translateY(0)}50%{transform:translateY(-22%)}}
@keyframes carg-flota{0%,100%{transform:translateY(4%) rotate(-4deg)}50%{transform:translateY(-6%) rotate(4deg)}}
@keyframes carg-voltea{0%{transform:perspective(400px) rotateY(0)}50%{transform:perspective(400px) rotateY(180deg)}100%{transform:perspective(400px) rotateY(360deg)}}

/* Quien pidió reducir movimiento: el mismo cargador, más lento y sin el salto de entrada */
@media (prefers-reduced-motion:reduce){
  .carg.carg{--carg-dur:2.6s}
  .carg__caja{transition:none; transform:none}
}