/* ========================================
   BLOQUE "ELIGE UN COLOR, TU FAVORITO"
   Minimalista + moderno. Scroll horizontal con snap.
======================================== */

.colores-section {
    margin: 1.5rem 0 2rem;
}

.colores-title i {
    background: linear-gradient(135deg, #ef4444 0%, #f97316 25%, #22c55e 50%, #3b82f6 75%, #8b5cf6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.colores-scroll {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding: 0.35rem 0.25rem 0.85rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.colores-scroll::-webkit-scrollbar {
    display: none;
}

/* ---- Tarjeta de color ---- */
.color-card {
    position: relative;
    flex: 0 0 auto;
    width: 104px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0;
    text-decoration: none;
    scroll-snap-align: start;
    border-radius: 16px;
    outline: none;
}

.color-card-swatch {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    background: var(--color-card);
    box-shadow: 0 2px 10px rgba(17, 24, 39, 0.1);
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.28s ease;
    overflow: hidden;
}

/* Borde interno sutil para que el blanco/negro no se pierdan sobre el fondo */
.color-card-swatch::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(17, 24, 39, 0.08);
    pointer-events: none;
}

/* Brillo diagonal que se desliza al pasar el cursor */
.color-card-swatch::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-18deg);
    opacity: 0;
    transition: left 0.55s ease, opacity 0.3s ease;
    pointer-events: none;
}

.color-card-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #374151;
    text-align: center;
    letter-spacing: -0.01em;
    transition: color 0.2s ease;
}

/* Interacción (desktop) */
@media (hover: hover) {
    .color-card:hover .color-card-swatch {
        transform: translateY(-5px) scale(1.03);
        box-shadow: 0 12px 26px -6px var(--color-card);
    }

    .color-card:hover .color-card-swatch::after {
        left: 120%;
        opacity: 1;
    }

    .color-card:hover .color-card-name {
        color: #111827;
    }
}

/* Feedback táctil (mobile) */
.color-card:active .color-card-swatch {
    transform: scale(0.95);
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.14);
}

.color-card:focus-visible .color-card-swatch {
    outline: 3px solid #8b5cf6;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .color-card-swatch,
    .color-card-swatch::after {
        transition: none;
    }
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .colores-section {
        margin: 1rem 0 1.5rem;
    }

    .colores-scroll {
        gap: 0.625rem;
        padding: 0.25rem 0.25rem 0.75rem;
        /* Snap suave: no fuerza el encaje y deja ver el 5º asomado */
        scroll-snap-type: none;
    }

    /* Mobile: se ven 4 tarjetas completas y ~media quinta, para que se
       entienda que hay más contenido desplazando en horizontal.
       4 tarjetas + 4 huecos + media tarjeta = ancho visible
       => ancho = (100% - 4 * gap) / 4.5 */
    .color-card {
        width: calc((100% - 2.5rem) / 4.5);
        min-width: 64px;
    }

    .color-card-swatch {
        border-radius: 14px;
    }

    .color-card-name {
        font-size: 0.7rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}


/* ========================================
   VISTA DINÁMICA DE UN COLOR (sin recarga)
======================================== */

.color-view {
    padding-bottom: 2rem;
}

.color-view-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0.5rem 0 1.25rem;
}

.color-view-back {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    background: #fff;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.color-view-back:hover {
    border-color: #8b5cf6;
    color: #8b5cf6;
    transform: translateX(-2px);
}

.color-view-back i {
    font-size: 1.15rem;
}

.color-view-dot {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-view);
    border: 1px solid rgba(17, 24, 39, 0.1);
    box-shadow: 0 2px 10px -2px var(--color-view);
}

.color-view-titles {
    min-width: 0;
}

.color-view-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.color-view-count {
    font-size: 0.82rem;
    color: #6b7280;
    font-weight: 500;
}

/* Rejilla de fotos, tipo Pinterest
   -----------------------------------------------------------------------------
   Columnas de altura libre en lugar de una retícula de celdas cuadradas: así cada
   foto conserva su formato, vertical u horizontal, en vez de recortarse.

   Las columnas son elementos de verdad y el reparto lo hace el JS, NO `columns`
   de CSS. Con `columns` el navegador reequilibra todas las piezas cada vez que se
   añaden nuevas, así que al bajar con el scroll las fotos ya vistas cambiaban de
   sitio. Con columnas propias, cada foto nueva se cuelga al final de la más corta
   y lo de arriba no se vuelve a tocar. */
.color-photos-grid {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.color-photo-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Estado de carga inicial: una retícula simple hasta que llegan las fotos y se
   construyen las columnas */
.color-photos-cargando {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.75rem;
}

.color-photo-item {
    display: block;
    width: 100%;
    margin: 0;
    position: relative;
    /* El alto lo fija el JS con la proporción real de cada foto, antes de
       insertarla, para que nada se recoloque después */
    border-radius: 12px;
    overflow: hidden;
    background: #eef0f4;
    cursor: pointer;
    border: none;
    padding: 0;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.color-photo-item img {
    width: 100%;
    height: 100%;
    /* Con la proporción de la caja igual a la de la foto, `cover` no recorta */
    object-fit: cover;
    display: block;
    -webkit-touch-callout: none;
    user-select: none;
    transition: opacity 0.4s ease;
}

.color-photo-item img.loading {
    opacity: 0;
}

@media (hover: hover) {
    .color-photo-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(17, 24, 39, 0.14);
    }
}

.color-photo-item:focus-visible {
    outline: 3px solid #8b5cf6;
    outline-offset: 2px;
}

/* Esqueleto de carga, dentro de .color-photos-cargando */
.color-photo-skeleton {
    display: block;
    width: 100%;
    margin: 0;
    aspect-ratio: 3 / 4;
    border-radius: 12px;
    background: #eef0f4;
    position: relative;
    overflow: hidden;
}

.color-photo-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    animation: color-sk 1.3s ease-in-out infinite;
}

@keyframes color-sk {
    100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .color-photo-skeleton::after { animation: none; }
}

/* Estados vacío / error */
.color-view-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem 1rem;
    text-align: center;
    color: #6b7280;
}

.color-view-empty i {
    font-size: 2.5rem;
    color: #d1d5db;
}

.color-view-empty h3 {
    font-size: 1.05rem;
    color: #374151;
    margin: 0;
}

.color-view-empty p {
    margin: 0;
    font-size: 0.9rem;
}

/* Fin de la lista
   -----------------------------------------------------------------------------
   Mismo indicador que la galería, para que el final se lea igual en todo el sitio.
   Se copian las reglas porque `css/pages/galeria-detalle.css` no se carga en la
   página de galerías, y se acotan a `.color-view` para no pisar a nadie. */
.color-view .end-of-gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem 1rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.color-view .end-of-gallery.visible {
    opacity: 1;
    transform: translateY(0);
}

.color-view .end-of-gallery-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #9ca3af;
    font-size: 0.875rem;
    font-weight: 500;
}

.color-view .end-of-gallery-content i {
    font-size: 1.125rem;
    color: #8b5cf6;
    animation: color-celebrate 2s ease-in-out infinite;
}

@keyframes color-celebrate {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(-5deg); }
    75% { transform: scale(1.1) rotate(5deg); }
}

@media (prefers-reduced-motion: reduce) {
    .color-view .end-of-gallery-content i { animation: none; }
    .color-view .end-of-gallery { transition: none; }
}

/* Centinela de scroll infinito */
.color-view-sentinel {
    height: 1px;
}

@media (max-width: 768px) {
    .color-photos-grid,
    .color-photo-col {
        gap: 0.5rem;
    }

    .color-photos-cargando {
        grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
        gap: 0.5rem;
    }

    .color-view-title {
        font-size: 1.15rem;
    }

    .color-view-dot {
        width: 28px;
        height: 28px;
    }

    .color-photo-item,
    .color-photo-skeleton {
        border-radius: 10px;
    }
}