/* dashboard.css — "Is SPCX Up?" v3 — Terminal / quant aesthetic
   Serio, técnico, denso. Dark-first; light vía [data-theme="light"].
   Fuentes: Space Grotesk (display) · Inter (UI) · JetBrains Mono (datos). */

:root, [data-theme="dark"] {
  --bg: #0a0b0e;
  --panel: #101218;
  --panel-2: #14161d;
  --panel-3: #191c25;
  --border: rgba(255,255,255,.07);
  --border-2: rgba(255,255,255,.12);
  --hair: rgba(255,255,255,.05);
  --text: #e7e9ee;
  --text-muted: #8b909c;
  --text-faint: #565b67;
  --accent: #5b8cff;
  --accent-soft: rgba(91,140,255,.14);
  --up: #00d68f;
  --up-soft: rgba(0,214,143,.12);
  --down: #ff4d6d;
  --down-soft: rgba(255,77,109,.12);
  --grid-line: rgba(255,255,255,.045);
  --radius: 14px;
  --radius-sm: 9px;
  --maxw: 1200px;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
[data-theme="light"] {
  --bg: #f7f8fa;
  --panel: #ffffff;
  --panel-2: #f3f4f7;
  --panel-3: #eceef2;
  --border: rgba(10,15,30,.10);
  --border-2: rgba(10,15,30,.16);
  --hair: rgba(10,15,30,.06);
  --text: #0c0f17;
  --text-muted: #5a6072;
  --text-faint: #9298a8;
  --accent: #2f6bff;
  --accent-soft: rgba(47,107,255,.10);
  --up: #00955f;
  --up-soft: rgba(0,149,95,.10);
  --down: #e02749;
  --down-soft: rgba(224,39,73,.09);
  --grid-line: rgba(10,15,30,.06);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden;
  transition: background .3s ease, color .3s ease;
}
/* malla técnica muy sutil de fondo */
body::before {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:1;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px; -webkit-mask-image: radial-gradient(circle at 50% 0%, #000, transparent 75%); mask-image: radial-gradient(circle at 50% 0%, #000, transparent 75%);
}
h1,h2,h3,.display,.q-symbol,.brand-name { font-family: "Space Grotesk", "Inter", sans-serif; font-weight: 600; letter-spacing: -.01em; }
.mono, .q-price, .q-change, .stat-v, .kpi-value, .ticker-updated, .q-updated { font-family: var(--mono); font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration: none; }
.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; position:relative; z-index:1; }
.wrap.narrow { max-width:760px; }
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
.skip-link{position:absolute;left:-9999px;} .skip-link:focus{left:12px;top:12px;background:var(--panel-2);padding:10px 14px;border-radius:8px;z-index:99;}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border);}
.header-inner{display:flex;align-items:center;gap:18px;height:60px;}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);}
.brand-logo{flex:none;width:30px;height:30px;}
.brand-name{font-size:1.05rem;font-weight:600;letter-spacing:-.02em;}
.brand-name strong{color:var(--accent);font-weight:600;}
.brand-q{color:var(--text-faint);}
.primary-nav{margin-left:auto;}
.primary-nav .menu{display:flex;gap:24px;list-style:none;margin:0;padding:0;}
.primary-nav a{color:var(--text-muted);font-size:.9rem;font-weight:500;transition:color .2s;}
.primary-nav a:hover{color:var(--text);}
.header-controls{display:flex;align-items:center;gap:8px;margin-left:14px;}
.lang-switch{display:inline-flex;align-items:center;background:var(--panel-2);border:1px solid var(--border);border-radius:8px;padding:3px;cursor:pointer;font:600 .76rem var(--mono);}
.lang-switch span{padding:4px 9px;border-radius:6px;color:var(--text-faint);transition:all .2s;line-height:1;}
.lang-switch .is-active{background:var(--accent);color:#fff;}
.lang-switch .lang-sep{display:none;}
.ctrl-icon{background:var(--panel-2);border:1px solid var(--border);color:var(--text-muted);border-radius:8px;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:color .2s,border-color .2s;}
.ctrl-icon:hover{color:var(--text);border-color:var(--border-2);}
.icon-moon{display:none;} [data-theme="light"] .icon-sun{display:none;} [data-theme="light"] .icon-moon{display:inline;}

/* ---------- Quote header (hero) ---------- */
.quote{padding:34px 0 8px;}
.quote-panel{border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(180deg,var(--panel),var(--panel-2));overflow:hidden;}
.quote-grid{display:grid;grid-template-columns:1.1fr 1fr;}
.quote-id{padding:26px 28px;border-right:1px solid var(--border);}
.q-symbol-row{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.q-symbol{font-size:1.5rem;letter-spacing:.02em;}
.q-exch{font:600 .68rem var(--mono);color:var(--text-faint);border:1px solid var(--border);padding:3px 7px;border-radius:5px;letter-spacing:.08em;}
.market-badge{font:600 .68rem var(--mono);padding:3px 9px;border-radius:999px;border:1px solid var(--border);letter-spacing:.06em;display:inline-flex;align-items:center;gap:6px;}
.market-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--text-faint);}
.market-badge.open{color:var(--up);border-color:color-mix(in srgb,var(--up) 45%,transparent);}
.market-badge.open::before{background:var(--up);box-shadow:0 0 0 3px var(--up-soft);animation:pulse 2s infinite;}
.market-badge.closed{color:var(--text-muted);}
.market-badge.pre,.market-badge.post{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);}
.market-badge.pre::before,.market-badge.post::before{background:var(--accent);}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--up-soft);}50%{box-shadow:0 0 0 5px transparent;}}
.q-name{color:var(--text-muted);font-size:.86rem;margin:0 0 20px;}
.q-price-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;}
.q-price{font-size:clamp(2.6rem,6vw,3.8rem);font-weight:500;line-height:1;letter-spacing:-.02em;}
.q-change{font-size:1.05rem;font-weight:500;padding:5px 11px;border-radius:7px;display:inline-flex;align-items:center;gap:6px;}
.q-change.is-up{color:var(--up);background:var(--up-soft);}
.q-change.is-down{color:var(--down);background:var(--down-soft);}
.q-change .arrow{font-size:.85em;}
.q-updated{color:var(--text-faint);font-size:.78rem;margin:16px 0 0;}

/* stats tipo terminal */
.quote-stats{display:grid;grid-template-columns:repeat(2,1fr);}
.stat{padding:16px 22px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);}
.stat:nth-child(2n){border-right:none;}
.stat:nth-last-child(-n+2){border-bottom:none;}
.stat-l{display:block;color:var(--text-faint);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:5px;}
.stat-v{font-size:1.12rem;font-weight:500;}

/* ---------- Sections ---------- */
.chart-section,.news-section,.faq-section{padding:26px 0;}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;}
.section-head h2{font-size:1.15rem;margin:0;font-weight:600;}
.eyebrow{color:var(--text-faint);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.68rem;font-family:var(--mono);}
.section-head .titles{display:flex;flex-direction:column;gap:3px;}
.range-pills{display:flex;gap:2px;background:var(--panel-2);border:1px solid var(--border);border-radius:8px;padding:3px;}
.pill{background:transparent;border:none;color:var(--text-muted);border-radius:6px;padding:6px 13px;font:600 .76rem var(--mono);cursor:pointer;transition:all .15s;letter-spacing:.02em;}
.pill:hover{color:var(--text);}
.pill.is-active{color:#fff;background:var(--accent);}

/* ---------- Chart ---------- */
.chart-wrap{position:relative;height:440px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px 18px 14px;overflow:hidden;}
.chart-wrap canvas{position:relative;z-index:1;}
.mars{position:absolute;top:16px;left:18px;width:118px;height:118px;z-index:0;opacity:.9;pointer-events:none;filter:drop-shadow(0 10px 34px rgba(255,90,40,.22));}
@media(max-width:560px){.mars{width:74px;height:74px;top:12px;left:12px;}}
.chart-overlay{position:absolute;inset:18px;border-radius:10px;display:none;}
.chart-wrap[data-state="loading"] .chart-overlay{display:block;}
.chart-wrap[data-state="loading"] canvas{opacity:0;}
.chart-error{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;}
.chart-wrap[data-state="error"] .chart-error{display:flex;}
.chart-wrap[data-state="error"] canvas{opacity:0;}
.chart-nodata{position:absolute;inset:0;display:none;align-items:center;justify-content:center;text-align:center;padding:0 40px;}
.chart-nodata p{color:var(--text-muted);max-width:46ch;font-size:.95rem;}
.chart-wrap[data-state="nodata"] .chart-nodata{display:flex;}
.chart-wrap[data-state="nodata"] canvas{opacity:0;}
.btn-retry{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:10px 20px;font:600 .85rem "Inter";cursor:pointer;}

/* ---------- KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-top:16px;}
.kpi{background:var(--panel);padding:18px 20px;}
.kpi-label{display:block;color:var(--text-faint);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:7px;}
.kpi-value{font-size:1.4rem;font-weight:500;}
.kpi-value.is-up{color:var(--up);} .kpi-value.is-down{color:var(--down);}

/* ---------- News (lista tipo feed) ---------- */
.news-intro{color:var(--text-muted);font-size:.92rem;max-width:70ch;margin:0 0 14px;}
.news-disclaimer{color:var(--text-faint);font:.74rem var(--mono);margin:12px 2px 0;}
.news-list{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--panel);}
.news-row{display:grid;grid-template-columns:54px 108px 1fr 188px;align-items:center;gap:16px;padding:15px 20px;border-bottom:1px solid var(--border);color:var(--text);transition:background .15s;}
.news-row:last-child{border-bottom:none;}
.news-row:hover{background:var(--panel-2);}
.news-time{font:600 .76rem var(--mono);color:var(--text-faint);}
.news-source{font:600 .72rem var(--mono);color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.news-headline{font-size:.96rem;font-weight:500;line-height:1.4;}
/* análisis de impacto */
.news-signal{display:flex;flex-direction:column;gap:5px;min-width:0;}
.sig-cat{font:700 .6rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);}
.sig-read{display:flex;align-items:center;justify-content:space-between;gap:8px;font:700 .76rem var(--mono);}
.sig-score{color:var(--text-muted);}
.sig-bar{height:4px;border-radius:999px;background:var(--panel-3);overflow:hidden;}
.sig-bar>span{display:block;height:100%;border-radius:999px;background:var(--text-muted);}
.news-row.dir-bull .sig-dir{color:var(--up);} .news-row.dir-bull .sig-bar>span{background:var(--up);}
.news-row.dir-bear .sig-dir{color:var(--down);} .news-row.dir-bear .sig-bar>span{background:var(--down);}
.news-row.dir-neutral .sig-dir{color:var(--accent);} .news-row.dir-neutral .sig-bar>span{background:var(--accent);}
.news-empty{color:var(--text-muted);text-align:center;padding:34px;border:1px dashed var(--border);border-radius:var(--radius);}
.news-list[data-state="loading"] .news-skel{height:18px;margin:18px 20px;border-radius:5px;}

/* ---------- FAQ ---------- */
.faq-section h2{margin-bottom:14px;}
.faq details{border:1px solid var(--border);border-radius:var(--radius-sm);padding:15px 18px;margin-bottom:9px;background:var(--panel);}
.faq summary{cursor:pointer;font-weight:600;}
.faq p{color:var(--text-muted);margin:10px 0 0;}

/* ---------- Skeletons ---------- */
.skeleton{position:relative;overflow:hidden;background:var(--panel-2);}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--text) 8%,transparent),transparent);animation:shimmer 1.4s infinite;}
@keyframes shimmer{100%{transform:translateX(100%);}}
.news-list[data-state="ready"] .news-skel,.news-list[data-state="empty"] .news-skel{display:none;}

/* ---------- Content (blog/pages) ---------- */
.content-area{padding:50px 0;}
.page-head{margin-bottom:26px;}
.page-title{font-size:clamp(1.9rem,4vw,2.6rem);margin:0 0 6px;}
.post-item{padding:22px 0;border-bottom:1px solid var(--border);}
.post-item-title{font-size:1.35rem;margin:0 0 6px;}
.post-item-title a:hover{color:var(--accent);}
.post-item-meta{color:var(--text-faint);font:.8rem var(--mono);margin:0 0 10px;}
.read-more{color:var(--accent);font-weight:600;}
.post-body{font-size:1.04rem;} .post-body p{margin:0 0 1.1em;}
.post-thumb img{width:100%;height:auto;border-radius:12px;margin-bottom:20px;}
.page-404{text-align:center;padding:80px 0;}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--border);margin-top:44px;background:var(--panel);}
.footer-inner{display:grid;grid-template-columns:1.5fr 1fr;gap:34px;padding:42px 24px 24px;}
.footer-brand{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:1.15rem;}
.footer-note{color:var(--text-muted);font-size:.88rem;margin:8px 0 0;max-width:44ch;}
.footer-sources{color:var(--text-faint);font:.78rem var(--mono);margin-top:10px;}
.footer-kicker{color:var(--text-faint);font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;}
.footer-finheroe{display:inline-block;margin:6px 0;font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:1.2rem;color:var(--accent);}
.footer-finheroe:hover{opacity:.85;}
.footer-bottom{padding:15px 24px 30px;color:var(--text-faint);font:.78rem var(--mono);border-top:1px solid var(--border);}

/* ---------- Responsive ---------- */
@media (max-width:880px){
  .quote-grid{grid-template-columns:1fr;}
  .quote-id{border-right:none;border-bottom:1px solid var(--border);}
  .footer-inner{grid-template-columns:1fr;}
  .kpis{grid-template-columns:1fr;}
  .news-row{grid-template-columns:54px 1fr;grid-template-areas:"time source" "head head" "sig sig";gap:8px 14px;}
  .news-time{grid-area:time;} .news-source{grid-area:source;} .news-headline{grid-area:head;} .news-signal{grid-area:sig;}
}
@media (max-width:560px){
  .primary-nav{display:none;}
  .section-head{flex-direction:column;align-items:flex-start;}
  .chart-wrap{height:340px;}
  .quote-stats{grid-template-columns:1fr 1fr;}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}