/* ============================================================
   css/telas/cliente.css — CSS da área "cliente" (Produtos).

   Duas peças próprias: a grade de TRÊS cartões (equipamento ·
   licença · serviço, não quatro) e o VISUALIZADOR de documento,
   que é folha de papel em bloco cinza — o conteúdo do documento
   é a validar no mock, e não se inventa documento de cliente.

   As peças compartilhadas pelas quatro áreas desta etapa
   (.lc-volta · .lc-busca · .lc-pane · .lc-doc · .lc-subcab…)
   estão em css/telas/pedidos.css, DECLARADAS UMA VEZ SÓ.
   Valores medidos no mock aprovado (bloco "LOTE C").
   ============================================================ */

/* ---------- três cartões, não quatro ------------------------ */
.lc-kpis3{grid-template-columns:repeat(3,1fr)}
.lc-espaco{margin-top:16px}

/* ---------- aviso de acesso de suporte ativo ----------------
   É a faixa da base; o que muda é só o arranjo, para o selo e o
   Encerrar agora ficarem à direita sem apertar o texto. */
.lc-suporte{align-items:center}
.lc-suporte>span:first-of-type{flex:1;min-width:0}
.lc-suporte-dir{display:flex;align-items:center;gap:8px;flex:0 0 auto;
  margin-left:auto;flex-wrap:wrap}
.lc-suporte .bt{background:var(--fundo-card)}

/* ---------- visualizador de documento ----------------------- */
.lc-alto{height:auto;min-height:520px}
.lc-leitura{flex:1 1 auto;min-height:0;overflow-y:auto;background:var(--fundo-alt);
  padding:18px;display:flex;flex-direction:column;align-items:center;gap:9px}
.lc-leitura-modal{min-height:340px;max-height:58vh;border:1px solid var(--borda-sutil);
  border-radius:var(--r-item)}
.lc-folha{width:100%;max-width:530px;background:var(--fundo-card);
  border:1px solid var(--borda-padrao);border-radius:var(--r-ctrl);
  padding:20px 22px 24px}
.lc-folha-topo{display:flex;align-items:center;gap:8px;padding-bottom:12px;
  border-bottom:1px solid var(--borda-sutil)}
.lc-folha-sel{margin-left:auto;font-family:var(--fonte-mono);font-size:10.5px;
  letter-spacing:.02em;text-transform:uppercase;color:var(--txt-fraco)}
.lc-folha-tit{font-size:17px;font-weight:600;letter-spacing:-.02em;
  color:var(--txt-forte);margin:14px 0 2px;line-height:1.25}
.lc-folha-sub{font-size:12.5px;color:var(--txt-apoio);margin-bottom:16px}
.lc-bl{height:8px;border-radius:2px;background:var(--grafico-barra);margin-bottom:8px}
.lc-bl-curta{width:62%}
.lc-bl-tit{height:12px;width:44%;background:var(--borda-controle);margin:18px 0 11px}
.lc-bl-quadro{height:84px;border-radius:var(--r-ctrl);background:var(--fundo-alt);
  border:1px solid var(--borda-sutil);margin:11px 0 13px}
.lc-leitura-nota{font-size:11px;color:var(--txt-fraco);text-align:center;
  max-width:440px;line-height:1.4}

/* ---------- lista de documentos do serviço ------------------ */
.lc-docs .chk{align-items:flex-start;min-height:0;padding:11px 0}
.lc-docs .chk .selo{margin-left:0;margin-top:4px}
.lc-docs .chk .quem2 i+i{margin-top:5px}
.lc-docs-nota{font-size:11px;color:var(--txt-fraco);line-height:1.4;padding:9px 0 2px}

/* ---------- lugar celular: só arranjo ----------------------- */
@media (max-width:860px){
  .area-cliente .lc-kpis3{grid-template-columns:1fr 1fr}
  .area-cliente .lc-alto{min-height:0}
  .area-cliente .lc-leitura{padding:12px}
  .area-cliente .lc-folha{padding:15px 15px 18px}
  .area-cliente .lc-suporte{flex-wrap:wrap;row-gap:10px}
  .area-cliente .lc-suporte-dir{margin-left:0;width:100%}
  .area-cliente .lc-suporte-dir .bt{flex:1 1 auto;min-height:44px}
}
@media (max-width:560px){
  .area-cliente .lc-kpis3{grid-template-columns:1fr 1fr}
}