/* estilo.css — Tela da verdade (#106). Só tokens do tema (var(--…)).
   Três larguras: celular (< 700 px), tablet (700 a 1100 px), desktop. */
.vd { padding-bottom: 32px; background: var(--bg); }
.vd .num { font-variant-numeric: tabular-nums; }
.vd-cabeca { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 12px; }
.vd-cabeca h1 { margin: 0; font-size: 22px; }
.vd-sus { color: var(--muted); font-size: 12px; font-weight: 400; }
.vd-barra { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vd button { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
  min-height: 36px; padding: 0 12px; font: inherit; font-size: 13px; cursor: pointer; }
.vd button:hover { border-color: var(--orange); }
.vd button:focus-visible, .vd a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.vd-visoes { display: inline-flex; gap: 0; }
.vd-visoes button { border-radius: 0; }
.vd-visoes button:first-child { border-radius: 8px 0 0 8px; }
.vd-visoes button:last-child { border-radius: 0 8px 8px 0; }
.vd-visoes button.ativa { background: var(--orange); border-color: var(--orange); color: var(--bg); font-weight: 700; }
.vd-bloco { margin-top: 18px; }
.vd-bloco h2 { font-size: 14px; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.vd-erro { background: var(--panel); border: 1px solid var(--red); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; }
.vd-feed { list-style: none; margin: 0; padding: 0; background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.vd-vazio-feed { padding: 12px 16px; color: var(--muted); }
.vd-dst { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto auto; gap: 12px; align-items: center;
  padding: 10px 16px; min-height: 44px; border-top: 1px solid var(--line-soft); }
.vd-dst:first-child { border-top: 0; }
.vd-dst:hover { background: var(--panel-2); }
.vd-pt { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.vd-bom .vd-pt { background: var(--green); }
.vd-ruim .vd-pt { background: var(--red); }
.vd-frase { font-size: 14px; }
.vd-cmp { color: var(--muted); font-size: 12px; text-align: right; white-space: nowrap; }
.vd-bom .vd-cmp b { color: var(--green); }
.vd-ruim .vd-cmp b { color: var(--red); }
.vd-ir { white-space: nowrap; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; text-decoration: none; font-size: 13px; }
.vd-ir:hover { border-color: var(--orange); }
.vd-mais { padding: 8px 16px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line-soft); }
.vd-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vd-pn { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vd-pn header { display: flex; align-items: baseline; gap: 8px; }
.vd-pn h3 { margin: 0; font-size: 13px; color: var(--muted); font-weight: 600; }
.vd-ir-pn { margin-left: auto; font-size: 12px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.vd-ir-pn:hover { color: var(--ink); }
.vd-pn .ds-kpi { border: 0; padding: 0; background: transparent; }
.vd-aviso-pn { color: var(--muted); font-size: 13px; }
.vd-linhas { list-style: none; margin: 0; padding: 0; font-size: 12px; display: flex; flex-direction: column; gap: 2px; }
.vd-linhas li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; }
.vd-linhas li > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.vd-linhas li > span { text-align: right; color: var(--muted); }
.vd-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.vd-falta { list-style: none; padding: 0; margin: 8px 0 0; font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.vd-seg { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); margin-bottom: 8px; }
.vd-seg summary { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 10px 14px; cursor: pointer; min-height: 44px; }
.vd-seg .vd-filtrar { margin-left: auto; }
.vd-seg .ds-tabela-rol { padding: 0 8px 8px; }
.vd-up { color: var(--green); }
.vd-dn { color: var(--red); }
/* modo TV: um painel por vez, grande */
.vd-tv .vd-grade { grid-template-columns: 1fr; }
.vd-tv .vd-pn { display: none; min-height: 70vh; font-size: 18px; }
.vd-tv .vd-pn.vez { display: flex; }
.vd-tv .vd-pn .ds-kpi-val { font-size: 96px; }
@media (max-width: 1100px) {
  .vd-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vd-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .vd-grade { grid-template-columns: 1fr; }
  .vd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .vd-barra { margin-left: 0; width: 100%; }
  .vd-barra button { min-height: 44px; }
  .vd-dst { grid-template-columns: 8px minmax(0, 1fr); row-gap: 4px; }
  .vd-dst .vd-cmp, .vd-dst .vd-ir { grid-column: 2; text-align: left; justify-self: start; }
}
/* Meus avisos */
.vd-cfg { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.vd-c { text-align: center; }
.vd-avisos input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--orange); }
.vd-rot { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 12px 14px; }
.vd-rot h3 { margin: 0 0 8px; font-size: 13px; }
.vd-rot ul { list-style: none; margin: 0; padding: 0; }
.vd-rot li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.vd-rot li:first-child { border-top: 0; }
.vd-nova { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; margin-top: 12px; font-size: 12px; color: var(--muted); }
.vd-nova label { display: flex; flex-direction: column; gap: 4px; }
.vd-nova input, .vd-nova select { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font: inherit; min-height: 36px; }
.vd-nova select { min-width: 180px; min-height: 72px; }
.vd .vd-pri { background: var(--orange); border-color: var(--orange); color: var(--bg); font-weight: 700; }
.vd .vd-pri:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 1100px) { .vd-cfg { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .vd-rot li { grid-template-columns: 48px minmax(0, 1fr); }
  .vd-rot li button { grid-column: 2; justify-self: start; min-height: 44px; }
}

/* #111 — seta do cliente, anomalia e série de 5 semanas por destaque. */
.vd-cli { white-space: nowrap; }
.vd-seta { color: var(--muted); text-decoration: none; }
.vd-cli:hover .vd-seta { color: var(--orange); }
.vd-anomalia { font-size: 12px; color: var(--muted); }
.vd-serie { grid-column: 2 / -1; display: grid; grid-template-columns: minmax(0, 420px) auto; justify-content: start; gap: 12px; align-items: center; }
.vd-mini { border-collapse: collapse; font-size: 11px; color: var(--muted); }
.vd-mini th, .vd-mini td { padding: 2px 6px; text-align: right; border-bottom: 1px solid var(--line-soft); }
.vd-mini th { font-weight: 500; color: var(--muted); }
@media (max-width: 720px) { .vd-serie { grid-template-columns: minmax(0, 1fr); } .vd-mini { overflow-x: auto; display: block; } }