/* =========================================================
   Componente: Skeleton, Empty State, Tooltip, Spinner
   ========================================================= */

/* ---------- Skeleton ---------- */
.sk-cf {
  background: linear-gradient(90deg, var(--bg-muted) 25%, var(--bg-surface-hover) 37%, var(--bg-muted) 63%);
  background-size: 400% 100%;
  animation: sk-shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}
.sk-cf.line { height: 14px; }
.sk-cf.line.sm { height: 10px; }
.sk-cf.circle { border-radius: 50%; }
.sk-cf.title { height: 22px; width: 40%; }
@keyframes sk-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------- Empty state ---------- */
.empty-cf {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-12) var(--space-6);
  gap: var(--space-3);
}
.empty-cf__icon {
  width: 64px; height: 64px;
  border-radius: var(--radius-lg);
  display: grid; place-items: center;
  background: var(--gradient-brand-soft);
  color: var(--indigo-500);
  font-size: 1.6rem;
  margin-bottom: var(--space-2);
}
.empty-cf__title { font-size: var(--text-lg); font-weight: var(--fw-semibold); margin: 0; }
.empty-cf__text { color: var(--text-secondary); max-width: 340px; margin: 0; }

/* ---------- Spinner ---------- */
.spinner-cf {
  width: 20px; height: 20px;
  border: 2px solid var(--border-color);
  border-top-color: var(--indigo-600);
  border-radius: 50%;
  animation: sp-rotate 0.7s linear infinite;
  display: inline-block;
}
@keyframes sp-rotate { to { transform: rotate(360deg); } }

/* ---------- Tooltip ---------- */
.tt-cf { position: relative; display: inline-flex; }
.tt-cf__bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--neutral-900);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  padding: 5px 9px;
  border-radius: var(--radius-xs);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  z-index: 1200;
  box-shadow: var(--shadow-md);
}
.tt-cf__bubble::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--neutral-900);
}
.tt-cf:hover .tt-cf__bubble,
.tt-cf:focus-within .tt-cf__bubble {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
[data-theme='dark'] .tt-cf__bubble { background: var(--neutral-700); }
[data-theme='dark'] .tt-cf__bubble::after { border-top-color: var(--neutral-700); }