/* Aba Documentos — a lista de modelos e o modelo aberto.
 *
 * A grade e os cartões continuam sendo os de `.menu-grid` / `.menu-card`, do main.css. O que muda
 * é que o cartão deixou de ser um link para virar um BOTÃO: ele não navega para uma página, abre
 * um modelo dentro da própria aba. As três regras abaixo desfazem o que o navegador desenha por
 * conta própria num <button> e que um <a> não tinha. */

button.menu-card {
    font: inherit;
    cursor: pointer;
    width: 100%;
}

/* O botão de voltar da lista de modelos. Fica acima do modelo aberto, e não dentro dele: o módulo
 * do modelo reescreve o conteúdo do elemento que recebe, e levaria o botão junto. */
.documentos-voltar {
    margin-bottom: 16px;
}

/* As categorias da lista de modelos.
 *
 * O TÍTULO SEPARA SEM COMPETIR. Ele fica menor que o nome dos cartões (16px, peso 800), não maior:
 * quem procura um documento procura pelo NOME dele, e um cabeçalho graúdo a cada quatro cartões
 * rouba o olho justamente de onde a informação está. Caixa alta miúda, cinza e com um fio
 * atravessando o resto da linha — é régua, não manchete.
 *
 * A margem é entre seções, e não no topo de cada uma: a primeira categoria encosta no título da
 * página como a grade encostava antes. */
.documentos-categoria + .documentos-categoria {
    margin-top: 36px;
}

.documentos-categoria-titulo {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #64748b;
}

.documentos-categoria-titulo::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

/* A folha autônoma dentro da aba. UM <iframe> SEM ALTURA NASCE COM 150px — o padrão do
   HTML —, e o documento apareceria como uma tirinha. Esta altura é só o ponto de partida: quem
   manda é a medida que visual.js faz do espaço que sobra de verdade. Chutar aqui foi o que
   deixava 79px de branco embaixo com o documento cortado em cima. */
.documentos-quadro {
    display: block;
    width: 100%;
    height: calc(100vh - 170px);
    min-height: 420px;
    border: 0;
    border-radius: 8px;
    background: #525659;
}

/* O modelo aberto ocupa a largura toda; quem desenha dali para dentro é o módulo dele. */
.documentos-modelo {
    display: block;
}