body { background: var(--bg); font-family: var(--font); color: var(--text1); min-height: 100vh; }

/* Navbar */
.qnav { display:flex; align-items:center; justify-content:space-between; padding:0 20px; height:52px; background:var(--surface); border-bottom:.5px solid var(--border); }
.qlogo { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:500; color:var(--text1); }
.qlogo-dot { width:10px; height:10px; border-radius:50%; background:#FF5722; flex-shrink:0; }
.qtabs { display:flex; background:var(--surface2); border-radius:10px; padding:3px; gap:2px; border:.5px solid var(--border); }
.qtab { padding:5px 16px; border-radius:7px; font-size:14px; color:var(--text3); cursor:pointer; border:none; background:transparent; font-family:var(--font); transition:color .15s; }
.qtab.active { background:var(--primary-container); color:var(--on-primary-container); font-weight:600; }
.qnav-right { display:flex; align-items:center; gap:12px; }
.qlive { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text2); }
.qlive-dot { width:7px; height:7px; border-radius:50%; background:#4CAF50; flex-shrink:0; }
.qbtn { width:32px; height:32px; border-radius:8px; border:.5px solid var(--border); background:var(--surface2); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text2); }

/* Timebar */
.qtimebar { display:flex; align-items:center; justify-content:space-between; padding:0 20px; height:44px; background:var(--surface); border-bottom:.5px solid var(--border); }
.qwlabel { font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--text3); margin-right:12px; }
.qwindow-tabs { display:flex; align-items:center; gap:2px; }
.qwt { padding:4px 11px; border-radius:6px; font-size:12px; color:var(--text3); cursor:pointer; border:none; background:transparent; font-family:var(--font); }
.qwt.active { background:transparent; color:var(--primary); font-weight:600; }
.qrange { font-size:11px; color:var(--text3); }
.qsnap { display:flex; align-items:center; gap:6px; padding:5px 12px; border-radius:8px; border:.5px solid var(--border); background:var(--surface2); font-size:11px; font-weight:500; color:var(--text2); cursor:pointer; font-family:var(--font); }
.qsnap-dot { width:6px; height:6px; border-radius:50%; background:var(--primary); flex-shrink:0; }
.qsnap:disabled { opacity:0.45; cursor:not-allowed; }

/* Layout */
.qcontent { padding:14px 20px 24px; }
.qgrid2  { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.qstats  { display:flex; flex-wrap:wrap; gap:10px 24px; background:var(--surface); border-radius:16px;
           border:.5px solid var(--border); padding:16px 20px; margin-bottom:14px; }
.qstat      { display:flex; flex-direction:column; gap:3px; min-width:120px; }
.qstat-lbl  { font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--text3); }
.qstat-val  { font-size:15px; font-weight:500; color:var(--text1); }

/* Topbar comprimido */
.qtopbar { display:flex; align-items:center; background:var(--surface); border:.5px solid var(--border); border-radius:16px; padding:10px 16px; margin-bottom:14px; flex-wrap:wrap; gap:4px 0; }
.qtopbar-item { display:flex; align-items:center; gap:6px; padding:0 14px; }
.qtopbar-item:first-child { padding-left:0; }
.qtopbar-lbl { font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--text3); }
.qtopbar-val { font-size:14px; font-weight:500; color:var(--text1); }
.qtopbar-sub { font-size:11px; color:var(--text3); }
.qtopbar-sep { width:.5px; height:20px; background:var(--border); flex-shrink:0; }

/* Veredicto global */
.qveredicto { margin-bottom:14px; border-left:6px solid transparent; }

/* Barras Narrativas */
.qbars { display:flex; flex-direction:column; gap:10px; margin-bottom:4px; }
.qbar-row { display:flex; flex-direction:column; gap:4px; }
.qbar-sep { height:.5px; background:var(--border); margin:4px 0 6px; }
.qbar-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.qbar-name { font-size:13px; font-weight:500; color:var(--text1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qbar-name.muted { color:var(--text3); }
.qbar-chips { display:flex; gap:4px; flex-shrink:0; }
.qbar-chip { font-size:11px; font-weight:500; padding:2px 7px; border-radius:20px; white-space:nowrap; }
.qbar-track { width:100%; height:5px; background:var(--surface2); border-radius:3px; overflow:hidden; }
.qbar-fill { height:100%; border-radius:3px; transition:width .4s ease; }
.qbar-rationale { font-size:13px; color:var(--text3); line-height:1.45; padding-top:1px; }

/* Cards */
.qcard { background:var(--surface); border-radius:20px; border:.5px solid var(--border); padding:18px; position:relative; }
.qcard-lbl { font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--text3); margin-bottom:5px; }
.qcard-title { font-size:16px; font-weight:600; color:var(--text1); margin-bottom:14px; line-height:1.45; }
.qcard-note { font-size:11px; color:var(--text3); margin-top:10px; padding:7px 10px; background:var(--surface2); border-radius:8px; line-height:1.5; }
.qcard-footer { font-size:11px; color:var(--text3); margin-top:10px; padding-top:10px; border-top:.5px solid var(--border); }

/* Arc filter buttons */
.qarc-filter.active { background:var(--primary); color:var(--on-primary); font-weight:500; }

/* Veredicto pill */
.qverdict { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:500; padding:3px 10px; border-radius:20px; }

/* Leyenda narrativas */
.qleg-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; }
.qleg-dot { width:9px; height:9px; border-radius:2px; flex-shrink:0; }
.qleg-name { font-size:12px; color:var(--text2); margin-left:7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qleg-tag { font-size:11px; font-weight:500; padding:2px 7px; border-radius:20px; white-space:nowrap; margin-left:6px; }

/* Word cloud */
.qwc { position:relative; width:100%; height:170px; overflow:hidden; }
.qwc span { position:absolute; line-height:1; cursor:default; white-space:nowrap; }

/* Timeline */
.qtimeline { display:flex; flex-direction:column; }
.qtevent { display:flex; gap:14px; padding-bottom:18px; }
.qtevent:last-child { padding-bottom:0; }
.qtl-left { display:flex; flex-direction:column; align-items:center; width:38px; flex-shrink:0; }
.qtl-time { font-size:11px; color:var(--text3); white-space:nowrap; margin-bottom:5px; text-align:right; width:100%; }
.qtl-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.qtl-line { width:1px; flex:1; background:var(--border); margin-top:4px; }
.qtevent:last-child .qtl-line { display:none; }
.qtl-title { font-size:14px; font-weight:500; color:var(--text1); margin-bottom:2px; }
.qtl-sub { font-size:13px; color:var(--text3); line-height:1.4; }
.qtl-quote { font-size:13px; margin-top:4px; font-style:italic; }

/* Emisoras */
.qstream-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.qstream { background:var(--surface); border-radius:16px; border:.5px solid var(--border); padding:14px; }
.qstream-name { font-size:14px; font-weight:500; color:var(--text1); margin-bottom:2px; display:flex; align-items:center; gap:6px; }
.qstream-region { font-size:12px; color:var(--text3); margin-bottom:10px; }
.qstream-row { display:flex; justify-content:space-between; font-size:12px; margin-bottom:4px; }
.qstream-key { color:var(--text3); }
.qstream-val { font-weight:500; color:var(--text1); }

/* Filtros elaborados Tab Contexto */
.qfilters { background:var(--surface2); border-radius:12px; padding:16px; margin-bottom:16px; border:1px solid var(--border); }
.qfilters-row { display:flex; flex-wrap:wrap; gap:16px 20px; align-items:flex-end; }
.qfilter-group { display:flex; flex-direction:column; gap:6px; min-width:120px; }
.qfilter-label { font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--text3); }

/* Chips estado */
.qfilter-chips { display:flex; gap:6px; flex-wrap:wrap; }
.qchip { font-size:11px; padding:4px 10px; border-radius:20px; cursor:pointer; border:1px solid var(--border); background:var(--surface); color:var(--text2); transition:all .2s ease; font-family:var(--font); }
.qchip:hover { background:var(--surface2); }
.qchip.active { background:var(--primary); color:var(--on-primary); border-color:var(--primary); }

/* Date inputs */
.qfilter-date { display:flex; align-items:center; }
.qdate-input { padding:6px 8px; border:1px solid var(--border); border-radius:6px; background:var(--surface); color:var(--text1); font-size:11px; font-family:var(--mono); width:110px; }
.qdate-input:focus { outline:none; border-color:var(--text2); }

/* Selects */
.qselect { padding:6px 8px; border:1px solid var(--border); border-radius:6px; background:var(--surface); color:var(--text1); font-size:11px; font-family:var(--font); min-width:130px; cursor:pointer; }
.qselect:focus { outline:none; border-color:var(--text2); }

/* Filtros activos */
.qfilters-active { display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
.qactive-chips { display:flex; gap:6px; flex-wrap:wrap; }
.qactive-chip { font-size:11px; padding:3px 8px; border-radius:12px; background:var(--primary); color:var(--on-primary); display:flex; align-items:center; gap:4px; }
.qreset-btn { font-size:11px; padding:4px 8px; border:1px solid var(--border); border-radius:6px; background:var(--surface); color:var(--text3); cursor:pointer; display:flex; align-items:center; gap:4px; font-family:var(--font); }
.qreset-btn:hover { background:var(--surface2); color:var(--text2); }

/* F4: Skeleton loading */
.qarc-skeleton { background:var(--surface); border-radius:12px; padding:16px; margin-bottom:12px; }
.qarc-skeleton-header { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.qarc-skeleton-dot { width:10px; height:10px; border-radius:50%; background:var(--surface2); flex-shrink:0; animation:skeleton-pulse 1.5s ease-in-out infinite; }
.qarc-skeleton-title { height:14px; background:var(--surface2); border-radius:4px; flex:1; animation:skeleton-pulse 1.5s ease-in-out infinite 0.2s; }
.qarc-skeleton-badge { width:60px; height:12px; background:var(--surface2); border-radius:6px; animation:skeleton-pulse 1.5s ease-in-out infinite 0.4s; }
.qarc-skeleton-content { height:8px; background:var(--surface2); border-radius:4px; width:75%; animation:skeleton-pulse 1.5s ease-in-out infinite 0.6s; }

@keyframes skeleton-pulse {
  0%, 100% { opacity:1; }
  50% { opacity:0.4; }
}

/* F4: Empty states */
.qarcs-empty { display:flex; flex-direction:column; align-items:center; text-align:center; padding:40px 20px; }
.qarcs-empty svg { margin-bottom:16px; }
.qarcs-empty-title { font-size:14px; font-weight:500; color:var(--text2); margin-bottom:6px; }
.qarcs-empty-text { font-size:12px; color:var(--text3); line-height:1.4; }

.qarcs-error { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text3); padding:16px; justify-content:center; }

/* F4: Transiciones suaves */
#narrative-arcs-list { transition:opacity .3s ease; }
#advanced-filters { transition:all .3s ease; }
.qfilters-active { transition:all .2s ease; }

/* Dropdown custom de temas */
.qdd-wrap  { position:relative; display:inline-block; }
.qdd-btn   { background:var(--surface2); border:.5px solid var(--border); border-radius:8px;
             padding:6px 10px; font-size:12px; color:var(--text2); cursor:pointer;
             font-family:var(--font); min-width:180px; text-align:left; }
.qdd-btn:hover { background:var(--surface); }
.qdd-menu  { position:absolute; top:calc(100% + 4px); left:0; background:var(--surface);
             border:.5px solid var(--border); border-radius:10px; padding:4px; z-index:10;
             display:none; min-width:200px; box-shadow:0 4px 16px rgba(0,0,0,.12); }
.qdd-menu.open { display:block; }
.qdd-opt   { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:8px;
             font-size:12px; cursor:pointer; color:var(--text2); }
.qdd-opt:hover { background:var(--surface2); }
.qdd-opt.sel   { background:var(--surface2); color:var(--text1); font-weight:500; }

/* Tags / chips de contenido (keywords, badges, urgencia) */
.qtag { display:inline-block; background:var(--chip-bg); color:var(--chip-fg);
        border-radius:6px; padding:2px 8px; font-size:11px; font-family:var(--font); }

/* Sparkline eje X */
.qtrend-axis .domain          { display: none; }
.qtrend-axis .tick line       { stroke: var(--border); }
.qtrend-axis .tick text       { fill: var(--text2); font-size: 11px; font-family: var(--font); }

/* Responsive */
@media (max-width: 768px) {
  .qfilters-row { flex-direction:column; align-items:stretch; }
  .qfilter-group { min-width:auto; }
  .qfilter-date { justify-content:space-between; }
  .qdate-input { width:45%; }
  .qselect { width:100%; }
  .qarcs-empty { padding:30px 16px; }
}