/* ---------- Theme tokens ----------
   Oscuro es el default SIEMPRE (2026-09-13, a pedido explicito del
   usuario: "ese panel... no es el que diseñaste" -- el mockup de
   Claude Design es un diseño oscuro, pero el sitio caia a claro en
   cualquier visita nueva porque dependia de prefers-color-scheme del
   sistema operativo, que en la mayoria de las PCs es claro por
   defecto. Ahora el :root base YA es el tema oscuro del mockup; el
   claro queda como opt-in explicito via el boton de tema. */
:root {
  --bg: #0b0d12;
  --bg-soft: #10131a;
  --panel: #14171f;
  --panel-2: #171b24;
  --border: #262b36;
  --text: #edeef1;
  --muted: #8a8f9c;
  --accent: #7c8bff;
  --accent-soft: rgba(124, 139, 255, 0.14);
  --green: #2fd48f;
  --green-soft: rgba(47, 212, 143, 0.12);
  --red: #ff5d63;
  --red-soft: rgba(255, 93, 99, 0.12);
  --amber: #fbbf24;
  --amber-soft: rgba(251, 191, 36, 0.14);
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
  --font-sans: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

:root[data-theme="dark"] {
  --bg: #0b0d12;
  --bg-soft: #10131a;
  --panel: #14171f;
  --panel-2: #171b24;
  --border: #262b36;
  --text: #edeef1;
  --muted: #8a8f9c;
  --accent: #7c8bff;
  --accent-soft: rgba(124, 139, 255, 0.14);
  --green: #2fd48f;
  --green-soft: rgba(47, 212, 143, 0.12);
  --red: #ff5d63;
  --red-soft: rgba(255, 93, 99, 0.12);
  --amber: #fbbf24;
  --amber-soft: rgba(251, 191, 36, 0.14);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
}

:root[data-theme="light"] {
  --bg: #f4f5f7;
  --bg-soft: #ececf0;
  --panel: #ffffff;
  --panel-2: #fbfbfd;
  --border: #e6e7eb;
  --text: #14161c;
  --muted: #6b7078;
  --accent: #5b6ef8;
  --accent-soft: rgba(91, 110, 248, 0.12);
  --green: #17a672;
  --green-soft: rgba(23, 166, 114, 0.12);
  --red: #e5484d;
  --red-soft: rgba(229, 72, 77, 0.12);
  --amber: #b45309;
  --amber-soft: rgba(217, 119, 6, 0.14);
  --shadow: 0 1px 2px rgba(20, 22, 28, 0.04), 0 8px 24px rgba(20, 22, 28, 0.05);
}

* { box-sizing: border-box; }

html, body {
  background: var(--bg);
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.muted { color: var(--muted); }
.small { font-size: 0.78rem; }
.xsmall { font-size: 0.68rem; }

.link {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.85rem;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.link:hover { background: var(--bg-soft); color: var(--text); }

/* ---------- Login ---------- */
.login-body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(700px circle at 15% 20%, var(--accent-soft), transparent 60%),
    radial-gradient(600px circle at 85% 80%, var(--green-soft), transparent 55%),
    var(--bg);
}
.login-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 2.5rem 2.25rem;
  width: 340px;
  text-align: center;
}
.login-card h1 {
  font-size: 1.35rem;
  margin: 0.75rem 0 0.15rem;
  letter-spacing: -0.01em;
}
.login-mark {
  width: auto;
  height: 44px;
  margin: 0 auto;
  padding: 0 1rem;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: white;
  background: linear-gradient(135deg, var(--accent), #9b6bff);
  box-shadow: 0 6px 16px var(--accent-soft);
}
.login-card form { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 1.5rem; text-align: left; }
.login-card label { font-size: 0.75rem; color: var(--muted); margin-top: 0.6rem; font-weight: 500; }
.login-card input {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: var(--font-sans);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.login-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.login-card button {
  margin-top: 1.25rem;
  padding: 0.7rem;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.1s ease;
}
.login-card button:hover { filter: brightness(1.08); }
.login-card button:active { transform: scale(0.98); }
.alert {
  background: var(--red-soft);
  color: var(--red);
  border: 1px solid var(--red-soft);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.7rem;
  font-size: 0.83rem;
  margin-top: 0.9rem;
  text-align: left;
}

/* ---------- Top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1.5rem;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 0.65rem; }
.brand-mark {
  width: auto;
  height: 28px;
  padding: 0 0.55rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: white;
  background: linear-gradient(135deg, var(--accent), #9b6bff);
  box-shadow: 0 4px 12px var(--accent-soft);
  flex-shrink: 0;
}
.brand-name { font-size: 0.98rem; font-weight: 500; letter-spacing: -0.01em; color: var(--muted); }
.brand-name strong { font-weight: 800; color: var(--text); }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(47, 212, 143, 0.5); }
  70% { box-shadow: 0 0 0 6px rgba(47, 212, 143, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 212, 143, 0); }
}

/* ---------- Status group (mercado + bot) ---------- */
.status-group {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-2);
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: inherit;
  border: none;
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  cursor: default;
  color: var(--muted);
  background: transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.status-pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}
#bot-toggle-btn { cursor: pointer; }
#bot-toggle-btn:hover { filter: brightness(1.05); }
#bot-toggle-btn:active { transform: scale(0.97); }

.status-pill.open, .status-pill.on {
  color: var(--green);
  background: var(--green-soft);
}
.status-pill.open .dot, .status-pill.on .dot {
  background: var(--green);
  animation: pulse 2s infinite;
}
.status-pill.closed, .status-pill.off {
  color: var(--red);
  background: var(--red-soft);
}
.status-pill.closed .dot, .status-pill.off .dot { background: var(--red); }

.status-pill.premarket {
  color: var(--amber);
  background: var(--amber-soft);
}
.status-pill.premarket .dot { background: var(--amber); }

.week-strip {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 0.35rem;
}
.week-strip .day {
  width: 19px;
  height: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--muted);
  opacity: 0.4;
  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.week-strip .day.trading {
  color: var(--text);
  opacity: 1;
}
.week-strip .day.today {
  opacity: 1;
  color: white;
  background: var(--red);
}
.week-strip .day.today.trading {
  background: var(--green);
}

.topbar-divider {
  width: 1px;
  height: 22px;
  background: var(--border);
  margin: 0 0.3rem;
}

.topnav { display: flex; gap: 0.25rem; }
.topnav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.topnav a:hover { color: var(--text); background: var(--bg-soft); }
.topnav a.active { color: var(--accent); background: var(--accent-soft); }

.nav-dropdown { position: relative; }
.nav-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: inherit;
  color: var(--muted);
  background: transparent;
  border: none;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-dropdown-btn:hover { color: var(--text); background: var(--bg-soft); }
.nav-dropdown-btn.active { color: var(--accent); background: var(--accent-soft); }
.nav-dropdown-chevron { transition: transform 0.15s ease; flex-shrink: 0; }
.nav-dropdown-btn[aria-expanded="true"] .nav-dropdown-chevron { transform: rotate(180deg); }

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 160px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
}
.nav-dropdown-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown-menu a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  transition: background-color 0.12s ease;
}
.nav-dropdown-menu a:hover { background: var(--bg-soft); }
.nav-dropdown-menu a.active { color: var(--accent); background: var(--accent-soft); }

.topbar-right { display: flex; align-items: center; gap: 0.6rem; }

.theme-toggle {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.theme-toggle:hover { background: var(--bg-soft); }

.user-chip {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
}

/* ---------- Layout ---------- */
main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  scroll-behavior: smooth;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.4rem;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 16px 40px rgba(0,0,0,0.4); }
.card-hero {
  background: linear-gradient(150deg, var(--accent-soft), var(--panel) 65%);
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
}
.card-hero .card-value { font-size: 2rem; }
.card-label { font-size: 0.78rem; color: var(--muted); font-weight: 500; }
.card-value {
  font-family: var(--font-mono);
  font-size: 1.7rem;
  font-weight: 600;
  margin-top: 0.4rem;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.card-sub { font-size: 0.83rem; color: var(--muted); margin-top: 0.35rem; font-weight: 500; }

/* ---------- Banner "Dinero real" -- visible para todos los usuarios,
   pero BLOQUEADO (solo informativo) hasta que el administrador habilite
   el acceso real. 2026-09-13, a pedido explicito del usuario: "crea la
   secion de dinero real pero solo que se vea no des acceso hasta que yo
   diga". No hay ningun endpoint ni logica de ejecucion real detras de
   esto -- es 100% visual/informativo. */
.real-money-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(150deg, var(--amber-soft), var(--panel) 60%);
  border: 1px solid color-mix(in srgb, var(--amber) 30%, var(--border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.1rem 1.3rem;
}
.real-money-banner-icon {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--amber-soft);
  color: var(--amber);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.real-money-banner-body { flex: 1; min-width: 0; }
.real-money-banner-title { font-size: 0.92rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.real-money-banner-sub { font-size: 0.82rem; color: var(--muted); margin-top: 0.25rem; }
.real-money-banner-btn { flex-shrink: 0; white-space: nowrap; }
.badge-locked {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--amber);
  background: var(--amber-soft);
  border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--border));
}
.real-money-modal-lock {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--amber-soft);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
}
.real-money-divider { height: 1px; background: var(--border); margin: 1.1rem 0; }
.robinhood-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--green);
  background: var(--green-soft);
}
@media (max-width: 560px) {
  .real-money-banner { flex-wrap: wrap; }
  .real-money-banner-btn { width: 100%; }
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.4rem 1.5rem;
  scroll-margin-top: 5rem;
}
.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.1rem;
}
.panel-head-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.panel-toggle {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.15s ease;
}
.panel-toggle:hover { background: var(--bg-soft); color: var(--text); }
.panel-toggle.collapsed svg { transform: rotate(-90deg); }
#account-chart-box, .collapsible {
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.2s ease;
  max-height: 900px;
}
#account-chart-box {
  max-height: 320px;
}
#account-chart-box.collapsed, .collapsible.collapsed {
  max-height: 0;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.panel h2 { font-size: 1rem; margin: 0; font-weight: 600; letter-spacing: -0.01em; }
.panel h3 { font-size: 0.85rem; margin: 1.5rem 0 0.85rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

.chart-box { position: relative; height: 200px; }
.chart-box-lg { height: 260px; }
.chart-box-sm { height: 150px; }

/* ---------- Tabs ---------- */
.tabs {
  display: flex;
  gap: 0.3rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
  overflow-x: auto;
}
.tab-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); }
table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
th, td {
  text-align: left;
  padding: 0.8rem 0.85rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
td { font-variant-numeric: tabular-nums; }
th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: 0.65rem;
}
tbody tr { transition: background-color 0.12s ease; }
tbody tr:hover { background: var(--bg-soft); }
tr:last-child td { border-bottom: none; }

.positive { color: var(--green); }
.negative { color: var(--red); }

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
}
.badge-buy { color: var(--green); background: var(--green-soft); }
.badge-sell { color: var(--red); background: var(--red-soft); }
.badge-type {
  color: var(--muted);
  background: var(--bg-soft);
  border: 1px solid var(--border);
}

.empty-msg { padding: 1rem 0.2rem; font-size: 0.88rem; }
.closed-row { opacity: 0.65; }

.market-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}
.market-tile {
  border: 1px solid var(--border);
  background: var(--panel-2);
  border-radius: var(--radius-md);
  padding: 0.85rem 0.95rem;
}
.market-tile .name { font-size: 0.75rem; color: var(--muted); font-weight: 500; }
.market-tile .value { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 600; margin-top: 0.25rem; }
.market-tone {
  font-size: 0.85rem;
  margin: 0.9rem 0 0.3rem;
  color: var(--muted);
}

.futures-note {
  margin: 0.6rem 0 0;
  font-style: italic;
}

.na { color: var(--muted); }

/* ---------- Technical outlook ---------- */
.tech-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 1.5rem 0 0.85rem;
}
.tech-header h3 { margin: 0; }

.tech-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.select-input, .text-input {
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-family: var(--font-sans);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.select-input:focus, .text-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.text-input { width: 110px; text-transform: uppercase; }
.select-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14'%3E%3Cpath fill='%238a8f9c' d='M6.7 8.3a1 1 0 0 1 1.4 0L12 12.17l3.9-3.87a1 1 0 1 1 1.4 1.42l-4.6 4.56a1 1 0 0 1-1.4 0L6.7 9.72a1 1 0 0 1 0-1.42Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  cursor: pointer;
}
.select-input:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.select-input option { background: var(--panel-2); color: var(--text); }

.btn-secondary {
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--border);
  background: var(--accent);
  color: white;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.btn-secondary:hover { filter: brightness(1.08); }

.btn-close-position {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--red);
  background: transparent;
  color: var(--red);
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-close-position:hover { background: var(--red); color: white; }
.btn-close-position:disabled { opacity: 0.6; cursor: default; }

.tech-bias {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-md);
  background: var(--panel-2);
  border: 1px solid var(--border);
  margin-bottom: 0.85rem;
  font-size: 0.9rem;
}
.tech-bias .bias-tag {
  font-weight: 700;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.bias-alcista { color: var(--green); background: var(--green-soft); }
.bias-bajista { color: var(--red); background: var(--red-soft); }
.bias-mixto { color: var(--accent); background: var(--accent-soft); }

.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.tech-card {
  border: 1px solid var(--border);
  background: var(--panel-2);
  border-radius: var(--radius-md);
  padding: 0.9rem 1rem;
}
.tech-card .tf-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tech-card .tf-trend {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.tech-card .tf-detail {
  font-size: 0.78rem;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  padding: 0.15rem 0;
}
.tech-card .tf-detail span:last-child {
  color: var(--text);
  font-family: var(--font-mono);
  font-weight: 500;
}

canvas { max-width: 100%; }

/* ---------- Settings modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
}
.modal-card {
  position: fixed;
  top: 64px;
  right: 20px;
  pointer-events: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  width: 320px;
  max-width: calc(100vw - 40px);
}
@media (max-width: 480px) {
  .modal-card { left: 20px; right: 20px; width: auto; }
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.1rem 0.5rem;
}
.modal-head h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.modal-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: var(--radius-sm);
}
.modal-close:hover { background: var(--bg-soft); color: var(--text); }
.modal-body {
  padding: 0.5rem 1.1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.modal-body label {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 500;
  margin-top: 0.6rem;
}
.modal-body input[type="number"] {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-family: var(--font-mono);
  outline: none;
}
.modal-body input[type="number"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.settings-counter {
  margin-top: 0.9rem;
  padding: 0.6rem 0.7rem;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  font-family: var(--font-mono);
}

/* ---------- Slider de riesgo por operacion -- reemplaza el campo fijo
   "Contratos por operacion" (2026-09-13, a pedido explicito del
   usuario, mismo cambio en trading-bot). Cada cuenta arriesga un % de
   SU capital, no una cantidad fija de contratos igual para todas. */
.risk-slider-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 0.6rem;
}
.risk-slider-value {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 700;
}
.risk-level-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.risk-level-tag.conservador { color: var(--green); background: var(--green-soft); }
.risk-level-tag.moderado { color: var(--accent); background: var(--accent-soft); }
.risk-level-tag.agresivo { color: var(--amber); background: var(--amber-soft); }
.risk-level-tag.muy-agresivo { color: var(--red); background: var(--red-soft); }

input[type="range"].risk-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 3px;
  margin: 0.6rem 0 0.3rem;
  background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--fill, 20%), var(--border) var(--fill, 20%), var(--border) 100%);
  outline: none;
}
input[type="range"].risk-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--panel);
  border: 4px solid var(--accent);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
input[type="range"].risk-slider::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--panel);
  border: 4px solid var(--accent);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.risk-slider-scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  color: var(--muted);
}
.risk-amount-line {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--muted);
}
.risk-amount-line strong {
  font-family: var(--font-mono);
  color: var(--text);
  font-size: 0.92rem;
}

.settings-error {
  color: var(--red);
  font-size: 0.8rem;
  margin: 0.4rem 0 0;
}
.modal-actions {
  padding: 0 1.1rem 1.1rem;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 720px) {
  .topnav { display: none; }
  .topbar { padding: 0.7rem 1rem; }
  main { padding: 1.25rem 1rem 3rem; }
}

/* ---------- Mobile: barra superior compacta -- a un ancho de celular
   (~390px) el header con logo + tira de dias + 2 pastillas de estado +
   botones de tema/config + chip de usuario no entra en una sola linea,
   asi que la pagina entera se corre horizontalmente al tocar en vez de
   quedarse fija (el sticky del topbar seguia funcionando, pero el
   desborde arrastraba TODO el body con el) -- 2026-09-13, a pedido
   explicito del usuario ("todo se mueve en conjunto, que solo se mueva
   la barra de arriba"). Se oculta lo puramente decorativo (tira de
   dias) y se reduce texto/paddings de lo esencial para que entre. */
@media (max-width: 480px) {
  .topbar { padding: 0.6rem 0.75rem; gap: 0.4rem; }
  .brand-name { display: none; }
  .week-strip { display: none; }
  .status-group { padding: 0.15rem; gap: 0.15rem; }
  .status-pill { padding: 0.28rem 0.5rem; font-size: 0.66rem; }
  .topbar-right { gap: 0.35rem; }
  .topbar-divider { margin: 0 0.1rem; }
  .theme-toggle, .user-chip { width: 28px; height: 28px; }
  .link { padding: 0.35rem 0.45rem; font-size: 0.78rem; }
}

/* ---------- Mobile: tarjeta hero + grilla, posiciones/historial como
   lista de tarjetas en vez de tabla ancha (matching el mockup de
   Claude Design "Main.dc.html", 2026-09-13, a pedido explicito del
   usuario -- solo visual, sin tocar la logica de tamano de operacion) */
@media (max-width: 640px) {
  #resumen.cards { grid-template-columns: 1fr 1fr; }
  #resumen .card-hero { grid-column: 1 / -1; }

  #positions-table, #history-table { display: block; }
  #positions-table thead, #history-table thead { display: none; }
  #positions-table tbody, #history-table tbody { display: block; }
  #positions-table tr, #history-table tr {
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem;
    background: var(--panel-2);
    overflow: hidden;
  }
  #positions-table tr:last-child, #history-table tr:last-child { margin-bottom: 0; }
  #positions-table td, #history-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.9rem;
    border-bottom: 1px solid var(--border);
    white-space: normal;
    text-align: right;
  }
  #positions-table td:last-child, #history-table td:last-child { border-bottom: none; }
  #positions-table td::before, #history-table td::before {
    content: attr(data-label);
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: left;
    flex-shrink: 0;
  }
  /* Primera celda (ticker + pastilla de tipo) funciona como encabezado
     de la tarjeta -- sin label, ocupa todo el ancho */
  #positions-table td:first-child, #history-table td:first-child {
    display: block;
    text-align: left;
    background: var(--bg-soft);
    font-size: 0.92rem;
  }
  #positions-table td:first-child::before, #history-table td:first-child::before { content: none; }
  /* Celda de accion (boton Cerrar) -- sin label, ancho completo */
  .td-action { justify-content: center !important; }
  .td-action::before { content: none !important; }
  .td-action .btn-close-position { width: 100%; padding: 0.55rem; }
}