/* ── Upload ── */
#upload-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 64px);padding:2rem;gap:2rem}
.upload-hero{text-align:center;max-width:480px}
.upload-hero h2{font-size:1.6rem;font-weight:800;color:var(--core-text);margin-bottom:.5rem}
.upload-hero p{color:var(--core-text-muted);font-size:.95rem}
.drop-zone{border:2px dashed var(--core-border);border-radius:var(--core-radius-xl);padding:3.5rem 2.5rem;text-align:center;cursor:pointer;transition:all .2s;background:var(--core-surface);width:100%;max-width:480px;box-shadow:var(--core-shadow-sm)}
.drop-zone:hover,.drop-zone.dragover{border-color:var(--core-teal);background:#f0faf8;transform:translateY(-2px);box-shadow:var(--core-shadow-md)}
.dz-icon{font-size:3rem;margin-bottom:1rem;display:block}
.drop-zone h3{font-size:1.1rem;font-weight:700;color:var(--core-text);margin-bottom:.4rem}
.drop-zone p{color:var(--core-text-muted);font-size:.85rem;margin-bottom:1.5rem}
.btn-primary{background:var(--core-primary);color:#fff;border:none;padding:.75rem 2rem;border-radius:var(--core-radius-md);font-size:.95rem;cursor:pointer;font-weight:700;font-family:var(--core-font-sans);transition:all .2s;display:inline-block;box-shadow:0 4px 14px rgba(0,64,74,.25)}
.btn-primary:hover{background:var(--core-primary-dark);transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,64,74,.35)}
.upload-note{font-size:.75rem;color:var(--core-text-muted);margin-top:.75rem}
/* ── Separador y zona de resultado pre-computado ── */
.upload-divider{display:flex;align-items:center;gap:1rem;width:100%;max-width:480px;color:var(--core-text-muted);font-size:.8rem;font-weight:600}
.upload-divider::before,.upload-divider::after{content:'';flex:1;height:1px;background:var(--core-border)}
.precomp-zone{display:flex;align-items:center;gap:.9rem;background:var(--core-surface);border:1px solid var(--core-border);border-radius:var(--core-radius-md);padding:.85rem 1.25rem;max-width:480px;width:100%;box-shadow:var(--core-shadow-sm);transition:border-color .15s}
.precomp-zone:hover{border-color:rgba(99,102,241,.4)}
.precomp-icon{font-size:1.3rem;flex-shrink:0}
.precomp-text{flex:1;min-width:0}
.precomp-title{font-size:.82rem;font-weight:700;color:var(--core-text)}
.precomp-desc{font-size:.72rem;color:var(--core-text-muted);margin-top:.1rem}
.precomp-label{cursor:pointer;background:rgba(99,102,241,.12);color:#818cf8;border:1px solid rgba(99,102,241,.3);padding:.4rem .9rem;border-radius:var(--core-radius-sm);font-size:.8rem;font-weight:700;font-family:var(--core-font-sans);white-space:nowrap;transition:all .15s;flex-shrink:0}
.precomp-label:hover{background:rgba(99,102,241,.22)}

/* ── Loading ── */
#loading-screen{display:none;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 64px);gap:1.5rem}
/* ── Spinner Core EB — 3 anillos + partículas ── */
.core-ring-wrap{
  width:72px;height:72px;position:relative;
  animation:core-pulse 3s ease-in-out infinite;
}
.core-ring-wrap::before{
  content:'';position:absolute;inset:-16px;border-radius:50%;
  background:conic-gradient(
    from 200deg,
    transparent 22%,
    rgba(0,169,153,.18) 44%,
    rgba(0,210,190,.32) 55%,
    rgba(226,233,50,.48) 65%,
    rgba(0,169,153,.12) 77%,
    transparent 88%
  );
  filter:blur(15px);
  animation:core-spin 2.2s linear infinite;
}
.cr{position:absolute;border-radius:50%;animation:core-spin 2.2s linear infinite;}

/* EXTERIOR: teal, 10px, blur suave — centro desplazado 0.5% */
.cr-o{
  inset:0;
  transform-origin:50.5% 49.5%;
  animation:core-spin 3.8s linear infinite;
  border-radius:52% 48% 50% 50% / 48% 50% 53% 47%;
  background:conic-gradient(
    from 185deg,
    rgba(0,10,12,0)     0%,
    rgba(0,48,58,.45)  13%,
    rgba(0,130,118,.8) 31%,
    rgba(0,195,175,1)  47%,
    rgba(0,210,185,.85)53%,
    rgba(0,169,153,.55)65%,
    rgba(0,75,70,.35)  80%,
    rgba(0,10,12,0)   100%
  );
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7.5px),#fff calc(100% - 6.5px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 7.5px),#fff calc(100% - 6.5px));
  filter:blur(1.8px);
}
/* PRINCIPAL: gradiente completo, 9px, nítido — centro desplazado 0.5% */
.cr-m{
  inset:3px;
  transform-origin:49.5% 50.5%;
  animation:core-spin 2.2s linear infinite;
  border-radius:48% 52% 51% 49% / 52% 47% 49% 52%;
  background:conic-gradient(
    from 200deg,
    #010D10  0%,
    #001A1F  8%,
    #003540 16%,
    #005C5A 28%,
    #00A999 46%,
    #A8C000 59%,
    #E2E932 65%,
    #B4CC00 70%,
    #00A999 78%,
    #005560 88%,
    #002830 94%,
    #010D10 100%
  );
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6.5px),#fff calc(100% - 5.5px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 6.5px),#fff calc(100% - 5.5px));
  filter:drop-shadow(0 0 6px rgba(226,233,50,.65)) drop-shadow(0 0 3px rgba(0,169,153,.5));
}
/* INTERIOR: lime, desfasado +20deg, 8px, difuso — centro desplazado 0.5% */
.cr-i{
  inset:6px;
  transform-origin:50.3% 49.7%;
  animation:core-spin 1.5s linear infinite;
  border-radius:50% 50% 47% 53% / 53% 49% 51% 47%;
  background:conic-gradient(
    from 220deg,
    rgba(0,10,12,0)      0%,
    rgba(0,48,58,.35)   22%,
    rgba(0,120,110,.55) 40%,
    rgba(120,185,0,.72) 57%,
    rgba(215,228,28,.95)65%,
    rgba(180,212,0,.65) 73%,
    rgba(0,120,100,.35) 82%,
    rgba(0,10,12,0)    100%
  );
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5.5px),#fff calc(100% - 4.5px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 5.5px),#fff calc(100% - 4.5px));
  filter:blur(1.2px);
}

/* CONTRA-GIRO: teal-lime tenue, 3px, sentido contrario — centro desplazado 0.5% */
.cr-x{
  inset:8px;
  transform-origin:49.6% 50.4%;
  animation:core-spin 2.9s linear infinite reverse;
  border-radius:51% 49% 48% 52% / 48% 52% 50% 50%;
  background:conic-gradient(
    from 240deg,
    rgba(0,10,12,0)      0%,
    rgba(0,80,74,.3)    28%,
    rgba(0,169,153,.7)  50%,
    rgba(170,192,0,.55) 62%,
    rgba(226,233,50,.8) 67%,
    rgba(0,130,110,.3)  78%,
    rgba(0,10,12,0)    100%
  );
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4.5px),#fff calc(100% - 3.5px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 4.5px),#fff calc(100% - 3.5px));
  filter:blur(0.8px);
}
/* ── Partículas ── */
/* cr-pts rota con los anillos */
.cr-pts{position:absolute;inset:0;animation:core-spin 2.2s linear infinite;pointer-events:none;}
/* .pa = brazo: elemento sin tamaño, posiciona el punto en el borde del anillo.
   Usa var(--a) y var(--r) solo en transform ESTÁTICO (no en keyframes).
   El brazo establece un marco de coordenadas rotado → su hijo .pd
   siempre se mueve radialmente hacia afuera con un simple translateY. */
.pa{position:absolute;width:0;height:0;top:50%;left:50%;
    transform:rotate(var(--a)) translateY(calc(-1*var(--r)));}
/* .pd = punto visible: animación pura sin custom properties */
.pd{position:absolute;border-radius:50%;top:-1px;left:-1px;}
.pb1{animation:pb1 1.0s ease-out infinite;}
.pb2{animation:pb2 1.7s ease-out infinite;}
.pb3{animation:pb3 2.6s ease-out infinite;}
@keyframes pb1{
  0%  {transform:translateY(0);    opacity:1  }
  10% {transform:translateY(-11px);opacity:.85}
  35% {transform:translateY(-27px);opacity:.3 }
  70% {transform:translateY(-41px);opacity:.06}
  100%{transform:translateY(-50px);opacity:0  }
}
@keyframes pb2{
  0%  {transform:translateY(0);    opacity:.9 }
  15% {transform:translateY(-8px); opacity:.7 }
  45% {transform:translateY(-21px);opacity:.3 }
  100%{transform:translateY(-33px);opacity:0  }
}
@keyframes pb3{
  0%  {transform:translateY(0);    opacity:.85}
  20% {transform:translateY(-7px); opacity:.6 }
  55% {transform:translateY(-16px);opacity:.2 }
  100%{transform:translateY(-24px);opacity:0  }
}
@keyframes core-spin{to{transform:rotate(360deg)}}
@keyframes core-pulse{
  0%,100%{transform:scale(1);   opacity:1  }
  50%    {transform:scale(1.07);opacity:.91}
}
.loading-msg{color:var(--core-text-muted);font-size:.95rem;font-weight:600}
.loading-steps{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem}
.loading-step{font-size:.8rem;color:var(--core-text-muted);display:flex;align-items:center;gap:.5rem}
.loading-step.active{color:var(--core-teal);font-weight:700}
.loading-step.done{color:var(--core-teal)}