/* Catálogo de Fornecedores Porto Central
   Design extraído do próprio PDF (Edição 02 · 2026):
     azul institucional #0E56CE · barra de card #F1F5FD · tipografia Rubik
   Rubik é auto-hospedada de propósito: carregar do Google manda o IP do
   visitante pra fora, e este projeto tem LGPD em cima. */

@font-face {
  font-family: 'Rubik'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url('/fonts/rubik.woff2') format('woff2');
}
@font-face {
  font-family: 'Rubik'; font-style: italic; font-weight: 300 800; font-display: swap;
  src: url('/fonts/rubik-italic.woff2') format('woff2');
}

:root {
  --azul:        #0E56CE;
  --azul-claro:  #1868D3;
  --barra:       #F1F5FD;
  --tinta:       #1F2933;
  --tinta-fraca: #5B6672;
  --linha:       #E3E8EF;
  --alerta:      #B42318;
  --alerta-bg:   #FEF3F2;
  --ok:          #067647;
  --raio:        6px;
  --max:         1180px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #fff; color: var(--tinta);
  font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px; line-height: 1.5;
}
a { color: var(--azul); }

/* cabeçalho, abas e rodapé moram em site.css — são do layout, não do catálogo */

/* ------------------------------------------------------------ layout */
.wrap { max-width: var(--max); margin: 0 auto; padding: 22px 20px 60px; }
.colunas { display: grid; grid-template-columns: 268px 1fr; gap: 26px; align-items: start; }
@media (max-width: 900px) { .colunas { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ filtros */
.filtros {
  border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px;
  position: sticky; top: 16px;
}
@media (max-width: 900px) { .filtros { position: static; } }
.filtros h2 {
  margin: 0 0 12px; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-fraca); font-weight: 700;
}
.campo { margin-bottom: 13px; }
.campo label {
  display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta-fraca); font-weight: 600; margin-bottom: 4px;
}
.campo select, .campo input {
  width: 100%; padding: 7px 9px; border: 1px solid var(--linha); border-radius: 4px;
  font: inherit; font-size: .87rem; background: #fff; color: var(--tinta);
}
.campo select:focus, .campo input:focus { outline: 2px solid var(--azul); outline-offset: -1px; }
.acoes { display: flex; gap: 8px; margin-top: 14px; }
.botao {
  flex: 1; padding: 8px 12px; border-radius: 4px; border: 1px solid var(--azul);
  background: var(--azul); color: #fff; font: inherit; font-size: .85rem; font-weight: 600;
  cursor: pointer; text-align: center; text-decoration: none;
}
.botao.limpo { background: #fff; color: var(--azul); }

/* -------------------------------------------------------- resultados */
.resumo {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  flex-wrap: wrap; margin-bottom: 14px; color: var(--tinta-fraca); font-size: .88rem;
}
.resumo strong { color: var(--tinta); font-size: 1rem; }

.setor {
  display: flex; align-items: center; gap: 14px; margin: 26px 0 12px;
  font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--tinta);
}
.setor::after { content: ''; flex: 1; height: 1px; background: var(--linha); }

/* ------------------------------------------------------------- card */
/* espelha o card impresso: barra de título, sub-barra com município e
   CNPJ, linhas de ícone, descrição em itálico e o quadro de logo à direita */
.card {
  border: 1px solid var(--linha); border-radius: var(--raio);
  margin-bottom: 16px; overflow: hidden; background: #fff;
}
.card-topo {
  background: var(--barra); padding: 9px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card-topo h3 {
  margin: 0; font-size: .95rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--azul);
}
.card-sub {
  background: var(--barra); border-top: 1px solid #E1E9F8;
  padding: 6px 14px; display: flex; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; font-style: italic; font-size: .84rem; color: var(--azul-claro);
}
.card-corpo { display: flex; gap: 18px; padding: 14px; }
.card-dados { flex: 1; min-width: 0; }
.linha { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 5px; font-size: .88rem; }
.linha svg { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 2px; fill: #9AA5B1; }
.linha .valor { min-width: 0; overflow-wrap: anywhere; }
.descricao {
  margin: 9px 0 0; font-style: italic; font-size: .85rem; color: var(--tinta-fraca);
}

/* quadro de logo — no PDF vem vazio; é o buraco que a área logada preenche */
.logo {
  flex: 0 0 116px; height: 116px; border: 1px solid var(--linha); border-radius: 4px;
  display: flex; align-items: center; justify-content: center; background: #FAFBFC;
}
.logo img { max-width: 88%; max-height: 88%; object-fit: contain; }
.logo .vazio { width: 46px; height: 46px; fill: #DCE1E7; }
@media (max-width: 620px) { .logo { display: none; } }

/* ------------------------------------------------------------ selos */
.selos { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.selo {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.selo-aid    { background: var(--azul); color: #fff; }
.selo-aii    { background: #D6E4FB; color: #0B3F98; }
.selo-outros { background: #EEF1F5; color: var(--tinta-fraca); }
.selo-km     { background: #fff; color: var(--tinta-fraca); border: 1px solid var(--linha); }
.selo-alerta { background: var(--alerta-bg); color: var(--alerta); }
.selo-cat    { background: #fff; color: var(--azul); border: 1px solid #C9DAF7; }

.aviso {
  margin: 8px 14px 14px; padding: 8px 11px; border-radius: 4px;
  background: var(--alerta-bg); border-left: 3px solid var(--alerta);
  font-size: .82rem; color: var(--alerta);
}
.nota {
  margin: 0 14px 12px; padding: 8px 11px; border-radius: 4px; background: #FFFBEB;
  border-left: 3px solid #B7791F; font-size: .8rem; color: #7A5B10;
}

.vazio-total { padding: 50px 20px; text-align: center; color: var(--tinta-fraca); }

/* paginação do Laravel */
.wrap nav[role="navigation"] { margin-top: 20px; font-size: .87rem; }
.wrap nav[role="navigation"] svg { width: 16px; height: 16px; vertical-align: middle; }