/* Tela Relatorios (abas, numeros com icone, graficos, arquivos do contador) e cartao do teto do MEI
   (o cartao do teto tambem aparece na tela Inicio). */

/* seletor de mes no cabecalho */
.rel-seletor { flex-direction: row; align-items: center; gap: var(--e2); font-weight: 600; }
.rel-seletor svg { width: 18px; height: 18px; color: var(--cor); }
.rel-mes { width: auto; min-width: 150px; }

.abas button svg { width: 16px; height: 16px; }

/* numeros do mes */
.rel-numeros { margin-bottom: var(--e4); }
.rel-numeros > .cartao { margin-bottom: 0; }
.rel-numero { display: flex; gap: var(--e3); align-items: flex-start; }
.rel-numero-corpo { min-width: 0; }
.rel-numero .numero-grande { line-height: 1.2; margin: 2px 0; overflow-wrap: anywhere; }
.rel-numero-icone { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--neutro-clara); color: var(--suave); }
.rel-numero-icone svg { width: 20px; height: 20px; }
.rel-numero-icone.cor { background: var(--cor-clara); color: var(--cor); }
.rel-numero-icone.info { background: var(--info-clara); color: var(--info); }
.rel-numero-icone.lilas { background: var(--lilas-clara); color: var(--lilas); }
.rel-numero-icone.ok { background: var(--ok-clara); color: var(--ok); }

/* graficos */
.rel-grafico { position: relative; }

/* vendas: duas colunas no computador */
.rel-duas { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); align-items: start; }
.rel-duas > .cartao { margin-bottom: 0; }
.rel-linha { cursor: default !important; padding: 10px 2px !important; }
.rel-linha:hover { background: none !important; }
.rel-linha-icone { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--cor-clara); color: var(--cor); }
.rel-linha-icone svg { width: 18px; height: 18px; }
.rel-linha-barra { height: 6px; margin-top: 6px; }
.medidor-valor.rel-cor { background: var(--cor); }

/* contador: blocos de arquivo */
.rel-arquivo { display: flex; gap: var(--e3); align-items: center; }
.rel-arquivo-corpo { flex: 1; min-width: 0; }
.rel-arquivo-corpo p { margin: 2px 0 0; }
.rel-arquivo-acao { flex-shrink: 0; }

/* cartao do teto do MEI */
.rel-teto-topo { display: flex; justify-content: space-between; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.rel-teto-pct svg { width: 14px; height: 14px; }
.rel-teto-valor { display: flex; align-items: baseline; gap: 6px; margin: 6px 0; flex-wrap: wrap; }
.rel-teto-rodape { margin-top: var(--e2); }
.rel-teto .caixa-info { margin: 10px 0 0; }
.rel-teto-nota { margin: 10px 0 0; }
.rel-teto-nota + .rel-teto-nota { margin-top: 6px; }
.rel-teto:not(.compacto) .medidor { height: 14px; }
.rel-teto:not(.compacto) .numero-grande { font-size: 32px; }

@media (max-width: 760px) {
  .rel-numero { flex-direction: column; gap: var(--e2); }
  .rel-numero-icone { width: 32px; height: 32px; border-radius: 10px; }
  .rel-numero .numero-grande { font-size: 20px; }
  .rel-arquivo { flex-wrap: wrap; }
  .rel-arquivo-acao { flex-basis: 100%; }
  .rel-arquivo-acao > * { width: 100%; }
  .rel-duas { grid-template-columns: 1fr; }
  .rel-mes { min-width: 0; }
}