/*
 * Mr. Mate — Reseñas de Google
 * Paleta y tipografía tomadas del footer real de mrmate.net (fondo #111,
 * títulos blancos, texto gris #999) para que el bloque se sienta parte del
 * mismo footer y no un widget pegado con cinta. Todo hereda la fuente del
 * sitio vía font-family: inherit, sin fuentes propias.
 */

.mmgr-bloque {
    --mmgr-texto: #ffffff;
    --mmgr-muted: #999999;
    --mmgr-borde: rgba(255, 255, 255, 0.12);
    --mmgr-superficie: rgba(255, 255, 255, 0.04);
    --mmgr-superficie-hover: rgba(255, 255, 255, 0.07);

    font-family: inherit;
    color: var(--mmgr-texto);
    max-width: 100%;
    /* Clave para que el carrusel scrollee ADENTRO de la columna del footer
       (grid/flex) en vez de desbordarla: sin "overflow" acá, la columna del
       footer (que no controlamos, es del tema) mide su ancho mínimo en base
       al contenido más ancho de TODO lo que tiene adentro, ignorando que el
       carrusel de abajo ya sabe scrollear solo. Con overflow != visible acá,
       este bloque queda aislado y no "infla" la columna del tema. */
    min-width: 0;
    overflow: hidden;
}

.mmgr-bloque * {
    box-sizing: border-box;
    font-family: inherit;
}

.mmgr-bloque--error {
    padding: 10px 14px;
    border: 1px dashed var(--mmgr-borde);
    border-radius: 6px;
    color: var(--mmgr-muted);
    font-size: 12px;
}

.mmgr-cabecera {
    margin-bottom: 14px;
}

.mmgr-titulo {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--mmgr-texto);
}

.mmgr-resumen {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--mmgr-muted);
}

.mmgr-google-g {
    display: inline-flex;
    align-items: center;
}

.mmgr-rating-num {
    color: var(--mmgr-texto);
    font-weight: 700;
}

.mmgr-estrellas {
    display: inline-flex;
    gap: 1px;
    letter-spacing: 1px;
}

.mmgr-estrella {
    color: rgba(255, 255, 255, 0.25);
    font-size: 14px;
    line-height: 1;
}

.mmgr-estrella--llena {
    color: #ffffff;
}

.mmgr-estrellas--sm .mmgr-estrella {
    font-size: 11px;
}

.mmgr-total {
    color: var(--mmgr-muted);
}

.mmgr-carrusel {
    display: flex;
    gap: 12px;
    min-width: 0;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 8px;
    margin: 0 0 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.mmgr-carrusel::-webkit-scrollbar {
    height: 5px;
}

.mmgr-carrusel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 4px;
}

.mmgr-tarjeta {
    scroll-snap-align: start;
    flex: 0 0 240px;
    background: var(--mmgr-superficie);
    border: 1px solid var(--mmgr-borde);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: background-color 0.15s ease;
}

.mmgr-tarjeta:hover {
    background: var(--mmgr-superficie-hover);
}

.mmgr-tarjeta__cabecera {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mmgr-tarjeta__identidad {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mmgr-avatar {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
}

.mmgr-avatar--foto {
    border: 1px solid var(--mmgr-borde);
}

.mmgr-avatar--inicial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    color: var(--mmgr-texto);
    font-size: 13px;
    font-weight: 700;
}

.mmgr-autor {
    font-size: 13px;
    font-weight: 600;
    color: var(--mmgr-texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mmgr-texto {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--mmgr-muted);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mmgr-tiempo {
    margin-top: auto;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
}

.mmgr-pie {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.mmgr-boton {
    display: inline-block;
    padding: 9px 18px;
    background: #ffffff;
    color: #111111;
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 6px;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.mmgr-boton:hover {
    opacity: 0.85;
    color: #111111;
}

.mmgr-ver-todas {
    font-size: 12.5px;
    color: var(--mmgr-muted);
    text-decoration: none;
}

.mmgr-ver-todas:hover {
    color: var(--mmgr-texto);
    text-decoration: underline;
}

@media (max-width: 480px) {
    .mmgr-tarjeta {
        flex-basis: 78vw;
    }
}