/* ============================================================================
   Demanda Comercial — Extrato
   Reaproveita a estrutura visual do Controle de Ruptura (.cr-*); aqui ficam
   apenas os elementos proprios desta aba.
   ========================================================================= */

.dc-table tbody tr.is-sem-proj { background: color-mix(in srgb, var(--warning) 6%, transparent); }
.dc-table tbody tr.is-sem-proj:hover { background: color-mix(in srgb, var(--warning) 11%, transparent); }

.dc-uf {
    display: inline-block; min-width: 30px; text-align: center;
    font-size: 11px; font-weight: 700; letter-spacing: .03em;
    color: var(--gray-600); background: var(--gray-100);
    padding: 3px 7px; border-radius: 4px;
}

.dc-pedido {
    font-size: 17px; font-weight: 700; color: var(--gray-900);
    font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.dc-aut {
    font-size: 15px; font-weight: 600; color: var(--primary-800);
    font-variant-numeric: tabular-nums;
}
.dc-nd { font-size: 12px; font-style: italic; color: var(--gray-400); }

.dc-gap {
    font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums;
    letter-spacing: -.02em; color: var(--gray-500);
}
/* Gap zero e o melhor resultado da tela: a rede atendeu por completo.
   Ganha pilula solida, nao so cor de texto, para saltar na varredura. */
.dc-gap.is-atendido {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    background: var(--green-100); color: var(--success);
    font-size: 14px; letter-spacing: 0;
}
.dc-gap.is-pos { color: var(--primary-600); }
.dc-gap.is-neg { color: var(--error); }
.dc-gap.is-nd  { color: var(--gray-300); font-weight: 400; }

/* Ruptura: pilula vermelha discreta — sinaliza sem competir com o gap. */
.dc-badge-ruptura {
    display: inline-block; margin-top: 5px; padding: 2px 8px;
    border-radius: 999px; border: 1px solid rgba(229, 72, 77, .28);
    background: color-mix(in srgb, var(--error) 9%, transparent);
    color: var(--error); font-size: 10.5px; font-weight: 600;
    letter-spacing: .01em; white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* Legenda do rodape */
.dc-leg-ok  { color: var(--success);      font-weight: 700; }
.dc-leg-neg { color: var(--error);        font-weight: 700; }
.dc-leg-pos { color: var(--primary-600);  font-weight: 700; }

/* Denominador do KPI "atendidos por completo" */
.cr-kpi-de { font-size: 15px; font-weight: 600; color: var(--gray-400); }

.dc-aviso {
    color: var(--warning) !important; font-style: italic; max-width: 34ch; line-height: 1.35;
}

/* ── Gaveta: pedidos individuais ── */
.dc-pedido-item {
    padding: 12px 0; border-bottom: 1px solid var(--border-light);
    display: flex; flex-direction: column; gap: 6px;
}
.dc-pedido-item:last-child { border-bottom: none; }
.dc-pedido-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dc-pvi {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12.5px; font-weight: 700; color: var(--gray-800);
}
.dc-status {
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 999px;
}
.dc-status.is-fechado { background: var(--green-100); color: var(--success); }
.dc-status.is-aberto  { background: #FDF1D9;          color: #B97800; }
.dc-pedido-data { margin-left: auto; font-size: 11.5px; color: var(--gray-500); }
.dc-pedido-qtds {
    display: flex; gap: 16px; flex-wrap: wrap;
    font-size: 11.5px; color: var(--gray-500);
}
.dc-pedido-qtds b {
    color: var(--gray-800); font-variant-numeric: tabular-nums; font-size: 12.5px;
}

@media (max-width: 820px) {
    .dc-pedido-data { margin-left: 0; }
}