/* ============================================================
   Card Hunter — PWA vanilla (Ola 2 · frontend-specialist)
   Estética heredada del demo (~/ai-card-hunter-demo-1.html),
   SIN fuentes de CDN (offline-safe): stacks de sistema.
   ============================================================ */
:root{
  --bg:#0A1420; --bg2:#0D1A28; --surface:#122636; --surface2:#173147; --surface3:#1D3B54;
  --line:#254564; --line-soft:#1B3448;
  --gold:#F5C451; --gold-deep:#C6952C; --gold-glow:rgba(245,196,81,.18);
  --red:#F0553B; --red-deep:#B7371F; --red-glow:rgba(240,85,59,.16);
  --teal:#5FD3C4; --teal-deep:#2C9C8E;
  --text:#EAF2F9; --muted:#8DA3B6; --muted2:#5F758A;
  --ok:#5FD3C4; --warn:#F5C451; --hot:#F0553B;
  --shadow:0 24px 60px -20px rgba(0,0,0,.7);
  --tab-h:66px;
  --mono: ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,monospace;
  --sans: system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0}
html{height:100%; -webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:
    radial-gradient(120% 80% at 15% -10%, #123049 0%, transparent 45%),
    radial-gradient(120% 90% at 100% 110%, #0E2136 0%, transparent 50%),
    var(--bg);
  color:var(--text);
  display:flex; align-items:center; justify-content:center;
  padding:24px; min-height:100vh; min-height:100dvh;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
  overscroll-behavior:none;
}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; -webkit-appearance:none; appearance:none}
button,.opp,.tab,[data-act]{touch-action:manipulation; -webkit-tap-highlight-color:transparent}
input,textarea{font-family:inherit; -webkit-user-select:text; user-select:text}
input[type=range]{-webkit-appearance:none; appearance:none; background:transparent}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.disp{font-family:var(--sans); font-weight:900; letter-spacing:-.02em}
a{color:inherit; text-decoration:none}

/* ---------- Device frame ---------- */
.device{
  width:min(430px,100%); height:min(900px,94vh); height:min(900px,94dvh);
  background:var(--bg2); border:1px solid #243b52; border-radius:46px;
  box-shadow:var(--shadow), inset 0 0 0 8px #05101b;
  position:relative; overflow:hidden; display:flex; flex-direction:column;
}
.notch{position:absolute; top:0; left:50%; transform:translateX(-50%); width:132px; height:26px; background:#05101b; border-radius:0 0 16px 16px; z-index:60}
.statusbar{height:42px; flex:none; display:flex; align-items:flex-end; justify-content:space-between; padding:0 26px 6px; font-size:13px; font-weight:600; z-index:50; font-family:var(--mono)}
.statusbar .sb-r{display:flex; gap:6px; align-items:center; opacity:.9}

/* ---------- Screen / views ---------- */
.screen{flex:1; position:relative; overflow:hidden}
.view{
  position:absolute; inset:0; display:none; flex-direction:column;
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain;
  padding-bottom:calc(var(--tab-h) + 16px + env(safe-area-inset-bottom)); scrollbar-width:none;
}
.view::-webkit-scrollbar{display:none}
.view.is-active{display:flex; animation:viewIn .3s ease}
.device.is-full .view.is-active{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
@keyframes viewIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* ---------- Tab bar ---------- */
.tabbar{
  position:absolute; left:0; right:0; bottom:0;
  height:calc(var(--tab-h) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom);
  background:linear-gradient(180deg, rgba(13,26,40,.6), rgba(8,17,27,.96));
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border-top:1px solid var(--line-soft); display:flex; z-index:40;
}
.device.is-full .tabbar{display:none}
.tab{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--muted2); font-size:10px; font-weight:600; letter-spacing:.02em; position:relative}
.tab svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8}
.tab.is-on{color:var(--gold)}
.tab.is-on .dot{position:absolute; top:8px; width:4px; height:4px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px var(--gold)}

/* ---------- Generic bits ---------- */
.pad{padding:0 20px}
.row{display:flex; align-items:center}
.between{justify-content:space-between}
.gap6{gap:6px}.gap8{gap:8px}.gap12{gap:12px}
.eyebrow{font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted2)}
.chip{font-size:12px; font-weight:600; padding:7px 13px; border-radius:999px; background:var(--surface); border:1px solid var(--line-soft); color:var(--muted); white-space:nowrap}
.chip.is-on{background:var(--gold); color:#1a1205; border-color:var(--gold)}
.chip-row{display:flex; gap:8px; overflow-x:auto; padding:2px 20px; scrollbar-width:none}
.chip-row::-webkit-scrollbar{display:none}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:700; font-size:15px; padding:15px 18px; border-radius:16px; width:100%; transition:transform .12s, filter .2s}
.btn:active{transform:scale(.975)}
.btn-gold{background:linear-gradient(180deg,#F8CE5C,#E7B03A); color:#1c1404; box-shadow:0 10px 26px -10px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.4)}
.btn-ghost{background:var(--surface); border:1px solid var(--line); color:var(--text)}
.btn-red{background:linear-gradient(180deg,#F0553B,#CE3D24); color:#fff}
.btn-teal{background:var(--surface); border:1px solid var(--teal-deep); color:var(--teal)}
.btn-sm{font-size:12.5px; padding:9px 11px; border-radius:11px; width:auto; gap:6px}

.tag{font-size:10.5px; font-weight:700; letter-spacing:.04em; padding:4px 8px; border-radius:7px; text-transform:uppercase}
.tag-hot{background:var(--red-glow); color:#ff7d68; border:1px solid rgba(240,85,59,.35)}
.tag-live{background:rgba(95,211,196,.12); color:var(--teal); border:1px solid rgba(95,211,196,.3)}
.tag-grade{background:rgba(245,196,81,.13); color:var(--gold); border:1px solid rgba(245,196,81,.3)}
.tag-op{background:rgba(240,85,59,.12); color:#ff8a76; border:1px solid rgba(240,85,59,.28)}
.tag-pk{background:rgba(95,211,196,.12); color:var(--teal); border:1px solid rgba(95,211,196,.28)}
/* status badges */
.st{font-size:9.5px; font-weight:800; letter-spacing:.06em; padding:3px 7px; border-radius:6px; text-transform:uppercase}
.st-new{background:var(--gold-glow); color:var(--gold); border:1px solid rgba(245,196,81,.3)}
.st-seen{background:var(--surface3); color:var(--muted); border:1px solid var(--line)}
.st-dismissed{background:rgba(240,85,59,.10); color:#ff8a76; border:1px solid rgba(240,85,59,.25)}
.st-bought{background:rgba(95,211,196,.12); color:var(--teal); border:1px solid rgba(95,211,196,.3)}

/* ---------- Card art (evocative, no copyrighted art) ---------- */
.art{position:relative; border-radius:12px; overflow:hidden; flex:none; border:1px solid rgba(255,255,255,.08); background-size:cover; background-position:center}
.art .motif{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:2.2em; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); opacity:.92}
.art .sheen{position:absolute; inset:0; background:linear-gradient(120deg,transparent 30%, rgba(255,255,255,.14) 48%, transparent 60%)}
.art.op{background:linear-gradient(150deg,#7a1220,#c0392b 55%,#e8503a)}
.art.pk{background:linear-gradient(150deg,#1b2a4a,#3d2b63 60%,#6b4ea8)}
.art.neutral{background:linear-gradient(150deg,#15324a,#2c9c8e 90%)}

/* ---------- Home header / hero ---------- */
.radar-dot{width:8px; height:8px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 0 rgba(95,211,196,.5); animation:ripple 2s infinite}
@keyframes ripple{0%{box-shadow:0 0 0 0 rgba(95,211,196,.5)}100%{box-shadow:0 0 0 12px rgba(95,211,196,0)}}
.iconbtn{width:38px; height:38px; border-radius:12px; background:var(--surface); border:1px solid var(--line-soft); display:flex; align-items:center; justify-content:center}
.iconbtn svg{width:19px; height:19px; stroke:var(--text); fill:none; stroke-width:2}
.hero{margin:6px 20px 14px; padding:18px; border-radius:22px; background:linear-gradient(135deg,#15324a,#0f2334); border:1px solid var(--line-soft); position:relative; overflow:hidden}
.hero .big{font-family:var(--sans); font-weight:900; font-size:46px; line-height:.9; color:var(--gold); letter-spacing:-.02em}
.hero .big small{font-size:15px; color:var(--muted); font-weight:600; letter-spacing:0}
.stat-row{display:flex; gap:10px; margin-top:16px}
.stat{flex:1; background:rgba(255,255,255,.03); border:1px solid var(--line-soft); border-radius:14px; padding:10px 11px}
.stat .v{font-family:var(--mono); font-weight:700; font-size:16px}
.stat .k{font-size:10px; color:var(--muted2); margin-top:2px; font-weight:600}

/* ---------- Section header ---------- */
.sec-head{display:flex; align-items:center; justify-content:space-between; padding:8px 20px 10px}
.sec-head h2{font-size:16px; font-weight:800; letter-spacing:-.01em}
.sec-head .link{font-size:12px; color:var(--gold); font-weight:600}
.refresh-tag{font-family:var(--mono); font-size:11px; color:var(--muted2); display:flex; align-items:center; gap:6px}
.refresh-tag.busy .rf-dot{width:6px; height:6px; border-radius:50%; background:var(--teal); animation:blink 1s infinite}
@keyframes blink{50%{opacity:.25}}

/* ---------- Opportunity feed card ---------- */
.opp{
  display:flex; gap:13px; padding:14px; margin:0 20px 12px; border-radius:20px;
  background:linear-gradient(180deg,var(--surface),#0f2233);
  border:1px solid var(--line-soft); position:relative; overflow:hidden; transition:transform .15s, border-color .2s;
}
.opp:active{transform:scale(.99)}
.opp.new-hl{border-color:var(--gold)}
.opp .body{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px}
.opp .name{font-weight:700; font-size:15px; line-height:1.15; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.opp .sub{font-size:11.5px; color:var(--muted); display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.price-line{display:flex; align-items:baseline; gap:9px; margin-top:1px; flex-wrap:wrap}
.price-now{font-family:var(--mono); font-weight:700; font-size:17px; color:var(--text)}
.price-mkt{font-family:var(--mono); font-size:11px; color:var(--muted2); text-decoration:line-through}
.disc{font-family:var(--mono); font-weight:700; font-size:12px; color:var(--teal)}
.roi-badge{font-family:var(--mono); font-weight:700; font-size:11px; padding:2px 7px; border-radius:7px; background:rgba(95,211,196,.13); color:var(--teal)}
.roi-badge.neg{background:rgba(240,85,59,.12); color:#ff8a76}
.opp .acts{display:flex; gap:7px; margin-top:9px; flex-wrap:wrap}
.opp .acts .btn{width:auto}
.opp-meta{display:flex; align-items:center; justify-content:space-between; margin-top:3px; font-size:11px; color:var(--muted2)}

/* score/discount ring */
.score-badge{flex:none; width:54px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:3px}
.ring{width:48px; height:48px; position:relative}
.ring svg{transform:rotate(-90deg)}
.ring .num{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:700; font-size:14px; color:var(--gold)}
.score-badge .lbl{font-size:8px; font-weight:700; letter-spacing:.08em; color:var(--muted2); text-transform:uppercase}

/* ---------- Detail view ---------- */
.topbar{display:flex; align-items:center; justify-content:space-between; padding:8px 16px 12px; position:sticky; top:0; background:linear-gradient(180deg,var(--bg2) 70%,transparent); z-index:20}
.detail-hero{display:flex; gap:16px; padding:4px 20px 16px}
.panel{margin:0 20px 14px; padding:16px; border-radius:18px; background:var(--surface); border:1px solid var(--line-soft)}
.panel h3{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; display:flex; align-items:center; gap:8px}
.kv{display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px dashed var(--line-soft); font-size:13.5px}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--muted)} .kv .v{font-family:var(--mono); font-weight:600}
.kv .v.pos{color:var(--teal)} .kv .v.neg{color:#ff8a76} .kv .v.gold{color:var(--gold)}
.big-roi{display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:12px; border-top:1px solid var(--line)}
.big-roi .big{font-family:var(--sans); font-weight:900; font-size:26px}
.roi-pill{font-family:var(--mono); font-size:12px; font-weight:700; padding:4px 9px; border-radius:8px; background:rgba(95,211,196,.14); color:var(--teal)}
.human-note{margin:0 20px 14px; padding:12px 14px; border-radius:14px; background:rgba(240,85,59,.06); border:1px solid rgba(240,85,59,.22); font-size:12.5px; color:#ffb3a5; display:flex; gap:10px; align-items:flex-start; line-height:1.4}
.human-note svg{flex:none; width:16px; height:16px; stroke:#ff8a76; fill:none; stroke-width:2; margin-top:1px}
.action-bar{display:flex; gap:10px; padding:4px 20px 8px}

/* price reference table */
.pref{font-family:var(--mono); font-size:12.5px}
.pref .pr-row{display:grid; grid-template-columns:1.1fr .9fr .8fr; gap:8px; padding:8px 0; border-bottom:1px dashed var(--line-soft)}
.pref .pr-row:last-child{border-bottom:none}
.pref .pr-row.head{color:var(--muted2); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em}
.pref .pr-row .p{text-align:right; color:var(--gold); font-weight:700}

/* ---------- Search ---------- */
.searchbox{margin:8px 20px 10px; display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:12px 14px}
.searchbox svg{width:18px; height:18px; stroke:var(--muted); fill:none; stroke-width:2; flex:none}
.searchbox input{flex:1; background:none; border:none; outline:none; color:var(--text); font-size:15px}
.searchbox input::placeholder{color:var(--muted2)}
.res{display:flex; align-items:center; gap:13px; padding:12px 20px; border-bottom:1px solid var(--line-soft)}
.res .name{font-weight:600; font-size:14.5px; line-height:1.2}
.res .meta{font-size:11.5px; color:var(--muted2); margin-top:3px; display:flex; gap:8px; flex-wrap:wrap}
.res .r{margin-left:auto; text-align:right; flex:none}
.res .price{font-family:var(--mono); font-weight:700; font-size:14px; color:var(--gold)}
.res .price.none{color:var(--muted2); font-weight:500; font-size:11px}

/* ---------- ROI chart ---------- */
.roi-lead{margin:0 20px 14px; padding:16px; border-radius:18px; background:linear-gradient(135deg,#15324a,#0f2334); border:1px solid var(--line-soft)}
.roi-lead .v{font-family:var(--sans); font-weight:900; font-size:34px; color:var(--gold); line-height:1}
.roi-lead .k{font-size:12px; color:var(--muted); margin-top:6px; line-height:1.4}
.bt-chart{display:flex; align-items:flex-end; gap:9px; height:150px; padding:0 20px; margin-bottom:10px}
.bt-bar{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; min-width:0}
.bt-bar .col{width:100%; border-radius:6px 6px 0 0; background:linear-gradient(180deg,var(--surface3),var(--line)); transition:height .6s ease; position:relative}
.bt-bar.best .col{background:linear-gradient(180deg,var(--gold),var(--gold-deep))}
.bt-bar .col .cap{position:absolute; top:-16px; left:0; right:0; text-align:center; font-family:var(--mono); font-size:10px; color:var(--muted); font-weight:700}
.bt-bar.best .col .cap{color:var(--gold)}
.bt-bar .bl{font-family:var(--mono); font-size:10px; color:var(--muted2)}
.bt-bar.best .bl{color:var(--gold)}
.roi-table{margin:0 20px}
.roi-table .rt-row{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; padding:9px 0; border-bottom:1px dashed var(--line-soft); font-family:var(--mono); font-size:13px}
.roi-table .rt-row.head{color:var(--muted2); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; font-family:var(--sans); font-weight:700}
.roi-table .rt-row .num{text-align:right}
.roi-table .rt-row.best{color:var(--gold)}

/* ---------- Settings / token ---------- */
.set-group{margin:0 20px 14px; background:var(--surface); border:1px solid var(--line-soft); border-radius:18px; overflow:hidden}
.set-item{padding:16px; border-bottom:1px solid var(--line-soft)}
.set-item:last-child{border-bottom:none}
.set-item .si-title{font-weight:600; font-size:14.5px}
.set-item .si-desc{font-size:12px; color:var(--muted2); margin-top:3px; line-height:1.35}
.tokenfield{display:flex; gap:8px; margin-top:12px}
.tokenfield input{flex:1; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:12px 13px; color:var(--text); font-family:var(--mono); font-size:13px; outline:none; min-width:0}
.tokenfield input:focus{border-color:var(--gold)}
.token-status{display:flex; align-items:center; gap:8px; margin-top:12px; font-size:12.5px; color:var(--muted)}
.token-status .dot{width:8px; height:8px; border-radius:50%; background:var(--muted2); flex:none}
.token-status.ok .dot{background:var(--teal); box-shadow:0 0 8px var(--teal)}
.token-status.bad .dot{background:var(--red); box-shadow:0 0 8px var(--red)}
input[type=range]::-webkit-slider-runnable-track{height:6px; border-radius:6px; background:var(--surface3)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:20px; height:20px; margin-top:-7px; border-radius:50%; background:var(--gold); border:3px solid #1a1205; box-shadow:0 2px 8px rgba(0,0,0,.4)}
input[type=range]{width:100%; height:20px; margin-top:12px}

/* ---------- 4 estados: skeleton / spinner / error / empty ---------- */
.skel{background:linear-gradient(90deg,var(--surface) 25%, var(--surface2) 40%, var(--surface) 60%); background-size:300% 100%; animation:shimmer 1.3s ease infinite; border-radius:12px}
@keyframes shimmer{0%{background-position:150% 0}100%{background-position:-150% 0}}
.skel-opp{display:flex; gap:13px; padding:14px; margin:0 20px 12px; border-radius:20px; border:1px solid var(--line-soft)}
.skel-opp .a{width:58px; height:80px; border-radius:12px} .skel-opp .b{flex:1; display:flex; flex-direction:column; gap:9px}
.skel-line{height:12px; border-radius:6px}
.state{padding:44px 30px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px}
.state .emoji{font-size:34px; opacity:.9}
.state .st-title{font-weight:800; font-size:16px}
.state .st-msg{font-size:13px; color:var(--muted); line-height:1.5; max-width:300px}
.state .btn{width:auto; margin-top:6px}
.spinner{width:26px; height:26px; border-radius:50%; border:3px solid var(--surface3); border-top-color:var(--gold); animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.inline-error{margin:0 20px 12px; padding:10px 13px; border-radius:12px; background:var(--red-glow); border:1px solid rgba(240,85,59,.3); color:#ffb3a5; font-size:12.5px; display:flex; align-items:center; gap:9px}

/* ---------- Toast ---------- */
.toast-wrap{position:absolute; left:16px; right:16px; bottom:calc(var(--tab-h) + 14px + env(safe-area-inset-bottom)); z-index:80; display:flex; flex-direction:column; gap:8px; pointer-events:none}
.device.is-full .toast-wrap{bottom:calc(20px + env(safe-area-inset-bottom))}
.toast{background:#1b3854; border:1px solid var(--line); border-radius:14px; padding:12px 14px; font-size:13px; box-shadow:var(--shadow); display:flex; gap:10px; align-items:center; animation:toastIn .3s ease; transform-origin:bottom}
.toast .ti{flex:none; width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:15px}
.toast.gold .ti{background:var(--gold-glow)} .toast.teal .ti{background:rgba(95,211,196,.14)} .toast.red .ti{background:var(--red-glow)}
.toast b{display:block; font-weight:700} .toast small{color:var(--muted); font-size:11.5px}
@keyframes toastIn{from{opacity:0; transform:translateY(14px) scale(.96)} to{opacity:1; transform:none}}

@media (max-width:480px){
  body{padding:0}
  .device{width:100%; height:100vh; height:100dvh; border-radius:0; border:none; box-shadow:none}
  .notch{display:none}
  .statusbar{height:max(env(safe-area-inset-top),12px); min-height:max(env(safe-area-inset-top),12px); padding:0}
  .statusbar>*{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}