/* Grade de lançamento. Celular: um cartão por profissional (9 critérios empilhados, total fixo no topo do cartão).
   Tela larga (>= 1100 px): tabela com nome e total fixos e cabeçalho fixo. */
.grade { display: grid; gap: var(--esp-3); }
.cabeca { display: none; }

.linha {
  display: flex; flex-wrap: wrap;
  background: var(--cartao-fundo);
  border: 1px solid var(--cartao-borda);
  border-radius: var(--raio-2);
  box-shadow: var(--cartao-sombra);
  padding: 0 var(--esp-3) var(--esp-2);
}
.linha[hidden] { display: none; }

/* Celular: nome e total ficam lado a lado no alto do cartão (e grudam ao rolar), mesmo com o total
   sendo a última célula da linha no HTML. */
.c-nome, .c-total {
  position: sticky; top: 0; z-index: 2;
  padding: var(--esp-3) 0;
  background: var(--cartao-fundo);
  border-bottom: 1px solid var(--linha);
}
.c-nome { order: -2; flex: 1 1 0; min-width: 0; border-radius: var(--raio-2) 0 0 0; }
.c-total { order: -1; border-radius: 0 var(--raio-2) 0 0; }
.c-crit { order: 0; flex: 1 1 100%; }
.c-nome + .c-crit { border-top: 0; }
.nome-texto { font-weight: 700; font-size: var(--tam-3); color: var(--texto-forte); overflow-wrap: anywhere; }
.nome-estado { display: flex; align-items: center; gap: 6px; font-size: var(--tam-1); color: var(--texto-suave); }
.marca-completa { color: var(--positivo-borda); display: inline-flex; }
.marca-completa svg { display: block; }

.c-total { display: flex; align-items: center; gap: 6px; flex: none; }
.c-total .rotulo { font-size: var(--tam-1); color: var(--texto-suave); }
.total {
  min-width: 2.2ch; text-align: right;
  font-size: 1.75rem; line-height: 1; font-weight: 700; color: var(--texto-forte);
}
.total[data-sinal="neg"] { color: var(--negativo-tinta); }

.c-crit {
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3);
  padding: 6px 0;
  border-top: 1px solid var(--superficie-suave);
}
.crit-rotulo { min-width: 0; display: grid; }
.crit-nome {
  text-align: left; justify-self: start;
  min-height: 32px; padding: 0; border: 0; background: none;
  font-weight: 600; color: var(--texto-forte); cursor: help;
}
.crit-estado { font-size: var(--tam-1); color: var(--texto-suave); }
.crit-estado[hidden] { display: none; }

/* ---- Tela larga ---- */
@media (min-width: 1100px) {
  .grade {
    --nome: 160px; --tot: 68px;
    --col: calc(3 * var(--nota-largura) + 24px);
    display: block;
    overflow: auto;
    overscroll-behavior: contain;
    background: var(--superficie);
    border: 1px solid var(--cartao-borda);
    border-radius: var(--raio-2);
    box-shadow: var(--cartao-sombra);
  }
  .cabeca, .linha {
    display: grid;
    grid-template-columns: var(--nome) repeat(9, var(--col)) var(--tot);
    align-items: center;
    width: max-content; min-width: 100%;
  }
  .linha { background: var(--superficie); border: 0; border-top: 1px solid var(--linha); border-radius: 0; box-shadow: none; padding: 0; min-height: 96px; flex-wrap: nowrap; }
  .linha[hidden] { display: none; }

  .cabeca {
    position: sticky; top: 0; z-index: 4;
    background: var(--superficie-suave);
    font-size: var(--tam-1); font-weight: 700; color: var(--texto-forte);
  }
  .cabeca > * { padding: 6px 4px; text-align: center; align-self: stretch; display: flex; align-items: center; justify-content: center; line-height: 1.2; }
  .cabeca .c-nome { text-align: left; justify-content: flex-start; padding-left: var(--esp-4); }
  .cabeca .crit-nome { width: 100%; justify-content: center; text-align: center; min-height: 44px; font-size: var(--tam-1); padding: 0 2px; }

  .c-nome, .c-crit, .c-total { order: 0; flex: none; }
  .c-nome, .c-total { position: sticky; top: auto; z-index: 2; background: inherit; align-self: stretch; border-bottom: 0; border-radius: 0; padding-top: 0; padding-bottom: 0; }
  .c-nome { left: 0; padding: 8px var(--esp-3) 8px var(--esp-4); display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--linha); }
  .c-total { right: 0; justify-content: center; align-items: center; border-left: 1px solid var(--linha); }
  .linha .c-nome, .linha .c-total { background: var(--superficie); }
  .cabeca .c-nome, .cabeca .c-total { background: var(--superficie-suave); z-index: 5; }
  .c-total .rotulo { display: none; }

  .c-crit { justify-content: center; padding: 8px 4px; border-top: 0; }
  .crit-rotulo { display: none; }
  .nome-texto { font-size: var(--tam-2); }
}

@media (min-width: 1100px) and (hover: hover) {
  .linha:hover, .linha:hover .c-nome, .linha:hover .c-total { background: var(--neutro-50); }
}