/* ==========================================================
   UI — Componentes globais reutilizáveis
   Carregado em todas as páginas.
   Depende de: femipa-tokens
   ========================================================== */


/* ----------------------------------------------------------
   PILLS (tabs acessíveis)

   Uso:
     <div data-fm-pills>
       <button class="fm-pill fm-pill--ativo" data-fm-pill-target="painel-a">Label</button>
       <button class="fm-pill" data-fm-pill-target="painel-b">Label</button>
     </div>
     <div id="painel-a" class="fm-painel fm-painel--ativo">...</div>
     <div id="painel-b" class="fm-painel">...</div>
   ---------------------------------------------------------- */

.fm-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-s);
    margin-bottom: var(--spacing-xxl);
}

.fm-pill {
    padding: var(--spacing-xs) var(--spacing-l);
    border-radius: var(--corner-xl);
    border: 1px solid var(--color-border-default);
    background-color: var(--full-white);
    color: var(--color-text-primary);
    font-family: var(--font-family-base);
    font-size: var(--font-size-body-small);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-body-small);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.fm-pill:hover {
    background-color: var(--color-bg-subtle);
    border-color: var(--color-secondary);
}

.fm-pill--ativo {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--full-white);
}

.fm-pill--ativo:hover {
    background-color: var(--color-secondary-600);
    border-color: var(--color-secondary-600);
}

.fm-painel {
    display: none;
}

.fm-painel--ativo {
    display: block;
}


/* ----------------------------------------------------------
   RESPONSIVO — Mobile (≤ 768px)
   ---------------------------------------------------------- */

@media (max-width: 768px) {
    .fm-pills {
        gap: var(--spacing-xs);
    }
}