/**
 * skeleton.css - Efecto skeleton/shimmer para carga de productos CVA
 */

/* ── Base shimmer ──────────────────────────────────────────────────────────── */
.sk {
    background: #e8edf2;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.sk::after {
    content: '';
    position: absolute;
    top: 0; left: -150%;
    width: 150%; height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
    animation: sk-shimmer 1.6s infinite ease-in-out;
}
@keyframes sk-shimmer {
    0%   { left: -150%; }
    100% { left: 150%;  }
}

/* ── Catalog layout skeleton ─────────────────────────────────────────────── */
.sk-catalog-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    padding-bottom: 60px;
}
.sk-sidebar {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,.06);
    position: sticky;
    top: 100px;
    align-self: start;
}
.sk-sidebar-title { height: 14px; width: 70%; margin-bottom: 20px; }
.sk-filter-item   { height: 12px; margin-bottom: 13px; border-radius: 4px; }
.sk-filter-item:nth-child(2) { width: 85%; }
.sk-filter-item:nth-child(3) { width: 62%; }
.sk-filter-item:nth-child(4) { width: 78%; }
.sk-filter-item:nth-child(5) { width: 50%; }
.sk-filter-item:nth-child(6) { width: 68%; }
.sk-divider { height: 1px; background: #e8edf2; margin: 18px 0; }
.sk-divider::after { display: none; }

/* Toolbar */
.sk-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    margin-bottom: 24px;
}
.sk-toolbar-count { height: 14px; width: 180px; border-radius: 4px; }
.sk-toolbar-sort  { height: 38px; width: 160px; border-radius: 8px; }

/* Product grid */
.sk-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 24px;
}
.sk-product-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,.06);
}
.sk-card-image  { height: 200px; border-radius: 0; width: 100%; }
.sk-card-body   { padding: 16px; }
.sk-card-title  { height: 13px; width: 90%; margin-bottom: 8px; }
.sk-card-sub    { height: 11px; width: 65%; margin-bottom: 16px; }
.sk-card-price  { height: 22px; width: 50%; margin-bottom: 12px; border-radius: 4px; }
.sk-card-btn    { height: 38px; border-radius: 10px; width: 100%; margin-top: 6px; }

/* ── Index page skeleton (carousels) ─────────────────────────────────────── */
.sk-section-title { height: 26px; width: 260px; margin-bottom: 24px; border-radius: 6px; }
.sk-carousel { display: flex; gap: 20px; overflow: hidden; margin-bottom: 48px; }
.sk-carousel-card {
    background: white;
    border-radius: 12px;
    flex: 0 0 220px;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
    overflow: hidden;
}
.sk-carousel-img   { height: 160px; width: 100%; border-radius: 0; }
.sk-carousel-body  { padding: 12px; }
.sk-carousel-title { height: 11px; width: 85%; margin-bottom: 6px; }
.sk-carousel-price { height: 18px; width: 45%; margin-top: 10px; }

/* ── Product detail skeleton ─────────────────────────────────────────────── */
.sk-product-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 40px 0;
}
.sk-prod-img   { height: 420px; border-radius: 16px; width: 100%; }
.sk-prod-title { height: 28px; width: 85%; margin-bottom: 12px; border-radius: 6px; }
.sk-prod-brand { height: 14px; width: 40%; margin-bottom: 24px; border-radius: 4px; }
.sk-prod-price { height: 36px; width: 55%; margin-bottom: 20px; border-radius: 6px; }
.sk-prod-spec  { height: 12px; margin-bottom: 10px; border-radius: 4px; }
.sk-prod-spec:nth-child(1) { width: 80%; }
.sk-prod-spec:nth-child(2) { width: 65%; }
.sk-prod-spec:nth-child(3) { width: 75%; }
.sk-prod-spec:nth-child(4) { width: 55%; }
.sk-prod-btn   { height: 52px; border-radius: 12px; width: 100%; margin-top: 20px; }

/* ── Transitions ─────────────────────────────────────────────────────────── */
.sk-fade-out {
    animation: sk-fade-out 0.3s ease forwards;
    pointer-events: none;
}
@keyframes sk-fade-out {
    to { opacity: 0; transform: translateY(-4px); }
}
.sk-content-in {
    animation: sk-content-in 0.4s ease both;
}
@keyframes sk-content-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .sk-catalog-layout { grid-template-columns: 1fr; }
    .sk-sidebar { display: none; }
    .sk-product-detail { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .sk-products-grid { grid-template-columns: repeat(2,1fr); gap: 12px; }
}