/* css/esportes-quadra.css — painel Quadra (CV-35, esportes coletivos e de quadra).
   Só classes qd-*; usa os tokens do tema (--ink, --line, --accent…). */

.qd { display: block; }
.qd-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; margin-bottom: 4px; }
.qd-sel {
  width: 100%; padding: 6px 7px; border-radius: 7px; border: 1px solid var(--line);
  background: rgba(0, 0, 0, .25); color: var(--ink); font: inherit; font-size: 12px;
}
.qd-sel-mini { width: auto; max-width: 60%; padding: 3px 6px; font-size: 11px; }
.qd-num { width: 100%; }
.qd-botoes { gap: 6px; flex-wrap: wrap; }
.qd-botoes .btn.on { outline: 1px solid var(--accent); color: var(--accent); }
.qd-ok { color: var(--ok); }
.qd-alerta { color: var(--err); }

.qd-cal {
  border: 1px solid var(--line); border-radius: 10px; padding: 8px; margin: 8px 0;
  background: rgba(0, 0, 0, .18);
}
.qd-mapa { width: 100%; height: auto; display: block; border-radius: 8px; touch-action: manipulation; }
.qd-mapa-fundo { fill: #1d5a46; }
.qd-ponto { cursor: pointer; }
.qd-ponto:hover circle:nth-of-type(2) { stroke: #fff; }
.qd-legenda { font-size: 11.5px; color: var(--ink-2); margin: 6px 0; line-height: 1.4; }
.qd-legenda b { color: var(--accent); font-weight: 600; }
.qd-quadro {
  position: relative; border-radius: 8px; overflow: hidden; background: #000; cursor: crosshair;
  margin-bottom: 6px; touch-action: manipulation;
}
.qd-quadro img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.qd-sobre { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.qd-vazio { padding: 22px 10px; font-size: 11.5px; color: var(--ink-3); text-align: center; }

.qd-kpis { margin-top: 10px; flex-wrap: wrap; }
.qd-radar-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 6px 0 4px; }
.qd-radar-topo .cfg-sub { margin: 0; }
.qd-radar svg { display: block; width: 100%; height: auto; border-radius: 8px; }

.qd-abas { margin-top: 8px; }
.qd-tab { width: 100%; border-collapse: collapse; font-size: 11px; font-variant-numeric: tabular-nums; }
.qd-tab th {
  text-align: left; font-weight: 500; color: var(--ink-3); font-size: 9.5px; padding: 3px;
  border-bottom: 1px solid var(--line-2);
}
.qd-tab td { padding: 4px 3px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.qd-tab .n { text-align: right; font-family: var(--mono, ui-monospace, monospace); }
.qd-tab tbody tr { cursor: pointer; }
.qd-tab tbody tr:hover { background: rgba(255, 255, 255, .05); }
.qd-inativo { opacity: .5; }
.qd-sel-linha { background: rgba(255, 216, 77, .12); }
.qd-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px;
  vertical-align: middle; border: 1px solid rgba(0, 0, 0, .35);
}

.qd-eventos { list-style: none; margin: 4px 0; padding: 0; font-size: 11.5px; line-height: 1.45; }
.qd-eventos li { padding: 3px 0; border-bottom: 1px solid var(--line-2); display: flex; gap: 8px; }
.qd-eventos li span { color: var(--ink-3); font-family: var(--mono, ui-monospace, monospace); min-width: 52px; text-align: right; }
.qd-ev-passe { color: var(--ink); }
.qd-ev-perda { color: #fca5a5; }
.qd-ev-arremesso, .qd-ev-quique { color: #fde68a; }

.qd-export { margin-top: 10px; }
.qd-det { margin-top: 6px; }
.qd-det summary { cursor: pointer; font-size: 12px; color: var(--ink-2); }
.qd-det ul { padding-left: 18px; margin-top: 6px; }

@media (max-width: 420px) {
  .qd-grade { grid-template-columns: 1fr; }
  .qd-tab { font-size: 10.5px; }
}