/* Linha dos números da Indicação e das Fichas em colunas iguais.
   Antes herdavam 30px/44px da linha de cima e quebravam letra a letra. */
@media (max-width: 820px) {
  .ind-linha, .fch-linha {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .ind-linha__pos { grid-column: 1 !important; width: auto !important; }
  .fch-ava { display: none !important; }
  .ind-linha__ava { grid-column: 2 !important; }
  .ind-linha__id { grid-column: 1 / -1 !important; }
  .fch-id { grid-column: 1 / -1 !important; align-self: center !important; }
  .fch-seta { display: none !important; }
  .ind-linha .ind-linha__num, .fch-linha .fch-num {
    grid-column: auto !important;
    min-width: 0 !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    hyphens: none !important;
  }
  .ind-linha__num span, .fch-num span {
    display: block !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }
  .ind-linha__evo, .ind-linha__chips, .ind-linha__aviso { grid-column: 1 / -1 !important; }
}
@media (max-width: 820px) {
  .ind-linha__evo { min-width: 0 !important; width: 100% !important; }
  .ind-barras { width: 100% !important; min-width: 0 !important; }
  .ind-bar {
    display: grid !important;
    grid-template-columns: minmax(48px, 76px) minmax(40px, 1fr) 32px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .ind-bar__trilho { min-width: 40px !important; height: 8px !important; }
}
/* Cinco numeros agora (media, casa, areas, avaliacoes, dominadas).
   O mapeamento antigo so previa tres, e os extras caiam soltos. */
@media (max-width: 820px) {
  .ind-linha {
    grid-template-areas: "pos ava id" "n1 n2 n3" "n4 n5 n5" "evo evo evo"
                         "chip chip chip" "avis avis avis" !important;
  }
  .ind-linha .ind-linha__num:nth-of-type(4) { grid-area: n4 !important; }
  .ind-linha .ind-linha__num:nth-of-type(5) { grid-area: n5 !important; }
}
@media (min-width: 821px) {
  .ind-linha {
    grid-template-columns: 30px 40px minmax(140px, 1fr)
                           repeat(5, minmax(56px, 82px)) !important;
    align-items: center !important;
  }
  .ind-linha .ind-linha__num { text-align: center; align-self: center; }
  .ind-linha__evo { grid-column: 1 / -1; }
  .ind-linha__chips, .ind-linha__aviso { grid-column: 1 / -1; }
}