body {
            font-family: 'Inter', sans-serif;
            background-color: #f1f5f9; /* Tailwind: bg-slate-100 */
            color: #334155; /* Tailwind: text-slate-700 */
        }
        .sidebar {
            width: 280px; /* Ancho fijo para el sidebar */
            min-width: 280px;
        }
        .main-content {
            flex-grow: 1; /* El contenido principal ocupa el espacio restante */
        }
        .nav-link.active {
            background-color: #4f46e5; /* indigo-600 */
            color: white;
            font-weight: 600;
        }
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 100; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
            justify-content: center;
            align-items: center;
        }
        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 2.5rem; /* p-10 */
            border-radius: 0.75rem; /* rounded-xl */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            max-width: 90%;
            width: 600px;
            position: relative;
        }
        .close-button {
            position: absolute;
            top: 1rem;
            right: 1.5rem;
            font-size: 2rem;
            font-weight: bold;
            color: #94a3b8; /* slate-400 */
            cursor: pointer;
        }
        .close-button:hover {
            color: #64748b; /* slate-500 */
        }