/**
 * Skeleton Screens
 * Sistema de loading states
 * Baseado em Material Design e Tailwind CSS
 */

 /* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */

:root {
    /* Skeleton colors - Light mode */
    --sk-bg1: #f0f0f0;
    --sk-bg2: #e8e8e8;
    --sk-card-bg: #fff;
    --sk-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --sk-border: transparent;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Skeleton colors - Dark mode */
        --sk-bg1: #2a2a2a;
        --sk-bg2: #333333;
        --sk-card-bg: #1a1a1a;
        --sk-card-shadow: none;
        --sk-border: #333;
    }
}

/* ============================================
   WIDTH UTILITIES
   ============================================ */

.skeleton-w-100 { width: 100%; }
.skeleton-w-90  { width: 90%; }
.skeleton-w-80  { width: 80%; }
.skeleton-w-70  { width: 70%; }
.skeleton-w-60  { width: 60%; }
.skeleton-w-50  { width: 50%; }
.skeleton-w-40  { width: 40%; }
.skeleton-w-30  { width: 30%; }

/* ============================================
   BASE SKELETON STYLES
   ============================================ */

.skeleton {
    background: linear-gradient(
        90deg,
        var(--sk-bg1) 0%,
        var(--sk-bg1) 40%,
        var(--sk-bg2) 50%,
        var(--sk-bg1) 60%,
        var(--sk-bg1) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    will-change: background-position;
}

/* Animação de loading */
@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Modo pulse alternativo */
.skeleton-pulse {
    animation: skeleton-pulse 1.2s ease-in-out infinite;
    background: var(--sk-bg1);
}

@keyframes skeleton-pulse {
    0%, 100% { 
        opacity: 1; 
    }
    50% { 
        opacity: 0.5; 
    }
}

/* Variante mais rápida (para elementos pequenos) */
.skeleton-fast {
    animation-duration: 1s;
}

/* Variante mais lenta (para elementos grandes) */
.skeleton-slow {
    animation-duration: 2s;
}

/* Desabilitar pointer events */
.skeleton{
    pointer-events: none;
}

/* ============================================
   SKELETON PRIMITIVES
   ============================================ */

/* Texto */
.skeleton-text {
    height: 16px;
    margin-bottom: 8px;
    border-radius: 4px;
}

.skeleton-text-sm {
    height: 12px;
    margin-bottom: 6px;
}

.skeleton-text-lg {
    height: 20px;
    margin-bottom: 10px;
}

/* Título */
.skeleton-title {
    height: 32px;
    width: 60%;
    margin-bottom: 16px;
    border-radius: 4px;
}

.skeleton-title-sm {
    height: 24px;
    width: 50%;
    margin-bottom: 12px;
}

.skeleton-title-lg {
    height: 40px;
    width: 70%;
    margin-bottom: 20px;
}

/* Subtítulo */
.skeleton-subtitle {
    height: 20px;
    width: 80%;
    margin-bottom: 12px;
    border-radius: 4px;
}

/* Avatar/Circle */
.skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.skeleton-avatar-sm {
    width: 32px;
    height: 32px;
}

.skeleton-avatar-lg {
    width: 64px;
    height: 64px;
}

/* Botão */
.skeleton-button {
    height: 48px;
    width: 120px;
    border-radius: 8px;
}

.skeleton-button-sm {
    height: 36px;
    width: 100px;
    border-radius: 6px;
}

.skeleton-button-lg {
    height: 56px;
    width: 150px;
    border-radius: 8px;
}

/* Badge */
.skeleton-badge {
    height: 24px;
    width: 80px;
    border-radius: 12px;
}

/* Input */
.skeleton-input {
    height: 56px;
    border-radius: 4px;
    margin-bottom: 16px;
}

/* ============================================
   SKELETON COMPONENTS
   ============================================ */

/* Card genérico */
.skeleton-card {
    background-color: var(--sk-card-bg);
    border-radius: 8px;
    padding: 20px;
    box-shadow: var(--sk-card-shadow);
    border: 1px solid var(--sk-border);
    min-height: 200px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (prefers-color-scheme: dark) {
    .skeleton-card {
        background-color: #1a1a1a;
        box-shadow: 0 1px 3px rgba(255, 255, 255, 0.05);
    }
}

/* Card de produto (catálogo) */
.skeleton-product-card {
    background-color: var(--sk-card-bg);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--sk-card-shadow);
    border: 1px solid var(--sk-border);
    display: flex;
    flex-direction: column;
}

.skeleton-product-card .skeleton-image {
    width: 100%;
    border-radius: 0;
}

.skeleton-product-card .skeleton-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Responsivo para cards de produto */
@media (max-width: 768px) {
    .skeleton-product-card .skeleton-content {
        padding: 16px;
    }
}

/* Hero Section Skeleton */
.skeleton-hero {
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.skeleton-hero-content {
    max-width: 800px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

@media (max-width: 768px) {
    .skeleton-hero {
        min-height: 400px;
        padding: 30px 16px;
    }
}

/* FAQ Skeleton */
.skeleton-faq-item {
    background-color: var(--sk-card-bg);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 12px;
    box-shadow: var(--sk-card-shadow);
    border: 1px solid var(--sk-border);
}

/* Depoimento Skeleton */
.skeleton-testimonial {
    background-color: var(--sk-card-bg);
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--sk-card-shadow);
    border: 1px solid var(--sk-border);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.skeleton-testimonial-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Pricing Table Skeleton */
.skeleton-pricing-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skeleton-pricing-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    padding: 12px;
    background-color: #f9f9f9;
    border-radius: 4px;
}

@media (max-width: 640px) {
    .skeleton-pricing-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .skeleton-pricing-row .skeleton-text:last-child {
        grid-column: 1 / -1;
    }
}

/* ============================================
   GRID LAYOUTS
   ============================================ */

/* Grid de 3 colunas (catálogo) */
.skeleton-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 40px 0;
}

@media (max-width: 1024px) {
    .skeleton-grid-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 640px) {
    .skeleton-grid-3 {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Grid de 2 colunas */
.skeleton-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (max-width: 768px) {
    .skeleton-grid-2 {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ============================================
   LOADING STATES COMPOSTOS
   ============================================ */

/* Loading de catálogo (3 cards) */
.catalog-loading {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 40px 0;
}

.catalog-loading .skeleton-product-card {
    animation-delay: calc(var(--index, 0) * 0.1s);
}

@media (max-width: 1024px) {
    .catalog-loading {
        grid-template-columns: repeat(2, 1fr);
    }

    .catalog-loading .skeleton-product-card:nth-child(3) {
        display: none;
    }
}

@media (max-width: 640px) {
    .catalog-loading {
        grid-template-columns: 1fr;
    }

    .catalog-loading .skeleton-product-card:nth-child(n+2) {
        display: none;
    }
}

/* Loading de lista */
.list-loading {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ============================================
   SPINNER ALTERNATIVO
   ============================================ */

.loading-spinner-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 16px;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #e5e7eb;
    border-top-color: var(--primary, #7c3aed);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    will-change: transform;
}

.loading-spinner-sm {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

.loading-spinner-lg {
    width: 64px;
    height: 64px;
    border-width: 5px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loading-text {
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
}

/* ============================================
   UTILITIES
   ============================================ */

/* Ocultar skeleton quando conteúdo carregado */
.loaded .skeleton,
.loaded .catalog-loading,
.loaded .list-loading,
.loaded .loading-spinner-wrapper {
    opacity: 0;
    transition: opacity .25s ease;
}

/* Fade in suave quando conteúdo aparecer */
.fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Prevent layout shift */
.skeleton-preserve-space {
    min-height: 1px; /* garante bloco sem quebrar aspect ratio */
    height: auto;
}

/* ============================================
   ASPECT RATIO UTILITIES
   ============================================ */

.skeleton-ar-1    { aspect-ratio: 1 / 1; }
.skeleton-ar-43   { aspect-ratio: 4 / 3; }
.skeleton-ar-169  { aspect-ratio: 16 / 9; }
.skeleton-ar-21   { aspect-ratio: 2 / 1; }
.skeleton-ar-32   { aspect-ratio: 3 / 2; }


/* ============================================
   ACESSIBILIDADE
   ============================================ */

/* Screen readers */
.skeleton::after {
    content: 'Carregando...';
    position: absolute;
    left: -9999px;
}

/* Reduzir animações para quem prefere */
@media (prefers-reduced-motion: reduce) {
    .skeleton,
    .skeleton-pulse,
    .loading-spinner {
        animation: none;
    }

    .skeleton {
        background: var(--sk-bg1);
    }
}

/* ============================================
   EXEMPLOS DE USO
   ============================================ */

/*
<!-- Skeleton de Card de Produto -->
<article class="skeleton-product-card">
    <div class="skeleton skeleton-image"></div>
    <div class="skeleton-content">
        <div class="skeleton skeleton-title"></div>
        <div class="skeleton skeleton-text" style="width: 100%;"></div>
        <div class="skeleton skeleton-text" style="width: 80%;"></div>
        <div class="skeleton skeleton-text" style="width: 60%;"></div>
        <div class="skeleton skeleton-button"></div>
    </div>
</article>

<!-- Skeleton de Hero -->
<div class="skeleton-hero">
    <div class="skeleton-hero-content">
        <div class="skeleton skeleton-badge"></div>
        <div class="skeleton skeleton-title-lg" style="width: 100%;"></div>
        <div class="skeleton skeleton-subtitle" style="width: 90%;"></div>
        <div class="skeleton skeleton-button-lg"></div>
    </div>
</div>

<!-- Grid de 3 Cards (Catálogo) -->
<div class="catalog-loading">
    <article class="skeleton-product-card" style="--index: 0;">...</article>
    <article class="skeleton-product-card" style="--index: 1;">...</article>
    <article class="skeleton-product-card" style="--index: 2;">...</article>
</div>

<!-- Spinner Simples -->
<div class="loading-spinner-wrapper">
    <div class="loading-spinner"></div>
    <p class="loading-text">Carregando malas disponíveis...</p>
</div>
*/