/* ============================================================
   ESTILOS — Figuritas Pro
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg:#0c1018; --bg2:#141b29; --bg3:#1b2436;
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.18);
  --txt:#eef1f7; --muted:#8b93a7;
  --have:#41c98a;
  --repe:#f0a83a;
  --bad:#e05656;
  --purple-1:#9b93f0; --purple-2:#5b50c4;
  --bronze-1:#e0a368; --bronze-2:#9c5e23;
  --silver-1:#eef1f6; --silver-2:#aab2c2;
  --gold-1:#f4d56b;   --gold-2:#c8951e;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:radial-gradient(900px 440px at 50% -12%, #1a2336 0%, transparent 60%), var(--bg);
  color:var(--txt); padding:24px 18px 40px; -webkit-tap-highlight-color:transparent;
}
.sheet{max-width:820px;margin:0 auto}

/* ---- cabecera ---- */
header.top{border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:18px}
.head-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.auth{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.auth .login{font-family:'Oswald',sans-serif;letter-spacing:.06em;text-transform:uppercase;font-size:11px;
  color:#0c1018;background:var(--txt);border:1px solid var(--txt);
  padding:7px 13px;border-radius:999px;cursor:pointer;transition:.15s}
.auth .login:hover{opacity:.9}
.auth .login.ghost{background:none;color:var(--muted);border-color:var(--line)}
.auth .login.ghost:hover{color:var(--txt);border-color:var(--txt);opacity:1}
.auth .user{font-size:12px;color:var(--muted);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ttl{font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;line-height:.95;font-size:30px}
.ttl small{display:block;font-size:11px;font-weight:500;letter-spacing:.22em;color:var(--muted);margin-top:5px}

/* ---- stats ---- */
.stats{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.stat{background:var(--bg2);border:1px solid var(--line);border-radius:12px;
  padding:10px 14px;display:flex;align-items:baseline;gap:8px;flex:1;min-width:140px}
.stat .num{font-family:'Oswald',sans-serif;font-weight:700;font-size:26px;line-height:1}
.stat .lab{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.stat.have .num{color:var(--have)}
.stat.repe .num{color:var(--repe)}
.stat.bad  .num{color:var(--bad)}

/* ---- progreso ---- */
.progress{margin-top:12px}
.progress .row{display:flex;justify-content:flex-end;margin-bottom:7px}
.progress .pct{font-family:'Oswald',sans-serif;color:var(--muted);font-size:13px;letter-spacing:.06em}
.bar{height:8px;border-radius:999px;background:var(--bg3);overflow:hidden}
.bar > i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--have),#7fe3b4);transition:width .35s ease}

/* ---- controles ---- */
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:18px 0 22px}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters button{
  font-family:'Oswald',sans-serif;letter-spacing:.08em;text-transform:uppercase;font-size:12px;
  color:var(--muted);background:var(--bg2);border:1px solid var(--line);
  padding:7px 13px;border-radius:999px;cursor:pointer;transition:.15s}
.filters button:hover{border-color:var(--line2);color:var(--txt)}
.filters button.active{background:var(--txt);color:#0c1018;border-color:var(--txt)}
.filters button .n{opacity:.6;margin-left:5px}
.reset{font-family:'Oswald',sans-serif;letter-spacing:.08em;text-transform:uppercase;
  font-size:11px;color:var(--muted);background:none;border:1px solid var(--line);
  padding:7px 12px;border-radius:999px;cursor:pointer;transition:.15s}
.reset:hover{border-color:var(--bad);color:#e98a8a}

/* ---- menú desplegable de import / export ---- */
.io-menu{position:relative;margin-left:auto}
.io-menu > summary{
  list-style:none;cursor:pointer;user-select:none;
  font-family:'Oswald',sans-serif;letter-spacing:.08em;text-transform:uppercase;font-size:11px;
  color:var(--muted);background:var(--bg2);border:1px solid var(--line);
  padding:7px 14px;border-radius:999px;transition:.15s}
.io-menu > summary::-webkit-details-marker{display:none}
.io-menu > summary::after{content:"▾";margin-left:7px;font-size:10px;opacity:.7}
.io-menu[open] > summary,.io-menu > summary:hover{border-color:var(--line2);color:var(--txt)}
.io-menu[open] > summary::after{content:"▴"}
.io-menu-panel{
  position:absolute;right:0;top:calc(100% + 6px);z-index:5;min-width:180px;
  display:flex;flex-direction:column;gap:2px;padding:6px;
  background:var(--bg2);border:1px solid var(--line2);border-radius:12px;
  box-shadow:0 12px 30px rgba(6,9,15,.55)}
.io-menu-panel button{
  text-align:left;font-family:'Oswald',sans-serif;letter-spacing:.06em;text-transform:uppercase;font-size:12px;
  color:var(--txt);background:none;border:0;border-radius:8px;padding:9px 11px;cursor:pointer;transition:.12s}
.io-menu-panel button:hover{background:var(--bg3)}

/* ---- secciones por rareza ---- */
.tier{margin-bottom:18px}
.tier-head{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.tier-head h2{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.1em;font-weight:600;font-size:14px}
.tier-head .st{letter-spacing:2px;font-size:12px}
.tier-head .rule{flex:1;height:1px;background:var(--line)}
.tier-head .ct{font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.08em;color:var(--muted)}
.tier.empty{display:none}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:9px}

/* ---- tarjeta / cromo (ESTILO POR DEFECTO, no cambia con el estado) ---- */
.chip{
  position:relative;overflow:hidden;border-radius:11px;
  background:var(--bg2);border:1px solid var(--line);
  padding:9px 11px;display:flex;flex-direction:column;gap:5px;
  transition:box-shadow .15s ease;
}
.chip .foil{position:absolute;inset:0;opacity:.13;pointer-events:none;
  background:linear-gradient(135deg,var(--m1),var(--m2) 50%,var(--m1))}
.chip .edge{position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--m1),var(--m2))}
.chip .r1{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}
.chip .co{font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.1em;font-size:11px;
  display:flex;align-items:center;gap:6px;color:var(--muted)}
.chip .co .fl{font-size:14px}
.chip .pl{font-family:'Oswald',sans-serif;font-weight:500;font-size:15px;line-height:1.06;position:relative;z-index:1}

/* estrella = indicador de "la tengo" */
.chip .star{letter-spacing:1px;font-size:13px;transition:color .15s}
.chip .star.on{color:var(--m1)}
.chip .star.off{color:var(--muted);opacity:.5}

/* badge de mal estado (esquina, marca independiente) */
.chip .bad-badge{position:absolute;top:8px;left:13px;z-index:2;display:none;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:9px;letter-spacing:.1em;
  padding:2px 7px;border-radius:999px;background:var(--bad);color:#fff}
.chip.bad .bad-badge{display:inline-block}
.chip.bad{box-shadow:inset 0 0 0 1.6px rgba(224,86,86,.55)}

/* fila de controles */
.qty{display:flex;align-items:center;gap:7px;position:relative;z-index:1;margin-top:2px}
.qty button{width:24px;height:24px;border-radius:7px;border:1px solid var(--line2);
  background:var(--bg3);color:var(--txt);font-size:16px;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:.12s;font-family:'Oswald',sans-serif;flex-shrink:0}
.qty button:hover{border-color:var(--txt)}
.qty button:disabled{opacity:.3;cursor:default}
/* contador: solo visible cuando hay mas de una */
.qty .cnt{font-family:'Oswald',sans-serif;font-weight:700;font-size:14px;color:var(--repe);min-width:24px}
.qty .cond{margin-left:auto;font-size:12px;color:var(--muted)}
.qty .cond.on{background:var(--bad);border-color:var(--bad);color:#fff}

.tier-purple{--m1:var(--purple-1);--m2:var(--purple-2)}
.tier-bronze{--m1:var(--bronze-1);--m2:var(--bronze-2)}
.tier-silver{--m1:var(--silver-1);--m2:var(--silver-2)}
.tier-gold{--m1:var(--gold-1);--m2:var(--gold-2)}

footer{text-align:center;color:var(--muted);font-size:11px;margin-top:22px;line-height:1.6}

/* ---- diálogo import / export lista de texto ---- */
dialog#ioDialog{
  /* el reset global *{margin:0} anula el margin:auto del UA, así que centramos a mano */
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;
  width:min(560px,92vw);max-height:85vh;overflow:auto;
  border:1px solid var(--line2);border-radius:14px;
  background:var(--bg2);color:var(--txt);padding:0;
}
dialog#ioDialog::backdrop{background:rgba(6,9,15,.6)}

/* ---- diálogo genérico de confirmación / aviso ---- */
dialog#askDialog{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;
  width:min(420px,92vw);max-height:85vh;overflow:auto;
  border:1px solid var(--line2);border-radius:14px;
  background:var(--bg2);color:var(--txt);padding:0;
}
dialog#askDialog::backdrop{background:rgba(6,9,15,.65)}
.ask{display:flex;flex-direction:column;gap:12px;padding:22px}
.ask h3{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.04em;font-size:17px}
.ask h3[hidden]{display:none}
.ask p{font-size:13.5px;line-height:1.6;color:var(--muted);white-space:pre-line}
.ask-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.ask-actions button{font-family:'Oswald',sans-serif;letter-spacing:.06em;text-transform:uppercase;
  font-size:12px;padding:9px 16px;border-radius:999px;cursor:pointer;border:1px solid var(--line2);transition:.15s}
dialog#askDialog.danger .io-primary{background:var(--bad);border-color:var(--bad);color:#fff}

/* ---- diálogo de bienvenida ---- */
dialog#welcomeDialog{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;
  width:min(460px,92vw);max-height:85vh;overflow:auto;
  border:1px solid var(--line2);border-radius:16px;
  background:var(--bg2);color:var(--txt);padding:0;
}
dialog#welcomeDialog::backdrop{background:rgba(6,9,15,.7)}
.welcome{display:flex;flex-direction:column;gap:12px;padding:24px}
.welcome h2{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.03em;font-size:22px;line-height:1.1}
.welcome p{font-size:13.5px;line-height:1.6;color:var(--muted)}
.welcome p b{color:var(--txt);font-weight:600}
.welcome-actions{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.welcome-actions button{width:100%;font-family:'Oswald',sans-serif;letter-spacing:.06em;
  text-transform:uppercase;font-size:13px;padding:12px 16px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line2);transition:.15s}
.welcome-foot{font-size:11.5px;color:var(--muted);margin-top:2px}
.io-form{display:flex;flex-direction:column;gap:12px;padding:18px}
.io-form h3{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.08em;font-size:16px}
.io-hint{font-size:12px;color:var(--muted);line-height:1.5}
.io-qr{background:#fff;border-radius:10px;padding:12px;align-self:center}
.io-qr svg{display:block;width:220px;height:220px;max-width:60vw}
#ioText{
  width:100%;min-height:240px;resize:vertical;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.5;
  color:var(--txt);background:var(--bg3);border:1px solid var(--line);border-radius:10px;padding:10px 12px;
}
dialog#ioDialog.compact #ioText{min-height:64px}
.io-actions{display:flex;justify-content:flex-end;gap:8px}
.io-actions button{
  font-family:'Oswald',sans-serif;letter-spacing:.08em;text-transform:uppercase;font-size:12px;
  padding:8px 16px;border-radius:999px;cursor:pointer;transition:.15s;border:1px solid var(--line2)}
.io-ghost{background:none;color:var(--muted)}
.io-ghost:hover{color:var(--txt);border-color:var(--txt)}
.io-primary{background:var(--txt);color:#0c1018;border-color:var(--txt)}
.io-primary:hover{opacity:.9}