/* =========================
   CSS QUE APLICA AL COMPONENTE: BOTÓN VOLVER
   CAJITA CON FLECHA QUE LLEVA A LA PÁGINA ANTERIOR
========================= */

.div-boton-volver{
    padding: 10px;
}

.boton-volver {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;
    padding: 0;

    background-color: var(--blanco);
    color: var(--negro);

    border: 1px solid var(--dorado);
    border-radius: var(--radio);

    cursor: pointer;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}

.boton-volver-icono {
    display: block;
    width: 21px;
    height: 21px;
}

.boton-volver:hover {
    background-color: var(--dorado);
    color: var(--negro);
}

.boton-volver:focus-visible {
    outline: 2px solid var(--dorado);
    outline-offset: 3px;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 480px) {
    .boton-volver {
        width: 40px;
        height: 40px;
    }

    .boton-volver-icono {
        width: 19px;
        height: 19px;
    }
}

/* =========================
   ACCESIBILIDAD
========================= */

@media (prefers-reduced-motion: reduce) {
    .boton-volver {
        transition: none;
    }
}