/* UI base aliases e tokens iniciais para compatibilidade */
:root{
  --color-bg: #f3f4f6;
  --color-card: #ffffff;
  --color-border: #e5e7eb;
  --color-muted: #6b7280;
  --color-text: #0f172a;
  --color-accent: #f59e0b;
}

/* ===== LOADING & SKELETON STYLES ===== */

/* Progressive Enhancement States */
.js-loading .main-content {
  opacity: 0;
}

.js-loaded .main-content {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

/* Lazy Loading e Skeleton Effects */
.lazy-load {
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
}

.lazy-load[data-loaded="true"] {
  opacity: 1;
}

.skeleton-shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.lazy-load[data-loaded="true"] + .skeleton-shimmer {
  display: none;
}

/* Skeleton placeholder styles */
.skeleton-tab {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Enhanced loading states */
.search-loading .search-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* Card */
.ui-card{background:var(--color-card);border-radius:18px;border:1px solid var(--color-border);padding:18px;display:grid;gap:14px;box-shadow:0 10px 30px -18px rgba(15,23,42,.35);} 
/* Alias visual para .card (compatibilidade) */
.card{background:var(--color-card);border-radius:18px;border:1px solid var(--color-border);padding:18px;display:grid;gap:14px;box-shadow:0 10px 30px -18px rgba(15,23,42,.35);} 

/* Badges */
.ui-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;} 

/* Buttons */
.ui-btn--primary{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;border:none;border-radius:18px;padding:0 24px;background:var(--color-accent);color:#fff;font-weight:800;font-size:16px;text-decoration:none;text-align:center;cursor:pointer;} 
.ui-btn--ghost{flex:1;border:1px solid var(--color-border);background:#fff;border-radius:12px;padding:10px;font-weight:600;font-size:13px;color:#1f2937;cursor:pointer;} 

/* Aliases (mantém classes antigas funcionando visualmente) */
.ghost-btn{flex:1;border:1px solid var(--color-border);background:#fff;border-radius:12px;padding:10px;font-weight:600;font-size:13px;color:#1f2937;cursor:pointer;}
.cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;border:none;border-radius:18px;padding:0 24px;background:var(--color-accent);color:#fff;font-weight:800;font-size:16px;text-decoration:none;text-align:center;cursor:pointer;}

/* Footer spacing helper for pages with fixed footer */
.pb-footer-space{padding-bottom:7rem;}

/* Toggle visual usado em vários forms: produto ativo */
.product-active-checkbox{position:absolute!important;opacity:0!important;width:0!important;height:0!important;margin:0!important;padding:0!important;border:0!important}
.product-toggle{display:inline-block;width:34px;height:20px;border-radius:999px;background:#eef2f6;border:1px solid #e6e9ee;position:relative;flex:0 0 auto}
.product-toggle .toggle-knob{position:absolute;top:50%;left:3px;width:14px;height:14px;border-radius:999px;background:#fff;transform:translateY(-50%);transition:transform .16s cubic-bezier(.2,.9,.2,1),background .12s ease}
.product-active-checkbox:checked + .product-toggle{background:#5B21B6;border-color:#5B21B6}
.product-active-checkbox:checked + .product-toggle .toggle-knob{transform:translateY(-50%) translateX(14px)}
.product-toggle:focus{outline:2px solid rgba(91,33,182,.12);outline-offset:3px}
.product-toggle-wrapper{display:inline-flex;align-items:center;gap:.6rem}

/* Toggle genérico reutilizável */
.ui-toggle-checkbox{position:absolute!important;opacity:0!important;width:0!important;height:0!important;margin:0!important;padding:0!important;border:0!important}
.ui-toggle{display:inline-block;width:34px;height:20px;border-radius:999px;background:#eef2f6;border:1px solid #e6e9ee;position:relative;flex:0 0 auto}
.ui-toggle .toggle-knob{position:absolute;top:50%;left:3px;width:14px;height:14px;border-radius:999px;background:#fff;transform:translateY(-50%);transition:transform .16s cubic-bezier(.2,.9,.2,1),background .12s ease}
.ui-toggle-checkbox:checked + .ui-toggle{background:#5B21B6;border-color:#5B21B6}
.ui-toggle-checkbox:checked + .ui-toggle .toggle-knob{transform:translateY(-50%) translateX(14px)}
.ui-toggle:focus{outline:2px solid rgba(91,33,182,.12);outline-offset:3px}
.ui-toggle-wrapper{display:inline-flex;align-items:center;gap:.6rem}