/* Contratações e Cancelamentos: tela 16:9 no visual dos outros painéis — indicadores do mês no topo,
   gráfico de 12 meses à esquerda, quadras / cancelaram cedo / canais à direita.
   Vendas #8f72ee e cancelamentos #d9764a (validadas para fundo escuro). */
:root {
  --bg: #131116; --panel: #1b1820; --panel-2: #221e28; --line: #2f2a37; --grid: #27222e;
  --fg: #efecf4; --muted: #aca5b8; --dim: #746c84;
  --accent: #a38bfa; --accent-forte: #7c5ce8;
  --venda: #8f72ee; --canc: #d9764a;
  --ok: #7fe090; --warn: #ff9f43; --crit: #ff4d5e; --novo: #ffd23f;
  --display: "Poppins", "Segoe UI", Arial, sans-serif;
  --body: "Mona Sans", "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: clamp(13px, 0.86vw, 22px); }
body {
  margin: 0; min-height: 100%;
  background: radial-gradient(120% 80% at 70% -10%, #1f1a2b 0%, var(--bg) 55%) fixed, var(--bg);
  color: var(--fg); font-family: var(--body); font-size: 1rem;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.app { display: grid; gap: 0.85rem; padding-block: 0.9rem 2.2rem; min-height: 100vh; grid-template-rows: auto auto auto minmax(0, 1fr); }
.num { font-variant-numeric: tabular-nums; }
h2 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
h2 small { font-family: var(--body); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--dim); font-size: 0.85rem; margin-left: 0.4rem; }
.panel { background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid var(--line); border-radius: 12px; padding: 0.9rem 1rem; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 0.7rem; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem 1rem; flex-wrap: wrap; }

/* topo */
.top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.logo { width: 2.8rem; height: 2.8rem; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(140deg, var(--accent-forte), #4b2fb8); color: #fff; font-family: var(--display); font-weight: 800; font-size: 1.15rem; flex: none; }
.brand h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.7rem; letter-spacing: -0.01em; line-height: 1.05; text-wrap: balance; }
.brand p { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.9rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.tag { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--warn); color: var(--warn); padding: 0.05rem 0.4rem; border-radius: 4px; }
.clock { display: flex; align-items: center; gap: 1.2rem; text-align: right; }
.clock strong { display: block; font-family: var(--display); font-weight: 600; font-size: 2.5rem; line-height: 1; }
.clock small { color: var(--muted); font-size: 0.85rem; }
.controls { display: grid; gap: 0.35rem; }
.botao { font: 600 0.78rem var(--body); color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 0.3rem 0.7rem; cursor: pointer; text-decoration: none; text-align: center; }
.botao:hover { color: var(--fg); border-color: var(--accent); }
.botao:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.falha { background: color-mix(in srgb, var(--crit) 14%, var(--panel)); border: 1px solid var(--crit); border-radius: 10px; padding: 0.5rem 0.9rem; font-size: 0.9rem; }
.falha small { color: var(--muted); margin-left: 0.5rem; }

/* indicadores */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; }
.kpi { --c: var(--muted); background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid var(--line); border-radius: 12px; padding: 0.75rem 0.95rem 0.7rem; display: grid; gap: 0.2rem; min-width: 0; align-content: start; }
.kpi > span { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 0.45rem; }
.kpi > span::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 2px; background: var(--c); flex: none; }
.kpi strong { font-family: var(--display); font-weight: 700; font-size: 2.6rem; line-height: 1.1; }
.kpi .sub { color: var(--muted); font-size: 0.82rem; }
.kpi .sub b { color: var(--fg); font-weight: 600; }
.k-venda { --c: var(--venda); } .k-canc { --c: var(--canc); } .k-saldo { --c: var(--ok); } .k-base { --c: var(--accent); } .k-falta { --c: var(--novo); }
.k-saldo strong { color: var(--ok); }
.k-saldo.neg { --c: var(--crit); } .k-saldo.neg strong { color: var(--crit); }
.barra-mes { height: 5px; border-radius: 3px; background: var(--grid); overflow: hidden; margin-top: 0.3rem; }
.barra-mes i { display: block; height: 100%; width: 0; background: var(--c); border-radius: 3px; transition: width 0.9s cubic-bezier(.2,.8,.2,1); }

/* corpo */
.corpo { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 0.85rem; min-height: 0; }
.lado { display: grid; gap: 0.85rem; grid-template-rows: auto auto auto; min-width: 0; align-content: start; }

/* gráfico de 12 meses */
.legenda { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--muted); }
.legenda span { display: inline-flex; align-items: center; gap: 0.4rem; }
.legenda i { width: 0.8rem; height: 0.8rem; border-radius: 3px; display: inline-block; }
.legenda .lv i { background: var(--venda); } .legenda .lc i { background: var(--canc); }
.legenda .ls i { height: 0; border-top: 2px solid var(--fg); border-radius: 0; width: 1.1rem; }
.grafico { position: relative; min-height: 20rem; }
.grafico svg { display: block; width: 100%; height: 100%; position: absolute; inset: 0; overflow: visible; }
.grafico text { font-family: var(--body); fill: var(--dim); font-size: 12px; }
.grafico .rot-mes { fill: var(--muted); }
.grafico .rot-mes.atual { fill: var(--fg); font-weight: 600; }
.grafico .grade { stroke: var(--grid); stroke-width: 1; }
.grafico .zero { stroke: var(--line); stroke-width: 1; }
.grafico .bv { fill: var(--venda); }
.grafico .bc { fill: var(--canc); }
.grafico .parcial { opacity: 0.45; }
.grafico .saldo { fill: none; stroke: var(--fg); stroke-width: 2; stroke-linejoin: round; }
.grafico .pt { fill: var(--fg); stroke: var(--panel); stroke-width: 2; }
.grafico .rot-saldo { fill: var(--fg); font-weight: 600; font-size: 12px; }
.grafico .alvo { fill: transparent; cursor: default; }
.grafico .alvo:hover, .grafico .alvo.ativo { fill: color-mix(in srgb, var(--fg) 6%, transparent); }
.dica { position: absolute; pointer-events: none; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem 0.7rem; font-size: 0.82rem; color: var(--muted); min-width: 11rem; box-shadow: 0 8px 24px rgba(0,0,0,0.35); z-index: 3; }
.dica strong { display: block; color: var(--fg); font-family: var(--display); font-weight: 600; margin-bottom: 0.25rem; }
.dica div { display: flex; justify-content: space-between; gap: 1rem; }
.dica div b { color: var(--fg); font-variant-numeric: tabular-nums; font-weight: 600; }
.dica .sw { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 2px; margin-right: 0.35rem; }
.resumo-ano { display: flex; gap: 0.5rem 1.6rem; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 0.65rem; font-size: 0.9rem; color: var(--muted); }
.resumo-ano b { color: var(--fg); font-family: var(--display); font-weight: 600; font-size: 1.1rem; font-variant-numeric: tabular-nums; margin-right: 0.2rem; }
.resumo-ano .pos b { color: var(--ok); }
.resumo-ano .neg b { color: var(--crit); }
.panel.g { grid-template-rows: auto minmax(0, 1fr) auto; }

/* quadras */
/* subgrid: a coluna do saldo cresce até caber o selo mais largo ("-3 PERDENDO")
   e fica igual em todas as linhas, então as barras continuam comparáveis */
.quadras { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) auto; column-gap: 0.6rem; row-gap: 0.45rem; align-content: start; }
.quadras > .vazio { grid-column: 1 / -1; }
.q { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; font-size: 0.85rem; }
.q .nome { font-family: var(--display); font-weight: 600; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q .barras { display: grid; gap: 2px; }
.q .barras i { display: block; height: 0.5rem; border-radius: 0 3px 3px 0; min-width: 2px; }
.q .barras .v { background: var(--venda); } .q .barras .c { background: var(--canc); }
.q .saldo-q { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.q .saldo-q b { color: var(--fg); font-weight: 600; }
.chip { display: inline-block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; padding: 0.05rem 0.45rem; margin-left: 0.3rem; vertical-align: 0.1em; }
.chip.ruim { background: color-mix(in srgb, var(--crit) 18%, transparent); color: var(--crit); border: 1px solid color-mix(in srgb, var(--crit) 50%, transparent); }
.chip.atencao { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); }
.nota { font-size: 0.76rem; color: var(--dim); margin: 0.6rem 0 0; }
.vazio { color: var(--dim); font-size: 0.85rem; margin: 0; }

/* cancelou cedo */
.cedo-topo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; }
.cedo-num { font-family: var(--display); font-weight: 800; font-size: 3rem; line-height: 1; color: var(--canc); }
.cedo-txt { font-size: 0.9rem; color: var(--muted); line-height: 1.4; }
.cedo-txt b { color: var(--fg); font-weight: 600; }
.mini { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; align-items: end; height: 3.2rem; margin-top: 0.4rem; }
.mini i { display: block; height: 0; background: color-mix(in srgb, var(--canc) 70%, transparent); border-radius: 2px 2px 0 0; min-height: 2px; transition: height 0.9s cubic-bezier(.2,.8,.2,1); }
.mini i.parcial { opacity: 0.45; }
.mini-rot { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--dim); margin-top: 0.2rem; }
.lista { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem; align-items: baseline; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 0.4rem 0.65rem; font-size: 0.86rem; }
.lista li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.lista li span b { color: var(--fg); font-weight: 600; }
.lista li .ct { color: var(--warn); font-weight: 700; }
.lista li em { font-style: normal; font-family: var(--display); font-weight: 600; color: var(--canc); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* por responsável */
.esquerda { display: grid; gap: 0.85rem; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; }
.resp-wrap { overflow-x: auto; }
.resp-tab { width: 100%; min-width: 34rem; margin: 0; font-size: 0.92rem; }
.resp-tab th, .resp-tab td { padding: 0.42rem 0.6rem; border-bottom: 1px solid var(--grid); }
.resp-tab thead th { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.resp-tab tbody tr:last-child > * { border-bottom: 0; }
.resp-tab tbody th { text-align: left; font-family: var(--display); font-weight: 600; color: var(--fg); white-space: nowrap; }
.resp-tab .pos { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-right: 0.55rem; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); font: 600 0.75rem var(--body); }
.resp-tab .lider .pos { background: var(--venda); border-color: var(--venda); color: #fff; }
.chip.topo { background: color-mix(in srgb, var(--venda) 18%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--venda) 50%, transparent); }
.resp-tab td.zero { color: var(--dim); }
.resp-tab td.hoje { color: var(--ok); font-weight: 700; }
.resp-tab td.falta { color: var(--novo); font-weight: 600; }
.resp-tab td.c-mes { width: 34%; }
.resp-tab .mes { display: grid; grid-template-columns: minmax(0, 1fr) 2.6rem; gap: 0.6rem; align-items: center; }
.resp-tab .mes b { font-family: var(--display); font-size: 1.15rem; font-weight: 700; }
.mes-barra { height: 0.6rem; background: var(--grid); border-radius: 3px; overflow: hidden; }
.mes-barra i { display: block; height: 100%; background: var(--venda); border-radius: 3px; transition: width 0.9s cubic-bezier(.2,.8,.2,1); }
.cedo-p { color: var(--canc); font-size: 0.78rem; margin-left: 0.25rem; white-space: nowrap; }

/* canais e atendentes */
.canais { display: grid; gap: 0.4rem; }
.canal { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 3.6rem; gap: 0.6rem; align-items: center; font-size: 0.85rem; color: var(--muted); }
.canal .barra { height: 0.55rem; background: var(--grid); border-radius: 3px; overflow: hidden; }
.canal .barra i { display: block; height: 100%; background: var(--venda); border-radius: 3px; transition: width 0.9s cubic-bezier(.2,.8,.2,1); }
.canal b { color: var(--fg); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.atendentes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; align-items: center; font-size: 0.8rem; color: var(--dim); }
.atendentes .pessoa { background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 0.15rem 0.6rem; color: var(--muted); }
.atendentes .pessoa b { color: var(--fg); margin-left: 0.25rem; font-variant-numeric: tabular-nums; }

.tabela-wrap { overflow-x: auto; }
details { font-size: 0.82rem; color: var(--muted); margin-top: 0.5rem; }
details summary { cursor: pointer; color: var(--accent); }
details summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
table { border-collapse: collapse; margin-top: 0.5rem; font-variant-numeric: tabular-nums; min-width: 26rem; }
th, td { padding: 0.25rem 0.7rem; text-align: right; border-bottom: 1px solid var(--grid); }
th:first-child, td:first-child { text-align: left; }
th { color: var(--dim); font-weight: 600; }
td { color: var(--fg); }

.marca { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(0.4rem + env(safe-area-inset-bottom, 0px)); font-size: 0.7rem; color: var(--dim); opacity: 0.7; }

@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .corpo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k-falta { grid-column: 1 / -1; }
  .kpi strong { font-size: 2rem; }
  .clock { text-align: left; }
  .grafico { min-height: 16rem; }
  .q { grid-template-columns: 4rem minmax(0, 1fr) 4.4rem; }
  .canal { grid-template-columns: 6rem minmax(0, 1fr) 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .barra-mes i, .mini i, .canal .barra i, .mes-barra i { transition: none; }
}