/* ============================================================
   Suprimentos — painel de obra · GRP Construtora

   Base visual herdada do sistema já aprovado (demandas-grp /
   reports em PDF): escala de cinza, Poppins, cantos arredondados,
   destaque azul-acinzentado só onde precisa de affordance.

   As cores de DADO (barra de composição e faixas de idade) são
   caso à parte: foram validadas com o script de paleta
   (contraste, banda de luminosidade e separação para daltonismo)
   e nunca carregam sentido sozinhas — sempre vêm com rótulo
   escrito ao lado. Trocar um desses hex exige revalidar.
   ============================================================ */

:root{
  /* ── chrome: escala de cinza ── */
  --ink:        #17181a;
  --ink-2:      #55565c;
  --ink-3:      #8b8c92;
  --line:       #e2e2e3;
  --surface:    #f4f4f5;
  --white:      #ffffff;
  --page:       #f1f1f2;
  --accent:     #2a4b7c;

  /* ── cores de dado (validadas: todas ≥3:1, sem par confundível) ── */
  --dado-atendida: #008300;   /* verde   */
  --dado-parcial:  #2a78d6;   /* azul    */
  --dado-aberta:   #eb6834;   /* laranja */

  /* ── status de idade (sempre acompanhados de rótulo escrito) ── */
  --st-critico:  #d03b3b;
  --st-atencao:  #a3701f;
  --st-ok:       #2f7d5d;
  --st-critico-bg: #fbefef;
  --st-atencao-bg: #faf1e2;
  --st-ok-bg:      #eef5f1;

  --font: "Poppins", -apple-system, "Segoe UI", sans-serif;
  --r-lg: 18px;
  --r-md: 14px;
  --r-sm: 10px;
  --shadow-card: 0 1px 2px rgba(23,24,26,.04), 0 8px 28px -14px rgba(23,24,26,.14);
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

.wrap{
  width:min(32rem, calc(100% - 2rem));
  margin-inline:auto;
  padding-block:1.75rem 3rem;
}

/* ── cabeçalho ─────────────────────────────────────────── */
.topo{ margin-bottom:1.5rem; }
.logo{ display:block; width:104px; height:auto; margin-bottom:1rem; }
.topo h1{
  margin:0;
  font-size:1.75rem;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.15;
}
.sub{ margin:.3rem 0 0; font-size:.9rem; color:var(--ink-2); }

/* ── seletor de obra ───────────────────────────────────── */
.seletor{
  display:flex;
  gap:.35rem;
  background:var(--surface);
  padding:.3rem;
  border-radius:var(--r-md);
  margin-bottom:1.25rem;
}
.obra-btn{
  flex:1;
  padding:.65rem .5rem;
  border:none;
  background:transparent;
  border-radius:var(--r-sm);
  font-family:var(--font);
  font-size:.95rem;
  font-weight:600;
  color:var(--ink-2);
  cursor:pointer;
  transition:background .15s, color .15s;
}
.obra-btn.ativo{
  background:var(--white);
  color:var(--accent);
  box-shadow:var(--shadow-card);
}

/* ── estados ───────────────────────────────────────────── */
.estado{ text-align:center; color:var(--ink-2); padding:2.5rem 0; }
.estado-erro{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:1.5rem;
  text-align:center;
}
.estado-erro p{ margin:0 0 1rem; color:var(--st-critico); }

.btn{
  padding:.6rem 1.3rem;
  border:none;
  border-radius:var(--r-sm);
  background:var(--accent);
  color:var(--white);
  font-family:var(--font);
  font-size:.9rem;
  font-weight:600;
  cursor:pointer;
}
.btn-secundario{
  background:var(--white);
  color:var(--accent);
  border:1px solid var(--line);
  border-radius:999px;
  padding:.65rem 1.5rem;
}

/* ── cards ─────────────────────────────────────────────── */
main{ display:flex; flex-direction:column; gap:1rem; }

.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:1.4rem;
  box-shadow:var(--shadow-card);
}

.card-titulo{
  margin:0;
  font-size:.78rem;
  font-weight:600;
  color:var(--ink-2);
  text-transform:uppercase;
  letter-spacing:.06em;
}

/* número-herói: o card inteiro existe por causa dele */
.hero{
  margin:.5rem 0 0;
  font-size:3rem;
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.hero-legenda{ margin:.4rem 0 0; font-size:.88rem; color:var(--ink-2); }
.detalhe{ margin:.5rem 0 0; font-size:.85rem; color:var(--ink-3); }

.sub-titulo{
  margin:0 0 .6rem;
  font-size:.75rem;
  font-weight:600;
  color:var(--ink-3);
  text-transform:uppercase;
  letter-spacing:.05em;
}

/* ── faixas de idade (pedidos) ─────────────────────────── */
.faixas{ list-style:none; margin:1.1rem 0 0; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.faixas li{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.55rem .7rem;
  border-radius:var(--r-sm);
  font-size:.88rem;
}
.faixas .qtd{ font-weight:700; font-variant-numeric:tabular-nums; flex:0 0 auto; min-width:1.6rem; }
.faixas .rotulo{ color:var(--ink-2); }
.faixa-critico{ background:var(--st-critico-bg); }
.faixa-critico .qtd{ color:var(--st-critico); }
.faixa-atencao{ background:var(--st-atencao-bg); }
.faixa-atencao .qtd{ color:var(--st-atencao); }
.faixa-ok{ background:var(--st-ok-bg); }
.faixa-ok .qtd{ color:var(--st-ok); }

/* ── lista de pedidos ──────────────────────────────────── */
.bloco-lista{ margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--line); }

.lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.lista li{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.6rem .75rem;
  background:var(--surface);
  border-radius:var(--r-sm);
}

/* min-width:0 é o que impede o nome longo de empurrar o selo para fora
   do card — sem isso o flex item nunca encolhe e o layout estoura. */
.pedido-info{ flex:1 1 auto; min-width:0; }

/* até 2 linhas: razão social de fornecedor é longa e cortar na primeira
   linha esconde justamente o que identifica a empresa. */
.fornecedor{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:.85rem;
  font-weight:500;
  line-height:1.3;
}
/* também limitado a 2 linhas: a descrição de contrato do Sienge é um
   parágrafo inteiro e afogaria o card se entrasse crua. */
.pedido-meta{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:.75rem;
  line-height:1.35;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}

.selo{
  flex:0 0 auto;
  font-size:.75rem;
  font-weight:700;
  padding:.25rem .55rem;
  border-radius:999px;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.selo-critico{ color:var(--st-critico); background:var(--st-critico-bg); }
.selo-atencao{ color:var(--st-atencao); background:var(--st-atencao-bg); }
.selo-ok{      color:var(--ink-2);      background:var(--white); }

.vazio{ text-align:center; color:var(--st-ok); font-size:.88rem; padding:.75rem 0; }

/* ── barra de composição ───────────────────────────────── */
.barra{
  display:flex;
  height:12px;
  border-radius:999px;
  overflow:hidden;
  margin-top:1.2rem;
  background:var(--surface);
  gap:2px;                      /* respiro entre segmentos, some se só houver um */
}
.barra span{ height:100%; }
.seg-atendida{ background:var(--dado-atendida); }
.seg-parcial{  background:var(--dado-parcial); }
.seg-aberta{   background:var(--dado-aberta); }

/* legenda escrita: a cor nunca carrega o dado sozinha */
.legenda-dados{
  list-style:none;
  margin:.8rem 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.4rem 1.1rem;
  font-size:.83rem;
  color:var(--ink-2);
}
.legenda-dados li{ display:flex; align-items:center; gap:.4rem; }
.ponto{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.legenda-dados .n{ font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }

/* linha de contexto positivo (o que está por vir, dentro do prazo) */
.destaque-linha{
  margin:1.1rem 0 0;
  padding:.7rem .85rem;
  border-radius:var(--r-sm);
  background:var(--surface);
  color:var(--ink-2);
  font-size:.85rem;
}

/* ── alertas e notas ───────────────────────────────────── */
.alerta{
  margin:1.1rem 0 0;
  padding:.7rem .85rem;
  border-radius:var(--r-sm);
  background:var(--st-critico-bg);
  color:var(--st-critico);
  font-size:.85rem;
  font-weight:500;
}

.nota-card{
  margin:1.1rem 0 0;
  font-size:.78rem;
  line-height:1.5;
  color:var(--ink-3);
}
.nota-card.destaque{
  padding:.7rem .85rem;
  background:var(--surface);
  border-radius:var(--r-sm);
  color:var(--ink-2);
}
.nota-card strong{ color:var(--ink); font-weight:600; }

/* ── rodapé ────────────────────────────────────────────── */
.rodape{ margin-top:1.5rem; text-align:center; }
.nota{ font-size:.75rem; color:var(--ink-3); margin:.9rem 0 0; line-height:1.5; }

@media (max-width: 360px){
  .hero{ font-size:2.5rem; }
  .card{ padding:1.15rem; }
}