/*
 * skeleton.css
 * Proveniência: apps/analytics-rh/pages/_internal/styles/_skeleton.py CSS constant
 * Source proto: prototipos/2026-05-06-shell-rebrand/a-topbar-pills.html L476-519
 * Story: 2.0-A.3 — Skeleton loaders (300ms shimmer)
 * Tokens: --border-subtle, --surface-base, --surface-raised, --radius-base, --radius-md
 * R-2 CSS pipeline extraction — byte-identical, Constitution Art. IV compliant
 */

/* ── Skeleton Loader (proto-A linhas 476-519) ─────────────────────── */
.arh-skeleton {
  animation: arh-skeleton-pulse 1.2s ease-in-out infinite;
  background: var(--border-subtle);
  border-radius: var(--radius-base, 4px);
  display: block;
}
@keyframes arh-skeleton-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* Variantes pré-definidas */
.arh-skeleton-text {
  height: 14px;
  width: 60%;
  margin-bottom: 8px;
}
.arh-skeleton-value {
  height: 28px;
  width: 80%;
  margin-bottom: 6px;
}
.arh-skeleton-line {
  height: 10px;
  width: 40%;
}
.arh-skeleton-card {
  width: 100%;
  height: 100px;
  border-radius: var(--radius-md, 8px);
}
.arh-skeleton-chart {
  width: 100%;
  height: 220px;
  border-radius: var(--radius-base, 4px);
}

/* Overlay de loading no conteúdo (proto-A linhas 491-506) */
.arh-loading-overlay {
  position: absolute;
  inset: 0;
  background: var(--surface-base);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 24px 20px;
  gap: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms;
}
.arh-loading-overlay.visible {
  opacity: 1;
  pointer-events: all;
}
.arh-main-wrapper {
  position: relative;
}

/* Skeleton para KPI row 4-col (proto-A linhas 509-519) */
.arh-sk-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) {
  .arh-sk-kpi-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .arh-sk-kpi-row { grid-template-columns: 1fr; }
}
.arh-sk-card {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 8px);
  padding: 20px;
}

/* Reduced motion (NFR-05) — força ausência de pulse */
@media (prefers-reduced-motion: reduce) {
  .arh-skeleton {
    animation: none !important;
    opacity: 0.75 !important;
  }
}