.btnFace {
    text-align: center;
    border: none;
}

.face {
    font-size: 50px;
    line-height: 1;
}

.textFace {
    margin-top: 6px;
}

/* Contenedor clickable de cada opción */
.lblRate {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 10px 12px;
    margin-bottom: 8px;

    cursor: pointer;
    user-select: none;

    background: transparent;
    transition: background 120ms ease, border-color 120ms ease;
}

.lblRate:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.18);
}

/* Checkbox */
.cbRate {
    transform: scale(1.15);
    cursor: pointer;
}

/* Opcional: texto (si añades txtRate) */
.txtRate {
    line-height: 1.2;
}

.lblRate:has(.cbRate:checked) {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.28);
}