/* 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. */

/* ─────────────────────────────────────────────────────────────────────────
   Skeleton loaders — placeholders animados pra "tela carregada, dados
   chegando". Originalmente criado pro Modo Turbo (descontinuado v1.0.417),
   mantido como utilitário genérico — usar quando IA gera análise, sync
   externo demora, ou qualquer carregamento async > 1s.
   Animação shimmer suave em ~1.4s. Não respeita prefers-reduced-motion
   pra simplificar — degradação graciosa: parece uma barra cinza estática.
   ───────────────────────────────────────────────────────────────────────── */
@keyframes ph3a-shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.ph3a-skeleton-shimmer {
  display: block;
  background: linear-gradient(90deg,
    var(--ph3a-bg, #f1f5f9) 0%,
    var(--ph3a-border, #e2e8f0) 50%,
    var(--ph3a-bg, #f1f5f9) 100%);
  background-size: 200px 100%;
  background-repeat: no-repeat;
  border-radius: 4px;
  animation: ph3a-shimmer 1.4s ease-in-out infinite;
}
.ph3a-skeleton-tabela {
  padding: 8px 16px;
}
.ph3a-skeleton-linha {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ph3a-border, #e9eaec);
}
.ph3a-skeleton-linha:last-child { border-bottom: none; }
.ph3a-skeleton-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   Skeleton de navegação — overlay no .ph3a-content das 5 telas do tabbar
   (Painel, Contatos, Negócios, Tarefas, Agenda). Aparece quando o usuário
   clica em link pra uma dessas rotas; some quando a nova página renderiza.

   Por quê: mascara o cold pool do gunicorn workers=1 (~2061ms 1ª request
   pós-reinício do worker) com placeholder que mantém a MESMA grade da
   tela destino. Diferença vs barra SWR (#ph3aSwrBar): SWR só aparece
   quando cache HIT + revalida em background; skeleton cobre o caso
   cache MISS / cold-load, mostrando a "forma" do conteúdo enquanto
   o HTML real chega do servidor.

   Anti-flicker: JS dispara após 150ms — se navegação completa antes,
   overlay nem é montado. Cache HIT (~30ms) passa transparente.
   ────────────────────────────────────────────────────────────────────────── */
#ph3aSkeletonOverlay {
  position: absolute;
  inset: 0;
  background: var(--ph3a-bg, #f5f6fa);
  z-index: 100;
  padding: 0;
  overflow: hidden;
  animation: ph3aSkFadeIn .12s ease-out;
  pointer-events: none; /* não bloqueia interação se sobrar (ex.: bfcache) */
}
@keyframes ph3aSkFadeIn { from { opacity: 0 } to { opacity: 1 } }

/* Header comum aos 3 templates (h1 + botões à direita) */
.ph3a-sk-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 14px;
  flex-wrap: wrap;
}
.ph3a-sk-title { width: 200px; height: 28px; border-radius: 6px; }
.ph3a-sk-actions { display: flex; gap: 10px; }
.ph3a-sk-btn { width: 130px; height: 38px; border-radius: 8px; }

/* Barra de filtros (lista) */
.ph3a-sk-filter { height: 50px; border-radius: 10px; margin-bottom: 14px; }

/* Lista — card com linhas de itens */
.ph3a-sk-card {
  background: var(--ph3a-white);
  border: 1px solid var(--ph3a-border, #e9eaec);
  border-radius: 14px;
  padding: 8px 16px;
}
.ph3a-sk-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ph3a-border, #e9eaec);
}
.ph3a-sk-row:last-child { border-bottom: none; }
.ph3a-sk-avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; }
.ph3a-sk-col-1 { flex: 1; min-width: 0; }
.ph3a-sk-bar { height: 12px; border-radius: 4px; }

/* Painel — KPIs + gráficos */
.ph3a-sk-kpi-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 16px;
}
.ph3a-sk-kpi { height: 104px; border-radius: 14px; }
.ph3a-sk-chart-row {
  display: grid;
  gap: 16px;
  grid-template-columns: 5fr 4fr 3fr;
  margin-bottom: 16px;
}
.ph3a-sk-chart { height: 240px; border-radius: 14px; }
@media (max-width: 992px) {
  .ph3a-sk-chart-row { grid-template-columns: 1fr; }
}

/* Agenda — calendário grid 7×6 */
.ph3a-sk-cal-card {
  background: var(--ph3a-white);
  border: 1px solid var(--ph3a-border, #e9eaec);
  border-radius: 14px;
  padding: 20px;
}
.ph3a-sk-cal-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  gap: 10px;
  flex-wrap: wrap;
}
.ph3a-sk-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.ph3a-sk-day { aspect-ratio: 1.4; border-radius: 6px; min-height: 70px; }
@media (max-width: 600px) {
  .ph3a-sk-day { min-height: 48px; aspect-ratio: 1; }
}

/* Cockpit (/contatos/<id>, /negocios/<id>, /contas/<id>): hero alto +
   grade 2-col com seções colapsáveis (bate visualmente com .detail-hero +
   .detail-section dos cockpits reais). Mobile: cai pra 1 coluna. */
.ph3a-sk-cockpit-hero {
  height: 120px;
  border-radius: 16px;
  margin-bottom: 16px;
}
.ph3a-sk-cockpit-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}
.ph3a-sk-cockpit-col { display: flex; flex-direction: column; gap: 14px; }
.ph3a-sk-cockpit-section {
  background: var(--ph3a-white);
  border: 1px solid var(--ph3a-border, #e2e8f0);
  border-radius: 14px;
  padding: 18px;
}
@media (max-width: 991.98px) {
  .ph3a-sk-cockpit-grid { grid-template-columns: 1fr; }
  .ph3a-sk-cockpit-hero { height: 96px; }
}

/* Padding lateral do overlay igual ao .ph3a-content (alinhamento visual) */
#ph3aSkeletonOverlay { padding: 20px 32px; }
@media (max-width: 991.98px) {
  #ph3aSkeletonOverlay { padding: 20px 16px; }
}

/* Respeita prefers-reduced-motion — desliga shimmer + fade pra usuário
   que pediu motion reduzido no SO. Visual cai pra cor sólida estática. */
@media (prefers-reduced-motion: reduce) {
  #ph3aSkeletonOverlay { animation: none; }
  .ph3a-skeleton-shimmer {
    animation: none;
    background: var(--ph3a-border, #e2e8f0);
  }
}