/* FONDO */
body {
    background-color: #f6f8fb;
}

/* CARD */
.menu-box {
    background: #ffffff;
    border: 1px solid #c3c2c2;
    border-radius: 16px;
    padding: 18px;
    transition: all 0.25s ease;
    height: 100%;
}

/* BADGE BASE */
.menu-badge {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    transition: all 0.25s ease;
}

/* GRADIENTES */
.badge-indigo {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.badge-green {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.badge-orange {
    background: linear-gradient(135deg, #f59e0b, #ea580c);
}

.badge-blue {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.badge-gray {
    background: linear-gradient(135deg, #6b7280, #4b5563);
}

.badge-dark {
    background: linear-gradient(135deg, #1f2937, #111827);
}

.badge-purple {
    background: linear-gradient(135deg, #a855f7, #7e22ce);
}

.badge-emerald {
    background: linear-gradient(135deg, #10b981, #059669);
}

.badge-red {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
}

.badge-yellow {
    background: linear-gradient(135deg, #eab308, #ca8a04);
}

.badge-cyan {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
}

.badge-pink {
    background: linear-gradient(135deg, #ec4899, #be185d);
}

.badge-slate {
    background: linear-gradient(135deg, #64748b, #334155);
}

/* TITULO */
.menu-title {
    font-size: 0.95rem;
    font-weight: 500;
    color: #111827;
    line-height: 1.4;
}

/* FLECHA */
.menu-arrow {
    width: 32px;
    height: 32px;
    border-radius: 8px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f1f5f9;
    color: #475569;

    font-size: 0.9rem;
    transition: all 0.25s ease;
}

/* HOVER */
.menu-item:hover .menu-box {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    border-color: #d1d5db;
}

/* EFECTOS */
.menu-item:hover .menu-badge {
    transform: scale(1.08);
}

.menu-item:hover .menu-arrow {
    background: #717173;
    color: #ffffff;
    transform: translate(4px, -4px);
}

/* RESPONSIVE */
@media (max-width: 576px) {
    .menu-title {
        font-size: 0.9rem;
    }
}