/* Casca do cliente e Visão geral (fatia 22).
   Layout da casca (barra lateral, cabeçalho, conteúdo) e da grade da Visão geral, desenhada por
   public/visao-geral.js. Só tokens do giro-v1: nenhuma cor, fonte ou sombra solta. Carregar
   depois de ds/giro-v1/tokens.css e ds/giro-v1/components.css.
   Pontos de quebra do giro-v1 (ESPECIFICACAO.md, Layout responsivo): acima de 1100 px a barra tem
   238 px; de 761 a 1100 px, 205 px; até 760 px a barra vira faixa rolável no topo e tudo vira
   uma coluna. */

/* ---------- casca ---------- */

.casca {
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr);
  align-items: start;
  min-height: 100vh;
  background: var(--giro-bg);
}

.casca__barra {
  position: sticky;
  top: 0;
  z-index: var(--giro-z-nav);
  display: flex;
  flex-direction: column;
  gap: var(--giro-space-1);
  min-height: 100vh;
  padding: var(--giro-space-5) var(--giro-space-3) var(--giro-space-5) 0;
  background: var(--giro-surface);
  border-right: 1px solid var(--giro-border);
}

.casca__marca {
  display: flex;
  align-items: center;
  gap: var(--giro-space-2);
  padding: 0 var(--giro-space-4) var(--giro-space-5);
}

.casca__marca img { display: block; height: 26px; width: auto; }

.casca__item {
  display: flex;
  align-items: center;
  gap: var(--giro-space-2);
  width: 100%;
  min-height: var(--giro-control-height);
  padding: var(--giro-space-2) var(--giro-space-4);
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0 var(--giro-radius-md) var(--giro-radius-md) 0;
  background: transparent;
  color: var(--giro-text);
  font-size: var(--giro-text-sm);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--giro-duration) var(--giro-ease), border-color var(--giro-duration) var(--giro-ease);
}

.casca__item:hover { background: var(--giro-surface-subtle); }

/* item ativo: a borda laranja do desenho aprovado (acento de foco atual, regra do giro-v1) */
.casca__item--ativo,
.casca__item[aria-current="page"] {
  border-left-color: var(--giro-brand-orange);
  background: var(--giro-surface-subtle);
  color: var(--giro-brand-green);
  font-weight: 700;
}

.casca__item:disabled,
.casca__item[aria-disabled="true"] {
  background: transparent;
  color: var(--giro-disabled-text);
  cursor: not-allowed;
}

.casca__conteudo {
  min-width: 0;
  width: 100%;
  max-width: var(--giro-content-max);
  padding: var(--giro-space-6) var(--giro-space-7) var(--giro-space-7);
}

.casca__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--giro-space-4);
}

/* ---------- visão geral ---------- */

.visao {
  display: grid;
  gap: var(--giro-space-5);
  min-width: 0;
}

.visao__identidade { display: grid; gap: var(--giro-space-1); min-width: 0; }
.visao__nome { overflow-wrap: anywhere; }
.visao__selos { justify-content: flex-end; }

.visao__cartoes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--giro-space-4);
}

.visao__cartao {
  display: grid;
  align-content: start;
  gap: var(--giro-space-2);
}

/* o rótulo do cartão é um h2 com cara de eyebrow: a regra de título do giro-v1 (.giro h2) é mais
   específica que .giro-eyebrow, então o tamanho volta aqui */
.visao__cartao h2.giro-eyebrow {
  font-size: var(--giro-text-xs);
  line-height: 1.5;
  letter-spacing: .1em;
}

.visao__cartao .giro-muted,
.visao__cartao .giro-help { font-size: var(--giro-text-sm); }

.visao__numero {
  font-size: var(--giro-text-2xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--giro-brand-green);
  font-variant-numeric: tabular-nums;
}

.visao__numero--vazio {
  font-size: var(--giro-text-lg);
  color: var(--giro-text-muted);
}

.visao__variacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--giro-space-2);
  font-size: var(--giro-text-xs);
}

/* queda: laranja da marca como acento, com a seta e o sinal no texto (a cor nunca é o único sinal) */
.visao__delta--desce {
  color: var(--giro-accent-text);
  background: var(--giro-accent-bg);
}

.visao__fases {
  display: grid;
  gap: var(--giro-space-1);
  margin: var(--giro-space-2) 0 0;
  padding: 0;
  list-style: none;
}

.visao__fase {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr);
  grid-template-areas: "nome barra";
  align-items: center;
  gap: var(--giro-space-2);
  min-width: 0;
}

.visao__fase-barra {
  grid-area: barra;
  display: block;
  height: 6px;
  border-radius: var(--giro-radius-sm);
  background: var(--giro-disabled-bg);
  overflow: hidden;
}

.visao__fase-feito { display: block; height: 100%; background: var(--giro-brand-green); }
.visao__fase--atual .visao__fase-barra { box-shadow: inset 0 0 0 1px var(--giro-brand-orange); }
.visao__fase--atual .visao__fase-feito { background: var(--giro-brand-orange); }

.visao__fase-nome {
  grid-area: nome;
  font-size: var(--giro-text-xs);
  color: var(--giro-text-muted);
}

.visao__fase--atual .visao__fase-nome { color: var(--giro-text); font-weight: 700; }

.visao__portao {
  display: grid;
  gap: var(--giro-space-1);
  padding-top: var(--giro-space-2);
  border-top: 1px solid var(--giro-border);
}

.visao__grade {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--giro-space-4);
  align-items: start;
}

.visao__coluna {
  display: grid;
  gap: var(--giro-space-4);
  min-width: 0;
}

.visao__bloco { display: grid; gap: var(--giro-space-4); }

.visao__titulo {
  display: flex;
  align-items: center;
  font-size: var(--giro-text-md);
  font-weight: 700;
  color: var(--giro-text);
}

.visao__falta { display: block; margin-top: var(--giro-space-1); }

/* no funil a etapa é cabeçalho de linha, mas não leva o fundo do cabeçalho de coluna; o número
   com a variação não quebra no meio ("13,1" numa linha e "mil" na outra). A frase do que falta
   mora na célula do mês atual e quebra em linhas, sem alargar a coluna da etapa. */
.visao__bloco .giro-table tbody th { background: transparent; color: var(--giro-text); font-weight: 700; }
.visao__bloco .giro-table td.num { white-space: nowrap; }
.visao__bloco .giro-table td.visao__atual-falta { white-space: normal; min-width: 14em; }
.visao__bloco .giro-table td.visao__atual-falta .visao__falta { text-align: left; }

/* o funil em cartões empilhados: só abaixo de 760 px (a regra de mídia no fim troca as formas) */
.visao__funil-cartoes {
  display: none;
  gap: var(--giro-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.visao__funil-cartao {
  display: grid;
  gap: var(--giro-space-1);
  padding-bottom: var(--giro-space-3);
  border-bottom: 1px solid var(--giro-border);
}

.visao__funil-cartao:last-child { padding-bottom: 0; border-bottom: 0; }
.visao__funil-etapa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--giro-space-2); }
.visao__funil-etapa .giro-muted { font-size: var(--giro-text-sm); }

.visao__funil-valores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--giro-space-1) var(--giro-space-3);
  font-variant-numeric: tabular-nums;
}

.visao__funil-mes { white-space: nowrap; }
.visao__funil-mes .giro-muted { font-size: var(--giro-text-sm); }
.visao__funil-mes--atual strong { color: var(--giro-brand-green); }
.visao__funil-fonte { font-size: var(--giro-text-sm); }

/* fatia 29: as partes por canal de vendas e visitas, logo abaixo do total da etapa. Na tabela, uma
   linha por canal com recuo e texto menor (o total continua sendo a linha principal); no cartão do
   celular, uma lista curta de canal, valor e variação. */
.visao__bloco .giro-table tr.visao__funil-canal th,
.visao__bloco .giro-table tr.visao__funil-canal td {
  padding-top: var(--giro-space-1);
  padding-bottom: var(--giro-space-1);
  font-size: var(--giro-text-sm);
}
.visao__bloco .giro-table tr.visao__funil-canal th { padding-left: var(--giro-space-6); font-weight: 400; }
.visao__canais {
  display: grid;
  gap: var(--giro-space-1);
  margin: 0;
  padding: 0 0 0 var(--giro-space-3);
  list-style: none;
  font-size: var(--giro-text-sm);
  font-variant-numeric: tabular-nums;
}
.visao__canal { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--giro-space-2); }
.visao__bloco .giro-table td.num .giro-badge { display: flex; width: max-content; margin: var(--giro-space-1) 0 0 auto; }
.visao__bloco .giro-table th,
.visao__bloco .giro-table td { padding: var(--giro-space-3); }

.visao__lista {
  display: grid;
  gap: var(--giro-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.visao__item {
  display: grid;
  justify-items: start;
  gap: var(--giro-space-1);
  padding-bottom: var(--giro-space-3);
  border-bottom: 1px solid var(--giro-border);
}

.visao__item:last-child { padding-bottom: 0; border-bottom: 0; }
.visao__selos-item { gap: var(--giro-space-2); }
/* fatia 32c: a fonte citada no conselho da semana tem texto de gente (nome de SKU, título de tarefa): quebra a
   linha em vez de alargar o cartão, e o cartão nunca passa da coluna */
.visao__bloco[data-bloco="conselho"] > *, .visao__bloco[data-bloco="conselho"] .visao__item > * { min-width: 0; max-width: 100%; }
.giro-badge.conselho__fonte { white-space: normal; overflow-wrap: anywhere; text-align: left; }

.visao__entrega {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--giro-space-3);
}

.visao__entrega .visao__acao { grid-column: 1 / -1; }

.visao__data {
  font-size: var(--giro-text-sm);
  font-weight: 700;
  color: var(--giro-brand-green);
  font-variant-numeric: tabular-nums;
}

.visao__entrega-titulo { min-width: 0; overflow-wrap: anywhere; }

.visao__acao { padding-left: 0; padding-right: 0; }

.visao__mais { font-size: var(--giro-text-sm); }

/* ---------- escada ---------- */

.escada {
  display: grid;
  gap: var(--giro-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.escada__linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--giro-space-1) var(--giro-space-4);
}

.escada__produto { grid-column: 1; grid-row: 1; display: grid; min-width: 0; overflow-wrap: anywhere; }
.escada__degraus { grid-column: 2; grid-row: 1; }
.escada__linha .visao__acao { grid-column: 3; grid-row: 1; }
.escada__produto .giro-muted { font-size: var(--giro-text-sm); }
.escada__criterio { grid-column: 1 / -1; grid-row: 2; font-size: var(--giro-text-sm); }
.escada__proxima { grid-column: 1 / -1; grid-row: 3; }

.escada__degraus {
  display: grid;
  grid-template-columns: repeat(6, 28px);
  gap: var(--giro-space-1);
}

.escada__degrau {
  display: block;
  height: 14px;
  border: 2px solid transparent;
  border-radius: var(--giro-radius-sm);
  background: var(--giro-disabled-bg);
}

.escada__degrau--feito { background: var(--giro-brand-green); }

.escada__degrau--atual {
  background: var(--giro-accent-bg);
  border-color: var(--giro-brand-orange);
}

.escada__degrau--futuro { background: var(--giro-disabled-bg); }

/* ---------- 761 a 1100 px ---------- */

@media (max-width: 1100px) {
  .casca { grid-template-columns: 205px minmax(0, 1fr); }
  .casca__conteudo { padding: var(--giro-space-5) var(--giro-space-5) var(--giro-space-6); }
  .visao__cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .visao__grade { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- até 760 px: barra vira menu horizontal rolável no topo, tudo em uma coluna ---------- */

@media (max-width: 760px) {
  .casca { grid-template-columns: minmax(0, 1fr); min-height: 0; }

  .casca__barra {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    min-height: 0;
    padding: 0 var(--giro-space-2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border-right: 0;
    border-bottom: 1px solid var(--giro-border);
  }

  .casca__marca { flex-shrink: 0; padding: 0 var(--giro-space-3) 0 var(--giro-space-2); }
  .casca__marca img { height: 20px; }

  .casca__item {
    flex-shrink: 0;
    width: auto;
    white-space: nowrap;
    border-left: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    padding: var(--giro-space-2) var(--giro-space-3);
  }

  .casca__item--ativo,
  .casca__item[aria-current="page"] { border-bottom-color: var(--giro-brand-orange); }

  .casca__conteudo { padding: var(--giro-space-4) var(--giro-space-4) var(--giro-space-6); }

  .visao__selos { justify-content: flex-start; }
  .visao .giro-card { padding: var(--giro-space-4); }
  /* o funil troca a tabela pelos cartões: nada de rolagem lateral escondendo o mês atual */
  .visao__funil-tabela { display: none; }
  .visao__funil-cartoes { display: grid; }
  .visao__cartoes { grid-template-columns: minmax(0, 1fr); }
  .visao__grade { grid-template-columns: minmax(0, 1fr); }

  .escada__linha { grid-template-columns: minmax(0, 1fr) auto; }
  .escada__linha .visao__acao { grid-column: 2; grid-row: 1; }
  .escada__degraus { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .escada__criterio { grid-row: 3; }
  .escada__proxima { grid-row: 4; }
}