/* --- ESTILOS PARA FLECHAS FLOTANTES --- */
.scroll-buttons-container {
    position: fixed;
    /* Mantiene la flotación */
    right: 20px;
    /* Mantiene 20 píxeles desde el borde derecho */

    /* CAMBIO CLAVE PARA CENTRAR VERTICALMENTE */
    top: 50%;
    /* Lo sitúa al 50% de la altura de la ventana */
    transform: translateY(-50%);
    /* Lo sube la mitad de su propia altura para un centrado perfecto */

    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* El resto de las reglas CSS se mantienen igual */
/* ... */

.scroll-buttons-container button {
    /* Estilo visual */
    background-color: #1E3A8A;
    /* Usamos el azul de tu footer para consistencia */
    color: white;
    border: none;
    padding: 10px 12px;
    cursor: pointer;
    font-size: 18px;
    border-radius: 4px;
    /* Esquinas redondeadas */
    opacity: 0.8;
    transition: opacity 0.3s, background-color 0.3s;

    /* Control de visibilidad */
    display: none;
    /* Por defecto, ocultamos el botón de subir (lo mostramos con JS) */
}

.scroll-buttons-container button:hover {
    opacity: 1;
    background-color: #2563EB;
    /* Azul un poco más claro al pasar el ratón */
}

/* El botón de ir abajo SIEMPRE debe estar visible (a menos que ya esté al final) */
#scrollDown {
    display: block !important;
}

/* Opcional: Ajuste para móviles */
@media (max-width: 600px) {
    .scroll-buttons-container {
        right: 10px;
        bottom: 10px;
    }

    .scroll-buttons-container button {
        padding: 8px 10px;
    }
}