/**
 * Skeletons: bloques grises con brillo animado (shimmer) que ocupan el lugar del contenido mientras carga.
 * - .tc-skeleton           bloque genérico (se le da tamaño con width/height o con las variantes de abajo).
 * - .tc-skeleton-row       fila tipo resultado de búsqueda (círculo + dos líneas).
 * - img.tc-img-loading     imagen aún sin descargar: muestra el brillo detrás hasta que llega (skeleton.js).
 * Respeta modo claro/oscuro y prefers-reduced-motion.
 */
:root {
    --tc-sk-base: rgba(255, 255, 255, .07);
    --tc-sk-shine: rgba(255, 255, 255, .16);
}
:root[data-theme="light"] {
    --tc-sk-base: rgba(14, 14, 20, .07);
    --tc-sk-shine: rgba(14, 14, 20, .14);
}

.tc-skeleton,
img.tc-img-loading {
    background-color: var(--tc-sk-base);
    background-image: linear-gradient(100deg, transparent 20%, var(--tc-sk-shine) 50%, transparent 80%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: tc-sk-shimmer 1.3s linear infinite;
}
@keyframes tc-sk-shimmer {
    from { background-position: 150% 0; }
    to   { background-position: -50% 0; }
}

.tc-skeleton { display: block; border-radius: 8px; min-height: 1em; }
.tc-skeleton--line { height: 12px; border-radius: 6px; }
.tc-skeleton--line.is-short { width: 55%; }
.tc-skeleton--circle { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.tc-skeleton--pill { height: 22px; width: 90px; border-radius: 999px; }

.tc-skeleton-list { display: flex; flex-direction: column; gap: 14px; padding: 8px 0; }
.tc-skeleton-row { display: flex; align-items: center; gap: 12px; }
.tc-skeleton-row .tc-skeleton-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }

/* Imágenes: mientras cargan no se ve el ícono de imagen rota ni un hueco vacío. */
img.tc-img-loading { color: transparent; }

@media (prefers-reduced-motion: reduce) {
    .tc-skeleton, img.tc-img-loading { animation: none; }
}

/* Fotos de llanta/modelo: el fondo de su caja es claro incluso en modo oscuro, así que el brillo va en gris oscuro. */
.tc-tire-card-media img.tc-img-loading,
.tc-detail-panel img.tc-img-loading {
    background-color: rgba(14, 14, 20, .08);
    background-image: linear-gradient(100deg, transparent 20%, rgba(14, 14, 20, .12) 50%, transparent 80%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
}

/* Skeleton del home (redesign/partials/home-skeleton.blade.php): cubre la pantalla bajo el navbar hasta que carga todo. */
.tc-home-sk {
    position: fixed; inset: 0; z-index: 1000;
    padding: 110px 16px 24px;
    overflow: hidden;
    background: var(--tc-p-bg, #0b0b10);
    transition: opacity .35s ease;
}
.tc-home-sk.is-done { opacity: 0; pointer-events: none; }
.tc-home-sk-hero { max-width: 1140px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.tc-home-sk-title { width: min(620px, 90%); height: 38px; border-radius: 10px; }
.tc-home-sk-title.is-short { width: min(420px, 65%); }
.tc-home-sk-boxes { display: flex; gap: 10px; }
.tc-home-sk-box { width: 68px; height: 72px; border-radius: 12px; }
.tc-home-sk-card { width: min(275px, 100%); height: 66px; border-radius: 12px; }
.tc-home-sk-btns { display: flex; gap: 12px; width: min(560px, 100%); }
.tc-home-sk-btn { flex: 1; height: 52px; border-radius: 12px; }
.tc-home-sk-grid { max-width: 1140px; margin: 36px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tc-home-sk-tire { display: flex; flex-direction: column; gap: 10px; }
.tc-home-sk-photo { height: 150px; border-radius: 12px; }
@media (max-width: 767.98px) {
    .tc-home-sk { padding-top: 96px; }
    .tc-home-sk-hero { align-items: center; }
    .tc-home-sk-grid { grid-template-columns: repeat(2, 1fr); }
    .tc-home-sk-tire:nth-child(n+3) { display: none; }
}