/* Gerado por split de app/static/css/estilo_ph3a.css (fundação da reorganização de CSS, 03/08/2026). Ver app/utils/css_manifest.py pra ordem de carregamento. */

/* ──────────────────────────────────────────────────────────────────────────
   Acordeões persistidos — .ph3a-collapsible
   Ativado por ph3a-collapsible.js em qualquer container com a classe.
   Estado (aberto/fechado) persiste em localStorage por data-key.

   Markup esperado:
     <div class="detail-section ph3a-collapsible"
          data-key="contato-tarefas" data-default="open">
       <h2>Tarefas <span class="ph3a-collapsible-count">12</span></h2>
       <p>...conteúdo...</p>
     </div>

   O JS adiciona role=button + chevron no título; CSS faz o resto.
   ────────────────────────────────────────────────────────────────────────── */
.ph3a-collapsible-header {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 10px;
  /* preserva o flex-wrap interno (badges/contadores) sem virar coluna */
  flex-wrap: wrap;
  transition: color 120ms ease;
}
.ph3a-collapsible-header:hover {
  color: var(--ph3a-primary, #ef5929);
}
.ph3a-collapsible-header:focus-visible {
  outline: 2px solid var(--ph3a-primary, #ef5929);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Chevron à direita — gira 180° quando colapsado. Empurrado pro final
   do flex via margin-left:auto pra ficar alinhado à direita do header. */
.ph3a-collapsible-chevron {
  margin-left: auto;
  font-size: 13px;
  color: var(--ph3a-text-light, #94a3b8);
  transition: transform 180ms ease;
}
.ph3a-collapsible.is-collapsed .ph3a-collapsible-chevron {
  transform: rotate(-90deg); /* fechado: aponta pra direita */
}

/* Quando colapsado, o container fica visualmente "compacto" — só o
   título visível. Não muda padding/border do .detail-section pra não
   destoar do resto da tela. */
.ph3a-collapsible.is-collapsed {
  padding-bottom: 14px; /* harmoniza altura do header colapsado */
}

/* Badge de contagem opcional no título (ex.: "Tarefas (5)" → o "(5)"
   ganha estilo discreto pra não competir visualmente com o texto). */
.ph3a-collapsible-count {
  display: inline-flex;
  align-items: center;
  background: var(--ph3a-bg, #f1f5f9);
  color: var(--ph3a-text-light, #64748b);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ph3a-collapsible-chevron { transition: none; }
  .ph3a-collapsible-header  { transition: none; }
}