/* Reseñas: resources/views/verificentros/partials/resenas.blade.php y resenas/google.blade.php */

.resena-estrellas {
    display: inline-block;
    color: var(--vc-acento-fuerte);
    letter-spacing: 0.1em;
    line-height: 1;
}

.resena-estrellas__vacia {
    color: var(--bs-border-color);
}

.resenas-promedio {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--vc-primario-oscuro);
}

.resena {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    background-color: #fff;
}

.resena--google {
    border-left: 4px solid var(--vc-acento);
}

.resena-form {
    border: 1px solid var(--bs-border-color);
    border-top: 4px solid var(--vc-acento);
    border-radius: 0.75rem;
    background-color: #fff;
}

.resena-form .form-control:focus {
    border-color: var(--vc-primario);
    box-shadow: 0 0 0 0.25rem rgba(var(--vc-primario-rgb), 0.15);
}

/*
 * Selector de estrellas solo con CSS. En el HTML van de 5 a 1 y se invierten
 * con row-reverse, así "~" ilumina la estrella elegida y las de su izquierda.
 */
.resena-form__estrellas {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 0.25rem;
}

.resena-form__estrellas label {
    font-size: 2rem;
    line-height: 1;
    color: var(--bs-border-color);
    cursor: pointer;
    transition: color 0.15s ease;
}

.resena-form__estrellas label:hover,
.resena-form__estrellas label:hover ~ label,
.resena-form__estrellas input:checked ~ label {
    color: var(--vc-acento-fuerte);
}

.resena-form__estrellas input:focus-visible + label {
    outline: 2px solid var(--vc-primario);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* Campo trampa anti-spam: fuera de la vista, pero no display:none para que los robots lo llenen. */
.resena-form__trampa {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}