/* ==== Estilos base y layout limpio, responsive ==== */
    :root{
      --bg:#0b1220;          /* fondo oscuro elegante */
      --card:#121a2b;        /* tarjetas */
      --ink:#e7eefc;         /* texto principal */
      --muted:#aab8d8;       /* texto secundario */
      --accent:#5eead4;      /* menta */
      --accent2:#93c5fd;     /* azul claro */
      --danger:#f87171;      /* rojo */
      --warn:#fbbf24;        /* ámbar */
      --ok:#34d399;          /* verde */
      --border:#1f2b47;
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji"}
    h1,h2,h3{margin:0 0 .4rem 0}
    a{color:var(--accent2)}
.container { display:flex; height:100vh; }
.sidebar { width:300px; border-right:1px solid #ccc; overflow-y:auto; padding:10px; }
.main-content { flex:1; padding:20px; overflow-y:auto; }
.add-symbol, .filter-symbol { margin-bottom:10px; position:relative; }
.suggestions {
    position: absolute;
    z-index: 9;
    top: 100%;
    left: 0;
    right: 0;
    background: #1a1a1a; /* fondo oscuro */
    border: 1px solid #444; /* borde más visible en oscuro */
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 150px;
    overflow-y: auto;
}

#suggestions li {
    padding: 5px;
    cursor: pointer;
    color: #ffffff; /* texto blanco */
}

/* Opcional: hover más visible */
#suggestions li:hover {
    background: #333;
}
.category { margin-bottom:10px; }
.category-header { font-weight:bold; cursor:pointer; }
.symbol-item { display:flex; justify-content:space-between; padding:2px 0; cursor:pointer; }
.symbol-item:hover { background:#eef; }
.symbol-item .delete { color:red; cursor:pointer; margin-left:5px; }
.hidden { display:none; }
    header{
      position:sticky;top:0;z-index:10;
      background:linear-gradient(180deg,rgba(11,18,32,.95),rgba(11,18,32,.7));
      backdrop-filter: blur(6px);
      border-bottom:1px solid var(--border);
    }
    .wrap{max-width:1200px;margin:0 auto;padding:18px}
    .row{display:grid;gap:16px}
    .row.cols-3{grid-template-columns:repeat(3,1fr)}
    .row.cols-2{grid-template-columns:repeat(2,1fr)}
    @media (max-width: 980px){
      .row.cols-3{grid-template-columns:1fr}
      .row.cols-2{grid-template-columns:1fr}
    }
    .card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:0 4px 16px rgba(0,0,0,.2)}
    .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
    @media (max-width: 980px){.kpis{grid-template-columns:1fr 1fr}}
    .kpi{background:#0e1728;border:1px dashed var(--border);border-radius:14px;padding:12px}
    .kpi .label{font-size:.85rem;color:var(--muted)}
    .kpi .value{font-size:1.4rem;font-weight:700}
    .kpi .sub{font-size:.9rem;color:var(--muted)}

    .toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
    .toolbar select,.toolbar button,.toolbar input{
      background:#0e1728;color:var(--ink);border:1px solid var(--border);
      padding:10px 12px;border-radius:10px;font-size:.95rem
    }
    .toolbar button{cursor:pointer}
    .badge{display:inline-block;padding:.2rem .5rem;border-radius:999px;font-size:.8rem;font-weight:600}
    .b-ok{background:rgba(52,211,153,.12);border:1px solid var(--ok);color:var(--ok)}
    .b-warn{background:rgba(251,191,36,.12);border:1px solid var(--warn);color:var(--warn)}
    .b-bad{background:rgba(248,113,113,.12);border:1px solid var(--danger);color:var(--danger)}

    .grid-2{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
    @media (max-width: 980px){.grid-2{grid-template-columns:1fr}}
    .muted{color:var(--muted)}
    .lead{font-size:1.05rem;color:var(--muted)}
    .small{font-size:.9rem;color:var(--muted)}
    .section-title{display:flex;align-items:center;gap:10px;margin-bottom:8px}
    .pill{background:#091226;border:1px solid var(--border);padding:.25rem .6rem;border-radius:999px;color:var(--muted);font-size:.8rem}
    .hr{height:1px;background:var(--border);margin:14px 0}
    .list{margin:0;padding-left:1.1rem}
    .foot{opacity:.8;font-size:.85rem}
    canvas{max-height:400px}