/*
 * Lista de funcoes expansiveis da pagina publica de Modulos.
 *
 * Usa <details>/<summary> nativos de proposito, sem JavaScript:
 *   - funciona com toque, mouse e teclado sem codigo nenhum;
 *   - o texto fechado continua no HTML, entao o Google indexa a explicacao
 *     inteira mesmo com o item recolhido (accordion feito em JS costuma
 *     esconder o conteudo do buscador);
 *   - nao depende do Bootstrap JS ter carregado na pagina publica.
 *
 * A cor de cada modulo chega por --mod-cor, escrita na secao: o mesmo azul do
 * B2B e verde do WhatsApp que ja identificam a secao continuam identificando
 * os itens dela.
 */

.mod-funcoes {
    --mod-cor: #1f5c9c;   /* sobrescrita por secao */
    list-style: none;
    margin: 0;
    padding: 0;
}

.mod-funcao {
    border-bottom: 1px solid #e2e8f0;
}
.mod-funcao:first-child { border-top: 1px solid #e2e8f0; }

/* A linha inteira e o alvo do clique, nao so o texto: alvo pequeno e o que
   faz a pessoa desistir de abrir no celular. */
.mod-funcao > summary {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .85rem .25rem;
    cursor: pointer;
    list-style: none;                 /* tira o triangulo padrao */
    color: #334155;
    font-weight: 600;
    line-height: 1.45;
    transition: color .15s ease;
}
.mod-funcao > summary::-webkit-details-marker { display: none; }

.mod-funcao > summary:hover { color: var(--mod-cor); }

/* Foco visivel para quem navega por teclado - o navegador some com o outline
   padrao quando mexemos no display do summary. */
.mod-funcao > summary:focus-visible {
    outline: 2px solid var(--mod-cor);
    outline-offset: 2px;
    border-radius: 4px;
}

/* O check continua sendo o marcador da funcao, como na lista antiga. */
.mod-funcao-check {
    color: var(--mod-cor);
    flex-shrink: 0;
    font-size: 1.05rem;
    line-height: 1.35;
}

.mod-funcao-titulo { flex: 1; }

/* O "+" vira "−" quando abre: diz o que o clique FAZ, e nao so que ha algo ali.
   Fica depois do texto para nao empurrar o titulo. */
.mod-funcao-sinal {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid #cbd5e1;
    color: #64748b;
    font-size: .95rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease, border-color .15s ease, color .15s ease;
}
.mod-funcao > summary:hover .mod-funcao-sinal {
    border-color: var(--mod-cor);
    color: var(--mod-cor);
}
.mod-funcao[open] > summary .mod-funcao-sinal {
    transform: rotate(45deg);          /* o + deitado vira x/menos */
    border-color: var(--mod-cor);
    color: var(--mod-cor);
}
.mod-funcao[open] > summary { color: var(--mod-cor); }

/* A explicacao alinha com o texto do titulo, nao com o check: a indentacao
   mostra que ela pertence aquele item. */
.mod-funcao-texto {
    padding: 0 2.4rem .95rem 1.7rem;
    margin: 0;
    color: #475569;
    font-size: .95rem;
    line-height: 1.65;
}

/* Abre deslizando em vez de aparecer de uma vez. `details` nao anima altura
   sozinho, entao a animacao e no conteudo. */
@media (prefers-reduced-motion: no-preference) {
    .mod-funcao[open] .mod-funcao-texto {
        animation: modAbrir .18s ease-out;
    }
    @keyframes modAbrir {
        from { opacity: 0; transform: translateY(-4px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* Dica de que a lista inteira e clicavel - some depois que a pessoa abre o
   primeiro item, porque ai ela ja sabe. */
.mod-funcoes-dica {
    font-size: .82rem;
    color: #64748b;
    margin: 0 0 .4rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}

@media (max-width: 575.98px) {
    .mod-funcao > summary { padding: .8rem .15rem; font-size: .95rem; }
    .mod-funcao-texto { padding: 0 .5rem .9rem 1.7rem; font-size: .92rem; }
}

/* Item sem explicacao ("Tudo do plano Silver", "Ate 4 usuarios"): mesma linha
   dos outros, mas sem cursor de clique e sem o sinal de +, para nao prometer
   uma abertura que nao existe. */
.mod-funcao-estatico {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .85rem .25rem;
    color: #334155;
    font-weight: 600;
    line-height: 1.45;
}