/* Bot Polymarket · sistema visual (escala Refactoring UI: espacios 4-8-12-16-24-32-48, tipos 12-14-16-18-20-24-30-36-48) */
:root {
  --space-2: 2px; --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px;
  --space-24: 24px; --space-32: 32px; --space-48: 48px;
  --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 20px;
  --text-2xl: 24px; --text-3xl: 30px; --text-4xl: 36px; --text-5xl: 48px;
  --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px;
  --z-sticky: 20; --z-modal: 40; --z-toast: 50;

  /* Grises oscuros con un poco de azul */
  --gray-950: #0b0f14; --gray-900: #121922; --gray-850: #17212c; --gray-800: #1d2935; --gray-700: #2a3846;
  --gray-600: #3c4c5d; --gray-500: #7a8898; --gray-400: #97a4b2; --gray-300: #bcc6d0; --gray-100: #e8edf2;
  --brand-300: #a5b4fc; --brand-400: #818cf8; --brand-500: #6366f1; --brand-600: #4f46e5;

  --bg-canvas: var(--gray-950); --bg-surface: var(--gray-900); --bg-subtle: var(--gray-850); --bg-inset: var(--gray-800);
  --text-primary: var(--gray-100); --text-secondary: var(--gray-400); --text-tertiary: var(--gray-500);
  --success: #34d399; --success-bg: rgba(52, 211, 153, .12);
  --danger: #f87171; --danger-bg: rgba(248, 113, 113, .12); --danger-solid: #dc2626; --danger-solid-hover: #b91c1c;
  --warning: #fbbf24; --warning-bg: rgba(251, 191, 36, .12);
  --info: var(--brand-300); --info-bg: rgba(129, 140, 248, .14);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .5), 0 4px 6px -2px rgba(0, 0, 0, .35);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .6), 0 10px 10px -5px rgba(0, 0, 0, .4);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg-canvas); color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--text-base); line-height: 1.5; -webkit-font-smoothing: antialiased;
  padding: 0 env(safe-area-inset-right) calc(var(--space-32) + env(safe-area-inset-bottom)) env(safe-area-inset-left);
}
a { color: var(--brand-300); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; border-radius: var(--radius-md); }
.num { font-variant-numeric: tabular-nums; }
.pos { color: var(--success); }
.neg { color: var(--danger); }
.muted { color: var(--text-secondary); }

/* ---------- Barra superior ---------- */
.topbar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  padding-top: env(safe-area-inset-top);
  background: rgba(11, 15, 20, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.topbar__inner {
  max-width: 1024px; margin: 0 auto; padding: var(--space-12) var(--space-16);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-12);
}
.brand { display: flex; align-items: center; gap: var(--space-8); font-weight: 700; font-size: var(--text-base); }
.brand img { width: 32px; height: 32px; border-radius: var(--radius-md); }
.topbar__status { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; justify-content: flex-end; }
.topbar__ago { font-size: var(--text-xs); color: var(--text-secondary); }

.pill {
  display: inline-flex; align-items: center; gap: var(--space-8);
  height: 32px; padding: 0 var(--space-12); border-radius: var(--radius-full);
  font-size: var(--text-sm); font-weight: 600; background: var(--bg-inset); color: var(--text-secondary);
}
.pill::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); background: currentColor; }
.pill.ok { background: var(--success-bg); color: var(--success); }
.pill.warn { background: var(--warning-bg); color: var(--warning); }
.pill.bad { background: var(--danger-bg); color: var(--danger); }

.banner {
  max-width: 1024px; margin: var(--space-12) auto 0; padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-lg); font-size: var(--text-sm); font-weight: 600;
  background: var(--danger-bg); color: var(--danger);
}
.banner.warn { background: var(--warning-bg); color: var(--warning); }

/* ---------- Página ---------- */
.page {
  max-width: 1024px; margin: 0 auto; padding: var(--space-16);
  display: grid; gap: var(--space-16); grid-template-columns: minmax(0, 1fr);
}

.card { background: var(--bg-surface); border-radius: var(--radius-xl); padding: var(--space-16); min-width: 0; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8) var(--space-12); flex-wrap: wrap; margin-bottom: var(--space-16); }
.card h2 { font-size: var(--text-lg); font-weight: 600; line-height: 1.3; }
.card__meta { font-size: var(--text-sm); color: var(--text-secondary); }
.card__note { font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--space-12); max-width: 65ch; }
.eyebrow { font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }

/* ---------- Resultado ---------- */
.hero { padding: var(--space-24); }
.hero__value { font-size: var(--text-4xl); font-weight: 700; line-height: 1.1; margin-top: var(--space-8); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hero__sub { font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--space-8); }
.hero__split { display: flex; flex-wrap: wrap; gap: var(--space-12) var(--space-32); margin-top: var(--space-24); }
.split { display: flex; flex-direction: column; gap: var(--space-2); }
.split__label { font-size: var(--text-xs); color: var(--text-secondary); }
.split__value { font-size: var(--text-lg); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Indicadores ---------- */
.kpis { display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr); background: var(--bg-canvas); border-radius: var(--radius-xl); overflow: hidden; }
.kpi { background: var(--bg-surface); padding: var(--space-12) var(--space-16); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-12); align-items: baseline; }
.kpi__label { font-size: var(--text-sm); color: var(--text-secondary); }
.kpi__value { font-size: var(--text-xl); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.kpi__sub { grid-column: 1 / -1; font-size: var(--text-xs); color: var(--text-tertiary); }

/* ---------- Tu dinero ---------- */
.stack { display: flex; height: 12px; border-radius: var(--radius-full); overflow: hidden; background: var(--bg-inset); gap: var(--space-2); }
.stack__seg { min-width: 4px; height: 100%; }
.seg-free { background: var(--gray-600); }
.seg-offers { background: var(--brand-400); }
.seg-shares { background: var(--warning); }
.legend { list-style: none; margin-top: var(--space-16); display: grid; gap: var(--space-12); }
.legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; column-gap: var(--space-12); align-items: baseline; }
.legend .dot { width: 12px; height: 12px; border-radius: var(--radius-full); align-self: center; }
.legend .name { font-size: var(--text-sm); }
.legend .hint { display: block; font-size: var(--text-xs); color: var(--text-tertiary); }
.legend .val { font-size: var(--text-base); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- Mercados ---------- */
.markets { display: grid; gap: var(--space-12); grid-template-columns: minmax(0, 1fr); }
.mkt { background: var(--bg-subtle); border-radius: var(--radius-lg); padding: var(--space-16); display: grid; gap: var(--space-12); min-width: 0; }
.mkt.is-dim { opacity: .72; }
.mkt__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.mkt__title { font-size: var(--text-base); font-weight: 600; line-height: 1.35; color: var(--text-primary); overflow-wrap: anywhere; }
.mkt__title:hover { text-decoration: underline; }
.mkt__why { font-size: var(--text-sm); color: var(--text-secondary); }
.mkt__stats { display: grid; gap: var(--space-12); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.stat__label { font-size: var(--text-xs); color: var(--text-secondary); }
.stat__value { font-size: var(--text-base); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat__value.is-big { font-size: var(--text-xl); }
.mkt__meta { font-size: var(--text-sm); color: var(--text-secondary); overflow-wrap: anywhere; }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-4); height: 24px; padding: 0 var(--space-8);
  border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; background: var(--bg-inset); color: var(--text-secondary); white-space: nowrap;
}
.chip.ok { background: var(--success-bg); color: var(--success); }
.chip.warn { background: var(--warning-bg); color: var(--warning); }
.chip.bad { background: var(--danger-bg); color: var(--danger); }
.chip.info { background: var(--info-bg); color: var(--info); }
.chip--status::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }

details.more > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-4);
  min-height: 32px; font-size: var(--text-sm); font-weight: 600; color: var(--brand-300);
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::after { content: "›"; transform: rotate(90deg); display: inline-block; }
details.more[open] > summary::after { transform: rotate(-90deg); }
.kv { display: grid; gap: var(--space-8); margin-top: var(--space-8); font-size: var(--text-sm); }
.kv > div { display: flex; justify-content: space-between; gap: var(--space-12); }
.kv dt { color: var(--text-secondary); }
.kv dd { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Gráfica ---------- */
.chart { position: relative; height: 176px; padding-left: 56px; padding-bottom: 24px; }
.chart svg { display: block; width: 100%; height: 152px; overflow: visible; }
.chart__y { position: absolute; left: 0; width: 48px; text-align: right; font-size: var(--text-xs); color: var(--text-tertiary); transform: translateY(-50%); font-variant-numeric: tabular-nums; }
.chart__x { position: absolute; bottom: 0; font-size: var(--text-xs); color: var(--text-tertiary); }
.chart__x.is-start { left: 56px; }
.chart__x.is-end { right: 0; }
.chart__empty { font-size: var(--text-sm); color: var(--text-secondary); padding: var(--space-24) 0; }

/* ---------- Seguridad ---------- */
.meter + .meter { margin-top: var(--space-16); }
.meter__row { display: flex; justify-content: space-between; gap: var(--space-12); font-size: var(--text-sm); }
.meter__row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.meter__bar { height: 8px; border-radius: var(--radius-full); background: var(--bg-inset); overflow: hidden; margin-top: var(--space-8); }
.meter__bar > i { display: block; height: 100%; background: var(--success); border-radius: var(--radius-full); }
.meter__bar.warn > i { background: var(--warning); }
.meter__bar.bad > i { background: var(--danger); }
.meter__cap { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: var(--space-8); }
.rules { list-style: none; margin-top: var(--space-24); display: grid; gap: var(--space-8); font-size: var(--text-sm); color: var(--text-secondary); }
.rules li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--space-8); }
.rules li::before { content: "✓"; color: var(--success); font-weight: 700; }
.rules li.is-warn { color: var(--warning); }
.rules li.is-warn::before { content: "!"; color: var(--warning); }

/* ---------- Listas (actividad, operaciones, Jev, noticias) ---------- */
.seg { display: inline-flex; background: var(--bg-inset); border-radius: var(--radius-full); padding: var(--space-2); }
.seg__btn { border: 0; background: transparent; color: var(--text-secondary); height: 32px; padding: 0 var(--space-12); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.seg__btn.is-on { background: var(--gray-700); color: var(--text-primary); }
.feed { list-style: none; display: grid; gap: var(--space-16); }
.feed__item { display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: var(--space-12); }
.feed__dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--gray-600); margin-top: var(--space-8); }
.feed__item.warn .feed__dot { background: var(--warning); }
.feed__item.alert .feed__dot { background: var(--danger); }
.feed__item.good .feed__dot { background: var(--success); }
.feed__msg { font-size: var(--text-sm); overflow-wrap: anywhere; }
.feed__item.alert .feed__msg { color: var(--danger); font-weight: 600; }
.feed__meta { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: var(--space-2); overflow-wrap: anywhere; }
.feed__sub { font-size: var(--text-xs); color: var(--text-secondary); margin-top: var(--space-4); overflow-wrap: anywhere; }
.empty { font-size: var(--text-sm); color: var(--text-secondary); }
.link-btn { margin-top: var(--space-16); border: 0; background: none; color: var(--brand-300); font-size: var(--text-sm); font-weight: 600; min-height: 32px; cursor: pointer; }

.trade { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-12); row-gap: var(--space-2); }
.trade + .trade { margin-top: var(--space-16); }
.trade__what { font-size: var(--text-sm); font-weight: 600; }
.trade__amt { font-size: var(--text-sm); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.trade__meta { font-size: var(--text-xs); color: var(--text-tertiary); overflow-wrap: anywhere; }
.trade__pnl { font-size: var(--text-xs); text-align: right; font-variant-numeric: tabular-nums; }

details.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 32px; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: "Ver"; font-size: var(--text-sm); font-weight: 600; color: var(--brand-300); }
details.fold[open] > summary::after { content: "Ocultar"; }
details.fold[open] > summary { margin-bottom: var(--space-16); }

/* ---------- Botones ---------- */
.actions { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-16); }
.actions form { display: contents; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  min-height: 44px; padding: 0 var(--space-16); border-radius: var(--radius-lg); border: 0;
  font-size: var(--text-base); font-weight: 600; cursor: pointer; background: var(--bg-inset); color: var(--text-primary);
}
.btn--primary { background: var(--brand-500); color: #fff; }
.btn--primary:hover { background: var(--brand-600); }
.btn--danger { background: var(--danger-solid); color: #fff; }
.btn--danger:hover { background: var(--danger-solid-hover); }
.btn--secondary:hover { background: var(--gray-700); }
.btn--ghost { background: transparent; color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--gray-700); }
.btn--ghost:hover { color: var(--text-primary); }

/* ---------- Diálogo y aviso ---------- */
.dialog { margin: auto; width: min(420px, calc(100vw - 32px)); border: 0; border-radius: var(--radius-xl); background: var(--bg-surface); color: var(--text-primary); box-shadow: var(--shadow-xl); padding: 0; }
.dialog::backdrop { background: rgba(0, 0, 0, .6); }
.dialog__body { padding: var(--space-24); display: grid; gap: var(--space-12); }
.dialog__title { font-size: var(--text-lg); font-weight: 600; }
.dialog__text { font-size: var(--text-sm); color: var(--text-secondary); }
.dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-12); margin-top: var(--space-12); }
.toast {
  position: fixed; left: 50%; bottom: calc(var(--space-24) + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: var(--z-toast); max-width: calc(100vw - 32px); padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-lg); background: var(--gray-800); color: var(--text-primary); box-shadow: var(--shadow-lg);
  font-size: var(--text-sm); font-weight: 600;
}

/* ---------- Cargando ---------- */
@keyframes shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } }
.is-loading .hero__value, .is-loading .kpi__value, .is-loading .split__value {
  color: transparent; border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--bg-inset) 0, var(--gray-700) 50%, var(--bg-inset) 100%) no-repeat;
  background-size: 400px 100%; animation: shimmer 1.2s linear infinite; min-width: 96px; display: inline-block;
}

/* ---------- Pantallas medianas y grandes ---------- */
@media (min-width: 640px) {
  .page { padding: var(--space-24); gap: var(--space-24); }
  .card { padding: var(--space-24); }
  .hero { padding: var(--space-32); }
  .hero__value { font-size: var(--text-5xl); }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); background: transparent; gap: var(--space-16); overflow: visible; }
  .kpi { border-radius: var(--radius-xl); padding: var(--space-16) var(--space-24); display: flex; flex-direction: column; gap: var(--space-4); }
  .kpi__value { text-align: left; font-size: var(--text-2xl); }
  .mkt__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .markets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Entrada ---------- */
body.login { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: var(--space-16); }
.login-card { width: min(380px, 100%); background: var(--bg-surface); border-radius: var(--radius-xl); padding: var(--space-32) var(--space-24); display: flex; flex-direction: column; gap: var(--space-16); box-shadow: var(--shadow-lg); }
.login-logo { width: 48px; height: 48px; border-radius: var(--radius-lg); }
.login-card h1 { font-size: var(--text-2xl); font-weight: 700; }
.login-card label { display: flex; flex-direction: column; gap: var(--space-8); font-size: var(--text-sm); color: var(--text-secondary); font-weight: 600; }
.login-card input { height: 48px; padding: 0 var(--space-12); font-size: var(--text-base); border-radius: var(--radius-lg); border: 0; background: var(--bg-inset); color: var(--text-primary); }
.login-card input:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 0; }
.login-card label.show { flex-direction: row; align-items: center; gap: var(--space-8); font-weight: 400; }
.login-card label.show input { width: 20px; height: 20px; padding: 0; accent-color: var(--brand-500); }
.login-card button { height: 48px; border: 0; border-radius: var(--radius-lg); background: var(--brand-500); color: #fff; font-size: var(--text-base); font-weight: 600; cursor: pointer; }
.login-card button:hover { background: var(--brand-600); }
.err { color: var(--danger); min-height: 1em; font-size: var(--text-sm); }
.err:empty { display: none; }