/* Velo de carga v2 - nuevo diseño (interno y portal) */
#velo-carga {
  position: fixed; inset: 0; z-index: 2147483647;
  display: flex; align-items: center; justify-content: center;
  visibility: hidden; opacity: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(900px 520px at 50% -5%, rgba(18,134,138,.12), transparent 70%),
    radial-gradient(760px 460px at 50% 105%, rgba(52,211,153,.10), transparent 70%),
    #f3f6f8;
  transition: opacity .4s ease, visibility 0s linear .4s;
}
#velo-carga::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(rgba(18,134,138,.20) 1px, transparent 1.4px) 0 0 / 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0, transparent 68%);
  mask-image: radial-gradient(ellipse at center, #000 0, transparent 68%);
}
html.cargando #velo-carga { visibility: visible; opacity: 1; pointer-events: auto; transition: none; }
html.cargando.cargando-fin #velo-carga { opacity: 0; pointer-events: none; transition: opacity .4s ease; }

#velo-carga .vc-top { position: absolute; left: 0; top: 0; width: 100%; height: 3px; overflow: hidden; background: rgba(18,134,138,.10); }
#velo-carga .vc-top::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -35%; width: 35%;
  background: linear-gradient(90deg, transparent, #34d399, #12868a, transparent);
  animation: vc-barra 1.4s ease-in-out infinite;
}
#velo-carga .vc-centro {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px;
  animation: vc-sube .55s cubic-bezier(.2,.8,.2,1) both;
}
#velo-carga .vc-anillo { position: relative; width: 112px; height: 112px; }
#velo-carga .vc-anillo::before {
  content: ""; position: absolute; inset: 14px; border-radius: 50%; background: #fff;
  box-shadow: 0 10px 28px rgba(16,40,52,.14), 0 0 0 1px rgba(18,134,138,.08);
}
#velo-carga .vc-anillo svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: vc-gira 1.15s linear infinite; }
#velo-carga .vc-pista { fill: none; stroke: rgba(18,134,138,.14); stroke-width: 3; }
#velo-carga .vc-arco { fill: none; stroke: url(#vcg); stroke-width: 3.6; stroke-linecap: round; stroke-dasharray: 84 193; }
#velo-carga .vc-icono {
  position: absolute; inset: 26px; background: url(../img/innovaligners_logo.png) left center / auto 100% no-repeat;
  animation: vc-latido 1.8s ease-in-out infinite;
}
#velo-carga .vc-marca {
  width: 190px; height: 52px; margin-top: 4px;
  background: url(../img/innovaligners_logo.png) 100% 50% / 243px auto no-repeat;
}
#velo-carga .vc-texto {
  font: 600 .72rem/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: .24em; text-transform: uppercase; color: #5b7480; padding-left: .24em;
}
#velo-carga .vc-texto i { font-style: normal; animation: vc-punto 1.2s ease-in-out infinite; opacity: .25; }
#velo-carga .vc-texto i:nth-child(2) { animation-delay: .2s; }
#velo-carga .vc-texto i:nth-child(3) { animation-delay: .4s; }

html[data-theme="dark"] #velo-carga {
  background:
    radial-gradient(900px 520px at 50% -5%, rgba(47,183,187,.16), transparent 70%),
    radial-gradient(760px 460px at 50% 105%, rgba(52,211,153,.10), transparent 70%),
    #0e161b;
}
html[data-theme="dark"] #velo-carga::before { background-image: radial-gradient(rgba(47,183,187,.26) 1px, transparent 1.4px); }
html[data-theme="dark"] #velo-carga .vc-anillo::before { background: #16232b; box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(47,183,187,.18); }
html[data-theme="dark"] #velo-carga .vc-pista { stroke: rgba(47,183,187,.20); }
html[data-theme="dark"] #velo-carga .vc-texto { color: #8fa6b2; }

@keyframes vc-gira { to { transform: rotate(360deg); } }
@keyframes vc-latido { 0%,100% { transform: scale(.95); } 50% { transform: scale(1.05); } }
@keyframes vc-barra { 0% { left: -35%; } 100% { left: 100%; } }
@keyframes vc-punto { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes vc-sube { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  #velo-carga .vc-icono, #velo-carga .vc-texto i, #velo-carga .vc-top::after, #velo-carga .vc-centro { animation: none; }
  #velo-carga .vc-texto i { opacity: .7; }
  #velo-carga .vc-anillo svg { animation-duration: 3s; }
}
@media print { #velo-carga { display: none !important; } }