.botonExcel {
    /* Mismos estilos base que tu botonAzul para mantener consistencia */
    margin-top: 1vh;
    color: #FFF;
    text-align: center;
    border: none;
    border-radius: 10px; /* O el radio que use tu botonAzul */
    font-family: Poppins, sans-serif;
    font-size: 14px;
    transition: all 0.2s ease;
    
    /* El Color Excel */
    background-color: #217346; 
    /* Opcional: Un degradado sutil si tu botonAzul usa degradado */
    background-image: linear-gradient(to bottom, #2a915b, #1e6b41);
}

.botonExcel:hover {
    background-color: #1e6b41;
    background-image: linear-gradient(to bottom, #1e6b41, #144a2d);
    color: #fff;
    transform: translateY(-1px); /* Pequeño efecto de elevación */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.botonAzul {
    /* --- Estilos Base (Tus colores originales) --- */
    margin-top: 1vh;
    background-image: radial-gradient(circle, rgba(116,165,206,1), rgba(66,94,154,1));
    color: #FFF;
    text-align: center;
    border: none;
    padding: 6px 12px;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    
    /* --- EL EFECTO PREMIUM (Nuevos agregados) --- */
    cursor: pointer;                /* Aparece la manita al pasar el mouse */
    box-shadow: 0 2px 5px rgba(0,0,0,0.15); /* Sombra sutil inicial para dar profundidad */
    transition: all 0.2s ease;      /* Hace que el cambio de color y movimiento sea suave */
    
    /* Asegura que si pones iconos, se centren bien */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none; /* Por si lo usas en etiquetas <a> */
}

/* --- Estado Hover (Cuando pasas el mouse) --- */
.botonAzul:hover {
    /* Oscurecemos ligeramente el degradado para indicar actividad */
    background-image: radial-gradient(circle, rgba(96, 145, 186, 1), rgba(46, 74, 134, 1));
    color: #fff;
    
    /* El efecto de "elevación" */
    transform: translateY(-2px);    /* Se mueve 2 pixeles hacia arriba */
    box-shadow: 0 4px 8px rgba(0,0,0,0.25); /* La sombra crece, pareciendo que flota */
}

/* --- Estado Active (Cuando haces clic) --- */
.botonAzul:active {
    transform: translateY(0);       /* Regresa a su lugar original */
    box-shadow: 0 2px 3px rgba(0,0,0,0.15); /* La sombra se reduce */
}

.input-group .botonAzul {
    margin-top: 0 !important; /* Quita el margen superior para que no se desfase */
    border-top-left-radius: 0; /* Quita redondez izquierda superior para unir al input */
    border-bottom-left-radius: 0; /* Quita redondez izquierda inferior */
    border-radius: 0 10px 10px 0; /* Solo redondea las esquinas de la derecha */
    box-shadow: none; /* Opcional: quita la sombra para que parezca una sola pieza con el input */
}