<!-- Skeleton Card -->
<div class="skeleton-card">
  <div class="skel" style="height: 12px; width: 40%;"></div>
  <div class="skel" style="height: 24px; width: 60%; margin-top: 8px;"></div>
  <div class="skel" style="height: 12px; width: 100%; margin-top: 16px;"></div>
  <div class="skel" style="height: 12px; width: 80%; margin-top: 6px;"></div>
  <div class="skel" style="height: 36px; width: 120px; margin-top: 16px; border-radius: 8px;"></div>
</div>

<!-- Skeleton Table Row -->
<tr class="skeleton-row">
  <td><div class="skel" style="height: 16px; width: 16px; border-radius: 4px;"></div></td>
  <td><div class="skel" style="height: 14px; width: 70px;"></div></td>
  <td><div class="skel" style="height: 14px; width: 150px;"></div></td>
  <td><div class="skel" style="height: 14px; width: 90px;"></div></td>
  <td><div class="skel" style="height: 22px; width: 60px; border-radius: 99px;"></div></td>
</tr>

<!-- Spinner -->
<div class="spinner" role="status" aria-label="Carregando">
  <div class="spinner-ring"></div>
</div>

<!-- Button Loading -->
<button class="btn-primary btn-loading" disabled>
  <span class="btn-spinner"></span>
  Salvando...
</button>

<!-- Progress Bar -->
<div class="progress-track">
  <div class="progress-fill" style="width: 65%;"></div>
</div>

/* Skeleton Base */
.skel {
  background: linear-gradient(90deg,
    #E2E8F0 25%, #EDF2F7 50%, #E2E8F0 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease infinite;
  border-radius: 6px;
}
@keyframes skeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Skeleton Card Container */
.skeleton-card {
  padding: 24px;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  background: #FFFFFF;
}

/* Spinner */
.spinner-ring {
  width: 32px; height: 32px;
  border: 3px solid #E2E8F0;
  border-top-color: #2B6CB0;
  border-radius: 50%;
  animation: spinnerRotate 0.7s linear infinite;
}
@keyframes spinnerRotate {
  to { transform: rotate(360deg); }
}

/* Tamanhos de Spinner */
.spinner-sm .spinner-ring { width: 16px; height: 16px; border-width: 2px; }
.spinner-md .spinner-ring { width: 32px; height: 32px; border-width: 3px; }
.spinner-lg .spinner-ring { width: 48px; height: 48px; border-width: 4px; }

/* Button Loading */
.btn-loading {
  position: relative;
  opacity: 0.8;
  pointer-events: none;
}
.btn-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: spinnerRotate 0.6s linear infinite;
  margin-right: 6px;
  vertical-align: middle;
}

/* Progress Bar */
.progress-track {
  width: 100%;
  height: 6px;
  background: #E2E8F0;
  border-radius: 99px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #2B6CB0, #3A8FD6);
  border-radius: 99px;
  transition: width 0.3s ease;
}

/* Dark Mode */
[data-theme="dark"] .skel {
  background: linear-gradient(90deg,
    #2D3748 25%, #4A5568 50%, #2D3748 75%);
  background-size: 200% 100%;
}
[data-theme="dark"] .spinner-ring {
  border-color: #4A5568;
  border-top-color: #3A8FD6;
}
[data-theme="dark"] .progress-track {
  background: #2D3748;
}

<!-- Tooltip (CSS-only, sem JS) -->
<span class="tooltip-wrapper">
  <button class="btn-icon" aria-describedby="tip1">
    <svg>...</svg>
  </button>
  <span class="tooltip tooltip-top" id="tip1"
        role="tooltip">Editar produto</span>
</span>

<!-- Posições: tooltip-top | tooltip-bottom
               tooltip-left | tooltip-right -->

<!-- Popover (click) -->
<div class="popover-wrapper">
  <button class="btn-secondary-sm"
          onclick="this.parentElement.classList.toggle('open')">
    Mais info
  </button>
  <div class="popover popover-bottom">
    <div class="popover-header">Detalhes do Produto</div>
    <div class="popover-body">
      <p>SKU: LED-001</p>
      <p>Última atualização: 05/03/2026</p>
    </div>
  </div>
</div>

<!-- Dropdown Menu -->
<div class="dropdown-wrapper">
  <button class="btn-icon"
          onclick="this.parentElement.classList.toggle('open')">
    •••
  </button>
  <div class="dropdown-menu">
    <button class="dropdown-item">
      <svg>...</svg> Editar
    </button>
    <button class="dropdown-item">
      <svg>...</svg> Duplicar
    </button>
    <div class="dropdown-divider"></div>
    <button class="dropdown-item dropdown-danger">
      <svg>...</svg> Excluir
    </button>
  </div>
</div>

/* ============ TOOLTIP ============ */
.tooltip-wrapper {
  position: relative;
  display: inline-flex;
}
.tooltip {
  position: absolute;
  padding: 6px 12px;
  background: #0F172A;
  color: #FFFFFF;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s, transform 0.15s;
  z-index: 200;
}

/* Posições */
.tooltip-top    { bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); }
.tooltip-bottom { top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-4px); }
.tooltip-left   { right: calc(100% + 8px); top: 50%; transform: translateY(-50%) translateX(4px); }
.tooltip-right  { left: calc(100% + 8px); top: 50%; transform: translateY(-50%) translateX(-4px); }

/* Show on hover */
.tooltip-wrapper:hover .tooltip,
.tooltip-wrapper:focus-within .tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.tooltip-wrapper:hover .tooltip-left,
.tooltip-wrapper:focus-within .tooltip-left {
  transform: translateY(-50%) translateX(0);
}
.tooltip-wrapper:hover .tooltip-right,
.tooltip-wrapper:focus-within .tooltip-right {
  transform: translateY(-50%) translateX(0);
}

/* Arrow (optional) */
.tooltip::after {
  content: '';
  position: absolute;
  border: 5px solid transparent;
}
.tooltip-top::after {
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border-top-color: #0F172A;
}
.tooltip-bottom::after {
  bottom: 100%; left: 50%;
  transform: translateX(-50%);
  border-bottom-color: #0F172A;
}

/* ============ POPOVER ============ */
.popover-wrapper {
  position: relative;
  display: inline-flex;
}
.popover {
  position: absolute;
  min-width: 240px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: all 0.2s ease;
  z-index: 100;
}
.popover-wrapper.open .popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.popover-bottom { top: calc(100% + 8px); left: 0; }
.popover-top    { bottom: calc(100% + 8px); left: 0; }

.popover-header {
  padding: 0.75rem 1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: #0F172A;
  border-bottom: 1px solid #F1F5F9;
}
.popover-body {
  padding: 0.75rem 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: #475569;
}

/* ============ DROPDOWN ============ */
.dropdown-wrapper {
  position: relative;
  display: inline-flex;
}
.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  padding: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all 0.15s ease;
  z-index: 100;
}
.dropdown-wrapper.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: #334155;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s;
}
.dropdown-item:hover { background: #F8FAFC; }
.dropdown-item svg { width: 16px; height: 16px; color: #64748B; }
.dropdown-danger { color: #DC2626; }
.dropdown-danger:hover { background: #FEF2F2; }
.dropdown-danger svg { color: #DC2626; }
.dropdown-divider {
  height: 1px;
  background: #F1F5F9;
  margin: 4px 0;
}

<!-- Breadcrumb com separador › -->
<nav class="breadcrumb" aria-label="Navegação estrutural">
  <ol>
    <li><a href="/">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
           stroke-width="2" width="14" height="14">
        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
        <polyline points="9 22 9 12 15 12 15 22"/>
      </svg>
      Início
    </a></li>
    <li><a href="/produtos">Produtos</a></li>
    <li><a href="/produtos/iluminacao">Iluminação</a></li>
    <li aria-current="page">Painel Solar 200W</li>
  </ol>
</nav>

<!-- Breadcrumb com separador / -->
<nav class="breadcrumb breadcrumb-slash" aria-label="Navegação">
  <ol>
    <li><a href="/">Início</a></li>
    <li><a href="/config">Configurações</a></li>
    <li aria-current="page">Integrações</li>
  </ol>
</nav>

<!-- Breadcrumb com truncamento -->
<nav class="breadcrumb" aria-label="Navegação">
  <ol>
    <li><a href="/">Início</a></li>
    <li class="breadcrumb-ellipsis">
      <button aria-label="Mostrar caminhos ocultos">…</button>
    </li>
    <li><a href="/cat">Iluminação</a></li>
    <li aria-current="page">LED-001</li>
  </ol>
</nav>

/* Breadcrumb */
.breadcrumb ol {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.breadcrumb li {
  display: inline-flex;
  align-items: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: #64748B;
}

/* Separador › (padrão) */
.breadcrumb li + li::before {
  content: '›';
  margin: 0 0.5rem;
  color: #CBD5E1;
  font-size: 0.9rem;
}

/* Separador / */
.breadcrumb-slash li + li::before {
  content: '/';
  margin: 0 0.4rem;
  color: #CBD5E1;
  font-size: 0.8rem;
}

/* Links */
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #64748B;
  text-decoration: none;
  transition: color 0.15s;
}
.breadcrumb a:hover { color: #2B6CB0; }

/* Página atual */
.breadcrumb li[aria-current="page"] {
  color: #0F172A;
  font-weight: 600;
}

/* Ícone Home */
.breadcrumb svg {
  width: 14px; height: 14px;
  flex-shrink: 0;
}

/* Ellipsis para caminhos longos */
.breadcrumb-ellipsis button {
  background: none; border: none;
  font-size: 1rem; color: #94A3B8;
  cursor: pointer; padding: 0 2px;
  letter-spacing: 2px;
}
.breadcrumb-ellipsis button:hover {
  color: #2B6CB0;
}

/* Breadcrumb com background (variante card) */
.breadcrumb-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 0.6rem 1rem;
}

/* Responsivo */
@media (max-width: 640px) {
  .breadcrumb li { font-size: 0.75rem; }
  .breadcrumb li + li::before { margin: 0 0.35rem; }
}

<!-- Stepper Horizontal -->
<nav class="stepper" aria-label="Progresso do cadastro">
  <ol>
    <li class="step step-complete">
      <div class="step-indicator">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
          <polyline points="20 6 9 17 4 12"/>
        </svg>
      </div>
      <div class="step-content">
        <span class="step-title">Dados Básicos</span>
        <span class="step-desc">Nome, categoria</span>
      </div>
    </li>
    <li class="step step-active">
      <div class="step-indicator">2</div>
      <div class="step-content">
        <span class="step-title">Especificações</span>
        <span class="step-desc">Dimensões, peso</span>
      </div>
    </li>
    <li class="step step-pending">
      <div class="step-indicator">3</div>
      <div class="step-content">
        <span class="step-title">Preço e Estoque</span>
      </div>
    </li>
    <li class="step step-pending">
      <div class="step-indicator">4</div>
      <div class="step-content">
        <span class="step-title">Revisão</span>
      </div>
    </li>
  </ol>
</nav>

<!-- Stepper Vertical -->
<nav class="stepper stepper-vertical">
  <ol>
    <li class="step step-complete">...</li>
    <li class="step step-active">...</li>
    <li class="step step-error">
      <div class="step-indicator">!</div>
      <div class="step-content">
        <span class="step-title">Validação</span>
        <span class="step-desc step-error-msg">Campo obrigatório</span>
      </div>
    </li>
    <li class="step step-pending">...</li>
  </ol>
</nav>

/* Stepper Horizontal */
.stepper ol {
  display: flex;
  align-items: flex-start;
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}
.step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  text-align: center;
}

/* Connector line */
.step + .step::before {
  content: '';
  position: absolute;
  top: 18px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: #E2E8F0;
  z-index: 0;
}
.step-complete + .step::before,
.step-complete + .step-active::before {
  background: #2B6CB0;
}

/* Step Indicator (circle) */
.step-indicator {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  position: relative;
  z-index: 1;
  transition: all 0.2s;
}
.step-indicator svg {
  width: 16px; height: 16px;
}

/* States */
.step-complete .step-indicator {
  background: #2B6CB0;
  color: #FFFFFF;
}
.step-active .step-indicator {
  background: #FFFFFF;
  color: #2B6CB0;
  border: 2px solid #2B6CB0;
  box-shadow: 0 0 0 4px rgba(43,108,176,0.15);
}
.step-pending .step-indicator {
  background: #F1F5F9;
  color: #94A3B8;
  border: 2px solid #E2E8F0;
}
.step-error .step-indicator {
  background: #FEE2E2;
  color: #DC2626;
  border: 2px solid #DC2626;
}

/* Step Content */
.step-content { margin-top: 0.75rem; }
.step-title {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #334155;
}
.step-active .step-title { color: #2B6CB0; }
.step-pending .step-title { color: #94A3B8; }
.step-error .step-title { color: #DC2626; }
.step-desc {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  color: #94A3B8;
  margin-top: 2px;
}
.step-error-msg { color: #DC2626; }

/* Stepper Vertical */
.stepper-vertical ol { flex-direction: column; gap: 0; }
.stepper-vertical .step {
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  padding-left: 0;
  min-height: 72px;
}
.stepper-vertical .step + .step::before {
  top: 0; left: 17px; right: auto;
  width: 2px; height: 100%;
}
.stepper-vertical .step-content {
  margin-top: 0; margin-left: 1rem; padding-top: 6px;
}

/* Responsive */
@media (max-width: 640px) {
  .stepper:not(.stepper-vertical) .step-content { display: none; }
  .stepper:not(.stepper-vertical) .step-active .step-content { display: block; }
}

<!-- Aplicando tokens de motion -->
<button class="btn-primary"
  style="transition: all var(--duration-normal) var(--ease-out);">
  Salvar
</button>

<!-- Animação de entrada -->
<div class="animate-fade-in">Conteúdo</div>
<div class="animate-slide-up">Conteúdo</div>
<div class="animate-scale-in">Conteúdo</div>

<!-- Staggered animation (delay escalonado) -->
<div class="animate-slide-up" style="--delay: 0ms">Item 1</div>
<div class="animate-slide-up" style="--delay: 50ms">Item 2</div>
<div class="animate-slide-up" style="--delay: 100ms">Item 3</div>

/* ============ MOTION TOKENS ============ */
:root {
  --duration-instant: 100ms;
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    350ms;
  --duration-slower:  500ms;

  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============ ENTRADA (APPEAR) ============ */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideLeft {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* Classes utilitárias */
.animate-fade-in  { animation: fadeIn var(--duration-normal) var(--ease-out) var(--delay, 0ms) both; }
.animate-slide-up { animation: slideUp var(--duration-normal) var(--ease-out) var(--delay, 0ms) both; }
.animate-slide-down { animation: slideDown var(--duration-normal) var(--ease-out) var(--delay, 0ms) both; }
.animate-scale-in { animation: scaleIn var(--duration-fast) var(--ease-spring) var(--delay, 0ms) both; }

/* ============ HOVER EFFECTS ============ */
.hover-lift {
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}

.hover-glow {
  transition: box-shadow var(--duration-fast) var(--ease-out);
}
.hover-glow:hover {
  box-shadow: 0 0 0 4px rgba(43,108,176,0.15);
}

.hover-scale {
  transition: transform var(--duration-instant) var(--ease-spring);
}
.hover-scale:hover {
  transform: scale(1.05);
}

/* ============ FOCUS RING ============ */
.focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(58,143,214,0.3);
  transition: box-shadow var(--duration-instant) var(--ease-out);
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}