/* ── Legend panel: symbol reference popup from header counter ── */

.legend-panel{
  /* default hidden; JS sets display:flex to open */
  display:none;
  flex-direction:column;
  position:fixed;top:116px;right:16px;visibility:visible;pointer-events:auto;
  background:var(--color-white);border-radius:16px;
  box-shadow:0 12px 48px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.04);
  padding:0;z-index:9999;width:360px;
  font-size:13px;color:#374151;
  max-height:min(calc(100vh - 160px), 500px);
  overflow:hidden; /* clips children for border-radius; body scrolls internally */
  animation:legendIn .25s cubic-bezier(.2,0,.2,1);
}
@keyframes legendIn{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}

.legend-header{
  flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px 12px;
  background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-mid) 100%);
  color:var(--color-white);
  border-radius:16px 16px 0 0;
}
.legend-title{font-weight:700;font-size:14px;letter-spacing:-.01em}
.legend-close{background:none;border:none;color:rgba(255,255,255,.5);font-size:22px;cursor:pointer;padding:0 2px;line-height:1;transition:color .15s}
.legend-close:hover{color:var(--color-white)}

/* Scrollable body — internal scroll only, page doesn't move */
.legend-body{
  flex:1;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.legend-body::-webkit-scrollbar{width:4px}
.legend-body::-webkit-scrollbar-track{background:transparent}
.legend-body::-webkit-scrollbar-thumb{background:#D1D5DB;border-radius:4px}

.legend-section-label{
  font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--color-silver);padding:10px 16px 4px;
}

.legend-grid{
  display:flex;flex-direction:column;gap:0;
  padding:0 8px 6px;
}

/* Rows: purely informational, no hover/pointer */
.legend-row{
  display:flex;align-items:flex-start;gap:10px;
  padding:8px 8px;border-radius:10px;
}

.legend-ico{
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-top:2px;
}
.legend-ico img{
  max-height:42px;max-width:44px;
  object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.12));
}

.legend-ico-bola{width:50px;height:50px}
.legend-ico-bola img{max-height:48px;max-width:50px}

/* Name + description in column */
.legend-name-block{
  flex:1;
  min-width:0;
  overflow:hidden;
}
.legend-name{
  font-weight:600;font-size:13px;color:var(--color-primary);
  line-height:1.3;margin-bottom:3px;
}
.legend-desc{
  font-size:11px;color:var(--color-text-3);font-weight:400;
  line-height:1.5;
  word-break:break-word;
  overflow-wrap:break-word;
  white-space:normal;
}

.legend-cnt{
  font-weight:700;font-size:12px;flex-shrink:0;
  min-width:34px;text-align:right;padding-top:3px;
}

/* Section divider */
.legend-divider{
  height:1px;background:var(--color-neutral-bg);margin:4px 16px;
}

/* Bolas section intro text */
.legend-bolas-intro{
  padding:0 16px 6px;
  font-size:10px;color:var(--color-text-3);line-height:1.4;
}

/* Footer — sticks to bottom of panel */
.legend-footer{
  flex-shrink:0;
  font-size:10px;color:var(--color-silver);text-align:center;
  border-top:1px solid var(--color-neutral-bg);padding:8px 14px;
  background:#FAFAFA;
  border-radius:0 0 16px 16px;
}

/* Responsive — mobile: full-width, left edge adjusted */
@media(max-width:600px){
  .legend-panel{
    width:calc(100vw - 24px);
    right:-8px;
    max-height:min(calc(100vh - 180px), 460px);
  }
}