/* Marketing Hub additions on top of the shared Zoom Social Manager app.css (same tokens). */
.nav__sep { height: 1px; background: rgba(255,255,255,.12); margin: .5rem .75rem; list-style: none; }
.kpi__value--na { color: var(--c-muted); }
.delta { font-size: .8rem; font-weight: 600; }
.delta--up { color: var(--c-ok); }
.delta--down { color: var(--c-bad); }
.delta--flat, .delta--na { color: var(--c-muted); font-weight: 400; }

.bchip { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 600; background: #eef1f6; color: var(--c-ink-2); white-space: nowrap; }
.bchip--tokozoom { background: #e8efff; color: #1f4fbf; }
.bchip--gesindo { background: #e5f5ec; color: #146a39; }

.role--super_admin { background: var(--c-brand); color: #fff; }
.role--marketing_manager { background: var(--c-accent-50); color: var(--c-accent); }
.role--marketing_staff { background: var(--c-ok-50); color: var(--c-ok); }
.role--customer_service { background: var(--c-warn-50); color: var(--c-warn); }

.stage, .cstatus { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; background: #eef1f6; color: var(--c-ink-2); white-space: nowrap; }
.stage--new { background: var(--c-info-50); color: var(--c-info); }
.stage--contacted { background: #f1ecff; color: #5b3cc4; }
.stage--qualified { background: var(--c-warn-50); color: var(--c-warn); }
.stage--negotiation { background: #fff0e6; color: #b24a00; }
.stage--won, .cstatus--active { background: var(--c-ok-50); color: var(--c-ok); }
.stage--lost, .cstatus--cancelled { background: var(--c-bad-50); color: var(--c-bad); }
.cstatus--planned { background: var(--c-info-50); color: var(--c-info); }
.cstatus--paused { background: var(--c-warn-50); color: var(--c-warn); }

.svgchart { width: 100%; height: 220px; display: block; }
.svgchart__bar { fill: var(--c-accent); }
.svgchart__prev { fill: var(--c-line-2); }
.svgchart__axis { stroke: var(--c-line-2); stroke-width: 1; }
.svgchart__label { fill: var(--c-muted); font-size: 11px; }
.legend { font-size: .8rem; color: var(--c-muted); display: inline-flex; gap: .4rem; align-items: center; }
.legend-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; }
.legend-dot--cur { background: var(--c-accent); }
.legend-dot--prev { background: var(--c-line-2); }

.obs { list-style: none; display: grid; gap: .5rem; }
.obs__item { border-left: 3px solid var(--c-info); background: var(--c-info-50); padding: .5rem .75rem; border-radius: var(--r-sm); display: grid; gap: .15rem; }
.obs__item--ok { border-color: var(--c-ok); background: var(--c-ok-50); }
.obs__item--bad { border-color: var(--c-bad); background: var(--c-bad-50); }
.obs__item--warn { border-color: var(--c-warn); background: var(--c-warn-50); }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.tiles--wide { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.tile { background: var(--c-panel); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 1rem; box-shadow: var(--shadow); display: grid; gap: .5rem; align-content: start; }
.tile__head { display: flex; justify-content: space-between; gap: .5rem; align-items: start; }
.tile__title { font-size: 1rem; margin: 0; display: flex; gap: .4rem; align-items: center; }
.tile__value { font-size: 1.5rem; font-weight: 700; margin: 0; }
.tile details summary { cursor: pointer; color: var(--c-accent); }

.board { display: grid; grid-template-columns: repeat(6, minmax(200px, 1fr)); gap: .75rem; overflow-x: auto; padding-bottom: .5rem; }
.board__col { background: #eef1f6; border-radius: var(--r); padding: .6rem; display: grid; gap: .5rem; align-content: start; min-height: 200px; }
.board__col--won { background: var(--c-ok-50); }
.board__col--lost { background: var(--c-bad-50); }
.board__head { font-size: .9rem; margin: 0; display: flex; justify-content: space-between; }
.board__count { background: #fff; border-radius: 999px; padding: 0 .5rem; font-size: .8rem; }
.board__sum { margin: 0; }
.card { display: grid; gap: .2rem; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-sm); padding: .55rem .65rem; color: var(--c-ink); text-decoration: none; }
.card:hover, .card:focus-visible { border-color: var(--c-accent); }

[data-stage-only][hidden] { display: none; }
@media (max-width: 720px) {
  .board { grid-template-columns: repeat(6, 78vw); }
  .svgchart { height: 160px; }
}

.shoprow { border-top: 1px solid var(--c-line); padding-top: .5rem; display: grid; gap: .25rem; }
.shoprow p { margin: 0; }