/* =============================================
   NODOCITY MARKETPLACE - Features Extra
   Tooltips, Switch, Tour, Analytics, Alertas, IA
   ============================================= */

/* OVERLAYS - Display none garantizado */
#ndmAlertManagerOverlay,
#ndmAIOverlay,
#ndAnalyticsOverlay,
#nd-mode-explainer { display: none; }

/* Cuando JS agrega clase nd-open */
#ndmAlertManagerOverlay.nd-open,
#ndmAIOverlay.nd-open,
#ndAnalyticsOverlay.nd-open,
#nd-mode-explainer.nd-open {
    display: flex;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.85);
    z-index: 99999;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

/* Modales internos */
.ndm-alert-manager-modal,
.ndm-ai-modal,
.ndm-mymarket-modal,
.nd-analytics-modal,
.nd-expl-box {
    background: #111827;
    border: 1px solid #C9A84C;
    border-radius: 14px;
    padding: 24px;
    width: 100%;
    max-width: 780px;
    margin: auto;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}
.nd-analytics-modal { max-width: 1100px; background: #0A0E1A; }
.nd-expl-box { max-width: 620px; }

/* ---- ICONO TOOLTIP ---- */
.nd-tip-i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px; height: 15px;
    border-radius: 50%;
    border: 1.5px solid #C9A84C;
    color: #C9A84C;
    font-size: .65rem;
    font-weight: 700;
    font-style: normal;
    cursor: help;
    vertical-align: middle;
    margin-left: 3px;
    flex-shrink: 0;
    transition: all .2s;
    line-height: 1;
    user-select: none;
}
.nd-tip-i:hover { background: #C9A84C; color: #000; }

/* Tooltip CSS puro via data-tip */
[data-tip] { position: relative; }
[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #0a0e1a;
    color: #F1F5F9;
    font-size: .76rem;
    padding: 9px 13px;
    border-radius: 8px;
    width: max-content;
    max-width: 260px;
    text-align: left;
    z-index: 9999;
    border: 1px solid #C9A84C;
    box-shadow: 0 6px 20px rgba(0,0,0,.7);
    line-height: 1.5;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
    white-space: normal;
    font-weight: 400;
}
[data-tip]:hover::after { opacity: 1; }
[data-tip-right]::after { left: 0; transform: none; }
[data-tip-left]::after { left: auto; right: 0; transform: none; }

/* ---- GUÍA TOUR FAB ---- */
#nd-tour-fab {
    position: fixed;
    bottom: 90px; right: 16px;
    z-index: 9800;
    background: linear-gradient(135deg,#C9A84C,#F0C040);
    color: #000;
    border: none;
    border-radius: 50px;
    padding: 10px 16px;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(201,168,76,.5);
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
#nd-tour-fab:hover { transform: translateY(-2px); }

/* Tour spotlight */
#nd-tour-layer { position:fixed; inset:0; z-index:9850; pointer-events:none; display:none; }
#nd-tour-layer.active { display:block; }
#nd-tour-spot {
    position: absolute;
    border: 2px solid #F0C040;
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,.75);
    transition: all .35s ease;
}
#nd-tour-bubble {
    position: absolute;
    background: #111827;
    border: 1px solid #F0C040;
    border-radius: 12px;
    padding: 16px;
    width: 270px;
    pointer-events: all;
    z-index: 9860;
}
#nd-tour-bubble h4 { color:#F0C040; font-size:.88rem; margin-bottom:6px; }
#nd-tour-bubble p { color:#94A3B8; font-size:.79rem; line-height:1.5; margin-bottom:12px; }
.nd-tb-footer { display:flex; justify-content:space-between; align-items:center; }
.nd-tb-skip { background:none; border:none; color:#334155; cursor:pointer; font-size:.72rem; }
.nd-tb-next { background:#C9A84C; color:#000; border:none; padding:6px 14px; border-radius:6px; cursor:pointer; font-size:.78rem; font-weight:700; }
.nd-tb-prev { background:none; border:1px solid #334155; color:#94A3B8; padding:6px 10px; border-radius:6px; cursor:pointer; font-size:.78rem; }

/* ---- SWITCH MODO SIMPLE/AVANZADO ---- */
#nd-mode-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    background: #111827;
    border: 1px solid #1e2d45;
    border-radius: 10px;
    padding: 9px 14px;
    width: fit-content;
    flex-wrap: wrap;
}
.nd-mode-lbl { font-size:.8rem; font-weight:600; transition:color .2s; }
.nd-mode-lbl.on { color:#F0C040; }
.nd-mode-lbl.off { color:#94A3B8; }
.nd-sw { position:relative; display:inline-block; width:46px; height:24px; cursor:pointer; flex-shrink:0; }
.nd-sw input { opacity:0; width:0; height:0; }
.nd-sw-track { position:absolute; inset:0; background:#334155; border-radius:12px; transition:.3s; }
.nd-sw-track::before { content:''; position:absolute; height:18px; width:18px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.3s; }
.nd-sw input:checked + .nd-sw-track { background:#C9A84C; }
.nd-sw input:checked + .nd-sw-track::before { transform:translateX(22px); }
.nd-mode-help { background:none; border:1px solid #334155; color:#94A3B8; width:22px; height:22px; border-radius:50%; cursor:pointer; font-size:.75rem; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.nd-mode-help:hover { border-color:#C9A84C; color:#F0C040; }

body.nd-simple .nd-adv-only { display:none !important; }
body.nd-adv .nd-simple-only { display:none !important; }

/* Explainer */
.nd-expl-cols { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
@media(max-width:480px){ .nd-expl-cols{grid-template-columns:1fr} }
.nd-ec { border-radius:8px; padding:12px; }
.nd-ec.simple { background:rgba(34,197,94,.07); border:1px solid rgba(34,197,94,.3); }
.nd-ec.adv { background:rgba(6,182,212,.07); border:1px solid rgba(6,182,212,.3); }
.nd-ec h4 { font-size:.9rem; margin-bottom:8px; }
.nd-feat { font-size:.77rem; padding:2px 0; color:#94A3B8; }
.nd-feat.y { color:#F1F5F9; }
.nd-expl-btns { display:flex; gap:10px; }
.nd-expl-btns button { flex:1; padding:10px; border-radius:8px; font-weight:700; cursor:pointer; font-size:.85rem; border:none; }

/* ---- BOTONES ACCIÓN ---- */
#nd-action-bar { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
#nd-action-bar button {
    font-size:.78rem; padding:7px 14px; border-radius:8px; cursor:pointer;
    display:inline-flex; align-items:center; gap:5px; font-weight:600; transition:all .2s;
}
.nd-btn-gold { background:#C9A84C; color:#000; border:none; }
.nd-btn-gold:hover { background:#F0C040; }
.nd-btn-out { background:transparent; border:1px solid #C9A84C; color:#C9A84C; }
.nd-btn-out:hover { background:rgba(201,168,76,.15); }
.nd-btn-cyan { background:transparent; border:1px solid #06b6d4; color:#06b6d4; }
.nd-btn-cyan:hover { background:rgba(6,182,212,.1); }

/* ---- ALERTAS MANAGER ---- */
.ndm-auc-table { width:100%; border-collapse:collapse; font-size:.84rem; }
.ndm-auc-th { padding:9px 10px; text-align:left; font-size:.73rem; font-weight:700; color:#94A3B8; letter-spacing:.4px; text-transform:uppercase; border-bottom:2px solid #1e2d45; white-space:nowrap; }
.ndm-auc-td { padding:11px 10px; border-bottom:1px solid #1e2d45; vertical-align:middle; }
.ndm-auc-row:hover td { background:rgba(201,168,76,.03); }
.nd-toggle { position:relative; display:inline-block; width:40px; height:22px; cursor:pointer; }
.nd-toggle input { opacity:0; width:0; height:0; }
.nd-toggle-sl { position:absolute; inset:0; background:#334155; border-radius:11px; transition:.3s; }
.nd-toggle-sl::before { content:''; position:absolute; height:16px; width:16px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.3s; }
.nd-toggle input:checked + .nd-toggle-sl { background:#C9A84C; }
.nd-toggle input:checked + .nd-toggle-sl::before { transform:translateX(18px); }
.nd-alert-props { background:#0a0e1a; border:1px solid #1e2d45; border-radius:7px; max-height:180px; overflow-y:auto; margin-top:5px; }
.nd-ap-item { display:flex; align-items:center; gap:8px; padding:7px 10px; cursor:pointer; border-bottom:1px solid #1e2d45; font-size:.81rem; transition:background .15s; }
.nd-ap-item:last-child { border-bottom:none; }
.nd-ap-item:hover,.nd-ap-item.sel { background:rgba(201,168,76,.08); }
.nd-ap-cb { width:15px; height:15px; border:2px solid #334155; border-radius:3px; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all .2s; font-size:.6rem; color:#000; }
.nd-ap-item.sel .nd-ap-cb { background:#C9A84C; border-color:#C9A84C; }
.nd-ap-item.sel .nd-ap-cb::after { content:'✓'; }

/* ---- AI INVESTMENT ---- */
.nd-ai-card { background:#0a0e1a; border:1px solid #1e2d45; border-radius:9px; padding:14px; margin-bottom:12px; }
.nd-ai-step { font-size:.79rem; color:#94A3B8; padding:3px 0; }
.nd-ai-step::before { content:'✓ '; color:#C9A84C; }
.nd-ai-pulse { font-size:2.5rem; display:inline-block; animation:ndmPulse 1s infinite; }
.nd-ai-pane { }

/* ---- ANALYTICS ---- */
.nd-analytics-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
@media(max-width:768px){ .nd-analytics-grid{grid-template-columns:repeat(2,1fr)} }
.nd-kpi { background:#111827; border:1px solid #1e2d45; border-radius:9px; padding:12px; text-align:center; }
.nd-kpi:hover { border-color:#C9A84C; }
.nd-kpi-val { font-size:1.4rem; font-weight:700; color:#F0C040; display:block; }
.nd-kpi-lbl { font-size:.7rem; color:#94A3B8; margin-top:3px; }
.nd-kpi-d { font-size:.73rem; margin-top:3px; }
.nd-kpi-d.up { color:#22c55e; }
.nd-kpi-d.dn { color:#ef4444; }
.nd-ch-row { display:grid; grid-template-columns:2fr 1fr; gap:14px; margin-bottom:14px; }
.nd-ch-row2 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
@media(max-width:768px){ .nd-ch-row,.nd-ch-row2{grid-template-columns:1fr} }
.nd-ch-box { background:#111827; border:1px solid #1e2d45; border-radius:9px; padding:14px; }
.nd-ch-title { font-size:.78rem; font-weight:700; color:#C9A84C; margin-bottom:10px; display:flex; align-items:center; gap:5px; }
.nd-live-dot { width:6px; height:6px; background:#22c55e; border-radius:50%; animation:ndmPulse 1.5s infinite; }

/* ---- BUSCADOR DROPDOWN ---- */
.ndm-search-wrap { position:relative; }
.ndm-search-dropdown { position:absolute; top:100%; left:0; right:0; background:#111827; border:1px solid #1e2d45; border-top:none; border-radius:0 0 9px 9px; z-index:1000; max-height:260px; overflow-y:auto; box-shadow:0 8px 24px rgba(0,0,0,.5); }
.nd-si { display:flex; align-items:center; gap:9px; padding:9px 12px; cursor:pointer; border-bottom:1px solid #1e2d45; transition:background .15s; }
.nd-si:last-child { border-bottom:none; }
.nd-si:hover,.nd-si.sel { background:rgba(201,168,76,.1); }
.nd-si img { width:34px; height:34px; object-fit:cover; border-radius:5px; flex-shrink:0; }
.nd-si-no { width:34px; height:34px; background:#1a2235; border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:.9rem; }
.nd-si-n { font-size:.83rem; color:#F1F5F9; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nd-si-m { font-size:.71rem; color:#94A3B8; }
.nd-si-p { font-size:.83rem; font-weight:700; color:#F0C040; white-space:nowrap; }
.nd-si-ck { width:16px; height:16px; border:2px solid #334155; border-radius:3px; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.nd-si.sel .nd-si-ck { background:#C9A84C; border-color:#C9A84C; }
.nd-si.sel .nd-si-ck::after { content:'✓'; color:#000; font-size:.65rem; font-weight:900; }
.nd-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.nd-tag { background:rgba(201,168,76,.14); border:1px solid rgba(201,168,76,.3); color:#F0C040; padding:2px 9px; border-radius:20px; font-size:.73rem; display:flex; align-items:center; gap:4px; }
.nd-tag button { background:none; border:none; color:#94A3B8; cursor:pointer; font-size:.8rem; }
.nd-si-footer { font-size:.71rem; color:#94A3B8; padding:7px 12px; border-top:1px solid #1e2d45; display:flex; justify-content:space-between; align-items:center; }
.nd-si-all { background:none; border:none; color:#C9A84C; cursor:pointer; font-size:.78rem; font-weight:600; }