/* estilo.css — Time Comercial (#112; molde dashboard na #1460). Só tokens do tema; três larguras. */
.tc-alerta { border: 1px solid var(--ink-warn); background: var(--panel); border-radius: var(--ds-r);
  padding: 10px 14px; margin: 0 0 12px; }
.tc-alerta b { color: var(--ink-warn); }
.tc .ds-kpis { margin-bottom: 12px; }
.tc-grade { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }
.tc-caixa { background: var(--panel); border: 1px solid var(--line); border-radius: var(--ds-r);
  padding: 14px 16px; margin-bottom: 12px; min-width: 0; }
.tc-caixa h2 { font-size: 14px; margin: 0 0 4px; }
.tc-sus { color: var(--muted); font-size: 12px; }
.tc-vazio { color: var(--muted); font-size: 13px; padding: 6px 0; }
.tc-curva { width: 100%; height: auto; display: block; margin-top: 8px; }
.tc-curva text { fill: var(--muted); font-size: 10px; }
.tc-curva .eixo { stroke: var(--line); }
.tc-curva .dia20 { stroke: var(--ink-warn); stroke-dasharray: 4 4; }
.tc-curva .mes { fill: none; stroke: var(--ds-accent); stroke-width: 2.5; }
.tc-curva .mes.antigo { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 3 3; }
.tc-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); margin-top: 6px; }
.tc-legenda .sw { display: inline-block; width: 14px; height: 3px; margin-right: 6px; vertical-align: middle; background: var(--line); }
.tc-legenda .sw.out { background: var(--ds-accent); }
.tc-legenda .sw.antigo { background: var(--muted); }
.tc-fonte { margin-top: 4px; }
.tc-grade { align-items: start; }
@media (max-width: 900px) { .tc-grade { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .tc-caixa { padding: 12px; } }