/* ============================================================
   TV de estoque das áreas de MP (granulado / micronizado / composto).
   Complementa tokens.css + components.css + tv.css — aqui só o que aquelas
   três não cobrem. Cores, tipografia, header, footer e o canvas 1920×1080
   vêm de lá.
   ============================================================ */

/* O palco desta tela não tem carrossel: é uma vista só, empilhada. */
.tv-stage {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-8);
}

/* ===================== FAIXA DE URGÊNCIA ===================== */
/* Vermelha, fora da grade, e some sozinha quando não há crítico: faixa que
   fica sempre acesa vira paisagem e para de ser lida. */
.faixa {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    background: var(--st-crit-soft);
    border: 2px solid var(--st-crit);
    border-radius: var(--r-lg);
    padding: var(--sp-3) var(--sp-5);
    animation: faixa-pulsa 2.4s ease-in-out infinite;
}
.faixa-tag {
    flex: 0 0 auto;
    background: var(--st-crit);
    color: #fff;
    font-size: 20px;
    font-weight: var(--fw-bold, 700);
    letter-spacing: 1.5px;
    padding: 6px 16px;
    border-radius: var(--r-pill);
    white-space: nowrap;
}
.faixa-txt {
    font-size: 30px;
    font-weight: var(--fw-bold, 700);
    color: var(--st-crit);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Aviso e "tudo em dia": mesma forma, sem a pulsação — só o vermelho pisca,
   senão a animação perde o significado. */
.faixa.aviso, .faixa.ok { animation: none; }
.faixa.aviso     { background: var(--st-warn-soft); border-color: var(--st-warn); }
.faixa.aviso .faixa-tag { background: var(--st-warn); }
.faixa.aviso .faixa-txt { color: var(--st-warn); }
.faixa.ok        { background: var(--st-ok-soft); border-color: var(--st-ok); }
.faixa.ok .faixa-tag    { background: var(--st-ok); }
.faixa.ok .faixa-txt    { color: var(--st-ok); }

@keyframes faixa-pulsa {
    0%, 100% { box-shadow: 0 0 0 0 rgba(193, 39, 45, 0.30); }
    50%      { box-shadow: 0 0 0 10px rgba(193, 39, 45, 0); }
}

/* ===================== GRADE DE PRODUTOS ===================== */
.grade {
    flex: 1 1 auto;
    display: grid;
    gap: var(--sp-4);
    /* Linhas de altura igual ocupando o palco inteiro: numa TV, meia tela vazia
       desperdiça justamente o que ela tem de melhor. Mínimo de 170px pro card
       não achatar quando houver muitas linhas. */
    grid-auto-rows: minmax(170px, 1fr);
    align-content: stretch;
    min-height: 0;
}
.grade.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grade.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grade.cols-5 { grid-template-columns: repeat(5, 1fr); }
.grade.vazio {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-3);
    font-size: 22px;
}

/* Card: mesma linguagem do .tv-kpi (borda + raio + sombra + barra de estado
   à esquerda), com os números dimensionados pra leitura a 5 metros. */
.card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 8px solid var(--border-strong);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--sp-4) var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    overflow: hidden;
}
.card.ok      { border-left-color: var(--st-ok); }
.card.atencao { border-left-color: var(--st-warn); background: var(--st-warn-soft); }
.card.critico { border-left-color: var(--st-crit); background: var(--st-crit-soft); }

.card-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2);
}
.card-nome {
    font-size: 21px;
    font-weight: var(--fw-bold, 700);
    line-height: 1.15;
    color: var(--text);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.card-cod {
    flex: 0 0 auto;
    font-family: var(--font-mono, monospace);
    font-size: 13px;
    color: var(--text-3);
}

.card-nums {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-top: auto;
}
.num-big {
    font-size: 62px;
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -2px;
    font-variant-numeric: tabular-nums;
}
.num-med {
    font-size: 32px;
    font-weight: var(--fw-bold, 700);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--text-2);
}
.num-cob   { min-width: 0; }
.num-saldo { text-align: right; flex: 0 0 auto; }
.num-lbl {
    font-size: 12.5px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-top: 4px;
    white-space: nowrap;
}
/* Sem ritmo medido o número grande vira um travessão: pintado da cor do nível
   ele viraria um risco de 62px na tela, que se lê como defeito e não como dado. */
.num-big.mudo { color: var(--text-3); font-weight: var(--fw-semi, 600); }
.card.ok      .num-big { color: var(--st-ok); }
.card.atencao .num-big { color: var(--st-warn); }
.card.critico .num-big { color: var(--st-crit); }
.card .num-big.mudo { color: var(--text-3); }

.card-sub {
    border-top: 1px solid var(--border);
    padding-top: var(--sp-2);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-2);
}

/* ===================== FAIXA DE OPs ABERTAS ===================== */
.ops {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    background: var(--st-info-soft);
    border: 1px solid var(--st-info);
    border-radius: var(--r-lg);
    padding: var(--sp-2) var(--sp-5);
}
.ops-tag {
    flex: 0 0 auto;
    background: var(--st-info);
    color: #fff;
    font-size: 13px;
    font-weight: var(--fw-bold, 700);
    letter-spacing: 1.2px;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    white-space: nowrap;
}
.ops-txt {
    font-size: 19px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===================== RESUMO NO RODAPÉ ===================== */
#resumo { display: flex; gap: var(--sp-3); align-items: center; }
.pill {
    font-size: 13px;
    font-weight: var(--fw-semi, 600);
    padding: 4px 12px;
    border-radius: var(--r-pill);
    white-space: nowrap;
}
.pill.crit   { background: var(--st-crit-soft); color: var(--st-crit); }
.pill.warn   { background: var(--st-warn-soft); color: var(--st-warn); }
.pill.ok     { background: var(--st-ok-soft);   color: var(--st-ok); }
.pill.neutro { background: var(--surface-hover); color: var(--text-2); }

.hidden { display: none !important; }