/* BASE */
.uk-button[class*="uk-button-"] {
    border: none;
    transition: all 0.25s ease;
}

.uk-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

/* ========================= */
/* PASTEL (BASE) */
/* ========================= */

/* WHITE */
.uk-button-white { background:#ffffff; color:#333; border:1px solid #ddd; }
.uk-button-white:hover { background:#f1f1f1; color:#000; }

/* BLACK */
.uk-button-black { background:#444; color:#fff; }
.uk-button-black:hover { background:#000; }

/* GRAY */
.uk-button-gray { background:#e0e0e0; color:#333; }
.uk-button-gray:hover { background:#9e9e9e; color:#fff; }

/* RED */
.uk-button-red { background:#ffcdd2; color:#7f1d1d; }
.uk-button-red:hover { background:#e53935; color:#fff; }

/* GREEN */
.uk-button-green { background:#c8e6c9; color:#1b5e20; }
.uk-button-green:hover { background:#43a047; color:#fff; }

/* YELLOW */
.uk-button-yellow { background:#fff9c4; color:#7f6000; }
.uk-button-yellow:hover { background:#fbc02d; color:#000; }

/* ORANGE */
.uk-button-orange { background:#ffe0b2; color:#7c2d12; }
.uk-button-orange:hover { background:#fb8c00; color:#fff; }

/* VIOLET */
.uk-button-violet { background:#e1bee7; color:#4a148c; }
.uk-button-violet:hover { background:#8e24aa; color:#fff; }

/* TEAL */
.uk-button-teal { background:#b2dfdb; color:#004d40; }
.uk-button-teal:hover { background:#00897b; color:#fff; }

/* BLUE */
.uk-button-blue { background:#bbdefb; color:#0d47a1; }
.uk-button-blue:hover { background:#1e88e5; color:#fff; }

/* SKY */
.uk-button-sky { background:#b3e5fc; color:#01579b; }
.uk-button-sky:hover { background:#039be5; color:#fff; }

/* PINK */
.uk-button-pink { background:#f8bbd0; color:#880e4f; }
.uk-button-pink:hover { background:#d81b60; color:#fff; }

/* BROWN */
.uk-button-brown { background:#d7ccc8; color:#4e342e; }
.uk-button-brown:hover { background:#6d4c41; color:#fff; }

/* PURPLE */
.uk-button-purple { background:#d1c4e9; color:#311b92; }
.uk-button-purple:hover { background:#5e35b1; color:#fff; }


/* ========================= */
/* VIVOS (LIGHT) */
/* ========================= */

/* WHITE */
.uk-button-white-light { background:#ffffff; color:#333; border:1px solid #ccc; }
.uk-button-white-light:hover { background:#f5f5f5; }

/* BLACK */
.uk-button-black-light { background:#000; color:#fff; }
.uk-button-black-light:hover { background:#444; }

/* GRAY */
.uk-button-gray-light { background:#6c757d; color:#fff; }
.uk-button-gray-light:hover { background:#dee2e6; color:#333; }

/* RED */
.uk-button-red-light { background:#e53935; color:#fff; }
.uk-button-red-light:hover { background:#ffcdd2; color:#7f1d1d; }

/* GREEN */
.uk-button-green-light { background:#2e7d32; color:#fff; }
.uk-button-green-light:hover { background:#c8e6c9; color:#1b5e20; }

/* YELLOW */
.uk-button-yellow-light { background:#fbc02d; color:#000; }
.uk-button-yellow-light:hover { background:#fff9c4; }

/* ORANGE */
.uk-button-orange-light { background:#fb8c00; color:#fff; }
.uk-button-orange-light:hover { background:#ffe0b2; color:#7c2d12; }

/* VIOLET */
.uk-button-violet-light { background:#8e24aa; color:#fff; }
.uk-button-violet-light:hover { background:#e1bee7; color:#4a148c; }

/* TEAL */
.uk-button-teal-light { background:#00897b; color:#fff; }
.uk-button-teal-light:hover { background:#b2dfdb; color:#004d40; }

/* BLUE */
.uk-button-blue-light { background:#1e88e5; color:#fff; }
.uk-button-blue-light:hover { background:#bbdefb; color:#0d47a1; }

/* SKY */
.uk-button-sky-light { background:#039be5; color:#fff; }
.uk-button-sky-light:hover { background:#b3e5fc; color:#01579b; }

/* PINK */
.uk-button-pink-light { background:#d81b60; color:#fff; }
.uk-button-pink-light:hover { background:#f8bbd0; color:#880e4f; }

/* BROWN */
.uk-button-brown-light { background:#6d4c41; color:#fff; }
.uk-button-brown-light:hover { background:#d7ccc8; color:#4e342e; }

/* PURPLE */
.uk-button-purple-light { background:#5e35b1; color:#fff; }
.uk-button-purple-light:hover { background:#d1c4e9; color:#311b92; }

/* BASE PANEL */
[class*="uk-panel-"] {
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 20px;
    color: #333;
}

/* ========================= */
/* PASTEL */
/* ========================= */

/* WHITE */
.panel-white { background:#ffffff; color:#333; border:1px solid #ddd; }

/* BLACK */
.panel-black { background:#444; color:#fff; }

/* GRAY */
.panel-gray { background:#e0e0e0; color:#333; }

/* RED */
.panel-red { background:#ffcdd2; color:#7f1d1d; }

/* GREEN */
.panel-green { background:#c8e6c9; color:#1b5e20; }

/* YELLOW */
.panel-yellow { background:#fff9c4; color:#7f6000; }

/* ORANGE */
.panel-orange { background:#ffe0b2; color:#7c2d12; }

/* VIOLET */
.panel-violet { background:#e1bee7; color:#4a148c; }

/* TEAL */
.panel-teal { background:#b2dfdb; color:#004d40; }

/* BLUE */
.panel-blue { background:#bbdefb; color:#0d47a1; }

/* SKY */
.panel-sky { background:#b3e5fc; color:#01579b; }

/* PINK */
.panel-pink { background:#f8bbd0; color:#880e4f; }

/* BROWN */
.panel-brown { background:#d7ccc8; color:#4e342e; }

/* PURPLE */
.panel-purple { background:#d1c4e9; color:#311b92; }


/* ========================= */
/* VIVOS (LIGHT) */
/* ========================= */

/* WHITE */
.panel-white-light { background:#ffffff; color:#333; border:1px solid #ccc; }

/* BLACK */
.panel-black-light { background:#000; color:#fff; }

/* GRAY */
.panel-gray-light { background:#6c757d; color:#fff; }

/* RED */
.panel-red-light { background:#e53935; color:#fff; }

/* GREEN */
.panel-green-light { background:#2e7d32; color:#fff; }

/* YELLOW */
.panel-yellow-light { background:#fbc02d; color:#000; }

/* ORANGE */
.panel-orange-light { background:#fb8c00; color:#fff; }

/* VIOLET */
.panel-violet-light { background:#8e24aa; color:#fff; }

/* TEAL */
.panel-teal-light { background:#00897b; color:#fff; }

/* BLUE */
.panel-blue-light { background:#1e88e5; color:#fff; }

/* SKY */
.panel-sky-light { background:#039be5; color:#fff; }

/* PINK */
.panel-pink-light { background:#d81b60; color:#fff; }

/* BROWN */
.panel-brown-light { background:#6d4c41; color:#fff; }

/* PURPLE */
.panel-purple-light { background:#5e35b1; color:#fff; }

.floating-actions {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;

    opacity: 0;
    transform: translateY(40px);
    pointer-events: none;

    transition: 
        opacity 0.4s ease,
        transform 0.4s ease;
}

/* estado visible */
.floating-actions.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}