/* Tokens de color/tipografía en assets/design-tokens.css.
   Estos alias solo traducen los nombres locales usados en este
   archivo a los tokens compartidos; no declaran valores nuevos. */
:root{
  --bg: var(--void);
  --panel: var(--panel);
  --panel-2: var(--void-2);
  --border: var(--panel-border);
  --border-soft: color-mix(in srgb, var(--panel-border) 65%, var(--void));
  --text: var(--ink);
  --accent: var(--uncommon);           /* tier asignado en el home: UNCOMMON */
  --accent-dim: color-mix(in srgb, var(--uncommon) 16%, var(--void));
  --keep: var(--success);
  --keep-dim: color-mix(in srgb, var(--success) 16%, var(--void));
  --reject: var(--danger);
  --reject-dim: color-mix(in srgb, var(--danger) 16%, var(--void));
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family: var(--font-body);
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}
.bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 20%, black 40%, transparent 90%);
}
.topbar{
  position:relative; z-index:1;
  text-align:center;
  padding:38px 20px 18px;
}
.kicker{
  font-family: var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--holo-b);
  margin-bottom:10px;
}
.brand-name{
  font-family: var(--font-display);
  font-weight:700;
  font-size:clamp(28px,5vw,44px);
  letter-spacing:.03em;
  margin:0;
}
.brand-accent{color:var(--accent);}
.brand-sub{
  color:var(--muted);
  font-size:14.5px;
  margin-top:8px;
}
.stage{
  position:relative; z-index:1;
  max-width:520px;
  margin:0 auto;
  padding:10px 18px 60px;
}

/* ---------- Upload dropzone ---------- */
.dropzone{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  border:1.5px dashed var(--border);
  border-radius: var(--radius-md);
  background:var(--panel);
  padding:52px 24px;
  text-align:center;
  cursor:pointer;
  transition:border-color var(--transition-fast), background var(--transition-fast);
}
.dropzone:hover, .dropzone.drag-over{
  border-color:var(--accent);
  background:var(--panel-2);
}
.dropzone svg{width:40px;height:40px;color:var(--accent);margin-bottom:14px;}
.dropzone-title{
  font-family: var(--font-display);
  font-weight:600;
  font-size:18px;
  margin-bottom:6px;
}
.dropzone-sub{color:var(--muted);font-size:13px;line-height:1.5;}
.dropzone input{display:none;}
.upload-actions{
  display:flex; gap:10px; justify-content:center; margin-top:18px; flex-wrap:wrap;
}
.ghost-btn{
  font-family: var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--text);
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:9px 14px;
  cursor:pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.ghost-btn:hover{border-color:var(--accent);color:var(--accent);}

/* ---------- Corner brackets (shared motif) ---------- */
.corners{position:absolute;inset:0;pointer-events:none;}
.corners::before,.corners::after{
  content:"";
  position:absolute;
  width:14px;height:14px;
  border:2px solid var(--border);
}
.corners::before{top:-1px;left:-1px;border-right:none;border-bottom:none;}
.corners::after{bottom:-1px;right:-1px;border-left:none;border-top:none;}

/* ---------- Stats row ---------- */
.stats-row{
  display:flex; justify-content:space-between; align-items:center;
  font-family: var(--font-mono);
  font-size:12px; letter-spacing:.04em;
  color:var(--muted);
  margin-bottom:16px;
}
.stats-row .count-keep{color:var(--keep);}
.stats-row .count-reject{color:var(--reject);}
.progress-track{
  height:4px; background:var(--border-soft); border-radius:2px; overflow:hidden; margin:10px 0 20px;
}
.progress-fill{height:100%; background:var(--accent); width:0%; transition:width var(--transition-med);}

/* ---------- Card stack ---------- */
.card-stack{
  position:relative;
  height:360px;
  margin-bottom:22px;
}
.card{
  position:absolute; inset:0;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:22px;
  display:flex; flex-direction:column;
  touch-action:none;
  user-select:none;
  cursor:grab;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s ease, box-shadow var(--transition-fast);
  box-shadow: var(--shadow-lg);
}
.card.behind{
  transform:scale(.94) translateY(10px);
  z-index:0;
  opacity:.5;
}
.card.top{z-index:2;}
.card.dragging{transition:none; cursor:grabbing;}
.card-tag{
  font-family: var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--accent);
  margin-bottom:10px;
}
.card-icon{
  width:64px;height:64px;
  margin:8px auto 18px;
  border-radius:50%;
  background:var(--panel-2);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent);
  position:relative;
}
.card-icon svg{width:28px;height:28px;}
.card-icon.playing{border-color:var(--accent);}
.pulse-ring{
  position:absolute; inset:-6px;
  border-radius:50%;
  border:1px solid var(--accent);
  opacity:0;
}
.card-icon.playing .pulse-ring{animation:pulse 1.4s ease-out infinite;}
@keyframes pulse{
  0%{opacity:.6; transform:scale(.9);}
  100%{opacity:0; transform:scale(1.35);}
}
.name-field{
  font-family: var(--font-display);
  font-weight:600;
  font-size:19px;
  text-align:center;
  background:transparent;
  border:none;
  border-bottom:1px solid transparent;
  color:var(--text);
  width:100%;
  padding:4px 2px 8px;
  outline:none;
  transition: border-color var(--transition-fast);
}
.name-field:focus{border-bottom-color:var(--accent);}
.name-ext{
  text-align:center;
  color:var(--muted);
  font-family: var(--font-mono);
  font-size:11px;
  margin-top:2px;
}
.card-meta{
  margin-top:auto;
  display:flex; justify-content:space-between;
  font-family: var(--font-mono);
  font-size:11px;
  color:var(--muted);
}
.stamp{
  position:absolute; top:26px;
  font-family: var(--font-display);
  font-weight:700;
  font-size:22px;
  letter-spacing:.06em;
  padding:6px 14px;
  border-radius: var(--radius-sm);
  border:3px solid;
  opacity:0;
  transform:rotate(-18deg);
}
.stamp.keep{right:20px; color:var(--keep); border-color:var(--keep);}
.stamp.reject{left:20px; color:var(--reject); border-color:var(--reject); transform:rotate(18deg);}

.empty-state{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:8px; padding:20px;
}
.empty-state svg{width:36px;height:36px;color:var(--keep);margin-bottom:6px;}
.empty-title{font-family: var(--font-display);font-weight:600;font-size:18px;}
.empty-sub{color:var(--muted);font-size:13px;}

/* ---------- Controls ---------- */
.swipe-controls{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin-bottom:22px;
}
.round-btn{
  width:58px;height:58px;
  border-radius:50%;
  border:1.5px solid var(--border);
  background:var(--panel);
  color:var(--text);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
}
.round-btn:hover{transform:translateY(-2px);}
.round-btn svg{width:22px;height:22px;}
.round-btn.reject{color:var(--reject); border-color:var(--reject-dim);}
.round-btn.reject:hover{border-color:var(--reject); background:var(--reject-dim);}
.round-btn.keep{color:var(--keep); border-color:var(--keep-dim);}
.round-btn.keep:hover{border-color:var(--keep); background:var(--keep-dim);}
.round-btn.play{width:46px;height:46px;}
.round-btn.play:hover{border-color:var(--accent);}

.toolbelt{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius-md);
  padding:12px 16px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.toggle-pill{
  display:flex; align-items:center; gap:8px;
  font-family: var(--font-mono);
  font-size:11.5px;
  letter-spacing:.03em;
  color:var(--muted);
  cursor:pointer;
  user-select:none;
}
.switch{
  width:34px;height:19px;
  border-radius:20px;
  background:var(--border-soft);
  border:1px solid var(--border);
  position:relative;
  transition:background var(--transition-fast);
  flex-shrink:0;
}
.switch::after{
  content:"";
  position:absolute; top:2px; left:2px;
  width:13px;height:13px;
  border-radius:50%;
  background:var(--muted);
  transition:transform var(--transition-fast), background var(--transition-fast);
}
.toggle-pill.on{color:var(--accent);}
.toggle-pill.on .switch{background:var(--accent-dim); border-color:var(--accent);}
.toggle-pill.on .switch::after{transform:translateX(15px); background:var(--accent);}

.volume-wrap{display:flex; align-items:center; gap:8px; flex:1; min-width:130px;}
.volume-wrap svg{width:16px;height:16px;color:var(--muted); flex-shrink:0;}
.volume-wrap input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:3px;
  background:var(--border-soft);
  border-radius:2px; outline:none;
}
.volume-wrap input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:13px;height:13px;border-radius:50%;
  background:var(--accent); cursor:pointer;
  margin-top:0;
}
.volume-wrap input[type=range]::-moz-range-thumb{
  width:13px;height:13px;border-radius:50%;
  background:var(--accent); border:none; cursor:pointer;
}

.finish-row{display:flex; gap:10px; margin-top:6px;}
.primary-btn{
  flex:1;
  font-family: var(--font-display);
  font-weight:600;
  font-size:14px;
  letter-spacing:.03em;
  color:#0b0c0f;
  background:var(--accent);
  border:none;
  border-radius: var(--radius-sm);
  padding:13px 16px;
  cursor:pointer;
  transition:filter .12s ease, transform .12s ease;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.primary-btn:hover{filter:brightness(1.08); transform:translateY(-1px);}
.primary-btn:disabled{opacity:.5; cursor:not-allowed; transform:none; filter:none;}
.secondary-btn{
  font-family: var(--font-mono);
  font-size:12px;
  color:var(--muted);
  background:transparent;
  border:1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:13px 16px;
  cursor:pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.secondary-btn:hover{border-color:var(--accent); color:var(--accent);}

.hint{
  text-align:center;
  font-family: var(--font-mono);
  font-size:11px;
  color:var(--muted);
  margin-top:16px;
  letter-spacing:.03em;
}

.site-footer{
  position:relative; z-index:1;
  text-align:center;
  color:var(--muted);
  font-size:12px;
  padding:30px 20px 40px;
}

/* ---------- Estado de carga (spinner) para el botón de descarga ---------- */
.btn-spinner{
  width:14px;height:14px;
  border-radius:50%;
  border:2px solid rgba(11,12,15,0.35);
  border-top-color:#0b0c0f;
  animation:spin .7s linear infinite;
  flex-shrink:0;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Mensaje de estado accesible (validaciones / avisos) ---------- */
.status-msg{
  text-align:center;
  font-family: var(--font-mono);
  font-size:12px;
  letter-spacing:.03em;
  color:var(--reject);
  margin-top:10px;
  min-height:1em;
}

[hidden]{display:none !important;}

@media (prefers-reduced-motion: reduce){
  .card-icon.playing .pulse-ring{animation:none;}
  .btn-spinner{animation:none;}
}

@media (max-width:420px){
  .card-stack{height:330px;}
  .round-btn{width:52px;height:52px;}
}