/**
 * @package     com_technicalreports
 * @subpackage  mod_technicalreports
 * @copyright   2024 Hirlei Carlos Pereira de Araújo
 * @license     GNU General Public License versão 2 ou posterior; consulte o arquivo License. txt
 * @author      Hirlei Carlos Pereira de Araújo <prof.hirleicarlos@gmail.com>
 *
 * Cartão "Filtrar categorias", entre o carrossel e a biblioteca.
 *
 * O fundo do chip selecionado sai dos mesmos tokens `--informes-chip-N` que
 * `cards.css` usa no chip de categoria do card: a cor do filtro e a cor que a
 * categoria tem nos itens são, por definição, a mesma.
 */

.mod-informes .informes__categorias-cartao {
    background: var(--informes-branco);
    border: 1px solid var(--informes-borda);
    border-radius: var(--informes-raio-card);
    padding: 20px 24px 24px;
}

/* =========================================================
   CABEÇALHO
   ========================================================= */

.mod-informes .informes__categorias-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.mod-informes .informes__categorias-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.mod-informes .informes__categorias-icone {
    display: inline-flex;
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--informes-navy);
}

.mod-informes .informes__categorias-titulo {
    margin: 0;
    font-family: var(--informes-fonte-titulo-bold);
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;
    color: var(--informes-titulo-cor, var(--informes-navy));
}

.mod-informes .informes__categorias-subtitulo {
    margin: 4px 0 0;
    font: normal normal 400 14px/18px var(--informes-fonte-corpo);
    color: var(--informes-texto-suave);
}

/* Ação textual, não botão de comando: fica leve, como na referência. */
.mod-informes .informes__categorias-limpar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    font: normal normal 400 14px/18px var(--informes-fonte-corpo);
    color: var(--informes-azul);
    cursor: pointer;
}

.mod-informes .informes__categorias-limpar:hover {
    color: var(--informes-navy);
    text-decoration: underline;
}

/* =========================================================
   CHIPS
   ========================================================= */

.mod-informes .informes__categorias-lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mod-informes .informes__categorias-item {
    display: flex;
}

/*
 * Quebra de linha controlada: item de largura total e altura zero. O wrap natural
 * encheria a primeira linha até estourar (6 + 3 com nove categorias); o separador
 * é o que garante a distribuição equilibrada calculada no PHP (5 + 4).
 *
 * Como ele ocupa uma linha própria, o `row-gap` entra dos dois lados — daí o
 * respiro vertical maior que o horizontal, igual ao protótipo.
 */
.mod-informes .informes__categorias-quebra {
    flex: 0 0 100%;
    height: 0;
    margin: 0;
    padding: 0;
}

.mod-informes .informes__categoria {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 20px;
    border: 1px solid var(--informes-borda);
    border-radius: var(--informes-raio-chip);
    background: var(--informes-branco);
    font: normal normal 700 14px/18px var(--informes-fonte-corpo);
    color: var(--informes-navy);
    text-align: left;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, transform .06s ease;
}

.mod-informes .informes__categoria:hover {
    border-color: var(--informes-navy);
}

.mod-informes .informes__categoria:active {
    transform: translateY(1px);
}

.mod-informes .informes__categoria-icone {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--informes-navy);
}

/*
 * Selecionado: assume a cor pastel da própria categoria — a mesma do chip que ela
 * exibe nos cards. A borda acompanha o fundo para o chip virar um bloco sólido.
 */
.mod-informes .informes__categoria[aria-pressed="true"] {
    background: var(--informes-categoria-bg, var(--informes-chip-1));
    border-color: var(--informes-categoria-bg, var(--informes-chip-1));
}

.mod-informes .informes__categoria[aria-pressed="true"]:hover {
    border-color: var(--informes-navy);
}

.mod-informes .informes__categoria--1 { --informes-categoria-bg: var(--informes-chip-1); }
.mod-informes .informes__categoria--2 { --informes-categoria-bg: var(--informes-chip-2); }
.mod-informes .informes__categoria--3 { --informes-categoria-bg: var(--informes-chip-3); }
.mod-informes .informes__categoria--4 { --informes-categoria-bg: var(--informes-chip-4); }
.mod-informes .informes__categoria--5 { --informes-categoria-bg: var(--informes-chip-5); }
.mod-informes .informes__categoria--6 { --informes-categoria-bg: var(--informes-chip-6); }
.mod-informes .informes__categoria--7 { --informes-categoria-bg: var(--informes-chip-7); }
.mod-informes .informes__categoria--8 { --informes-categoria-bg: var(--informes-chip-8); }

/* =========================================================
   RESPONSIVO
   ========================================================= */

/*
 * Abaixo do desktop a divisão fixa não cabe — cinco chips em 991px já estouram.
 * O separador some e o flex volta a quebrar por espaço, como faria sem ele.
 */
@media (max-width: 991.98px) {
    .mod-informes .informes__categorias-quebra {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .mod-informes .informes__categorias-cartao {
        padding: 16px;
    }

    .mod-informes .informes__categorias-header {
        flex-direction: column;
        gap: 10px;
    }

    .mod-informes .informes__categorias-lista {
        justify-content: flex-start;
        gap: 8px;
    }

    .mod-informes .informes__categoria {
        min-height: 42px;
        padding: 0 14px;
        font-size: 13px;
    }
}