/* === Painel Cards === */
.card {
    @apply bg-white rounded-xl shadow-md p-6 transition-all hover:shadow-lg;
    background: linear-gradient(135deg, #405de6, #833ab4, #fd1d1d, #fcb045); /* Instagram gradiente */
    color: #fff;
    border: none;
}

[data-theme="dark"] .card {
    background: linear-gradient(135deg, #121212, #1f2937);
    color: #e5e7eb;
}

.card-title {
    @apply text-xl font-semibold mb-2;
    background: linear-gradient(135deg, #405de6, #833ab4, #fd1d1d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.card-description {
    @apply text-sm;
    color: #4a4a4a; /* Cinza escuro */
}

/* === Botões === */
.btn {
    @apply px-4 py-2 rounded-md font-medium transition-all;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-primary {
    @apply text-white;
    background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045); /* Instagram gradiente */
}

.btn-primary:hover {
    background: linear-gradient(135deg, #fd1d1d, #fcb045, #833ab4);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.btn-danger {
    @apply text-white;
    background: linear-gradient(135deg, #ff4d4d, #ff0000);
}

.btn-danger:hover {
    background: linear-gradient(135deg, #ff0000, #ff4d4d);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Botões com cores do WhatsApp */
.btn-whatsapp {
    @apply text-white;
    background: linear-gradient(135deg, #25d366, #128c7e);
}

.btn-whatsapp:hover {
    background: linear-gradient(135deg, #128c7e, #25d366);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* === Containers === */
.container-center {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

.header-title {
    @apply text-2xl font-bold mt-4 mb-2;
    background: linear-gradient(135deg, #405de6, #833ab4, #fd1d1d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* === Fundo estilizado === */
.background-gradient {
    background: linear-gradient(135deg, #405de6, #833ab4, #fd1d1d, #fcb045); /* Instagram gradiente */
    color: #fff;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* === Links === */
a {
    @apply font-medium;
    color: #405de6;
    text-decoration: none;
    transition: color 0.3s;
}

a:hover {
    color: #fd1d1d;
}

/* === Alternância de tema === */
.theme-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, #405de6, #833ab4, #fd1d1d);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: background 0.3s;
}

.theme-toggle:hover {
    background: linear-gradient(135deg, #25d366, #128c7e);
}