/* ================= e34: infraestrutura medida (Módulo X, itens 322 a 329) =================
   Só os tokens da e03. A coisa memorável desta tela é a FONTE embaixo de cada número
   (.inf-fonte) e o cartão vermelho do que não foi medido (.inf-nao-medido): é o que separa
   medição de texto fixo. Ordem: base → componentes → @media. */

/* ---- capa ---- */
.inf-capa { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--esp-6); align-items: center; padding: var(--esp-6); }
.inf-capa-texto h3 { font-size: var(--t-titulo); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; max-width: 34ch; }
.inf-capa-texto p { color: var(--apoio); margin: var(--esp-2) 0 0; max-width: 88ch; }
.inf-carimbo { display: flex; align-items: center; gap: 6px; margin-top: var(--esp-3) !important; color: var(--ok) !important; font-size: var(--t-rotulo); }
.inf-carimbo b { color: var(--tinta); }
.inf-capa-acoes { display: flex; flex-direction: column; gap: var(--esp-2); }
.inf-capa-acoes button { margin: 0; white-space: nowrap; }

/* ---- duas colunas de blocos ---- */
.inf-colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-5); align-items: start; }
.inf-colunas > .bloco { margin: 0; }

/* ---- o selo do item do edital, no título do bloco ---- */
.inf-itens {
  display: inline-block; margin-left: var(--esp-2); padding: 2px 8px; border-radius: 999px;
  background: var(--azul-claro-fundo); color: var(--azul-escuro);
  font-size: var(--t-nota); font-weight: 600; letter-spacing: .01em; vertical-align: middle; white-space: nowrap;
}

/* ---- a linha medida: rótulo, valor e a FONTE ---- */
.inf-grade { display: grid; gap: var(--esp-1); }
.inf-linha { display: grid; grid-template-columns: minmax(0, 20ch) minmax(0, 1fr); gap: 2px var(--esp-4); padding: var(--esp-2) 0; border-bottom: 1px solid var(--borda); }
.inf-linha:last-child { border-bottom: 0; }
.inf-rotulo { grid-row: span 2; color: var(--apoio); font-size: var(--t-rotulo); align-self: center; }
.inf-valor { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.inf-valor .selo, .inf-valor .tag { vertical-align: middle; }
.inf-fonte { color: var(--apoio); font-size: var(--t-nota); font-family: var(--fonte-codigo); line-height: 1.45; overflow-wrap: anywhere; }
.inf-sub { color: var(--apoio); font-weight: 400; font-size: var(--t-rotulo); }
.mono { font-family: var(--fonte-codigo); font-size: var(--t-rotulo); }

.inf-h4 { margin: var(--esp-6) 0 var(--esp-2); font-size: var(--t-bloco); font-weight: 600; }
.inf-h4:first-child { margin-top: 0; }
.inf-h4-falta { color: var(--erro); }
.inf-nota { margin: var(--esp-3) 0 0; color: var(--apoio); font-size: var(--t-rotulo); max-width: 96ch; }
.inf-nota-forte { color: var(--tinta); border-left: 3px solid var(--alerta); padding-left: var(--esp-3); }

/* ---- o cartão do que NÃO foi medido: aparece de propósito ---- */
.inf-nao-medido { margin: var(--esp-4) 0 0; padding: var(--esp-4); border-radius: var(--raio-controle); background: var(--alerta-fundo); box-shadow: inset 0 0 0 1px rgba(143, 91, 0, .22); }
.inf-nm-topo { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; color: var(--alerta); }
.inf-nm-topo b { color: var(--tinta); }
.inf-nm-selo { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--alerta); color: var(--branco); font-size: var(--t-nota); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.inf-nm-motivo { margin: var(--esp-2) 0 0; max-width: 92ch; }
.inf-nm-falta { margin: var(--esp-2) 0 0; color: var(--apoio); font-size: var(--t-rotulo); max-width: 92ch; }
.inf-nm-falta b { color: var(--tinta); }

/* ---- serviços de apoio sondados ---- */
.inf-servicos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--esp-3); }
.inf-serv { padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-controle); background: var(--fundo-suave); box-shadow: inset 0 0 0 1px var(--borda); }
.inf-serv.ok { box-shadow: inset 0 0 0 1px rgba(30, 127, 79, .28); }
.inf-serv.fora { background: var(--erro-fundo); box-shadow: inset 0 0 0 1px rgba(180, 35, 24, .28); }
.inf-serv .inf-nao-medido { margin: 0; }
.inf-serv-topo { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; }
.inf-serv.ok .inf-serv-topo .icone { color: var(--ok); }
.inf-serv.fora .inf-serv-topo .icone { color: var(--erro); }
.inf-serv-papel { margin: var(--esp-2) 0; color: var(--apoio); font-size: var(--t-rotulo); }

/* ---- peças separadas (o que permite escalar / o que recupera) ---- */
.inf-pecas { display: grid; gap: var(--esp-2); }
.inf-peca { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--esp-2); padding: var(--esp-3); border-radius: var(--raio-controle); background: var(--ok-fundo); }
.inf-peca .icone { grid-row: span 2; color: var(--ok); margin-top: 2px; }
.inf-peca b { font-weight: 600; }
.inf-peca span { color: var(--apoio); font-size: var(--t-rotulo); }

/* ---- o que NÃO existe ---- */
.inf-faltas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-2); }
.inf-faltas li { display: grid; gap: 2px; padding: var(--esp-3) var(--esp-4); border-radius: var(--raio-controle); background: var(--erro-fundo); box-shadow: inset 3px 0 0 var(--erro); }
.inf-porque, .inf-quem { color: var(--apoio); font-size: var(--t-rotulo); }
.inf-quem { font-weight: 600; color: var(--erro); }

/* ---- gavetas de documento do provedor ---- */
.inf-gavetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--esp-3); }
.inf-gaveta { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-4); border-radius: var(--raio-controle); background: var(--fundo-suave); box-shadow: inset 0 0 0 1px var(--borda); }
.inf-gaveta.cheia { background: var(--ok-fundo); box-shadow: inset 0 0 0 1px rgba(30, 127, 79, .28); }
.inf-gaveta.vazia { background: var(--alerta-fundo); box-shadow: inset 0 0 0 1px rgba(143, 91, 0, .22); }
.inf-gaveta-topo { display: flex; align-items: flex-start; gap: var(--esp-2); flex-wrap: wrap; }
.inf-gaveta.cheia .inf-gaveta-topo .icone { color: var(--ok); }
.inf-gaveta.vazia .inf-gaveta-topo .icone { color: var(--alerta); }
.inf-gaveta-topo b { flex: 1 1 14ch; font-weight: 600; }
.inf-gaveta-arq { margin: 0; display: grid; gap: 2px; font-weight: 600; }
.inf-gaveta-pedir { margin: 0; color: var(--apoio); font-size: var(--t-rotulo); }
.inf-gaveta-pedir b { color: var(--tinta); }
.inf-gaveta-acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: auto; }
.inf-gaveta-acoes button { margin: 0; }

@media (max-width: 1100px) {
  .inf-colunas { grid-template-columns: 1fr; }
  .inf-capa { grid-template-columns: 1fr; }
  .inf-capa-acoes { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .inf-capa { padding: var(--esp-4); gap: var(--esp-4); }
  .inf-capa-texto h3 { font-size: 20px; }
  .inf-capa-acoes button { flex: 1 1 100%; }
  /* no celular a linha medida empilha: rótulo, valor, fonte */
  .inf-linha { grid-template-columns: 1fr; padding: var(--esp-3) 0; }
  .inf-rotulo { grid-row: auto; }
  .inf-gavetas, .inf-servicos { grid-template-columns: 1fr; }
  .inf-nm-selo { margin-left: 0; }
  .inf-gaveta-acoes button { flex: 1 1 100%; }
}

/* ---- cenário X.1: cartão por serviço contratado ---- */
.inf-svcs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--esp-3); }
.inf-svc { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-4); border-radius: var(--raio-controle); background: var(--fundo-suave); box-shadow: inset 0 0 0 1px var(--borda); }
.inf-svc.ok { background: var(--ok-fundo); box-shadow: inset 0 0 0 1px rgba(30, 127, 79, .28); }
.inf-svc.fora { background: var(--erro-fundo); box-shadow: inset 0 0 0 1px rgba(180, 35, 24, .28); }
.inf-svc-topo { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; }
.inf-svc.ok .inf-svc-topo .icone { color: var(--ok); }
.inf-svc.fora .inf-svc-topo .icone { color: var(--erro); }
.inf-svc-topo b { font-weight: 700; }
.inf-svc-desc { margin: 0; color: var(--apoio); font-size: var(--t-rotulo); }
.inf-svc-dados { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px var(--esp-3); margin: 0; }
.inf-svc-dados dt { color: var(--apoio); font-size: var(--t-rotulo); }
.inf-svc-dados dd { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.inf-svc .inf-fonte { margin-top: auto; }

/* ---- cenário X.2: o número de processos em destaque ---- */
.inf-grande { font-size: var(--t-numero); font-weight: 700; line-height: 1; letter-spacing: -.02em; }

@media (max-width: 640px) {
  .inf-svcs { grid-template-columns: 1fr; }
  .inf-svc-dados { grid-template-columns: 1fr; gap: 0; }
  .inf-svc-dados dd { margin-bottom: var(--esp-2); }
}