/* ============================================================
   SIDEBAR + NEWS TICKER COMPARTILHADOS — Asym Market
   Usado por platform-v4.html e market.html.

   Para alterar largura, edita --sidebar-w abaixo (afeta as duas páginas).
   ============================================================ */

:root{
  --sidebar-w:300px;
  --sidebar-gap:24px;
  --sidebar-collapsed-w:64px;
}

/* ── NEWS TICKER (estilo scoreboard amarelo, flat à la Fiady) ── */
.news-ticker{position:sticky;top:68px;z-index:91;background:linear-gradient(180deg,var(--ca-gold-light) 0%,var(--ca-gold) 100%);height:32px;overflow:hidden;display:flex;align-items:center;padding-left:var(--sidebar-w);transition:padding-left .25s cubic-bezier(.2,.7,.3,1);border-radius:0}
.news-ticker-track{display:flex;white-space:nowrap;animation:tickerScroll 90s linear infinite;will-change:transform}
.news-ticker-track:hover{animation-play-state:paused}
.ticker-item{display:inline-flex;align-items:center;padding:0 38px;font-size:12px;font-weight:800;color:#0a0a0a;letter-spacing:.6px;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:opacity .15s}
.ticker-item:hover{opacity:.7}
.ticker-item .tk-dot{display:none}
@keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── SIDEBAR FULL-HEIGHT (estilo Fiady) ── */
.sidebar{width:var(--sidebar-w);position:fixed;top:0;left:0;height:100vh;overflow-y:auto;padding:14px 14px 16px 18px;border-right:1px solid var(--ca-border-s);scrollbar-width:thin;scrollbar-color:var(--ca-border) transparent;background:var(--ca-bg-base);z-index:120;display:flex;flex-direction:column;transition:width .25s cubic-bezier(.2,.7,.3,1)}
.sidebar::-webkit-scrollbar{width:5px}
.sidebar::-webkit-scrollbar-thumb{background:var(--ca-border);border-radius:4px}
.sidebar-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 6px 14px;margin-bottom:8px;border-bottom:1px solid var(--ca-border-s)}
.sidebar-logo-link{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ca-text);font-weight:800;font-size:18px;flex:1;min-width:0;padding:0 4px}
.sidebar-logo-link .nav-logo-icon{width:32px;height:32px;flex-shrink:0;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 2px 12px rgba(124,58,237,.45))}
.sidebar-logo-link .nav-logo-icon svg{width:32px;height:32px}
.sidebar-logo-link .nav-logo-text{background:linear-gradient(90deg,#fff 0%,var(--ca-gold-light) 70%,var(--ca-gold) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-collapse-btn{position:relative;width:32px;height:32px;border-radius:8px;background:var(--ca-bg-elevated);border:1px solid var(--ca-border-s);color:var(--ca-text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;font-family:inherit;padding:0}
.sidebar-collapse-btn:hover{color:var(--ca-text);background:var(--ca-bg-overlay);border-color:var(--ca-border)}
.sidebar-collapse-btn svg{width:14px;height:14px;stroke-width:2.5;transition:transform .25s}
.sidebar.collapsed{width:var(--sidebar-collapsed-w);padding:16px 6px}
.sidebar.collapsed .sidebar-logo-link{display:none}
.sidebar.collapsed .sidebar-header{justify-content:center;padding:6px 0 14px}
.sidebar.collapsed .sidebar-collapse-btn svg{transform:rotate(180deg)}
.sidebar.collapsed .sidebar-section-title,
.sidebar.collapsed .cat-tab .cat-label,
.sidebar.collapsed .sidebar-bottom .cat-label{display:none}
.sidebar.collapsed .cat-tab{justify-content:center;padding:11px 6px}
.sidebar-section-title{font-size:10.5px;font-weight:700;letter-spacing:1.2px;color:var(--ca-text-4);text-transform:uppercase;padding:6px 12px 8px;margin-top:4px}
.sidebar-bottom{margin-top:auto;padding-top:14px;border-top:1px solid var(--ca-border-s);display:flex;flex-direction:column;gap:2px}

/* Cat tab styles (categorias) */
.cats-scroll-wrap{position:relative}
.cats-inner{display:flex;flex-direction:column;gap:2px}
.cats-arrow{display:none}
.cat-tab{position:relative;padding:11px 13px;background:transparent;border:1px solid var(--ca-border-s);cursor:pointer;font-family:inherit;font-weight:700;font-size:13px;color:var(--ca-text);display:flex;align-items:center;gap:11px;transition:all .15s cubic-bezier(.2,.7,.3,1);border-radius:10px;width:100%;text-align:left;text-decoration:none;margin:3px 0}
.cat-tab:hover{background:var(--ca-bg-elevated);border-color:var(--ca-border)}
.cat-tab.active{background:var(--ca-bg-elevated);color:var(--ca-text);font-weight:800;border-color:var(--ca-gold);box-shadow:0 0 0 1px var(--ca-gold),0 4px 14px rgba(124,58,237,.2)}
.cat-tab.active.green-underline{border-color:var(--ca-gold);box-shadow:0 0 0 1px var(--ca-gold),0 4px 14px rgba(124,58,237,.2)}
.cat-tab svg{width:16px;height:16px;stroke-width:2;flex-shrink:0;color:var(--ca-gold)}
.cat-tab .cat-label{flex:1}
.cat-tab .live-dot{display:none}
.cat-sep{height:8px;background:transparent;margin:0;width:auto;border:none}

/* Bottom items: texto puro sem box */
.sidebar-bottom .cat-tab{border:none;background:transparent;margin:0;padding:9px 13px;color:var(--ca-text-3);font-weight:700}
.sidebar-bottom .cat-tab:hover{background:var(--ca-bg-elevated);color:var(--ca-text)}
.sidebar-bottom .cat-tab svg{color:var(--ca-text-3)}
.sidebar-bottom .cat-tab:hover svg{color:var(--ca-text-2)}

/* Body class quando sidebar colapsado */
body.sidebar-collapsed .sidebar{width:var(--sidebar-collapsed-w);padding-left:8px;padding-right:8px}

/* Mobile: sidebar volta pra barra horizontal sticky no topo */
@media(max-width:900px){
  /* Sidebar/ticker mobile: usa offset -1px do top do nav pra forçar overlap
     subpixel-safe. Nav z-index 100 > ticker 91 > sidebar 90, então o overlap
     fica escondido por baixo do nav. Sem gap visível em nenhum zoom level. */
  .sidebar{width:100%;position:sticky;top:95px;left:auto;height:auto;overflow:visible;padding:0;border-right:none;border-bottom:1px solid var(--ca-border-s);z-index:90;flex-direction:column;background:var(--ca-bg-base)}
  body.no-news-ticker .sidebar{top:67px}
  .news-ticker{padding-left:0;top:67px;height:28px}
}
@media(max-width:720px){
  .sidebar{top:75px}                         /* nav 48 + ticker 28, -1 overlap */
  body.no-news-ticker .sidebar{top:47px}     /* nav 48, -1 overlap */
  .news-ticker{top:47px}                     /* nav 48, -1 overlap */
  .ticker-item{padding:0 22px;font-size:10.5px}
  body.sidebar-collapsed .sidebar{width:100%;padding:0}
  .cats-inner{flex-direction:row;overflow-x:auto;scrollbar-width:none;padding:0 14px;gap:0;scroll-behavior:smooth}
  .cats-inner::-webkit-scrollbar{display:none}
  /* Setas de scroll horizontal (aparecem condicionalmente via JS) */
  .cats-arrow{display:flex;align-items:center;justify-content:center;position:absolute;top:0;bottom:0;width:34px;background:linear-gradient(90deg,var(--ca-bg-base),var(--ca-bg-base) 55%,transparent);border:none;color:var(--ca-text);cursor:pointer;z-index:5;opacity:0;pointer-events:none;transition:opacity .15s;padding:0}
  .cats-arrow svg{width:18px;height:18px;stroke-width:2.5}
  .cats-arrow.show{opacity:1;pointer-events:auto}
  .cats-arrow-left{left:0;justify-content:flex-start;padding-left:4px}
  .cats-arrow-right{right:0;justify-content:flex-end;padding-right:4px;background:linear-gradient(270deg,var(--ca-bg-base),var(--ca-bg-base) 55%,transparent)}
  .cats-arrow:hover{color:var(--ca-gold)}
  .sidebar-section-title{display:none}
  .sidebar-bottom{display:none}
  .sidebar-collapse-btn{display:none}
  .sidebar-header{display:none}
  .cat-tab{border-radius:0;padding:14px 12px;width:auto;flex-shrink:0;background:none;white-space:nowrap;box-shadow:none;border:none;margin:0}
  .cat-tab:hover,.cat-tab.active{background:none;transform:none}
  .cat-tab.active{box-shadow:none;border:none;background:none}
  .cat-tab.active.green-underline{box-shadow:none;background:none;border:none}
  .cat-tab.active::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;background:var(--ca-text);border-radius:2px}
  .cat-tab.active.green-underline::after{background:var(--ca-green);box-shadow:0 0 10px var(--ca-green)}
  .cat-tab .cat-label{flex:0 0 auto}
}