/*
 * resenas.css — Decibelio
 * Tema hijo: blocksy-child
 * Depende de: variables.css (db-variables)
 * Carga: home + páginas con banner de cierre (categorías + ICT2) — condicional en functions.php
 *
 * HTML inyectado por db_resenas_render() (origen único). Componente reutilizable:
 * banda clara con carril horizontal de tarjetas (scroll-snap) + flechas + puntos.
 * Las 8 tarjetas van todas en el DOM; el JS solo controla el desplazamiento.
 *
 * REGLAS:
 * - Sin !important nunca
 * - Sin hardcode de colores de marca — solo var(--color-*)
 *   (excepción: paleta decorativa de avatares, local a este componente)
 * - Especificidad por selectores encadenados desde .db-resenas
 */

/* ============================================================
   SECCIÓN — banda clara. Full-width en la home; break-out a
   sangre cuando va dentro del cuerpo de categoría/ICT2 (mismo
   mecanismo que los paneles; .db-cat-contenido tiene overflow-x: clip).
   ============================================================ */
.db-resenas {
    padding-block: var(--espaciado-seccion);
    background-color: var(--color-gris-fondo);

    /* Paleta de avatares — decorativa, estilo Google, SIN el verde de marca
       (no diluir el significado del verde corporativo). Ciclo de 6 tonos. */
    --db-avatar-1: #5B8DEF;
    --db-avatar-2: #E8703A;
    --db-avatar-3: #9B59B6;
    --db-avatar-4: #E0568B;
    --db-avatar-5: #6C7BD1;
    --db-avatar-6: #C0563E;
}

.db-cat-contenido .db-resenas {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
}

.db-resenas .db-resenas__inner {
    max-width: var(--ancho-contenedor);
    margin-inline: auto;
    padding-inline: var(--padding-contenedor);
}

/* ============================================================
   CABECERA — intro (izquierda) + flechas (derecha, alineadas al
   pie del intro)
   ============================================================ */
.db-resenas .db-resenas__cabecera {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1rem;   /* hueco flechas ↔ carril: ajustado para pegar los controles a las tarjetas */
}

/* Título del bloque — H3 (único heading del componente) */
.db-resenas .db-resenas__titulo {
    font-family: var(--font-titulos);
    font-size: var(--texto-h2);
    font-weight: var(--peso-extrabold);
    color: var(--color-gris-texto);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0.75rem 0 0;
}

/* ============================================================
   CONTROLES — flechas (chevron suelto, sin caja · siempre visibles)
   ============================================================ */
.db-resenas .db-resenas__controles {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.db-resenas .db-resenas__flecha {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;   /* área de pulsación cómoda alrededor del chevron, sin caja visible */
    border: none;
    background: none;
    color: var(--color-gris-medio);
    cursor: pointer;
    transition: color var(--transicion-rapida);
}

.db-resenas .db-resenas__flecha svg {
    width: 20px;
    height: 20px;
}

.db-resenas .db-resenas__flecha:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Feedback: el chevron se oscurece al pasar el ratón (escritorio) o al pulsar (táctil) */
@media (hover: hover) {
    .db-resenas .db-resenas__flecha:not(:disabled):hover {
        color: var(--color-gris-texto);
    }
}

.db-resenas .db-resenas__flecha:not(:disabled):active {
    color: var(--color-gris-texto);
}

.db-resenas .db-resenas__flecha:focus-visible {
    outline: 2px solid var(--color-verde);
    outline-offset: 2px;
}

/* ============================================================
   CARRIL — scroll horizontal con snap. ~3 tarjetas visibles y
   la siguiente asomando (señal de scroll sin depender del JS).
   tabindex + aria-label → desplazable por teclado sin JS.
   ============================================================ */
.db-resenas .db-resenas__carril {
    display: flex;
    gap: 1.5rem;
    margin: 0;
    padding: 0.5rem 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.db-resenas .db-resenas__carril::-webkit-scrollbar {
    display: none;
}

.db-resenas .db-resenas__carril:focus-visible {
    outline: 2px solid var(--color-verde);
    outline-offset: 4px;
}

.db-resenas .db-resenas__item {
    scroll-snap-align: start;
    flex: 0 0 clamp(280px, 30%, 340px);
}

/* ============================================================
   TARJETA — fondo blanco, borde sutil, sombra suave. Alturas
   iguales; el texto va íntegro (sin recorte, legible por Google).
   ============================================================ */
.db-resenas .db-resenas__tarjeta {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.75rem;
    background-color: var(--color-blanco);
    border: 1px solid color-mix(in srgb, var(--color-verde-oscuro) 10%, transparent);
    border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra-tarjeta-suave);
}

.db-resenas .db-resenas__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Avatar — círculo con la inicial (color por posición, ciclo de 6) */
.db-resenas .db-resenas__avatar {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-family: var(--font-titulos);
    font-weight: var(--peso-bold);
    color: var(--color-blanco);
}

.db-resenas .db-resenas__item:nth-child(6n+1) .db-resenas__avatar { background-color: var(--db-avatar-1); }
.db-resenas .db-resenas__item:nth-child(6n+2) .db-resenas__avatar { background-color: var(--db-avatar-2); }
.db-resenas .db-resenas__item:nth-child(6n+3) .db-resenas__avatar { background-color: var(--db-avatar-3); }
.db-resenas .db-resenas__item:nth-child(6n+4) .db-resenas__avatar { background-color: var(--db-avatar-4); }
.db-resenas .db-resenas__item:nth-child(6n+5) .db-resenas__avatar { background-color: var(--db-avatar-5); }
.db-resenas .db-resenas__item:nth-child(6n)   .db-resenas__avatar { background-color: var(--db-avatar-6); }

/* Nombre — texto normal (no es heading) */
.db-resenas .db-resenas__nombre {
    font-family: var(--font-titulos);
    font-weight: var(--peso-semibold);
    color: var(--color-gris-texto);
    line-height: 1.2;
}

/* Estrellas doradas */
.db-resenas .db-resenas__estrellas {
    display: flex;
    gap: 0.15rem;
    color: var(--color-estrella);
}

.db-resenas .db-resenas__estrellas svg {
    width: 18px;
    height: 18px;
}

.db-resenas .db-resenas__texto {
    font-family: var(--font-cuerpo);
    font-size: var(--texto-pequeño);
    color: var(--color-gris-medio);
    line-height: 1.6;
    margin: 0;
}

/* ============================================================
   PAGINACIÓN — puntos (siempre visibles); el activo tipo pill
   ============================================================ */
.db-resenas .db-resenas__puntos {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;   /* pegado al carril, simétrico con el hueco de las flechas */
}

.db-resenas .db-resenas__punto {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: var(--radio-pildora);
    background-color: color-mix(in srgb, var(--color-gris-texto) 25%, transparent);
    cursor: pointer;
    transition: width var(--transicion-rapida), background-color var(--transicion-rapida);
}

.db-resenas .db-resenas__punto.is-active {
    width: 22px;
    background-color: color-mix(in srgb, var(--color-gris-texto) 50%, transparent);
}

.db-resenas .db-resenas__punto:focus-visible {
    outline: 2px solid var(--color-verde);
    outline-offset: 2px;
}

/* ============================================================
   RESPONSIVE — TABLET / MÓVIL
   ============================================================ */
/* Tablet + móvil — cabecera más compacta y pegada al carril:
   menos espacio entre badge/H3/flechas y las fichas */
@media (max-width: 1024px) {
    .db-resenas .db-resenas__cabecera {
        gap: 0.75rem;
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 768px) {
    .db-resenas .db-resenas__cabecera {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;           /* aún más pegado en móvil que en tablet */
        /* margen negativo: el carril sube hacia el chevron aprovechando el padding
           inferior invisible de la flecha (la banda de pulsación se mantiene; el
           carril solo ocupa ese hueco vacío, sin invadir las fichas) */
        margin-bottom: -0.4rem;
    }

    /* Flechas a la derecha, sobre el carril (el intro sigue a la izquierda) */
    .db-resenas .db-resenas__controles {
        align-self: flex-end;
    }

    .db-resenas .db-resenas__item {
        flex-basis: 85%;
    }
}

/* ============================================================
   ACCESIBILIDAD — REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .db-resenas .db-resenas__flecha,
    .db-resenas .db-resenas__punto {
        transition: none;
    }

    .db-resenas .db-resenas__carril {
        scroll-behavior: auto;
    }
}