/* ============================================================================
   enviquo — 03-entrega-metrifique.css
   BRIEF §4 (SEÇÃO 02 ENTREGA · Paper) + §5 (SEÇÃO 03 METRIFIQUE · Canvas).
   Só classes .s03-. Consome tokens.css e a fundação (base.css).
   Mobile-first; breakpoints 768/1024. Larguras fluidas, zero scroll horizontal.
   NENHUMA animação própria: todo movimento vem do sistema .rv da fundação,
   que já respeita prefers-reduced-motion. Nenhum elemento interativo aqui.
   Diagonais: só 60° (chanfro do card destaque + barras com skewX(-30deg),
   que deixa os terminais no ângulo da marca).
   ========================================================================== */

/* ————————————————————————— §4 ENTREGA (Paper) ————————————————————————— */

.s03-entrega { background: var(--enviquo-paper); }

/* 3 colunas com check */
.s03-cols {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-12);
}

.s03-col {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--space-3);
  align-items: start;
  min-width: 0;
}

.s03-col svg {
  color: var(--gray-900);
  margin-top: 2px;
}

.s03-col p { color: var(--gray-700); }

.s03-col strong { color: var(--gray-900); }

/* faixa de mockups (DNS · reputação · higiene) */
.s03-mocks {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-16);
}

.s03-mock {
  padding: var(--space-6);
  min-width: 0;
}

/* cabeçalho e rodapé mono dos painéis de demonstração */
.s03-mock-head {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  color: var(--gray-600);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--gray-200);
}

.s03-mock-foot {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: var(--gray-500);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--gray-100);
}

/* — mockup DNS — */
.s03-dns-item {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-3);
  border-top: 1px solid var(--gray-100);
  min-width: 0;
}

.s03-dns-item:first-of-type { border-top: 0; }

.s03-dns-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.s03-dns-tipo {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  color: var(--gray-600);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 2px;
  padding: 1px var(--space-1);
  flex: none;
}

.s03-dns-nome {
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  color: var(--gray-900);
}

.s03-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-900);
  flex: none;
}

.s03-status svg { color: var(--gray-900); }

.s03-dns-host {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--gray-600);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* — mockup reputação por provedor — */
.s03-rep-item {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-top: 1px solid var(--gray-100);
  min-width: 0;
}

.s03-rep-item:first-of-type { border-top: 0; }

.s03-rep-nome {
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  color: var(--gray-900);
}

.s03-rep-meter {
  display: block;
  height: 6px;
  background: var(--gray-100);
  border-radius: var(--radius-pill);
  overflow: hidden;
  min-width: 0;
}

.s03-rep-fill {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: var(--gray-800);
  border-radius: var(--radius-pill);
}

.s03-rep-valor {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--gray-900);
}

/* — mockup higiene de lista — */
.s03-hig-bar {
  display: flex;
  height: 10px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--gray-100);
  margin-block: var(--space-4) var(--space-2);
}

.s03-hig-seg {
  flex: 0 0 var(--w, 0%);
  min-width: 4px;
}

/* friso Paper entre segmentos: fatias adjacentes distinguíveis sem depender
   só de cor (gray-500 × gray-400 têm só 1,4:1 entre si) */
.s03-hig-seg + .s03-hig-seg { border-inline-start: 2px solid var(--enviquo-paper); }

/* válidos = resto da barra (flex fluido). Os números do card (12.480/126/9)
   pedem barra ~97% escura; os 89/8/3 fixos de antes liam como "lista suja",
   contradizendo a própria coluna "Lista sempre limpa". */
.s03-hig-seg-ok     { flex: 1 1 auto; min-width: 0; background: var(--gray-800); }
.s03-hig-seg-bounce { background: var(--gray-500); }
/* gray-400 como FILL de gráfico: 3,19:1 sobre Paper (dado ≥3:1 do brief).
   O veto do manual ao #909090 é para TEXTO de interface; gray-300 aqui
   media 1,66:1 e reprovava. */
.s03-hig-seg-spam   { background: var(--gray-400); }

.s03-hig-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-top: 1px solid var(--gray-100);
}

.s03-hig-row:first-of-type { border-top: 0; }

.s03-hig-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.875rem;
  color: var(--gray-700);
  min-width: 0;
}

.s03-hig-dot {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 2px;
  flex: none;
}

.s03-hig-valor {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--gray-900);
}

/* ———————————————————————— §5 METRIFIQUE (Canvas) ———————————————————————— */

.s03-metrifique { background: var(--enviquo-canvas); }

/* bloco a: texto + indicadores | dashboard */
.s03-painel {
  display: grid;
  gap: var(--space-12);
  align-items: center;
  margin-top: var(--space-16);
}

.s03-painel-texto { min-width: 0; }

.s03-painel-texto > p {
  margin-top: var(--space-4);
  color: var(--gray-600);
}

.s03-indicadores {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.s03-indicador {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--gray-900);
  min-width: 0;
}

.s03-indicador-ico {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  flex: none;
  background: var(--enviquo-paper);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  color: var(--gray-900);
}

/* dashboard (card destaque; o chanfro 60° vem de .card-chanfro da fundação) */
.s03-dash-wrap { min-width: 0; }

.s03-dash {
  padding: var(--space-6);
  min-width: 0;
}

.s03-dash-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.s03-dash-titulo {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.s03-legenda {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.s03-legenda-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  color: var(--gray-600);
}

.s03-swatch {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 2px;
  background: var(--gray-500);
  flex: none;
}

.s03-swatch-receita { background: var(--enviquo-signal); }
.s03-swatch-escuro  { background: var(--gray-800); }
.s03-swatch-claro   { background: var(--gray-400); } /* casa com a 3ª fatia do donut; ≥3:1 */

/* gráfico de barras: séries cinza (envios) + UMA série vermelha (receita) */
.s03-chart {
  display: flex;
  align-items: flex-end;
  gap: clamp(0.5rem, 3vw, 1.25rem);
  block-size: 160px;
  margin-top: var(--space-6);
  border-bottom: 1px solid var(--gray-200);
  /* grid sutil em gray-200, letra do brief §2 (gray-100 sobre Paper era 1,13:1,
     invisível na prática) */
  background-image: repeating-linear-gradient(
    to top,
    transparent 0,
    transparent 39px,
    var(--gray-200) 39px,
    var(--gray-200) 40px
  );
}

.s03-grupo {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  block-size: 100%;
}

.s03-bar {
  flex: 1 1 0;
  max-inline-size: 1.375rem;
  block-size: var(--h, 10%);
  background: var(--gray-500);
  border-radius: 2px 2px 0 0;
}

.s03-bar-receita { background: var(--enviquo-signal); }

.s03-eixo {
  display: flex;
  gap: clamp(0.5rem, 3vw, 1.25rem);
  margin-top: var(--space-2);
}

.s03-eixo span {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  color: var(--gray-500);
}

/* rodapé do dashboard: donut neutro + tabela mono.
   Colunas por ESPAÇO REAL (auto-fit), não por breakpoint: com breakpoint fixo
   em 768 a tabela (min-content ≈229px) vazava +25px para fora do card
   chanfrado na faixa 1024–1090px, onde o painel vira 5fr/7fr e o rodapé
   encolhe (medido no Chrome, viewports 1024 e 1060). 16rem ≥ o min-content
   da tabela; min(100%, …) protege o card estreito de 320px. */
.s03-dash-foot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--gray-200);
}

.s03-foot-titulo {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  color: var(--gray-500);
  margin-bottom: var(--space-3);
}

.s03-donut-linha {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.s03-donut {
  inline-size: 104px;
  aspect-ratio: 1;
  flex: none;
  border-radius: 50%;
  /* fatias neutras com friso Paper de 1% entre elas (distinção sem depender
     de cor); terceira fatia em gray-400 = 3,19:1 sobre Paper (gray-300 dava
     1,66:1 e reprovava o piso de 3:1 para dado de gráfico) */
  background: conic-gradient(
    var(--gray-800) 0 57.5%,
    var(--enviquo-paper) 57.5% 58.5%,
    var(--gray-500) 58.5% 90.5%,
    var(--enviquo-paper) 90.5% 91.5%,
    var(--gray-400) 91.5% 99%,
    var(--enviquo-paper) 99% 100%
  );
  position: relative;
}

.s03-donut::after {
  content: "";
  position: absolute;
  inset: 27%;
  background: var(--enviquo-paper);
  border-radius: 50%;
}

.s03-donut-lista {
  display: grid;
  gap: var(--space-2);
}

.s03-donut-lista li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: var(--gray-600);
}

.s03-donut-valor {
  font-weight: 500;
  color: var(--gray-900);
}

.s03-tabela-bloco { min-width: 0; }

.s03-tabela {
  inline-size: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.s03-tabela th {
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  color: var(--gray-500);
  text-align: right;
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--gray-200);
}

.s03-tabela th:first-child { text-align: left; }

.s03-tabela td {
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--gray-900);
  text-align: right;
  padding-block: var(--space-2);
  border-top: 1px solid var(--gray-100);
  white-space: nowrap;
}

.s03-tabela td:first-child {
  text-align: left;
  color: var(--gray-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-inline-size: 12rem;
}

.s03-tabela tbody tr:first-child td { border-top: 0; }

.s03-tabela td:last-child { font-weight: 500; }

/* bloco b: 2 colunas de texto */
.s03-duo {
  display: grid;
  gap: var(--space-12);
  margin-top: var(--space-24);
}

.s03-duo-item { min-width: 0; }

.s03-duo-item::before {
  content: "";
  display: block;
  inline-size: 44px;
  block-size: 3px;
  background: var(--gray-900);
  transform: skewX(-30deg); /* terminais a 60°, ângulo da marca */
  margin-bottom: var(--space-6);
}

.s03-duo-item p {
  margin-top: var(--space-3);
  color: var(--gray-600);
}

/* bloco c: banner horizontal escuro */
.s03-banner {
  display: grid;
  margin-top: var(--space-24);
  background: var(--enviquo-ink);
  border-radius: 16px;
  overflow: hidden;
}

.s03-banner-texto {
  display: grid;
  justify-items: start;
  align-content: center;
  gap: var(--space-4);
  padding: clamp(2rem, 1.2rem + 3vw, 3.5rem);
}

.s03-banner-texto h3 { color: var(--enviquo-paper); }

.s03-banner-texto p { color: var(--gray-300); }

/* barra-acento: vermelho vivo permitido em fundo Ink (elemento gráfico) */
.s03-banner-risco {
  inline-size: 56px;
  block-size: 4px;
  background: var(--enviquo-signal);
  transform: skewX(-30deg); /* terminais a 60° */
}

.s03-banner-img {
  inline-size: 100%;
  block-size: auto;
}

/* ———————————————————————————— 768px+ ———————————————————————————— */
@media (min-width: 768px) {
  .s03-cols {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }

  .s03-mocks {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }

  .s03-indicadores {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4) var(--space-6);
  }

  .s03-duo {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-16);
  }

  .s03-banner { grid-template-columns: 1fr 1fr; }

  .s03-banner-img {
    block-size: 100%;
    object-fit: cover;
  }
}

/* ———————————————————————————— 1024px+ ———————————————————————————— */
@media (min-width: 1024px) {
  .s03-painel {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-16);
  }

  .s03-chart { block-size: 180px; }

  .s03-banner { grid-template-columns: 6fr 5fr; }
}