/* Custom styles */
:root {
    --color-primary: #3B82F6;  /* default blue */
    --secondary-color: #10b981;
    --text-color: #1f2937;
    --background-color: #f3f4f6;
}

/* Clases de utilidad para los temas */
.theme-light {
    --bg-primary: #ffffff;
    --text-primary: #111827;
}

.theme-dark {
    --bg-primary: #111827;
    --text-primary: #ffffff;
}

.theme-blue {
    --bg-primary: #EFF6FF;
    --text-primary: #1E3A8A;
}

.theme-green {
    --bg-primary: #ECFDF5;
    --text-primary: #064E3B;
}

.theme-purple {
    --bg-primary: #F5F3FF;
    --text-primary: #4C1D95;
}

/* Aplicar colores dinámicamente */
.btn-primary {
    background-color: var(--color-primary);
}

.text-primary {
    color: var(--color-primary);
}

.border-primary {
    border-color: var(--color-primary);
}

body {
    color: var(--text-color);
    background-color: var(--background-color);
.card {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.btn {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    font-weight: 600;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn svg {
    margin-right: 0.5rem;
    transition: transform 0.2s ease;
}

.btn:hover svg {
    transform: scale(1.1);
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background-color: #2563eb;
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: white;
}

.btn-secondary:hover {
    background-color: #059669;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    #mobile-menu {
        display: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
    }

    #mobile-menu.active {
        display: block;
    }
}

/* Form styling */
input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* Decorative elements */
.decorative-shape {
    position: absolute;
    opacity: 0.1;
    z-index: -1;
    transition: transform 0.3s ease;
}

.decorative-shape-1 {
    top: 10%;
    left: 5%;
    width: 100px;
    height: 100px;
    background-color: var(--primary-color);
    border-radius: 50%;
}

.decorative-shape-2 {
    bottom: 15%;
    right: 10%;
    width: 150px;
    height: 150px;
    background-color: var(--secondary-color);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.card:hover .decorative-shape-1 {
    transform: scale(1.1) rotate(15deg);
}

.card:hover .decorative-shape-2 {
    transform: scale(1.1) rotate(-15deg);
}

#drop-area {
    transition: border 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

#drop-area.border-blue-500 {
    background-color: #ebf8ff; /* Fondo azul claro al resaltar */
}