body {
            font-family: 'Inter', sans-serif; /* Preferencia por Inter, pero las otras fuentes están cargadas */
            background: linear-gradient(135deg, #3e4d74, #0e4f88); /* Degradado de fondo */
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 1rem;
        }
        .login-container {
            background-color: white;
            border-radius: 1.5rem; /* Bordes redondeados */
            overflow: hidden;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            display: flex;
            flex-direction: column;
            max-width: 1000px; /* Ancho máximo para el contenedor */
            width: 100%;
        }
        @media (min-width: 768px) {
            .login-container {
                flex-direction: row;
                height: 600px; /* Altura fija para escritorio */
            }
        }
        .left-panel {
            background: linear-gradient(180deg, #287bd9, #e5b546); /* Degradado para el panel izquierdo */
            color: white;
            padding: 2rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            position: relative;
            overflow: hidden;
            border-top-left-radius: 1.5rem;
            border-bottom-left-radius: 1.5rem;
        }
        @media (max-width: 767px) {
            .left-panel {
                border-bottom-left-radius: 0;
                border-top-right-radius: 1.5rem;
            }
        }
        .left-panel::before,
        .left-panel::after {
            content: '';
            position: absolute;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            pointer-events: none;
            z-index: 0;
        }
        .left-panel::before {
            width: 300px;
            height: 300px;
            top: -100px;
            left: -100px;
        }
        .left-panel::after {
            width: 400px;
            height: 400px;
            bottom: -150px;
            right: -150px;
        }
        .left-panel .content {
            position: relative;
            z-index: 1;
        }
        .right-panel {
            padding: 2rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            flex-grow: 1;
        }
        .input-field {
            border: 1px solid #D1D5DB;
            border-radius: 0.5rem;
            padding: 0.75rem 1rem;
            width: 100%;
            font-size: 0.9rem;
            color: #374151;
        }
        .input-field:focus {
            outline: none;
            border-color: #2878d9;
            box-shadow: 0 0 0 3px rgba(40, 108, 217, 0.2);
        }
        .btn-primary-custom { /* Renombrado para evitar conflicto con btn-primary de Bootstrap si se cargara */
            background-color: #2889d9;
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: 600;
            transition: background-color 0.2s;
        }
        .btn-primary-custom:hover {
            background-color: #2178b6;
        }
        .btn-secondary-custom { /* Renombrado */
            background-color: #E5E7EB;
            color: #4B5563;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: 600;
            transition: background-color 0.2s;
        }
        .btn-secondary-custom:hover {
            background-color: #D1D5DB;
        }
        .social-icon {
            color: #6B7280;
            transition: color 0.2s;
        }
        .social-icon:hover {
            color: #4B5563;
        }