/* ── 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: 500;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:color-mix(in srgb, var(--core-teal) 6%, var(--core-surface));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: 500;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:var(--core-on-primary,#fff);border:none;padding:.75rem 2rem;border-radius:var(--core-radius-md);font-size:.95rem;cursor:pointer;font-weight: 500;font-family:var(--core-font-sans);transition:all .2s;display:inline-block;box-shadow:0 4px 14px color-mix(in srgb, var(--core-primary) 25%, transparent)}
.btn-primary:hover{background:var(--core-primary-dark);transform:translateY(-1px);box-shadow:0 6px 18px color-mix(in srgb, var(--core-primary) 35%, transparent)}
.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: 500}
.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: 500;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: 500;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 ──
   Tintes derivados del tema (accent=--core-teal, --core-lime, --core-primary)
   vía color-mix; con el tema de fábrica reproducen los tonos originales. */
.core-ring-wrap{
  width:72px;height:72px;position:relative;
  animation:core-pulse 3s ease-in-out infinite;
  --sp-teal:var(--core-teal);
  --sp-lime:var(--core-lime);
  --sp-teal-bright:color-mix(in srgb, var(--core-teal) 80%, white);
  --sp-teal-deep:color-mix(in srgb, var(--core-teal) 55%, black);
  --sp-mix:color-mix(in srgb, var(--core-lime) 65%, var(--core-teal));
  --sp-dark:color-mix(in srgb, var(--core-primary) 80%, black);
}
.core-ring-wrap::before{
  content:'';position:absolute;inset:-16px;border-radius:50%;
  background:conic-gradient(
    from 200deg,
    transparent 22%,
    color-mix(in srgb, var(--sp-teal) 18%, transparent) 44%,
    color-mix(in srgb, var(--sp-teal-bright) 32%, transparent) 55%,
    color-mix(in srgb, var(--sp-lime) 48%, transparent) 65%,
    color-mix(in srgb, var(--sp-teal) 12%, transparent) 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,
    transparent 0%,
    color-mix(in srgb, var(--core-primary) 45%, transparent) 13%,
    color-mix(in srgb, var(--sp-teal) 80%, transparent) 31%,
    var(--sp-teal-bright) 47%,
    color-mix(in srgb, var(--sp-teal-bright) 85%, transparent) 53%,
    color-mix(in srgb, var(--sp-teal) 55%, transparent) 65%,
    color-mix(in srgb, var(--sp-teal-deep) 35%, transparent) 80%,
    transparent 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,
    color-mix(in srgb, var(--sp-dark) 12%, black)  0%,
    color-mix(in srgb, var(--sp-dark) 40%, black)  8%,
    color-mix(in srgb, var(--core-primary) 84%, black) 16%,
    var(--sp-teal-deep) 28%,
    var(--sp-teal) 46%,
    color-mix(in srgb, var(--sp-mix) 80%, black) 59%,
    var(--sp-lime) 65%,
    color-mix(in srgb, var(--sp-mix) 90%, black) 70%,
    var(--sp-teal) 78%,
    color-mix(in srgb, var(--core-primary) 90%, black) 88%,
    color-mix(in srgb, var(--sp-dark) 50%, black) 94%,
    color-mix(in srgb, var(--sp-dark) 12%, black) 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 color-mix(in srgb, var(--sp-lime) 65%, transparent)) drop-shadow(0 0 3px color-mix(in srgb, var(--sp-teal) 50%, transparent));
}
/* 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,
    transparent 0%,
    color-mix(in srgb, var(--core-primary) 35%, transparent) 22%,
    color-mix(in srgb, var(--sp-teal) 55%, transparent) 40%,
    color-mix(in srgb, color-mix(in srgb, var(--sp-mix) 80%, black) 72%, transparent) 57%,
    color-mix(in srgb, var(--sp-lime) 95%, transparent) 65%,
    color-mix(in srgb, var(--sp-mix) 65%, transparent) 73%,
    color-mix(in srgb, var(--sp-teal-deep) 35%, transparent) 82%,
    transparent 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,
    transparent 0%,
    color-mix(in srgb, var(--sp-teal-deep) 30%, transparent) 28%,
    color-mix(in srgb, var(--sp-teal) 70%, transparent) 50%,
    color-mix(in srgb, var(--sp-mix) 55%, transparent) 62%,
    color-mix(in srgb, var(--sp-lime) 80%, transparent) 67%,
    color-mix(in srgb, var(--sp-teal-deep) 30%, transparent) 78%,
    transparent 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: 500}
.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-accent-text);font-weight: 500}
.loading-step.done{color:var(--core-accent-text)}

/* ── Cargador estándar (componente ProgressLoader) ─────────────────────────
   Base: spinner + etiqueta centrados y nítidos.
   Variante `overlay`: flota sobre el contenido (sin empujarlo) con velo +
   desenfoque y tarjeta elevada, para leerse claramente AL FRENTE.
   La variante overlay requiere que el contenedor host tenga position:relative. */
.rep-loading{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:28px 16px;text-align:center;
}
.rep-loading .od-muted{color:var(--core-text-secondary)}

.rep-loading-veil{
  position:absolute;inset:0;z-index:30;
  display:flex;align-items:flex-start;justify-content:center;
  padding-top:9vh;pointer-events:none;
  background:color-mix(in srgb, var(--core-surface) 60%, transparent);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.rep-loading-veil .rep-loading{
  background:var(--core-surface);
  border:1px solid var(--core-border);
  border-radius:var(--core-radius-lg, 16px);
  box-shadow:var(--core-shadow-lg);
  padding:20px 30px 18px;
}