/* Estilos para botón de éxito (OK) */
.ok.button {
    background-color: #388E3C; /* Verde oscuro */
    color: #fff; /* Texto blanco */
    border: 3px solid #BDBDBD; /* Borde plateado */
    border-radius: 3px; /* Bordes menos redondeados */
    padding: 10px 20px; /* Espaciado interno */
    cursor: pointer; /* Cambio de cursor al pasar sobre el botón */
    transition: background-color 0.3s, border-color 0.3s, color 0.3s; /* Transición suave en cambios de color */
}

    .ok.button:hover {
        background-color: #2E7D32; /* Verde más oscuro al pasar el cursor */
        border-color: #757575; /* Borde metálico más oscuro al pasar el cursor */
    }

/* Estilos para botón de información */
.info.button {
    background-color: #0D47A1; /* Azul marino */
    color: #fff; /* Texto blanco */
    border: 3px solid #BDBDBD; /* Borde plateado */
    border-radius: 3px; /* Bordes menos redondeados */
    padding: 10px 20px; /* Espaciado interno */
    cursor: pointer; /* Cambio de cursor al pasar sobre el botón */
    transition: background-color 0.3s, border-color 0.3s, color 0.3s; /* Transición suave en cambios de color */
}

    .info.button:hover {
        background-color: #01579B; /* Azul más oscuro al pasar el cursor */
        border-color: #757575; /* Borde metálico más oscuro al pasar el cursor */
    }

/* Estilos para botón de advertencia (Warning) */
.warning.button {
    background-color: #FFB300; /* Amarillo */
    color: #fff; /* Texto blanco */
    border: 3px solid #BDBDBD; /* Borde plateado */
    border-radius: 3px; /* Bordes menos redondeados */
    padding: 10px 20px; /* Espaciado interno */
    cursor: pointer; /* Cambio de cursor al pasar sobre el botón */
    transition: background-color 0.3s, border-color 0.3s, color 0.3s; /* Transición suave en cambios de color */
}

    .warning.button:hover {
        background-color: #FFA000; /* Amarillo más oscuro al pasar el cursor */
        border-color: #757575; /* Borde metálico más oscuro al pasar el cursor */
    }

/* Estilos para botón cancelar */
.cancel.button {
    background-color: #D32F2F; /* Rojo */
    color: #fff; /* Texto blanco */
    border: 3px solid #BDBDBD; /* Borde plateado */
    border-radius: 3px; /* Bordes menos redondeados */
    padding: 10px 20px; /* Espaciado interno */
    cursor: pointer; /* Cambio de cursor al pasar sobre el botón */
    transition: background-color 0.3s, border-color 0.3s, color 0.3s; /* Transición suave en cambios de color */
}

    .cancel.button:hover {
        background-color: #C62828; /* Rojo más oscuro al pasar el cursor */
        border-color: #757575; /* Borde metálico más oscuro al pasar el cursor */
    }


/* Estilos para botón de guardar (Save) */
.save.button {
    background-color: #5cb85c; /* Verde */
    color: #fff; /* Texto blanco */
    border: 3px solid #5cb85c; /* Borde verde */
    border-radius: 3px; /* Bordes menos redondeados */
    padding: 10px 20px; /* Espaciado interno */
    cursor: pointer; /* Cambio de cursor al pasar sobre el botón */
    transition: background-color 0.3s, border-color 0.3s, color 0.3s; /* Transición suave en cambios de color */
}

    .save.button:hover {
        background-color: #449d44; /* Verde más oscuro al pasar el cursor */
        border-color: #398439; /* Borde más oscuro al pasar el cursor */
    }

/* Estilos para botón de editar (Edit) */
.edit.button {
    background-color: #5bc0de; /* Azul */
    color: #fff; /* Texto blanco */
    border: 3px solid #5bc0de; /* Borde azul */
    border-radius: 3px; /* Bordes menos redondeados */
    padding: 10px 20px; /* Espaciado interno */
    cursor: pointer; /* Cambio de cursor al pasar sobre el botón */
    transition: background-color 0.3s, border-color 0.3s, color 0.3s; /* Transición suave en cambios de color */
}

    .edit.button:hover {
        background-color: #31b0d5; /* Azul más oscuro al pasar el cursor */
        border-color: #269abc; /* Borde más oscuro al pasar el cursor */
    }

/* Estilos para botón de eliminar (Delete) */
.delete.button {
    background-color: #d9534f; /* Rojo */
    color: #fff; /* Texto blanco */
    border: 3px solid #d9534f; /* Borde rojo */
    border-radius: 3px; /* Bordes menos redondeados */
    padding: 10px 20px; /* Espaciado interno */
    cursor: pointer; /* Cambio de cursor al pasar sobre el botón */
    transition: background-color 0.3s, border-color 0.3s, color 0.3s; /* Transición suave en cambios de color */
}

    .delete.button:hover {
        background-color: #c9302c; /* Rojo más oscuro al pasar el cursor */
        border-color: #ac2925; /* Borde más oscuro al pasar el cursor */
    }

/* Estilos para botón de añadir (Add) */
.add.button {
    background-color: #5cb85c; /* Verde */
    color: #fff; /* Texto blanco */
    border: 3px solid #5cb85c; /* Borde verde */
    border-radius: 3px; /* Bordes menos redondeados */
    padding: 10px 20px; /* Espaciado interno */
    cursor: pointer; /* Cambio de cursor al pasar sobre el botón */
    transition: background-color 0.3s, border-color 0.3s, color 0.3s; /* Transición suave en cambios de color */
}

    .add.button:hover {
        background-color: #449d44; /* Verde más oscuro al pasar el cursor */
        border-color: #398439; /* Borde más oscuro al pasar el