/* app.css — Signals design system (mobile-first) */

/* ---------- Tokens ---------- */
:root{
  --bg:#0f1115;
  --card:#151922;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --accent:#6aa6ff;
  --accent-2:#9cc3ff;
  --border:#262b36;
  --ok:#10b981;   /* verde */
  --warn:#d97706; /* ámbar */
  --bad:#ef4444;  /* rojo */
  --pos:#10b981;
  --neg:#ef4444;
  --radius:16px;
  --shadow:0 6px 24px rgba(0,0,0,.25);
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#f5f6f8;
    --card:#ffffff;
    --text:#1f2937;
    --muted:#6b7280;
    --accent:#2563eb;
    --accent-2:#5aa2ff;
    --border:#e5e7eb;
    --shadow:0 6px 18px rgba(0,0,0,.08);
  }
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
small,.small{font-size:12px;color:var(--muted)}
.muted{color:var(--muted)}
.hr{height:1px;background:var(--border);border:0;margin:16px 0}

.container{max-width:960px;margin:0 auto;padding:16px}

/* ---------- Cards, botones, inputs ---------- */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card.pad{padding:16px}
.block{margin-top:16px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;border-radius:12px;border:1px solid var(--border);
  background:var(--card);color:var(--text);font-weight:600;
  transition:transform .05s ease, box-shadow .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn.small{padding:8px 12px;font-size:14px}
.btn.btn--primary{background:var(--accent);border-color:transparent;color:#fff;
  box-shadow:0 8px 16px rgba(37,99,235,.25)}
.btn.ghost{background:transparent}
.btn-group{display:flex;gap:8px;flex-wrap:wrap}

input[type="search"], input[type="text"], select, textarea{
  width:100%;padding:12px;border-radius:12px;border:1px solid var(--border);
  background:var(--card);color:var(--text);outline:none;
}
input::placeholder{color:var(--muted)}

/* ---------- Listas y items ---------- */
ul{margin:0;padding:0}
.list{display:flex;flex-direction:column;gap:10px;list-style:none;padding:0;margin:0}

.item{
  display:flex;align-items:center;gap:12px;
  padding:12px;border:1px solid var(--border);border-radius:14px;
  background:var(--card);box-shadow:var(--shadow);
}
.item:hover{border-color:var(--accent)}
.item .ic,
.badge{
  width:36px;min-width:36px;height:36px;border-radius:999px;
  display:grid;place-items:center;font-weight:800;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;
}
.badge--bon{background:linear-gradient(135deg,#1e293b,#64748b)}
.badge--ced{background:linear-gradient(135deg,#6d28d9,#a78bfa)}
.badge--cau{background:linear-gradient(135deg,#0f766e,#14b8a6)}
.badge--fci{background:linear-gradient(135deg,#b45309,#f59e0b)}
.badge--ccy{background:linear-gradient(135deg,#16a34a,#22c55e)}

.item .meta{display:flex;flex-direction:column;gap:2px}
.item .meta .name{font-weight:700}
.item .meta .sub{font-size:12px;color:var(--muted)}
.item .rightcol{margin-left:auto;text-align:right}
.item .price{font-weight:700}
.item .chg{font-size:12px}
.item .chg.pos{color:var(--pos)}
.item .chg.neg{color:var(--neg)}

/* ---------- Hero (home) ---------- */
.hero{display:flex;flex-direction:column;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px}
.logo{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:14px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff}
.lead{color:var(--muted);margin:0}
.cta{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- “Explorá las herramientas” ---------- */
.menu-title{margin:0 0 12px;font-size:22px}

/* Chevron decorativo opcional */
.item .chev::after{content:"›";font-size:20px;color:var(--muted)}
.item .chev{margin-left:auto}

/* ---------- Header superior (todas las páginas internas) ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--bg);border-bottom:1px solid var(--border);
  backdrop-filter:saturate(180%) blur(6px);
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;gap:12px}
.brand .logo-dot{width:10px;height:10px;border-radius:999px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));display:inline-block;margin-right:6px}
.site-header .brand{font-size:18px;font-weight:800}

/* Menú */
.nav{display:none;gap:8px;align-items:center}
.nav.open{display:flex;flex-direction:column;align-items:flex-start;padding:8px}
.nav-item{
  padding:8px 10px;border-radius:10px;border:1px solid var(--border);
  background:var(--card);color:var(--muted);white-space:nowrap
}
.nav-item.active,.nav-item:hover{color:var(--text);border-color:var(--accent)}

/* Toggle hamburguesa */
.nav-toggle{
  display:inline-flex;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer;
}
.nav-toggle .bar{width:22px;height:2px;background:var(--text);display:block;border-radius:2px}

/* >= 840px: menú horizontal siempre visible */
@media (min-width:840px){
  .nav{display:flex !important;flex-direction:row}
  .nav-toggle{display:none}
}

/* ---------- Wrapper y topbar (análisis) ---------- */
.wrap{max-width:960px;margin:0 auto;padding:16px}

.topbar{display:flex;align-items:center;gap:10px;margin:6px 0 12px}
.topbar .back{
  display:inline-grid;place-items:center;width:36px;height:36px;border-radius:12px;
  border:1px solid var(--border);background:var(--card);text-decoration:none;font-size:22px
}
.topbar h1{margin:0;font-size:22px}
.topbar .subttl{color:var(--muted);font-size:12px}
.topbar .actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Fichas / stats ---------- */
.head{padding:0 0 8px}
.title{font-weight:700}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;font-weight:700;border:1px solid var(--border)
}
.chip.buy{background:rgba(16,185,129,.12);color:var(--ok);border-color:rgba(16,185,129,.35)}
.chip.sell{background:rgba(239,68,68,.12);color:var(--bad);border-color:rgba(239,68,68,.35)}
.chip.hold{background:rgba(234,179,8,.12);color:var(--warn);border-color:rgba(234,179,8,.35)}

.stats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px
}
.kv{border:1px solid var(--border);border-radius:12px;background:var(--card);padding:10px}
.kv .k{font-size:12px;color:var(--muted)}
.kv .v{font-weight:700}
@media (min-width:560px){ .stats{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* ---------- Notas / bullets ---------- */
.notes{margin:10px 0 0 0;padding-left:20px}
.notes li{margin:6px 0}

/* ---------- Tabla ---------- */
.tablewrap{overflow:auto;border:1px solid var(--border);border-radius:12px;background:var(--card)}
table{width:100%;border-collapse:collapse;min-width:520px}
thead th{position:sticky;top:0;background:var(--card);color:var(--muted);font-weight:700}
th,td{padding:10px;border-bottom:1px solid var(--border);text-align:left}

/* ---------- Acciones: filtros, tabs, paginación ---------- */
header .right{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.switch{display:inline-flex;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.switch a{padding:8px 12px;color:var(--muted)}
.switch a.active{background:var(--accent);color:#fff}

.controls{display:flex;gap:10px;margin:12px 0}
.hint{margin:12px 0;color:var(--muted);font-size:12px}

.pag{display:flex;align-items:center;gap:8px;justify-content:center;margin:14px 0}
.pag .arrow,.pag a,.pag .cur,.pag .gap{
  padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--card)
}
.pag .cur{font-weight:700;border-color:var(--accent)}
.pag .arrow.disabled{opacity:.4;pointer-events:none}

/* ---------- Footer ---------- */
.foot-grid{display:flex;flex-direction:column;gap:6px}
@media (min-width:560px){ .foot-grid{flex-direction:row;justify-content:space-between} }